/*
 * Mobile-only stylesheet for the admin console. Loaded with
 * media="(max-width: 700px)" and wrapped in the same query, so it never
 * touches desktop. Purpose-built for phones — not a patch of the desktop CSS.
 */
@media (max-width: 700px) {

    /* ---- app bar: slim, sticky, brand + actions on one line ---- */
    #app { padding: 0 0 28px; }
    .dash, .dash.admin { max-width: 100%; gap: 0; }
    .topbar {
        position: sticky; top: 0; z-index: 30;
        margin: 0; padding: 11px 16px;
        display: flex; align-items: center; justify-content: space-between; gap: 10px;
        background: var(--card-solid); border-bottom: 1px solid var(--line);
    }
    .wm-text { font-size: 17px; }
    .topbar .btn, .topbar .theme-toggle { padding: 7px 11px; font-size: 13px; }
    .topbar .theme-toggle span { display: none; }   /* icon-only toggle on mobile */

    /* ---- drop the floating identity card for admin (role shows in the header) ---- */
    #dash.admin .identity { display: none; }
    .identity { margin: 14px 16px 0; }

    /* ---- operations: flows edge-to-edge like a native app screen ---- */
    #panels { margin: 0; }
    #admin.panel {
        border: 0; border-radius: 0; background: transparent; box-shadow: none;
        padding: 18px 16px 8px; overflow: visible; max-width: 100%;
    }
    .adm-head { display: block; margin-bottom: 16px; }
    .adm-title h2 { font-size: 21px; margin: 0; letter-spacing: -0.01em; }
    .adm-whoami { display: block; color: var(--muted); font-size: 13px; margin-top: 3px; }

    /* ---- primary nav: single-row UNDERLINE tabs that scroll (no pills, no wrap) ---- */
    .adm-head .adm-nav { margin-top: 14px; }
    .adm-nav {
        display: flex; flex-wrap: nowrap; gap: 0; width: auto; max-width: 100%;
        background: none; border: 0; border-bottom: 1px solid var(--line);
        border-radius: 0; padding: 0;
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .adm-nav::-webkit-scrollbar { display: none; }
    .adm-nav .atab {
        flex: 0 0 auto; background: none; border: 0; border-bottom: 2px solid transparent;
        color: var(--muted); font: 600 14.5px 'Satoshi', sans-serif;
        padding: 11px 14px; border-radius: 0; box-shadow: none; margin-bottom: -1px;
        white-space: nowrap; text-align: left;
    }
    .adm-nav .atab.is-on { background: none; color: var(--ink); border-bottom-color: var(--violet-2); box-shadow: none; }

    /* ---- scroll affordance: edge fade + chevron, only when more to show ---- */
    .nav-scroll { position: relative; }
    .nav-scroll::before, .nav-scroll::after {
        content: ''; position: absolute; top: 0; bottom: 0; width: 34px; z-index: 3;
        pointer-events: none; opacity: 0; transition: opacity .15s;
        display: flex; align-items: center; font: 700 19px 'Satoshi', sans-serif; color: var(--violet-ink);
    }
    .nav-scroll::before { left: 0; justify-content: flex-start; padding-left: 1px; content: '\2039';
        background: linear-gradient(to right, var(--page-bg) 45%, transparent); }
    .nav-scroll::after  { right: 0; justify-content: flex-end;  padding-right: 1px; content: '\203A';
        background: linear-gradient(to left,  var(--page-bg) 45%, transparent); }
    .nav-scroll.subnav::before, .nav-scroll.subnav::after { font-size: 16px; }
    .nav-scroll.more-left::before  { opacity: 1; }
    .nav-scroll.more-right::after  { opacity: 1; }

    /* ---- section sub-nav: distinct from the primary tabs -> rounded chips ---- */
    .nav-scroll.subnav { margin: 16px 0; }
    .adm-sub-nav {
        flex-wrap: nowrap; gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch;
        scrollbar-width: none; border-bottom: 0; padding: 0;
    }
    .adm-sub-nav::-webkit-scrollbar { display: none; }
    .asub {
        flex: 0 0 auto; background: var(--field); border: 1px solid var(--line);
        border-radius: 999px; color: var(--muted); font: 600 13px 'Satoshi', sans-serif;
        padding: 7px 14px; margin: 0; box-shadow: none; white-space: nowrap;
    }
    .asub.is-on {
        background: color-mix(in srgb, var(--violet-2) 16%, transparent);
        border-color: var(--violet-2); color: var(--violet-ink);
    }

    /* ---- stat tiles: tidy 2-up ---- */
    .adm-tiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
    .atile { padding: 13px 14px; }
    .atile .at-v { font-size: 20px; }

    /* ---- filters: stack full width ---- */
    .adm-filters { gap: 8px; }
    .adm-filters .seg-chips { width: 100%; }
    .adm-sel, .adm-in { width: 100%; min-width: 0; }

    /* ---- wide tables scroll inside their own scroller; the page never moves ---- */
    #adm-body { overflow: visible; max-width: 100%; }
    #adm-sec, #adm-rows { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    #adm-sec > table.grid { min-width: 0; }
    #adm-sec > table.grid th, #adm-sec > table.grid td { white-space: nowrap; }

    /* ---- all-orders table -> clean cards (with date) ---- */
    .adm-otable thead { display: none; }
    .adm-otable, .adm-otable tbody { display: block; min-width: 0; }
    .adm-otable tr.adm-orow {
        display: grid; grid-template-columns: 24px 1fr auto;
        grid-template-areas:
            "ck ord    total"
            "ck cust   type"
            "ck status date"
            "ck change change";
        gap: 6px 10px; align-items: center;
        border: 1px solid var(--line); border-radius: 13px; padding: 13px; margin-bottom: 10px;
        background: var(--card-solid);
    }
    .adm-otable tr.adm-orow.is-sel { border-color: var(--violet-2); }
    .adm-otable td { border: 0 !important; padding: 0; white-space: normal; min-width: 0; }
    .adm-otable td.adm-ck { grid-area: ck; align-self: start; padding-top: 2px; }
    .adm-otable td:nth-child(2) { grid-area: ord; font-size: 15px; font-weight: 700; }
    .adm-otable td:nth-child(3) { grid-area: cust; color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
    .adm-otable td:nth-child(4) { grid-area: type; justify-self: end; min-width: 0; max-width: 100%; }
    .adm-otable td:nth-child(4) .tpill { display: inline-block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
    .adm-otable td:nth-child(5) { grid-area: status; }
    .adm-otable td:nth-child(6) { display: none; }
    .adm-otable td:nth-child(7) { grid-area: total; justify-self: end; font-weight: 700; }
    .adm-otable td:nth-child(8) { grid-area: date; justify-self: end; color: var(--muted); font-size: 12px; }
    .adm-otable td:nth-child(9) { grid-area: change; justify-self: stretch; margin-top: 2px; }
    .adm-otable .adm-rowsel { width: 100%; }

    /* ---- settlement + shipping action bars stack ---- */
    .settle-grid { grid-template-columns: 1fr; }
    .scard { padding: 15px; }
    .rr-bar { flex-direction: column; align-items: stretch; gap: 10px; }
    .rr-acts { flex-direction: column; }
    .rr-acts .btn, .rr-open { width: 100%; text-align: center; }

    /* ---- drawer: full-width sheet ---- */
    .drawer { width: 100vw; }
}