/* ============================================================
   PID ERP — Custom Overrides
   Edit this file to modify styles across the entire system.
   ============================================================ */

/* ── Scrollbar styling (Webkit browsers) ─────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,.05); }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.35); }

/* ── Mobile: tables scroll sideways instead of being cut ── */
@media (max-width: 768px) {
    .main table, .page-wrap table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .main table td, .main table th,
    .page-wrap table td, .page-wrap table th {
        white-space: nowrap;
    }
}

/* ============================================================
   MOBILE UX IMPROVEMENTS
   Targets phones / small tablets (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ── 1. Touch targets — minimum 44×44px recommended by Apple/Google ── */
    .btn { min-height: 44px !important; padding: 0 16px !important; font-size: 14px !important; touch-action: manipulation; }
    .btn-sm { min-height: 38px !important; padding: 0 14px !important; font-size: 13px !important; }
    .btn-xs { min-height: 34px !important; padding: 0 10px !important; }

    /* ── 2. Inputs: 16px min prevents iOS auto-zoom on focus ── */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
        min-height: 44px !important;
    }
    textarea { min-height: auto !important; }
    select { min-height: 44px !important; }

    /* ── 3. Page title & top bar ── */
    .page-title { font-size: 18px !important; }
    .top-bar { flex-wrap: wrap; gap: 10px; padding-bottom: 6px; }

    /* ── 4. Main content padding ── */
    .main, .page-wrap { padding: 14px !important; }

    /* ── 5. Summary / stat cards: 2-column grid ── */
    .summary { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .summary-card, .stat-card { padding: 14px !important; }
    .summary-card .sc-val, .stat-val { font-size: 20px !important; }

    /* ── 6. Kanban board: horizontal scroll with proper sizing ── */
    .board {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 20px !important;
        scroll-snap-type: x proximity;
    }
    .board-col {
        min-width: 260px !important;
        max-width: 290px !important;
        scroll-snap-align: start;
    }
    .board-card { padding: 12px 14px !important; }
    .c-name { font-size: 14px !important; line-height: 1.4 !important; }

    /* ── 7. Deal preview panel: vertical stack ── */
    .dp-body { flex-direction: column !important; max-height: none !important; }
    .dp-section {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
        overflow-y: visible !important;
        max-height: none !important;
    }
    .dp-panel { border-radius: 10px !important; }

    /* ── 8. Modals / dialogs: bottom-sheet style ── */
    #modal {
        align-items: flex-end !important;
        padding: 0 !important;
    }
    .modal-box, .modal-card, .modal-inner {
        width: 100% !important;
        max-width: 100% !important;
        max-height: 88vh !important;
        border-radius: 18px 18px 0 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
    }

    /* ── 9. Slide-in panels: full width ── */
    .panel {
        width: 100% !important;
        border-radius: 18px 18px 0 0 !important;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        transform: translateY(100%) !important;
    }
    .panel.open { transform: translateY(0) !important; }

    /* ── 10. Tabs: horizontal scroll ── */
    .tabs, .nav-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex-wrap: nowrap !important;
        padding-bottom: 2px;
        gap: 2px;
    }
    .tab-btn, .nav-tab { white-space: nowrap !important; flex-shrink: 0 !important; }

    /* ── 11. 2-column grids → single column ── */
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── 12. Form grids → single column ── */
    .form-grid, .form-row, .grid-2, .grid-3 {
        grid-template-columns: 1fr !important;
    }

    /* ── 13. Deal view (deal_view.php): stack columns ── */
    .dv-body { flex-direction: column !important; }
    .dv-col {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    /* ── 14. Clock page: bigger clock-in button ── */
    #clockBtn, .clock-btn {
        min-height: 64px !important;
        font-size: 18px !important;
        border-radius: 14px !important;
        width: 100% !important;
    }

    /* ── 15. Tbl-card actions: stack vertically ── */
    .tbl-actions, .row-actions { display: flex; flex-wrap: wrap; gap: 6px; }

    /* ── 16. Print template 2-col → 1-col ── */
    #tab-print [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #tab-calendar [style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* ── 17. cPanel-style table: allow wrapping ── */
    .tbl-card table td, .tbl-card table th { white-space: normal !important; }

    /* ── 18. Better spacing for table action buttons ── */
    table td .btn, table td .btn-sm { margin: 2px 0; }

    /* ── 19. Sidebar nav link tap size ── */
    .sb-nav a { padding: 13px 14px !important; font-size: 14px !important; min-height: 48px; }
    .sb-foot { padding: 14px !important; }
}

/* ── Very small screens (< 380px) ────────────────────────── */
@media (max-width: 380px) {
    .btn { padding: 0 12px !important; }
    .summary { grid-template-columns: 1fr !important; }
    .board-col { min-width: 240px !important; }
}

