/* ══════════════════════════════════════════════════════════════════════════
   Mobile-forward layer — HIG "Liquid Glass" × Material 3 tonal, Expressive.
   Glass on the floating chrome (top bar / tab bar / sheets); tonal, elevated
   solid surfaces for content so data stays crisp. Springy micro-interactions
   that always honor Reduce Motion. Loaded globally after admin-app/dark; most
   rules are compact-width only so desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */
body.admin-body { -webkit-overflow-scrolling: touch; }

/* ——— Tonal elevation (Material 3): a whisper of brand tint on content surfaces,
   in both light and dark, layered over the existing solid background. ——— */
.ws-card,
.settings-section,
.stat-card,
.quick-actions,
.system-status,
.orders-section,
.filter-controls {
    background-image: linear-gradient(180deg, color-mix(in srgb, var(--ws-brand, #9c1c34) 3%, transparent) 0%, transparent 58%);
}

@media (max-width: 767px) {
    /* ——— Glass top bar (HIG): translucent + blurred, floats over scrolling content ——— */
    .admin-topbar {
        background: color-mix(in srgb, var(--ws-surface, #ffffff) 70%, transparent);
        -webkit-backdrop-filter: blur(18px) saturate(1.5);
        backdrop-filter: blur(18px) saturate(1.5);
        border-bottom: 1px solid color-mix(in srgb, var(--ws-border, #e7e9ee) 65%, transparent);
    }
    html[data-ws-theme="dark"] .admin-topbar {
        background: color-mix(in srgb, #161a20 66%, transparent);
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .admin-topbar { background: var(--ws-surface, #fff); }
        html[data-ws-theme="dark"] .admin-topbar { background: #161a20; }
    }

    /* Clearance so content scrolls clear of the floating tab bar. */
    .admin-workspace .admin-main { padding-bottom: calc(1rem + 92px) !important; }

    /* ——— Expressive shape: bigger rounded, near-full-bleed content cards ——— */
    .admin-main .ws-card,
    .admin-main .settings-section,
    .admin-main .stat-card,
    .admin-main .quick-actions,
    .admin-main .system-status,
    .admin-main .orders-section,
    .admin-main .filter-controls { border-radius: 20px; }

    /* ——— Pill / bubble controls + ≥44px touch targets (HIG 44pt / Material 48dp) ——— */
    .admin-main .btn,
    .admin-main .ws-btn { border-radius: 999px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
    .admin-main .btn-small,
    .admin-main .ws-btn--sm { min-height: 36px; }

    /* ——— Springy tap micro-interactions (Expressive) ——— */
    .admin-main .btn,
    .admin-main .ws-btn,
    .admin-main .ws-card,
    .admin-main .dash-hub__card,
    .admin-main .dash-attention__item,
    .admin-main .appshelf__card {
        transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
    }
    .admin-main .btn:active,
    .admin-main .ws-btn:active { transform: scale(.96); }
    .admin-main .ws-card:active,
    .admin-main .dash-hub__card:active,
    .admin-main .dash-attention__item:active,
    .admin-main .appshelf__card:active { transform: scale(.985); }

    /* Bottom-sheet feel for centered modals on phones (rounded top, rises from bottom). */
    .modal { align-items: flex-end !important; }
    .modal-content {
        border-radius: 22px 22px 0 0 !important;
        width: 100% !important; max-width: 100% !important;
        margin: 0 !important;
        padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* ——— Dashboards stay 2-up on phones (clean & dense, like the crew dashboard) ——— */
    .admin-main .dash-kpi-grid,
    .admin-main .dash-attention,
    .admin-main .dash-hub,
    .admin-main .wsdash__grid,
    .admin-main .appshelf__grid,
    .admin-main .ws-kpi-grid,
    .admin-main .dashboard-grid,
    .admin-main .status-grid,
    .admin-main .sf-kpis,
    .admin-main .co-kpis,
    .admin-main .pf-kpis,
    .admin-main .inv-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* full-width "wide" widgets keep spanning both columns */
    .admin-main .wsdash__card--w2,
    .admin-main .dash-cols--2 { grid-column: 1 / -1; }

    /* ——— Carry the Expressive treatment into every module's own cards & buttons ——— */
    .admin-main [class*="-btn"]:not(.btn-small):not(.ws-btn--sm) {
        border-radius: 999px; min-height: 44px;
    }
    .admin-main [class*="-card"] { border-radius: 20px; }
    .admin-main [class*="-btn"],
    .admin-main [class*="-card"] {
        transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
    }
    .admin-main [class*="-btn"]:active { transform: scale(.96); }
    .admin-main [class*="-card"]:active { transform: scale(.985); }
}

@media (prefers-reduced-motion: reduce) {
    .admin-main .btn,
    .admin-main .ws-btn,
    .admin-main .ws-card,
    .admin-main .dash-hub__card,
    .admin-main .dash-attention__item,
    .admin-main .appshelf__card,
    .admin-main [class*="-btn"],
    .admin-main [class*="-card"] { transition: none; }
    .admin-main .btn:active,
    .admin-main .ws-btn:active,
    .admin-main .ws-card:active,
    .admin-main .dash-hub__card:active,
    .admin-main .dash-attention__item:active,
    .admin-main .appshelf__card:active,
    .admin-main [class*="-btn"]:active,
    .admin-main [class*="-card"]:active { transform: none; }
}

/* ============================================================
   ws_table() lists -> stacked cards on phones (opt-in via
   .dash-table--cards, which ws_table adds; data-label per cell).
   ============================================================ */
@media (max-width: 640px) {
    .dash-table--cards thead { display: none; }
    .dash-table--cards,
    .dash-table--cards tbody,
    .dash-table--cards tr,
    .dash-table--cards td { display: block; width: 100%; }
    .dash-table--cards tr {
        border: 1px solid #e5e7eb; border-radius: 12px; margin-bottom: 10px;
        padding: 6px 12px; background: #fff; box-shadow: 0 1px 2px rgba(17, 24, 39, .05);
    }
    .dash-table--cards td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 7px 0; border: 0; text-align: right; min-height: 0;
        /* long values (email, company, name) wrap inside the card instead of overflowing */
        white-space: normal; overflow-wrap: anywhere; word-break: break-word; min-width: 0;
    }
    .dash-table--cards td + td { border-top: 1px solid #f3f4f6; }
    .dash-table--cards td::before {
        content: attr(data-label); flex: 0 0 auto; text-align: left;
        font-weight: 700; color: #6b7280; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
    }
    html[data-ws-theme="dark"] .dash-table--cards tr { background: #161a20; border-color: #2b323d; }
    html[data-ws-theme="dark"] .dash-table--cards td + td { border-top-color: #2b323d; }
    html[data-ws-theme="dark"] .dash-table--cards td::before { color: #9ca3af; }
    /* Whole-row-link cards get a clear tap affordance + chevron. */
    .dash-table--cards tr.dash-row-link { position: relative; }
    .dash-table--cards tr.dash-row-link::after {
        content: "›"; position: absolute; top: 10px; right: 12px; color: #9ca3af; font-size: 20px; line-height: 1;
    }
    .dash-table--cards tr.dash-row-link:active { background: #f3f7f8; }
}

/* Whole-row link (ws_table rowHref) — the entire row/card opens the target (see admin.js). */
tr.dash-row-link { cursor: pointer; }
tr.dash-row-link:hover { background: rgba(14, 116, 144, .06); }
html[data-ws-theme="dark"] tr.dash-row-link:hover { background: rgba(56, 189, 248, .08); }

/* ============================================================
   Dense / wide data tables (financial summaries, analytics) that
   are NOT card-ified: scroll horizontally on phones instead of
   overflowing the page or squishing into unreadable columns.
   Excludes .dash-table--cards (those become stacked cards above).
   ============================================================ */
@media (max-width: 640px) {
    .admin-main .dash-table:not(.dash-table--cards),
    .admin-main .schedule-coverage-table,
    .admin-main .schedule-directory-table,
    .admin-main .tt-table,
    .admin-main .qbo-table,
    .admin-main .qbo-tip-table,
    .admin-main .ri-table,
    .admin-main .pr-table,
    .admin-main .pc-tbl,
    .admin-main .ann-table,
    .admin-main .closure-table,
    .admin-main .rc-table,
    .admin-main .so-tbl,
    .admin-main .hr-table,
    .admin-main .em-table,
    .admin-main .sf-tbl,
    .admin-main .po-tbl,
    .admin-main .wsec__access-table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* keep header cells from wrapping mid-scroll */
    .admin-main .dash-table:not(.dash-table--cards) thead th,
    .admin-main .schedule-coverage-table thead th { white-space: nowrap; }
}