/* LLT mobile operational polish ---------------------------------------
   Keeps the proven mobile information architecture while aligning its
   visual language with the desktop workspace. No desktop selectors here.
*/
@media (max-width: 760px) {
    :root {
        --mobile-card-radius: 14px;
        --mobile-panel-radius: 14px;
    }

    .app-header {
        height: 64px;
        border-bottom-color: color-mix(in srgb, var(--border) 88%, transparent);
        box-shadow: 0 1px 0 rgba(15,23,42,.02), 0 7px 22px rgba(15,23,42,.045);
    }
    html[data-theme="dark"] .app-header { box-shadow: 0 1px 0 rgba(255,255,255,.015), 0 8px 24px rgba(0,0,0,.16); }
    .app-header__inner { padding-inline: 14px; gap: 12px; }
    .brand__logo { width: 92px; height: 38px; }

    .page-shell {
        padding: 18px 14px calc(104px + env(safe-area-inset-bottom));
    }

    .dashboard-heading,
    .page-heading {
        margin-bottom: 16px;
    }
    .dashboard-heading h1,
    .page-heading h1 {
        font-size: 28px;
        letter-spacing: -.02em;
    }
    html[lang="ar"] .dashboard-heading h1,
    html[lang="ar"] .page-heading h1 { letter-spacing: 0; }
    .dashboard-heading p,
    .page-heading p {
        max-width: 42rem;
        color: var(--muted);
        font-size: 13px;
    }

    /* Same compact operational-control language used on desktop. */
    .manager-scope-panel,
    .gm-branch-scope {
        border-radius: var(--mobile-panel-radius);
        box-shadow: 0 2px 8px rgba(15,23,42,.04);
    }
    .manager-scope-tabs {
        gap: 6px;
        overflow-x: auto;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .manager-scope-tabs::-webkit-scrollbar { display: none; }
    .manager-scope-tab {
        flex: 0 0 auto;
        min-width: 146px;
        border-radius: 10px;
    }
    .manager-scope-tab.is-active {
        border-color: color-mix(in srgb, var(--gold) 28%, var(--border));
        background: color-mix(in srgb, var(--gold) 5%, var(--surface));
    }

    .summary-card {
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(15,23,42,.045), 0 9px 22px rgba(15,23,42,.055);
    }
    .summary-card.is-active {
        border-color: color-mix(in srgb, var(--accent) 38%, var(--border));
        background: color-mix(in srgb, var(--accent) 5%, var(--surface));
    }

    .workspace-toolbar {
        border-radius: var(--mobile-panel-radius);
        box-shadow: 0 2px 7px rgba(15,23,42,.04), 0 9px 24px rgba(15,23,42,.05);
    }

    .order-card {
        border-radius: var(--mobile-card-radius);
        box-shadow: 0 2px 7px rgba(15,23,42,.055), 0 12px 28px rgba(15,23,42,.075);
    }
    html[data-theme="dark"] .order-card {
        box-shadow: 0 3px 9px rgba(0,0,0,.22), 0 14px 30px rgba(0,0,0,.24);
    }
    .order-card__top {
        min-height: 34px;
        align-items: center;
    }
    .order-card__title {
        font-size: 15.5px;
        line-height: 1.48;
    }
    .order-card__subtitle {
        color: var(--muted);
        font-size: 11.5px;
        line-height: 1.5;
    }
    .order-card__meta span {
        border-radius: 10px;
        background: color-mix(in srgb, var(--surface-2) 94%, var(--surface));
    }

    /* Four predictable primary destinations now exist: Orders, New,
       Archive and More. Keep every tap target comfortably above 44px. */
    .mobile-bottom-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 4px;
        inset-inline: 10px;
        height: 72px;
        min-height: 72px;
        padding: 6px;
        border-radius: 17px;
        box-shadow: 0 9px 28px rgba(15,23,42,.12), 0 24px 50px rgba(15,23,42,.12);
    }
    html[data-theme="dark"] .mobile-bottom-nav {
        box-shadow: 0 10px 30px rgba(0,0,0,.30), 0 25px 54px rgba(0,0,0,.33);
    }
    .mobile-nav-link {
        min-height: 58px;
        border-radius: 11px;
        gap: 2px;
    }
    .mobile-nav-icon { width: 20px; height: 20px; }
    .mobile-nav-link small { font-size: 9.5px; }
    .mobile-nav-link--primary {
        background: color-mix(in srgb, var(--gold) 14%, var(--surface));
        color: var(--gold-dark);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 24%, transparent);
    }
    .mobile-nav-link--primary.is-active {
        background: var(--gold-soft);
        color: var(--gold-dark);
    }

    /* Keep quick status available from the card without making the card
       itself harder to tap. */
    .order-card .quick-status-control {
        flex: 0 0 auto;
    }

    .mobile-account-sheet {
        border-radius: 18px 18px 0 0;
    }

    .form-card,
    .detail-card,
    .detail-section-card,
    .employee-card,
    .status-guide-card {
        border-radius: var(--mobile-card-radius);
    }

    /* Preserve iPhone Safari anti-zoom behaviour for actual form fields. */
    .form-card input,
    .form-card textarea,
    .form-card select,
    .supervisor-note-form textarea,
    .mobile-sheet-select {
        font-size: 16px;
    }
}

@media (max-width: 380px) {
    .mobile-bottom-nav { inset-inline: 7px; gap: 2px; }
    .mobile-nav-link { padding-inline: 3px; }
    .mobile-nav-link small { font-size: 9px; }
    .order-card { padding-inline: 14px; }
    .quick-status-control { min-width: 108px; max-width: 132px; }
}