/* ============================================================
   COLOR THEME — 5 switchable themes (Dark/Day/Pink/Green/Blue), restored
   2026-07-19 per Mr T (was simplified to just Dark/Day on 2026-07-11, and
   before that was a different 4-theme set — Dark/Light/Ocean/Sunset — see
   git history). Applied via a `theme-<name>` class on <html> (no class =
   Dark, the default) set server-side in _sidebar.php from users.theme.
   Dark's base palette still follows Linear's "Midnight" theme (bg #0f0f10,
   text #eeeff1), but its ACCENT is now Discord's Blurple (#5865F2) per
   Mr T's request — buttons should look distinct from Day mode, which
   didn't used to be true when both shared the same purple accent. Day
   mode's accent is Google Blue (#4285F4), with Google's full red/green/
   yellow also mapped onto the new .btn-danger/.btn-success/.btn-warning
   classes below. Pink/Green/Blue are new full themes with their own
   tinted-near-black backgrounds (see their blocks further down) — because
   they stay dark like the base theme (not white like Day), they don't need
   the large "hardcoded dark background / white text" override lists Day
   mode required below; only Day's white background broke those assumptions.
   This file is linked AFTER every page's own inline <style> block, so on
   tied specificity it wins the cascade — that's what lets one shared file
   reskin every page without editing each one. !important is used on the
   handful of color/background/border-color properties below specifically
   so this always wins regardless of a given page's exact selector
   specificity, without needing to audit every page individually.
   ============================================================ */
:root {
  --bg:#0f0f10; --surface:#18181b; --surface-2:#1e1e22;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --text:#eeeff1; --text-dim:rgba(238,239,241,.68); --text-faint:rgba(238,239,241,.42); --text-heading:#ffffff;
  /* Discord Blurple accent — added 2026-07-19, per Mr T (was #7c5cfc/#5b8def,
     the same purple Day mode also used, which is why buttons looked
     identical between the two modes before this change). */
  --accent:#5865F2; --accent-2:#7289da;
  --accent-soft-bg:rgba(88,101,242,.16); --accent-soft-text:#b3b9fb;
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.11);
  --hover-bg:rgba(255,255,255,.05);
  --scroll-track:rgba(255,255,255,.05); --scroll-thumb:rgba(255,255,255,.18);
  /* Tells the browser to render NATIVE controls (the popped-open <select>
     listbox, checkboxes, date pickers) using dark OS chrome. Without this,
     Chrome/Edge render an open dropdown's option list using light native
     styling regardless of any color/background CSS put on <option> — this
     is what caused dropdown popups to show black-on-white even though the
     closed select box correctly showed the dark theme. */
  color-scheme: dark;
}

/* ============================================================
   DAY / LIGHT THEME — added 2026-07-17, per Mr T (account_settings.php
   "Appearance" tab, applied via a `theme-light` class on <html>, set
   server-side in _sidebar.php from users.theme so there's no flash).
   Literal spec: white background, black letters, black icons. Card/modal
   surfaces stay a hair off pure white (border color instead of a tinted
   fill) purely so stacked cards remain visually separable on a plain
   white page — no color tint is introduced. Brand/accent colors
   (purple/blue) are intentionally left unchanged from the Dark palette;
   only the accent-soft text got darkened since the Dark palette's pale
   lavender is unreadable on white.
   Because `html.theme-light` (element + class) always outweighs the
   bare `:root` pseudo-class in specificity, this block wins regardless
   of where it sits in the file, and dark mode (no class) is completely
   unaffected. ============================================================ */
html.theme-light {
  --bg:#ffffff; --surface:#ffffff; --surface-2:#f2f2f4;
  /* Bumped 2026-07-18, per Mr T — low-opacity black lines on white read as
     "no line at all" much more easily than the same opacity in white-on-dark
     (which is why the Dark theme's much fainter .07/.13 borders still read
     fine there). Raised so table/card dividers stay clearly visible. */
  --border:rgba(0,0,0,.18); --border-strong:rgba(0,0,0,.32);
  --text:#000000; --text-dim:rgba(0,0,0,.68); --text-faint:rgba(0,0,0,.45); --text-heading:#000000;
  /* Google Blue accent — added 2026-07-19, per Mr T (was #7c5cfc/#5b8def,
     the same purple Dark mode also used). accent-soft-text is a darkened
     Google Blue (not the raw brand blue) so it stays readable as small text
     on a white surface, same convention as the previous purple's #5a3fd6. */
  --accent:#4285F4; --accent-2:#1a73e8;
  --accent-soft-bg:rgba(66,133,244,.12); --accent-soft-text:#1a56c4;
  --field-bg:rgba(0,0,0,.035); --field-border:rgba(0,0,0,.18);
  --hover-bg:rgba(0,0,0,.045);
  --scroll-track:rgba(0,0,0,.05); --scroll-thumb:rgba(0,0,0,.2);
  /* Native controls (open <select> listbox, checkboxes, date pickers)
     render with light OS chrome instead of dark — same mechanism as the
     dark theme's color-scheme:dark above, just flipped. */
  color-scheme: light;
}

/* Google's full brand palette on the shared semantic button classes
   (.btn-danger/.btn-success/.btn-warning, defined earlier in this file) —
   added 2026-07-19, per Mr T's request for Google-colored Day-mode buttons.
   Flat colors (not the generic gradient the dark-based themes use) to match
   Google's own flat Material button style; warning uses dark text since
   Google Yellow (#FBBC05) is too light for white text to read on. */
