/* ══════════════════════════════════════════════════════════════════
   VacEmp — forced view modes (Auto / Desktop / Mobile)
   Loaded on every app page from includes/vac_view_head.php.

   Auto  → no [data-view] rules apply; nav.css breakpoints decide.
   Mobile→ drawer layout at ANY width.
   Desktop→ pinned-sidebar layout at ANY width.

   Specificity note: `html[data-view=x] .sel` (0,2,1) outranks both the bare
   `.sel` and the media-query copies in nav.css (0,1,0 / 0,2,0), so no
   !important is needed EXCEPT where a page's own inline CSS already used
   !important or where an inline rule ties with us — see the page-wrap block.
   ══════════════════════════════════════════════════════════════════ */

/* ─────────────── MODE-SWITCH FLICKER GUARD ───────────────
   .sidebar carries `transition: transform .25s`. Flipping data-view retargets
   that transform, so without this the sidebar visibly slides across the screen
   on every toggle — it reads as a glitch, not a layout change. vacApplyView()
   adds .view-switching for one frame while the new mode settles. */
html.view-switching .sidebar,
html.view-switching .topbar,
html.view-switching .page-wrap { transition: none !important; }

/* ─────────────── FORCED MOBILE ─────────────── */
html[data-view="mobile"] .nav-toggle   { display: inline-flex; }
html[data-view="mobile"] .sidebar-close{ display: block; }
html[data-view="mobile"] .nav-backdrop { display: block; }

/* Drawer: off-canvas until .open, exactly as the narrow default */
html[data-view="mobile"] .sidebar {
    transform: translateX(-100%);
    top: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    border-right: 0;
    z-index: 500;
}
html[data-view="mobile"] .sidebar.open { transform: translateX(0); }

html[data-view="mobile"] .topbar {
    left: 0;
    z-index: 300;
}
html[data-view="mobile"] .topbar .brand { display: flex; }

/* Full-bleed content, no sidebar gutter. Wins over every page's inline
   `.page-wrap{max-width:…}` / `margin:0 auto` because of the [data-view] hook. */
html[data-view="mobile"] .page-wrap {
    margin-left: 0;
    margin-right: 0;
    max-width: none;
    padding: 1rem .85rem 2.5rem;
}

/* Mobile ergonomics — mirrors nav.css's max-width:700px pass so forced
   mobile on a wide screen behaves like a real phone, not a stretched drawer. */
html[data-view="mobile"] .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
html[data-view="mobile"] .form-grid,
html[data-view="mobile"] .create-form,
html[data-view="mobile"] .fine-form { flex-direction: column; }
html[data-view="mobile"] .cards-grid,
html[data-view="mobile"] .inv-grid,
html[data-view="mobile"] .action-grid { grid-template-columns: 1fr; }
html[data-view="mobile"] .stat { min-width: calc(50% - .3rem); flex: 1 1 calc(50% - .3rem); }
html[data-view="mobile"] .page-title { font-size: 1.1rem; }
html[data-view="mobile"] .tabs,
html[data-view="mobile"] .tab-bar { overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; }
html[data-view="mobile"] .tab-btn,
html[data-view="mobile"] .tab-item { flex-shrink: 0; }

/* ─────────────── FORCED DESKTOP ─────────────── */
html[data-view="desktop"] .nav-toggle   { display: none; }
html[data-view="desktop"] .nav-backdrop { display: none; }
html[data-view="desktop"] .sidebar-close{ display: none; }

html[data-view="desktop"] .sidebar {
    transform: translateX(0);
    top: 0;
    box-shadow: none;
    border-right: 1px solid var(--nav-border);
    z-index: 200;
}
html[data-view="desktop"] .topbar {
    left: var(--nav-width);
    z-index: 400;
}
html[data-view="desktop"] .topbar .brand { display: none; }

/* THE IMPORTANT ONE.
   ~40 pages carry an inline `.page-wrap{max-width:…}`, and 7 of them also set
   `margin:0 auto` / custom padding, patched back only inside their own
   `@media (min-width:900px)`. On a phone in forced-desktop that media query
   never matches, so without this the content would slide under the pinned
   sidebar. !important is required here: those inline blocks live in a later
   <style> and some tie on specificity. max-width is deliberately NOT reset —
   each page's own reading width is a design choice worth keeping. */
html[data-view="desktop"] .page-wrap {
    margin-left: var(--nav-width) !important;
    margin-right: 0 !important;
    padding: 1.5rem 2rem;
}

/* Horizontal scroll for the whole shell when a phone renders the 1280 layout */
html[data-view="desktop"] body { min-width: 1280px; }

/* ─────────────── PRINT ───────────────
   Printing must never carry a sidebar gutter or a forced min-width, whatever
   view mode is active. owner/finance/reports/index.php already sets
   `.page-wrap{margin:0!important}` under @media print; our forced-desktop rule
   is also !important and would otherwise tie, so restate it here — a later
   !important rule at equal specificity wins. */
@media print {
    html[data-view] .page-wrap {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    html[data-view] body { min-width: 0; }
    html[data-view="mobile"] .sidebar,
    html[data-view="desktop"] .sidebar,
    html[data-view="mobile"] .topbar,
    html[data-view="desktop"] .topbar,
    .view-toggle { display: none !important; }
}

/* ─────────────── AUTO, small-screen polish ─────────────── */
/* S26-class phones report ~360-412 CSS px. Applies in auto AND forced-mobile,
   but never in forced-desktop (which is rendering at 1280). */
@media (max-width: 430px) {
    html:not([data-view="desktop"]) .page-wrap { padding: .9rem .75rem 2.5rem; }
    html:not([data-view="desktop"]) .stat {
        min-width: 100%;
        flex: 1 1 100%;
    }
    /* 44px touch targets */
    html:not([data-view="desktop"]) .btn,
    html:not([data-view="desktop"]) .nav-item,
    html:not([data-view="desktop"]) .tab-btn,
    html:not([data-view="desktop"]) .tab-item { min-height: 44px; }
    html:not([data-view="desktop"]) .page-title { font-size: 1.05rem; }
}

/* ─────────────── The toggle control itself ─────────────── */
.view-toggle {
    padding: .6rem .75rem .75rem;
    border-top: 1px solid var(--nav-border);
}
.view-toggle-label {
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: .4rem;
}
.view-seg {
    display: flex;
    background: rgba(255,255,255,.06);
    border: 1px solid var(--nav-border);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.view-seg-btn {
    flex: 1;
    appearance: none;
    background: transparent;
    border: 0;
    border-radius: 6px;
    color: #cbd5e1;
    font-size: .7rem;
    font-weight: 600;
    font-family: inherit;
    padding: .4rem .2rem;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.view-seg-btn:hover { color: #fff; background: rgba(255,255,255,.07); }
.view-seg-btn.active {
    background: var(--color-orange);
    color: #fff;
    box-shadow: 0 2px 8px rgba(249,115,22,.4);
}