@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============================================================================
   DESIGN V2 — Dark Theme (shared layer)
   Loaded LAST on every internal page, after responsive.css and per-page CSS.
   Faithful port of docs/design-v2-reference.css (the approved "Indigo Premium"
   mockup, body[data-variant="v4"]). Reference token values are merged with the
   v4 variant overrides to produce the final values below.

   Token strategy:
   - Public API token names (our existing names: --bg, --surface, --surface-2,
     --border, --text-main, --text-muted, --accent, ...) carry the reference
     values so all 45 themed pages pick them up automatically.
   - The reference's own names (--panel, --elev, --primary, --st-*, --mono, ...)
     are ALSO defined so reference rules can be pasted near-verbatim.
   Because this file loads last, its :root and component rules win over the
   ~27 per-page light :root blocks (same specificity, later in cascade order).
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. TOKENS — Indigo Premium (reference base + v4 variant, resolved)
   -------------------------------------------------------------------------- */
:root {
    /* ---- reference names (paste-verbatim API) ---- */
    --bg: #090d18;
    --bg-grad:
        radial-gradient(900px 500px at 12% -8%, #1b346e44 0%, transparent 55%),
        radial-gradient(1000px 600px at 92% -12%, #16407e44 0%, transparent 55%);
    --panel: #10162840;
    --panel-2: #141d33aa;
    /* opaque blend of --panel over --bg, for sticky surfaces (table headers,
       sticky columns) that must not let scrolling content show through */
    --panel-solid: #0b0f1c;
    --elev: #1b2742;
    --border: #2a3a63;
    --border-soft: #ffffff14;
    --text: #e9eefb;
    --muted: #9fb0d6;
    --faint: #6a779e;
    --primary: #4d7cff;
    --primary-2: #5aa6ff;
    --primary-ink: #ffffff;
    --green: #34d399;
    --green-ink: #03160f;
    --radius: 18px;
    --radius-sm: 13px;
    --radius-xs: 8px;
    --row-h: 56px;
    --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
    --ring: 0 0 0 3px color-mix(in oklab, var(--primary) 35%, transparent);
    --shadow: 0 30px 80px -34px rgba(20, 40, 110, 0.8);

    /* glass panel overlay (v4 .filters/.main) */
    --glass: linear-gradient(180deg, #ffffff0c, #ffffff05);
    --glass-border: #ffffff16;

    /* status */
    --st-new: #34d399;       --st-new-bg: #34d39920;
    --st-available: #60a5fa; --st-available-bg: #60a5fa20;
    --st-reserved: #fbbf24;  --st-reserved-bg: #fbbf2420;
    --st-transit: #93a4ff;   --st-transit-bg: #93a4ff20;
    --st-sold: #94a3b8;      --st-sold-bg: #94a3b81f;

    /* ---- public API names used across the 45 pages ---- */
    --bg-deep: #070a12;
    --surface: var(--panel);
    --surface-2: var(--elev);
    --surface-3: #243355;
    --border-strong: var(--border);
    --text-main: var(--text);
    --text-muted: var(--muted);
    --accent: var(--primary);
    --accent-strong: var(--primary-2);
    --accent-soft: color-mix(in oklab, var(--primary) 14%, transparent);
    --amber: var(--st-reserved);
    --amber-soft: var(--st-reserved-bg);
    --red: #f87171;
    --red-soft: rgba(248, 113, 113, 0.14);
    --teal: #2dd4bf;
    --teal-soft: rgba(45, 212, 191, 0.14);
    --green-soft: var(--st-new-bg);
    --table-header-bg: transparent;
    --radius-pill: 999px;
    --shadow-card: var(--shadow);
    --font-mono: var(--mono);

    /* ---- crm/crm_dashboard.css divergent aliases ---- */
    --card: var(--panel);
    --border2: var(--border);
    --accent-hover: var(--primary-2);
    --orange: var(--st-reserved);
    --orange-light: var(--st-reserved-bg);
    --red-light: var(--red-soft);
    --green-light: var(--st-new-bg);
    --blue2: var(--teal);
    --text2: var(--muted);
    --nav-active-bg: var(--primary);
    --nav-active-text: var(--primary-ink);
    --topbar-bg: var(--panel);
    --topbar-border: var(--border-soft);

    /* ---- account/customer_dashboard.css divergent aliases ---- */
    --accent-light: var(--accent-soft);
    --amber-light: var(--st-reserved-bg);
    --grey: var(--muted);
    --grey-light: var(--elev);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* ----------------------------------------------------------------------------
   2. BASE — body, page, scrollbars, the radial bg glow
   -------------------------------------------------------------------------- */
body {
    font-family: var(--font);
    background: var(--bg);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    letter-spacing: -0.01em;
}
/* keep body painted dark even when a per-page rule (e.g. body.crm-page)
   has higher specificity than our plain `body` rule above */
body,
body.crm-page {
    background-color: var(--bg) !important;
    background-image: var(--bg-grad) !important;
}
.page,
main {
    background: transparent;
    color: var(--text);
}
body.crm-page { color: var(--text); }

/* thin dark scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--elev) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--elev);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border); }

/* headline text gradient utility (reference applies this on .h1 in v4).
   Stock agent: use .text-gradient OR .h1 — both resolve identically. */
.text-gradient,
.h1.text-gradient,
.hero-title {
    background: linear-gradient(90deg, #fff, var(--primary));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ----------------------------------------------------------------------------
   3. TOP NAV BAR — ported from reference .topnav onto our <header>
   -------------------------------------------------------------------------- */
header {
    display: flex;
    align-items: center;
    /* brand left, everything else (nav or its wrapper div) pushed to the right
       so the flexible space sits between the logo and the menu */
    justify-content: space-between;
    gap: 28px;
    padding: 0 26px !important;
    height: 64px;
    min-height: 64px;
    background: color-mix(in oklab, var(--panel) 80%, transparent) !important;
    border-bottom: 1px solid var(--border-soft) !important;
    position: sticky;
    top: 0;
    z-index: 9400;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    flex-wrap: nowrap;
}

/* brand / logo tile */
.brand { display: flex; align-items: center; gap: 11px; }
.brand-mark,
.brand .brand-mark,
.logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    object-fit: contain;
    padding: 5px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    box-shadow: 0 8px 22px -8px var(--primary);
    flex-shrink: 0;
}
.brand-text { font-weight: 800; font-size: 15px; color: var(--text); line-height: 1.05; }
.subtitle { font-size: 11px; color: var(--muted); letter-spacing: 0.02em; }

/* nav links group + actions group (wrappers added in _nav.html).
   `header nav` (0,0,2) intentionally matches the specificity of the legacy
   per-page rules (many set flex-wrap: wrap / gap: 1rem) so this layer wins. */
nav,
header nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex: 1 1 auto;
    flex-wrap: nowrap !important;
    min-width: 0;
    justify-content: flex-end;
}
/* long page subtitles (e.g. Customers) must not squeeze the menu */
header .brand { flex: none; min-width: 0; }
header .brand-text,
header .subtitle {
    max-width: 360px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 0 1 auto;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
}
.nav-actions { display: flex; align-items: center; gap: 8px; flex: none; }

nav a,
.nav-dropdown-toggle,
header nav a.desktop-nav-link,
header nav .nav-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: var(--muted);
    font-weight: 600;
    font-size: var(--nav-link-fs, 13px);
    padding: var(--nav-link-pad, 8px 11px);
    border-radius: 9px;
    white-space: nowrap;
    transition: 0.15s;
}
/* legacy per-page CSS pads .desktop-nav-link, which on dropdown CONTAINERS
   double-pads the toggle — reset the container, the toggle carries padding */
header nav .nav-dropdown.desktop-nav-link {
    padding: 0 !important;
    background: none !important;
    font-size: inherit !important;
}
nav a:hover,
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.open .nav-dropdown-toggle {
    color: var(--text);
    background: color-mix(in oklab, var(--text) 7%, transparent);
}
/* active page = solid accent pill — !important beats legacy per-page
   .desktop-nav-link.active rules that muted the label */
nav a.active,
nav a.active:hover,
header nav a.desktop-nav-link.active {
    color: #ffffff !important;
    background: var(--primary) !important;
    font-weight: 700;
}

/* graceful degradation on narrower desktops: tighten before anything wraps.
   .nav-links keeps flex-wrap from _nav.html as a last resort, but these steps
   should keep the menu on one 64px row down to ~1280px. */
@media (min-width: 769px) and (max-width: 1820px) {
    :root { --nav-link-fs: 12.5px; --nav-link-pad: 7px 8px; }
    nav, header nav { gap: 12px; }
    header .brand-text, header .subtitle { max-width: 230px; }
    .user-email { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (min-width: 769px) and (max-width: 1560px) {
    :root { --nav-link-fs: 12px; --nav-link-pad: 6px 6px; }
    nav, header nav { gap: 8px; }
    header { gap: 14px; }
    header .subtitle { display: none; }
    .user-email { display: none; }   /* avatar-only user chip */
    .nav-icon-btn { width: 32px; height: 32px; }
}
@media (min-width: 769px) and (max-width: 1300px) {
    :root { --nav-link-fs: 11.5px; --nav-link-pad: 5px 5px; }
    header .brand-text { max-width: 150px; }
}

/* dropdowns (our markup; styled as reference glass menus) */
.nav-dropdown { position: relative; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-menu {
    position: absolute;
    top: 120%;
    right: 0;
    min-width: 220px;
    background: linear-gradient(180deg, #141d33, #10162e);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    box-shadow: var(--shadow);
    padding: 6px;
    display: none;
    z-index: 9500;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}
.nav-dropdown.open .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 9px;
    color: var(--text);
    text-decoration: none;
}
.nav-dropdown-menu a:hover {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--text);
}

/* right-side icon buttons (search/bell) */
.nav-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    color: var(--muted);
    background: transparent;
    border: 1px solid var(--border-soft);
    cursor: pointer;
    transition: 0.15s;
}
.nav-icon-btn:hover { color: var(--text); background: var(--elev); }
.nav-icon-btn svg { width: 18px; height: 18px; }

/* user chip (reference .user + .ava + .umail) */
.user-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--panel-2);
    cursor: pointer;
    transition: 0.15s;
}
.user-chip:hover { border-color: var(--border); }
.user-chip .avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    flex-shrink: 0;
}
.user-chip .user-email {
    font-size: 12.5px;
    color: var(--muted);
    font-weight: 600;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ----------------------------------------------------------------------------
   4. CARDS / PANELS — glass treatment from reference .filters/.main (v4)
   -------------------------------------------------------------------------- */
.card,
.filter-card,
.inventory-card,
.table-card,
.crm-card,
.main {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    color: var(--text);
}
.card-header { border-bottom: 1px solid var(--border-soft); color: var(--text); }
.card-title { color: var(--text); font-weight: 700; }

.filter-grid label,
.filter-group label,
.field label,
.filter-group > span {
    color: var(--muted);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
}
.filter-reset-wrap button,
.filter-card .reset,
a.filter-reset,
.link-btn {
    color: var(--muted);
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 12px;
}
.filter-reset-wrap button:hover,
.link-btn:hover { color: var(--primary); }

/* count / badge chip */
.count,
.badge,
.count-chip {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--primary);
    background: color-mix(in oklab, var(--primary) 14%, transparent);
    padding: 6px 12px;
    border-radius: 999px;
}

/* ----------------------------------------------------------------------------
   5. LAYOUT — main-layout / panels
   -------------------------------------------------------------------------- */
.main-layout { background: transparent; }
.left-panel,
.right-panel { color: var(--text); }
.right-panel .inventory-card,
.right-panel .table-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

/* ----------------------------------------------------------------------------
   6. BUTTONS — reference .btn / .btn-primary / .btn-green
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font);
    font-weight: 700;
    font-size: 13.5px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--border-soft);
    background: var(--elev);
    color: var(--text);
    cursor: pointer;
    transition: 0.15s;
    white-space: nowrap;
}
.btn:hover { background: var(--surface-3); }

/* primary = gradient + glow (v4) */
.btn-primary,
.btn-save,
.btn-start,
.btn-create,
.current {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    border: none;
    color: var(--primary-ink);
    box-shadow: 0 12px 30px -12px var(--primary);
}
.btn-primary:hover,
.btn-save:hover,
.btn-start:hover,
.btn-create:hover {
    filter: brightness(1.04);
    transform: translateY(-1px);
}

/* success / download = green w/ dark ink */
.btn-green,
.btn-success,
.btn-download,
.download-link,
.btn-excel {
    background: var(--green);
    border: none;
    color: var(--green-ink) !important;
    font-weight: 700;
    box-shadow: 0 10px 24px -12px var(--green);
}
.btn-green:hover,
.btn-success:hover,
.btn-download:hover,
.download-link:hover,
.btn-excel:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ghost / secondary */
.btn-secondary,
.btn-ghost,
.btn-cancel {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
}
.btn-secondary:hover,
.btn-ghost:hover,
.btn-cancel:hover { background: var(--elev); }

/* danger */
.btn-danger,
.row-delete-btn,
.btn-delete {
    background: var(--red-soft);
    border: 1px solid var(--red);
    color: var(--red);
}
.btn-danger:hover,
.row-delete-btn:hover,
.btn-delete:hover { background: var(--red); color: #2a0707; }

.btn-sm { font-size: 0.8rem; }

/* ----------------------------------------------------------------------------
   7. TABLES — reference .tbl treatment (row-h, hairline border-soft)
   -------------------------------------------------------------------------- */
.table-wrap,
.table-wrapper { background: transparent; }

table { width: 100%; border-collapse: collapse; color: var(--text); }
thead th {
    text-align: left;
    background: var(--panel-solid);
    color: var(--faint);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.06em;
    font-weight: 700;
    border-bottom: 1px solid var(--border-soft);
}
tbody td {
    color: var(--text);
    border-bottom: 1px solid var(--border-soft);
    background: transparent;
    vertical-align: middle;
}
/* kill light zebra striping site-wide */
tbody tr:nth-child(even),
tbody tr:nth-child(even) td,
tbody tr:nth-child(odd),
tbody tr:nth-child(odd) td { background: transparent; }
tbody tr { transition: background 0.12s; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td,
tbody tr:hover { background: color-mix(in oklab, var(--primary) 7%, transparent); }

/* VIN cells mono + muted */
td.vin-col, .vin-col, .vin {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--muted);
    letter-spacing: -0.02em;
}
tbody tr:nth-child(even) td.vin-col { background: transparent; }
tbody tr:hover td.vin-col { background: color-mix(in oklab, var(--primary) 7%, transparent); }

/* ----------------------------------------------------------------------------
   8. STATUS PILLS — reference .pill + .pill--*  (stock agent: use these names)
   -------------------------------------------------------------------------- */
.pill,
.status-badge,
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill--new       { color: var(--st-new);       background: var(--st-new-bg); }
.pill--available { color: var(--st-available); background: var(--st-available-bg); }
.pill--reserved  { color: var(--st-reserved);  background: var(--st-reserved-bg); }
.pill--transit   { color: var(--st-transit);   background: var(--st-transit-bg); }
.pill--sold      { color: var(--st-sold);      background: var(--st-sold-bg); }

/* legacy status-* aliases mapped onto the same palette */
.status-new       { background: var(--st-new-bg);       color: var(--st-new); }
.status-available { background: var(--st-available-bg); color: var(--st-available); }
.status-reserved  { background: var(--st-reserved-bg);  color: var(--st-reserved); }
.status-transit,
.status-in-transit{ background: var(--st-transit-bg);   color: var(--st-transit); }
.status-sold,
.status-inactive,
.status-offer     { background: var(--st-sold-bg) !important; color: var(--st-sold); }

/* ----------------------------------------------------------------------------
   9. INPUTS / SELECTS / TEXTAREA — reference .control / .range (focus = --ring)
   -------------------------------------------------------------------------- */
input[type="text"],
input[type="number"],
input[type="date"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
select,
textarea {
    background: #ffffff08;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-xs);
    color: var(--text);
    font-family: var(--font);
}
input::placeholder,
textarea::placeholder { color: var(--faint); }
input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--ring);
}
input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.8); }
option { background: #141d33; color: var(--text); }

/* ----------------------------------------------------------------------------
   10. MODALS
   -------------------------------------------------------------------------- */
.modal-backdrop,
.modal-overlay {
    background: rgba(4, 7, 14, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.modal,
.modal-content,
.modal-box {
    background: linear-gradient(180deg, #141d33, #10162a);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    box-shadow: var(--shadow);
}
.modal-header,
.modal-footer { border-color: var(--border-soft); color: var(--text); }
.modal-body { color: var(--text); }
.modal-close { color: var(--muted); }

/* ----------------------------------------------------------------------------
   11. TOOLKIT JOB PATTERN
   -------------------------------------------------------------------------- */
.job-status {
    background: var(--elev);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.progress-bar {
    background: #ffffff0c;
    border-radius: 999px;
    overflow: hidden;
}
.progress-bar > .progress-fill,
.progress-bar > .bar,
.progress-bar > span {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
}
.log-box,
.log-text,
.console-box {
    background: #070a12;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-sm);
    color: var(--muted);
    font-family: var(--mono);
}

/* ----------------------------------------------------------------------------
   12. PAGER — reference .pager / .page
   -------------------------------------------------------------------------- */
.pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border-soft);
}
.pager-info { color: var(--muted); font-size: 12.5px; }
.pager-info b { color: var(--text); }
.pager-ctrls { display: flex; align-items: center; gap: 5px; }
.page-btn,
.pager .page {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-weight: 700;
    font-size: 13px;
    border: 1px solid transparent;
    background: transparent;
}
.page-btn:hover:not(:disabled),
.pager .page:hover:not(:disabled) { background: var(--elev); color: var(--text); }
.page-btn.is-active,
.pager .page.is-active { background: var(--primary); color: var(--primary-ink); }
.page-btn:disabled,
.pager .page:disabled { opacity: 0.35; cursor: default; }

/* ----------------------------------------------------------------------------
   13. MOBILE NAV — bottom bar bg --bg-deep, panels --panel (glass)
   -------------------------------------------------------------------------- */
.mobile-bottom-bar {
    background: color-mix(in oklab, var(--panel) 92%, #000);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mobile-tab { color: var(--muted); }
.mobile-tab.active { background: var(--primary); color: #fff !important; }
.mobile-tab.active svg { color: #fff; }
.mobile-panel-backdrop { background: rgba(4, 7, 14, 0.7); }
.mobile-panel {
    background: linear-gradient(180deg, #141d33, #10162a);
    border-top: 1px solid var(--border-soft);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.6);
}
.mobile-panel-header { color: var(--text); border-bottom: 1px solid var(--border-soft); }
.mobile-panel-close { color: var(--muted); }
.mobile-panel a { color: var(--text); border-bottom: 1px solid var(--border-soft); }
.mobile-panel a:hover,
.mobile-panel a:active {
    background: color-mix(in oklab, var(--primary) 12%, transparent);
    color: var(--primary);
}

/* ----------------------------------------------------------------------------
   14. SAFETY OVERRIDES — recurring light hardcodes across per-page CSS.
   Override by class name so nothing renders as a light box on the dark bg.
   Later phases should move these into each page's own CSS.
   -------------------------------------------------------------------------- */
.customer-details,
.send-option,
.detail-box,
.info-box,
.summary-box {
    background: var(--elev) !important;
    border-color: var(--border-soft) !important;
    color: var(--text);
}
.active { color: var(--primary-ink); }
.tab-link,
.subnav a,
.pill-toggle { color: var(--muted); }
.tab-link.active,
.subnav a.active,
.pill-toggle.active { background: var(--primary); color: var(--primary-ink); }