html.theme-light .btn-danger  { background:#EA4335 !important; color:#fff !important; }
html.theme-light .btn-success { background:#34A853 !important; color:#fff !important; }
html.theme-light .btn-warning { background:#FBBC05 !important; color:#202124 !important; }

/* ============================================================
   PINK MODE — added 2026-07-19, per Mr T. A full theme like Day above, but
   dark-background based (same lightness tier as the default Dark/Discord
   theme) with a pink-tinted near-black base + a vivid pink accent. Because
   it stays dark rather than switching to white, none of the extensive
   Day-theme override rules above/below are needed here — every hardcoded
   dark-navy background or white inline text elsewhere in the app already
   reads correctly against this background, exactly as it does for the base
   Dark theme. Only the CSS variables need to change.
   ============================================================ */
html.theme-pink {
  --bg:#1a0f16; --surface:#241620; --surface-2:#2e1a29;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --text:#f5eef2; --text-dim:rgba(245,238,242,.68); --text-faint:rgba(245,238,242,.42); --text-heading:#ffffff;
  --accent:#ec4899; --accent-2:#f472b6;
  --accent-soft-bg:rgba(236,72,153,.16); --accent-soft-text:#f9a8d4;
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.11);
  --hover-bg:rgba(255,255,255,.05);
  --scroll-track:rgba(255,255,255,.05); --scroll-thumb:rgba(255,255,255,.18);
  color-scheme: dark;
}

/* ============================================================
   GREEN MODE — added 2026-07-19, per Mr T. Same pattern as Pink Mode:
   dark-background full theme, green-tinted near-black base.
   ============================================================ */
html.theme-green {
  --bg:#0d1a12; --surface:#132419; --surface-2:#182e21;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --text:#eef5f0; --text-dim:rgba(238,245,240,.68); --text-faint:rgba(238,245,240,.42); --text-heading:#ffffff;
  --accent:#22c55e; --accent-2:#4ade80;
  --accent-soft-bg:rgba(34,197,94,.16); --accent-soft-text:#86efac;
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.11);
  --hover-bg:rgba(255,255,255,.05);
  --scroll-track:rgba(255,255,255,.05); --scroll-thumb:rgba(255,255,255,.18);
  color-scheme: dark;
}

/* ============================================================
   BLUE MODE — added 2026-07-19, per Mr T. Same pattern again, blue-tinted
   near-black base. Accent reuses the GitHub dark-theme blue (#2f81f7) that
   the old pre-2026-07-11 "Ocean" theme used — already a vetted,
   professional-looking choice — kept deliberately distinct from Dark
   mode's Discord Blurple (#5865F2, more indigo/purple) so the two read as
   clearly different colors side by side.
   ============================================================ */
html.theme-blue {
  --bg:#0d131a; --surface:#131c26; --surface-2:#182430;
  --border:rgba(255,255,255,.07); --border-strong:rgba(255,255,255,.13);
  --text:#eef2f5; --text-dim:rgba(238,242,245,.68); --text-faint:rgba(238,242,245,.42); --text-heading:#ffffff;
  --accent:#2f81f7; --accent-2:#58a6ff;
  --accent-soft-bg:rgba(47,129,247,.16); --accent-soft-text:#8ec1ff;
  --field-bg:rgba(255,255,255,.05); --field-border:rgba(255,255,255,.11);
  --hover-bg:rgba(255,255,255,.05);
  --scroll-track:rgba(255,255,255,.05); --scroll-thumb:rgba(255,255,255,.18);
  color-scheme: dark;
}

/* Extra hardcoded dark-navy backgrounds found across the app that the
   Dark-theme override list above doesn't catch (it only lists the 4
   shades actually used near variable-driven components). Scoped to
   theme-light only, so Dark mode's look is completely untouched. */
html.theme-light [style*="background:#0f0f1a"], html.theme-light [style*="background: #0f0f1a"],
html.theme-light [style*="background:#1d1d38"], html.theme-light [style*="background: #1d1d38"],
html.theme-light [style*="background:#16162a"], html.theme-light [style*="background: #16162a"],
html.theme-light [style*="background:#1a1a30"], html.theme-light [style*="background: #1a1a30"],
html.theme-light [style*="background:#20203a"], html.theme-light [style*="background: #20203a"],
html.theme-light [style*="background:#181830"], html.theme-light [style*="background: #181830"],
html.theme-light [style*="background:#252542"], html.theme-light [style*="background: #252542"],
html.theme-light [style*="background:#13132b"], html.theme-light [style*="background: #13132b"] {
  background:var(--surface) !important;
}

/* Hardcoded light-on-dark inline text colors, flipped to black so they
   stay legible once the background behind them turns white. Note: a
   badge/pill that hardcodes BOTH a colored background and color:#fff
   (e.g. a status chip) will also get its text flipped here — if any
   specific badge looks wrong in Day mode, tell me which page/label and
   I'll carve out an exception for it. */
html.theme-light [style*="color:#fff"], html.theme-light [style*="color: #fff"],
html.theme-light [style*="color:#ffffff"], html.theme-light [style*="color: #ffffff"],
html.theme-light [style*="color:#e8e8f0"], html.theme-light [style*="color: #e8e8f0"],
html.theme-light [style*="color:#e2e8f0"], html.theme-light [style*="color: #e2e8f0"] {
  color:var(--text) !important;
}

/* ── Day theme, round 2 — added 2026-07-18, per Mr T's report that clock.php,
   leave.php, announcements.php, customer_form.php, deals.php, estimate_form.php,
   invoice_form.php, and price_history.php still looked broken in Day mode.

   Root cause: this app has no shared component naming convention — almost
   every page defines its OWN local CSS classes for what is conceptually a
   "card" or "panel" (e.g. announcements.php uses .a-item/.a-title while
   dashboard.php's announcement widget uses .ann-item/.ann-title for the same
   idea). The round-1 override list above only covered the shared class names,
   so any page with its own bespoke styling was untouched. Scanned all ~220
   PHP files for hardcoded dark backgrounds and light text to close the gap:
   ============================================================ */

/* 145 page-local classes found with a hardcoded dark background (#0f0f1a,
   #1e1e35, #1a1a2e, and ~45 other near-black shades used 1-20 times each
   across different pages) that don't match any round-1 selector. Mapped to
   var(--surface) — same treatment as the shared .card/.tbl-section list
   above, just covering the page-specific names too. */
html.theme-light #cdOverlay .cd-panel, html.theme-light #priceTip, html.theme-light #toast,
html.theme-light .a-item, html.theme-light .adv-panel, html.theme-light .ai-out,
html.theme-light .ai-panel, html.theme-light .aicust-list, html.theme-light .ais-box,
html.theme-light .attr-menu, html.theme-light .autocomplete, html.theme-light .bc-table th,
html.theme-light .bottom-bar, html.theme-light .btn-add, html.theme-light .btn-add:hover,
html.theme-light .btn-login, html.theme-light .btn-login:hover, html.theme-light .btn-save,
html.theme-light .btn.sec, html.theme-light .btn:hover, html.theme-light .bucket,
html.theme-light .bulk-bar, html.theme-light .cal-cell, html.theme-light .card img,
html.theme-light .card-img-wrap, html.theme-light .cat-card, html.theme-light .cc-panel,
html.theme-light .center, html.theme-light .chat-box, html.theme-light .clock-widget,
html.theme-light .cmp-img-wrap, html.theme-light .cmp-table, html.theme-light .col,
html.theme-light .compose-card, html.theme-light .cp-list, html.theme-light .cpanel,
html.theme-light .css-editor, html.theme-light .ctools-panel, html.theme-light .cu-frame,
html.theme-light .cust-ac, html.theme-light .cust-box, html.theme-light .cust-prev-item img,
html.theme-light .cust-results .drop, html.theme-light .custom-panel, html.theme-light .cvtools,
html.theme-light .deal-modal-panel, html.theme-light .deal-table, html.theme-light .detail-modal,
html.theme-light .dm-row, html.theme-light .dm-row:hover, html.theme-light .doc-card,
html.theme-light .dp-panel, html.theme-light .drawer, html.theme-light .drop,
html.theme-light .edit-panel, html.theme-light .em-box, html.theme-light .em-modal,
html.theme-light .email-body, html.theme-light .fb-cust .drop, html.theme-light .fc-table th,
html.theme-light .fcard, html.theme-light .feat-card, html.theme-light .fg-pop,
html.theme-light .filter-btn.on, html.theme-light .filterbar, html.theme-light .filters,
html.theme-light .filters-bar, html.theme-light .fp3d-opt .ky, html.theme-light .gitem,
html.theme-light .gtable, html.theme-light .gtable img, html.theme-light .help-section,
html.theme-light .inv-menu, html.theme-light .lib-card, html.theme-light .list-row,
html.theme-light .list-row img, html.theme-light .list-thumb-empty, html.theme-light .live-captions,
html.theme-light .mail-compose-panel, html.theme-light .mail-list-head, html.theme-light .menu-panel,
html.theme-light .mg-day.drag-over, html.theme-light .mini-card, html.theme-light .mini-card img,
html.theme-light .modal-bx, html.theme-light .modal-panel, html.theme-light .modal-perms-foot,
html.theme-light .modal-role-foot.modal-btns, html.theme-light .move-panel, html.theme-light .mp-panel,
html.theme-light .new-pipe, html.theme-light .oc-table th, html.theme-light .p-card,
html.theme-light .p-thumb, html.theme-light .panel .seg button, html.theme-light .paybar,
html.theme-light .pcard, html.theme-light .pcard-img, html.theme-light .picker,
html.theme-light .picker-drop, html.theme-light .pill, html.theme-light .pipe-card,
html.theme-light .pk-list, html.theme-light .pp-list, html.theme-light .preview-item .main-badge,
html.theme-light .print-bar, html.theme-light .prod-card, html.theme-light .product-ac,
html.theme-light .pv-card, html.theme-light .pw-form .ok, html.theme-light .rail,
html.theme-light .recon .card, html.theme-light .recv-section, html.theme-light .rpt-tab,
html.theme-light .scan-item, html.theme-light .search-box, html.theme-light .search-results,
html.theme-light .sec-card, html.theme-light .section-card, html.theme-light .seg button,
html.theme-light .setup-card, html.theme-light .slidethumb, html.theme-light .ss-table th,
html.theme-light .stat-box, html.theme-light .stat-box.active, html.theme-light .state-list,
html.theme-light .step, html.theme-light .stmt-head, html.theme-light .sum-card,
html.theme-light .ta-drop, html.theme-light .task-form, html.theme-light .toast,
html.theme-light .toolbar, html.theme-light .top-bar, html.theme-light .topbar, html.theme-light .site-top-bar,
html.theme-light .wk-col.drag-over, html.theme-light form.filters, html.theme-light header,
html.theme-light pre, html.theme-light table.grid th, html.theme-light table.pm-table th,
html.theme-light th, html.theme-light tr:hover td {
  background: var(--surface) !important;
}

/* Text color is the bigger problem: color:#fff alone is hardcoded across 439
   different page-local classes (833 uses) with no shared name to hook into —
   individually listing every one isn't practical or reliable. Instead: a
   single default-black-text rule for Day mode, using :where() so it carries
   ZERO CSS specificity of its own. That means:
     - it still beats every page's own non-!important `color:#fff`-style rule
       (an !important declaration always wins over a non-!important one,
       regardless of specificity), fixing the invisible-text bug everywhere
       at once without listing 439 selectors, but
     - it still LOSES to any of our own more-specific !important rules above
       (like .btn-primary's white-on-purple), which keep working normally.
   Trade-off: page-local color-coded text (a green "success" label, a purple
   link, a yellow warning) that isn't one of our own shared/branded rules will
   also turn plain black in Day mode instead of staying colored — still fully
   readable, just less visually distinct than Dark mode. Dark mode itself is
   completely unaffected either way. If a specific color-coded label matters
   to you, tell me which page/label and I'll add it back as an exception. */
html.theme-light :where(body *) {
  color: var(--text) !important;
}

/* ── Large / X-Large font size — Large added 2026-07-17, X-Large added
   2026-07-19 (per Mr T, account_settings.php "Appearance" tab). Most pages
   use fixed px values scattered across per-page inline <style> blocks
   rather than one shared rem/em scale, so a single "bump the base
   font-size" rule can't reach everything. `zoom` scales the whole rendered
   page (text, buttons, spacing, icons) instead, which reaches every page
   uniformly with one rule. Supported in Chrome/Edge/Safari and current
   Firefox (126+). ── */
html.font-large body { zoom: 1.15; }
html.font-xlarge body { zoom: 1.3; }

/* ── Font family — added 2026-07-19, per Mr T (account_settings.php
   "Appearance" tab, next to Font Size). Every page hardcodes its own
   `body { font-family:'Segoe UI',-apple-system,sans-serif; ... }` in an
   inline <style> block rather than reading a shared variable, so (like the
   color themes above) this overrides it via a higher-specificity
   `html.font-<name> body` selector rather than a CSS variable — no
   !important needed since `html.font-arial body` already outweighs a page's
   own bare `body` selector regardless of load order. font-family is
   inherited by default, so this alone reaches nearly everything on the
   page; a handful of elements that set their own explicit font-family
   (rare in this codebase) will keep it. 'default' (Segoe UI/system) needs
   no override — it's already what every page's own inline style sets. ── */
html.font-arial body     { font-family: Arial, Helvetica, sans-serif; }
html.font-verdana body   { font-family: Verdana, Geneva, sans-serif; }
html.font-georgia body   { font-family: Georgia, 'Times New Roman', serif; }
html.font-trebuchet body { font-family: 'Trebuchet MS', sans-serif; }

/* ── Page background + base text ── */
body { background:var(--bg) !important; color:var(--text) !important; }

/* ── Sidebar note: the sidebar's OWN styles (_sidebar.php) now reference
   these same variables directly, so it themes along with everything else —
   no override needed here. Its avatar/logo badges intentionally keep a
   fixed accent gradient with white text, which stays readable against a
   light or dark sidebar background either way. ── */

/* ── Page chrome / headings (note the !important — several pages set these
   via a plain element selector like `h1{color:#fff}`, which otherwise ties
   with this rule and can lose depending on source order) ── */
.page-title, .as-title, .page-header h2, .cal-title, .modal-head h3,
h1, h2, h3 { color:var(--text-heading) !important; }
.page-header p, .pane-sub { color:var(--text-faint) !important; }

/* ── Cards / panels / tiles / tables (shared across every list/board page) ── */
.tbl-section, .as-head-card, .act-tabs, .tab-body, .settings-panel, .vsp-panel,
.view-panel, .cd-panel, .sig-preview, .tbl-card, .card, .stat-card, .mod-card,
.ann-board, .chip, .rc-panel {
  background:var(--surface) !important; border-color:var(--border) !important;
}
.modal-box, .modal, .ann-modal, .del-card, .mg-day, .wk-col {
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
/* Catches the many one-off `style="background:#1e1e35..."` boxes on pages
   (like floorplan.php) that don't use a shared class name at all. */
[style*="background:#1e1e35"], [style*="background: #1e1e35"] { background:var(--surface) !important; }
[style*="background:#1a1a2e"], [style*="background: #1a1a2e"],
[style*="background:#12122a"], [style*="background: #12122a"],
[style*="background:#161628"], [style*="background: #161628"] { background:var(--surface-2) !important; }

table th { color:var(--text-faint) !important; background:rgba(127,127,127,.05) !important; }
table td { color:var(--text-dim) !important; border-color:var(--border) !important; }
tr:hover td { background:var(--hover-bg) !important; }
.empty { color:var(--text-faint) !important; }

/* Day theme, round 3 — added 2026-07-18, per Mr T ("need a visible thin
   line for charts/tables"). border-color alone (the rule right above) only
   renders if the page's own CSS already declared a border-style on that
   element — most of this app's tables never did (dark-theme rows were
   separated by background contrast alone, not a drawn line), so on a flat
   white Day-mode background rows ran together with nothing to show. This
   forces an actual visible row divider regardless of what the page itself
   declared. */
html.theme-light table td, html.theme-light table th {
  border-bottom: 1px solid var(--border) !important;
}

/* ── Tile / card text (stat cards, module tiles, announcement board, delivery cards) ── */
.stat-value, .ct-status, .mod-name, .ann-title, .ann-head h3, .section-title,
.del-info .cust {
  color:var(--text-heading) !important;
}
.stat-label, .stat-icon, .ct-sub, .mod-desc, .ann-meta, .ann-body, .card-title,
.del-info .addr, .del-info .notes, .mg-num, .wk-hour, .wk-headcell, .chip-lbl,
.cal-legend, .mg-head {
  color:var(--text-dim) !important;
}
.ann-item { border-color:var(--border) !important; }
.ann-item.is-pinned { background:var(--accent-soft-bg) !important; }
.stat-link { color:var(--accent) !important; }

/* ── Buttons ── */
.btn-primary, .btn-purple, .tab.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)) !important; color:#fff !important; }
.btn-ghost, .back-btn, .ann-btn, .btn-gray, .time-btn { background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important; }
.time-btn:hover { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; }

