/* LLT interface fixes --------------------------------------------------
   Focused corrections for order deletion, page hierarchy and modal polish.
*/

/* New/Edit order no longer reserves a second column for the removed guide. */
.order-form-layout--single {
    grid-template-columns: minmax(0, 1fr) !important;
    max-width: 1220px;
}
.order-form-layout--single > .form-card {
    grid-column: 1 !important;
    width: 100%;
}
.order-form-layout--single .status-guide-card { display: none !important; }

/* Cleaner page-title hierarchy, especially on wide 1920px monitors. */
.detail-heading {
    margin-bottom: 20px;
}
.detail-heading__main {
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: 24px;
}
.detail-heading__main > div:first-child { min-width: 0; }
.detail-heading__main h1 {
    margin: 8px 0 0;
    max-width: 1040px;
    font-size: clamp(27px, 2.05vw, 34px);
    line-height: 1.35;
    font-weight: 720;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
html[lang="ar"] .detail-heading__main h1 {
    font-weight: 700;
    letter-spacing: 0;
}
.detail-number-row { margin-bottom: 2px; }
.detail-heading__actions {
    align-self: center;
    justify-self: end;
}
html[dir="rtl"] .detail-heading__actions { justify-self: start; }

/* Info icon should read as a quiet utility, not another status badge. */
.status-info-button {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border-color: color-mix(in srgb, var(--muted) 28%, var(--border));
    background: var(--surface-2);
    color: var(--muted);
    font-size: 11px;
    font-family: ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    box-shadow: none;
}
.status-info-button:hover {
    color: var(--text);
    background: var(--surface-3);
    border-color: var(--border-strong);
    transform: none;
}

/* Status guide dialog close: simple, aligned and visually quiet. */
.status-dialog-close {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    box-shadow: none;
}
.status-dialog-close svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}
.status-dialog-close:hover,
.status-dialog-close:focus-visible {
    color: var(--text);
    background: var(--surface-3);
    outline: none;
}
.status-dialog-head > div { min-width: 0; }
.status-dialog-head h2 { text-wrap: balance; }

/* Delete dialog now lives in the body, so make the interaction unmistakable. */
.confirm-dialog__actions .btn-danger { min-width: 132px; }
.confirm-dialog__actions .btn-ghost { min-width: 104px; }

/* Keep the details header and cards aligned on tablet/mobile. */
@media (max-width: 900px) {
    .detail-heading__main {
        grid-template-columns: 1fr;
        align-items: stretch;
    }
    .detail-heading__actions,
    html[dir="rtl"] .detail-heading__actions {
        justify-self: stretch;
    }
}

@media (max-width: 760px) {
    .order-form-layout--single { max-width: none; }
    .detail-heading__main h1 { font-size: 26px; line-height: 1.42; }
    .status-dialog-close { width: 38px; height: 38px; }
}