/* Shared semantic button classes — added 2026-07-19, per Mr T, alongside the
   Google/Discord button-color request. Any page can opt into these (class=
   "btn btn-danger" etc.) to get theme-aware delete/save/warning coloring
   instead of a hardcoded inline color. Universal defaults here work against
   any dark-based theme (Dark/Pink/Green/Blue); Day mode overrides them below
   with Google's exact brand colors per Mr T's request. This does NOT
   retroactively recolor pages that already hardcode their own red delete
   button etc. via inline styles — only pages using these class names. */
.btn-danger  { background:linear-gradient(135deg,#ef4444,#dc2626) !important; color:#fff !important; }
.btn-success { background:linear-gradient(135deg,#22c55e,#16a34a) !important; color:#fff !important; }
.btn-warning { background:linear-gradient(135deg,#eab308,#ca8a04) !important; color:#111 !important; }

/* ── Accent-tinted highlight boxes (date badges, "today" markers) stay
   accent-colored rather than neutral, since they're meant to draw the eye ── */
.del-date-box { background:var(--accent-soft-bg) !important; border-color:var(--accent) !important; }
.del-date-box .day, .chip-num { color:var(--accent) !important; }
.del-info .time { color:var(--accent) !important; }
.wk-headcell.today { background:var(--accent-soft-bg) !important; }
.mg-day.today { border-color:var(--accent) !important; }

/* ── Form fields (covers every page using these shared classes or bare inputs) ── */
.search-input, .select-filter, .sf-input, .sf-textarea, .fg input, .fg textarea,
input[type="text"], input[type="email"], input[type="password"], input[type="tel"],
input[type="number"], input[type="date"], input[type="time"], select, textarea {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Dropdown popup options — the closed <select> box picks up the themed
   colors above automatically, but the OPEN option list is a separate native
   control that browsers only theme correctly when color-scheme (set on
   :root per theme above) AND explicit option colors are both present.
   This used to be hardcoded to color:#000/background:#fff (pre-dating the
   theme system), which forced every dropdown's option list to light mode
   no matter what theme was active — that's why it's themed via variables now. */
select option {
  background:var(--surface-2) !important; color:var(--text) !important;
}

/* ── Date/time picker icon — DO NOT add filter:invert() here, even though
   that seems like the obvious fix for a dark icon on a dark field.
   `color-scheme: dark` on :root (see COLOR THEME above) already tells the
   browser to draw this icon in a light color suited to dark backgrounds —
   confirmed live: with no filter at all, the icon renders light and is
   clearly visible. Adding invert() flips that already-light icon back to
   dark/invisible, which is exactly what caused this icon to silently go
   black before (an earlier version of this rule had the invert filter and
   that was the bug, not a fix for it). Only cursor needs to be set here. ── */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* ── Pagination ── */
.pagination a, .pagination span { background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important; }
.pagination .cur { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; border-color:var(--accent) !important; }
.page-info { color:var(--text-faint) !important; }

/* ── Modal scrims stay dark regardless of theme, for contrast ── */
.view-overlay, .modal-overlay, #cdOverlay, .mod-ov { background:rgba(0,0,0,.7) !important; }

/* ── Dashboard clock-in bar (dashboard.php) — was omitted from the card
   list above, so it kept its hardcoded navy gradient in every theme ── */
.clock-bar { background:var(--surface) !important; border-color:var(--border) !important; }

/* ── Deal Stages page (deal_stages.php) — its table has its own hardcoded
   dark background, and its inputs/selects have no type="" attribute so the
   input[type="text"] rule above never matched them ── */
.stage-table { background:var(--surface) !important; border-color:var(--border) !important; }
.sub-note, .mv button { color:var(--text-faint) !important; }
.stage-table input, .stage-table select, .add-row input, .add-row select {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Admin Tools tab bar (admin_tools.php) — inactive tab labels were
   rgba(255,255,255,.4), i.e. near-invisible light text on a light page ── */
.tab-btn { color:var(--text-faint) !important; }
.tab-btn:hover:not(.active) { color:var(--text-dim) !important; }
.tab-btn.active { color:var(--accent-soft-text) !important; border-bottom-color:var(--accent) !important; }

/* ── Floor Plan editor (floorplan.php?id=…) — this whole tool never linked
   custom.css until now and every panel/input color was hardcoded. The
   drawing canvas (.fp-canvas) and the white icon/preview swatches (.lib-ico,
   .cub-sty) are deliberately left alone — they represent the actual drawing
   surface and printed-paper previews, which stay neutral/white in any
   theme, the same way design tools like Figma keep their canvas fixed. ── */
.fp-top, .panel, .panel-l, .panel-r, .sc-help, .mod, .ctx, .props, .align-bar, .zoom-ui button {
  background:var(--surface-2) !important; border-color:var(--border) !important;
}
.fp-top .back, .fp-top input.name, .fp-top select { background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important; }
.cat { border-color:var(--border) !important; }
.cat-h { background:var(--hover-bg) !important; color:var(--text-dim) !important; }
.cat-h:hover { color:var(--text-heading) !important; }
.mod h3, .fi .nm { color:var(--text-heading) !important; }
.p-title, .hint, .save-state, .tpl-sz-row .x, .fld label, .fi .sz {
  color:var(--text-faint) !important;
}
.sc-row, .lib-grp, .room-row, .menu-cfg-row, .ctx-i, .tpl-sz-row {
  color:var(--text-dim) !important; background:var(--field-bg) !important;
}
.mini, .tool, .fi, .room-row button, .menu-cfg-row button {
  background:var(--field-bg) !important; color:var(--text-dim) !important; border-color:var(--border) !important;
}
.mini:hover, .tool:hover { background:var(--hover-bg) !important; }
.mini.active, .tool.active, .cub-sty.active {
  background:var(--accent-soft-bg) !important; border-color:var(--accent) !important; color:var(--accent-soft-text) !important;
}
.rev-badge { background:var(--accent-soft-bg) !important; color:var(--accent-soft-text) !important; }
.fld input, .fld select, .tpl-sz-row input, .dimfill input, .dimfill select,
.seg-table input, .seg-table select, .sc-row kbd {
  background:var(--field-bg) !important; border-color:var(--field-border) !important; color:var(--text) !important;
}

/* ── Floor Plan list view (floorplan.php, before opening a plan) — a plain
   <table> tag with its own hardcoded panel color, plus small icon buttons
   that were pure-white-on-white in Light theme ── */
table { background:var(--surface) !important; }
.bulk { background:var(--surface-2) !important; }
.act { background:var(--field-bg) !important; color:var(--text-dim) !important; }
.thumb-none { color:var(--text-faint) !important; border-color:var(--border) !important; }

/* ── Scrollbars ── */
::-webkit-scrollbar-track { background:var(--scroll-track) !important; }
::-webkit-scrollbar-thumb { background:var(--scroll-thumb) !important; }

/* ── Add your custom styles below ────────────────────────── */

/* Dropdown option lists — dark background so light option text stays
   readable when a <select> menu is open (fixes white-on-white). */
select option,
select optgroup {
  background: #1e1e35;
  color: #e8e8f0;
}
/* Day theme: same fix, flipped — dark text on a light option list. */
html.theme-light select option,
html.theme-light select optgroup {
  background: #ffffff;
  color: #000000;
}

/* ══════════════════════════════════════════════════════════════════
   MOBILE UI  (≤768px) — added 2026-07-11
   Turns wide list tables into stacked cards, single-column forms,
   full-width filters, and bigger tap targets. The card transform ONLY
   applies to tables the sidebar script tags with .mob-cards (the main
   list tables), so line-item / detail / modal tables are untouched.
   Everything lives inside the media query — desktop is unaffected.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Card-style list rows ─────────────────────────────────────── */
  table.mob-cards thead { display: none; }
  table.mob-cards, table.mob-cards tbody { display: block; width: 100%; }
  table.mob-cards tr {
    display: block;
    background: var(--surface-1, #1e1e35);
    border: 0.5px solid var(--border, rgba(255,255,255,.12));
    border-radius: 12px;
    padding: 11px 13px;
    margin: 0 0 10px;
  }
  table.mob-cards td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 4px 0 !important; border: none !important;
    white-space: normal !important; text-align: right; font-size: 13px;
    max-width: 100% !important; overflow: hidden; text-overflow: ellipsis;
  }
  table.mob-cards td::before {
    content: attr(data-label);
    color: var(--text-secondary, rgba(255,255,255,.45));
    font-weight: 500; text-align: left; flex: 0 0 42%; font-size: 12px;
  }
  table.mob-cards td.cb-col { display: none !important; }
  /* Cells with no header label (Actions / Linked / icon columns) → full-width button row */
  table.mob-cards td:not([data-label]) {
    justify-content: flex-start; flex-wrap: wrap; gap: 6px;
    margin-top: 6px; padding-top: 8px !important;
    border-top: 0.5px solid var(--border, rgba(255,255,255,.08)) !important;
  }
  table.mob-cards td:not([data-label])::before { display: none; }
  table.mob-cards td[data-label="Actions"], table.mob-cards td[data-label="Linked"] {
    flex-wrap: wrap; justify-content: flex-start; text-align: left;
    margin-top: 6px; padding-top: 8px !important;
    border-top: 0.5px solid var(--border, rgba(255,255,255,.08)) !important;
  }
  table.mob-cards td[data-label="Actions"]::before, table.mob-cards td[data-label="Linked"]::before { flex-basis: 100%; margin-bottom: 4px; }
  table.mob-cards td .btn, table.mob-cards td .btn-sm { margin: 0; }
  table.mob-cards td select { max-width: 60%; }

  /* ── Filters: search full width, dropdowns share rows ─────────── */
  .search-input { width: 100% !important; }
  .select-filter { flex: 1 1 42%; }

  /* ── Single-column forms (collapse equal-column field grids) ──── */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"],
  .adv-grid { grid-template-columns: 1fr !important; }

  /* ── Bigger, easier tap targets + iOS niceties ────────────────── */
  .btn, .btn-sm { min-height: 40px; }
  select, input, textarea { font-size: 16px; }        /* 16px stops iOS zoom-on-focus */
  .bottom-bar { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  main.main, .main { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}

/* ── Estimate line-item row dividers — added 2026-07-18, per Mr T ──────
   .item-row's own border-bottom is rgba(255,255,255,.045) (estimate_form.php),
   nearly invisible even in Dark mode and completely invisible in Day/Light
   mode (white-on-white). Using var(--border-strong) (already bumped for this
   exact "faint divider" problem elsewhere today) makes the line between each
   product/service row clearly visible in Light mode, while Dark mode is
   intentionally left alone — its own faint divider already reads fine there,
   and this rule is scoped to html.theme-light only. */
html.theme-light .item-row,
html.theme-light .items-cols {
  border-bottom: 1px solid var(--border-strong);
}

/* ── Price type color coding (2026-07-19, per Mr T) ─────────────────
   Retail = green, B2B = blue, Cost = yellow/amber, Promotion = red.
   Apply one of these classes directly to whatever element renders the
   number (a helper, priceTypeClass($type) in config.php, returns the
   right class name given 'retail'|'b2b'|'cost'|'promo').

   IMPORTANT for print pages: an element's own explicit color does NOT
   get overridden by a `body { color:#000 }` print rule — CSS resolves
   an element's own declared color before it ever looks at an ancestor's
   value, @media print or not. So every page that uses these classes
   needs the print override below (or its own equivalent) to actually
   go black when printed; don't assume the existing print rules on
   invoice_form.php/estimate_form.php/etc. already cover this — they
   were written before any element had its own explicit price color. */
.price-retail    { color: #7ee787; }
.price-b2b       { color: #5eb8f5; }
.price-wholesale { color: #fb923c; }
.price-cost      { color: #f5d76e; }
.price-promo     { color: #f57e7e; }
.price-type-note { font-size: 10px; font-weight: 600; opacity: .7; text-transform: uppercase; letter-spacing: .03em; }

@media print {
  .price-retail, .price-b2b, .price-wholesale, .price-cost, .price-promo {
    color: #000 !important;
  }
}

/* ── Linked column compact buttons (2026-07-25, per Mr T) ────────────
   estimates.php + invoices.php's "Linked" column (Deal/Inv/PO/Delivery
   buttons, rendered by linked_info.php) was taking up excessive column
   width. This single shared rule tightens every button/link/dropdown in
   that column so the column can shrink to fit its content. Several of
   those elements also carry their own inline style="..." for per-type
   color-coding (purple=Deal, green=Invoice, amber=PO, blue=Delivery) —
   !important is used here deliberately so this sizing always wins over
   those inline styles without having to hand-edit every one of them in
   linked_info.php. Loaded after every page's own inline <style> block
   (see the cascade note earlier in this file), so it applies on both
   estimates.php and invoices.php with this one rule. */
.linked-btn {
  padding: 3px 7px !important;
  font-size: 11px !important;
  gap: 3px !important;
  border-radius: 6px !important;
  line-height: 1.4 !important;
}
select.linked-btn { padding: 3px 5px !important; }


/* == Day-theme gaps found by a live audit (2026-08-07, per Mr T: "when I do day theme, some
      of the divs color doesn't change") =============================================
   Method: loaded 16 pages with theme-light applied and measured COMPUTED background colours,
   flagging anything darker than 0.28 relative luminance and larger than 2500px. That is how
   these were found rather than by eye - .add-line is #1a1a2e while the inline-style list
   above already carries #1a1a30, one hex digit away, which is exactly the kind of near-miss
   an allow-list architecture produces.
   Both set their dark background in page-level <style> rules (not inline styles), so neither
   the [style*=...] list nor the class list above could catch them.
   Appended at the END of the file on purpose: same specificity as the lists above, so being
   last is what guarantees these win.

   FALSE POSITIVE, do not re-add: dashboard's .mod-card. The scanner reported it dark on every
   run, but a screenshot showed the tiles are white, and the element would not change colour
   even with an inline background:#fff !important - i.e. the element being measured is not the
   one being painted (the dashboard keeps drag-reorder copies). Ground-truth with a screenshot
   before trusting a computed-style reading.

   DELIBERATELY NOT INCLUDED - verified as intentional, not theme bugs:
   - estimate_print / invoice_print / inventory_count: print documents with their own paper
     palette (light body, dark group rows, dark on-screen toolbar). They do not follow the
     app theme by design.
   - Modal backdrops (rgba(0,0,0,.55) etc.): meant to stay dark in every theme. */
html.theme-light .add-line,   /* sticky add-line bar - estimate/invoice/po forms (#1a1a2e) */
html.theme-light #pgnoteFab { /* floating page-note pin (the "Admin" bubble) - every page */
  background: var(--surface) !important;
  border-color: var(--border) !important;
}