/* ============================================================================
 * dark-mode.css — DARKMODE-20261024
 *
 * The black-and-white dark theme Donny ordered 2026-10-24 ("fix this to
 * where it's black and white") after the parity light theme left staff
 * phones "all white". Loaded LAST in staff.html so these rules win ties.
 *
 * How it works: staff.js resolves a three-state pref (Auto / Dark / Light)
 * and stamps <html data-theme="dark"|"light" data-theme-pref="..."> before
 * paint. EVERYTHING below is scoped [data-theme="dark"], so the parity
 * light theme is byte-for-byte untouched for anyone who picks Light.
 *
 * The app is token-driven (staff.css :root), so most of the theme is just
 * the dark value of each token. mgmt-theme.css (#serviceOverlay) and
 * global-sidebar.css (#globalSidebar) carry their own scoped token sets —
 * both are re-tokened here. What remains is a short list of hard-coded
 * light surfaces (worst: the RO detail slide-over) overridden at the end.
 *
 * Palette (Donny's spec): near-black #0a0a0a page, #171717 surfaces,
 * white text, #2a2a2a borders. Gold #C9A53F and green = Authorize are the
 * signed-off brand accents and do NOT change. Text/surface contrast is
 * >= 4.5:1 for every text token (verified — see the build REPORT.md).
 * ========================================================================== */

/* --- app tokens (mirror of staff.css :root, dark values) ------------------ */
[data-theme="dark"] {
  --bg: #0a0a0a; --surface: #171717; --surface-2: #1f1f1f;
  --border: #2a2a2a; --border-strong: #3d3d3d;
  --text: #ffffff; --muted: #c3c9cf; --faint: #9aa3ab;
  --charcoal-900: #000000; --charcoal-800: #101010; --charcoal-700: #1c1c1c;
  --gold: #c9a53f; --gold-strong: #e3bc55; --gold-tint: #2a2410;
  --blue: #1f6fd6; --blue-bg: #12283f;
  --green: #1f8a4c; --green-dark: #2fae62; --green-bg: #0f2c1a;
  --amber: #e0a83c; --amber-bg: #2e230c;
  --red: #e05858; --red-bg: #2e1416;
  --shadow-card: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.55);
  --shadow-lift: 0 4px 12px rgba(0,0,0,.6), 0 1px 3px rgba(0,0,0,.5);
  --steel: #0a0a0a; --panel: #171717; --panel2: #1f1f1f; --line: #2a2a2a;
  --paper: #ffffff; --ink: #ffffff; --ink-soft: #c3c9cf;
  --yellow: #c9a53f; --orange: #ff6b35; --pink: #ff1053;
  --card-paper: #171717;
  --on-accent: #171204;
  --link-blue: #6cb2f5; --yellow-text: #e3bc55;
  --dash-panel-bg: #141414; --dash-panel-border: #2e2e2e;
  --orange-text: #f0915f; --overdue-count-text: #ff7a7a;
  --muted2: #9aa3ab;
  --tint-rgb: 255,255,255;
  --shadow-color: rgba(0,0,0,0.55);
  --line-subtle: #232323;
  --tag-bg: #14304a; --tag-border: #2c5a86;
  --brass: #c9a53f; --brass-hi: #e3bc55; --brass-deep: #e3bc55; --brass-dim: #c9a53f;
  --brass-grad: #c9a53f; --brass-ink: #171204; --brass-line-hi: #3d3d3d;
  --rich-brass: #c9a53f; --rich-brass-hi: #e3bc55; --rich-brass-dim: #c9a53f;
  --rich-line: #2a2a2a; --rich-line-hi: #3d3d3d; --rich-ivory: #ffffff;
  --rich-serif: 'Inter', sans-serif;
  color-scheme: dark;
}

/* --- shop-management overlay tokens (mirror of mgmt-theme.css) ------------ */
[data-theme="dark"] #serviceOverlay {
  --mgmt-topbar: #000000;
  --mgmt-topbar-2: #1c1c1c;
  --mgmt-primary: #1f6fd6;
  --mgmt-primary-dark: #2b7de0;
  --mgmt-primary-ink: #ffffff;
  --mgmt-active-bg: #12283f;
  --mgmt-active-text: #6cb2f5;
  --mgmt-bg: #0a0a0a;
  --mgmt-card: #171717;
  --mgmt-border: #2a2a2a;
  --mgmt-border-strong: #3d3d3d;
  --mgmt-text: #ffffff;
  --mgmt-muted: #c3c9cf;
  --mgmt-faint: #9aa3ab;
  --mgmt-section: #9aa3ab;
  --mgmt-green: #1f8a4c;
  --mgmt-green-dark: #2fae62;
  --mgmt-red: #e05858;
  --mgmt-red-dark: #ff7a7a;
  --mgmt-amber: #e0a83c;
  --mgmt-amber-bg: #2e230c;
  --mgmt-purple: #9d86ff;
  --mgmt-teal: #35b5a6;
  --mgmt-blue-bg: #12283f;
  --mgmt-red-bg: #2e1416;
  --mgmt-green-bg: #0f2c1a;
  --mgmt-shadow: 0 1px 2px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.55);
  color-scheme: dark;
}

/* --- global sidebar tokens (mirror of global-sidebar.css) ----------------- */
[data-theme="dark"] #globalSidebar {
  --gs-bg: #0a0a0a;
  --gs-surface: #121212;
  --gs-surface-2: #1c1c1c;
  --gs-border: #2a2a2a;
  --gs-border-strong: #3d3d3d;
  --gs-text: #ffffff;
  --gs-muted: #c3c9cf;
  --gs-faint: #9aa3ab;
  --gs-charcoal: #000000;
  --gs-charcoal-2: #161616;
  --gs-gold: #c9a53f;
  --gs-gold-tint: #2a2410;
  --gs-blue: #6cb2f5;
}

/* ============================================================================
 * Hard-coded light surfaces — the token pass can't reach these.
 * ========================================================================== */

/* RO detail slide-over: deliberately LIGHT in the base sheet (a daylight
   readability call from the old dark-board era). Under an explicitly chosen
   dark theme it flips with everything else — anyone who wants the light
   panel picks the Light theme. Hero keeps its dark gradient. */
[data-theme="dark"] #jobOverlay.slide-over .modal-box:has(.ro-detail:not([style*="display:none"])) {
  background: #171717; color: #ffffff;
}
[data-theme="dark"] .ro-detail { color: #ffffff; }
[data-theme="dark"] .ro-detail .rod-tabs { background: #171717; border-bottom-color: #2a2a2a; }
[data-theme="dark"] .ro-detail .rod-section::after { background: #2a2a2a; }
[data-theme="dark"] .ro-detail .rod-count { background: #2a2440; color: #b7a8ff; }
[data-theme="dark"] .ro-detail .rod-job { background: #1f1f1f; border-color: #2a2a2a; }
[data-theme="dark"] .ro-detail .rod-chip.ok { background: #0f2c1a; color: #4cc377; }

/* Alert strip chips: the 'vin' chip text is --yellow (#C9A53F, fine on dark);
   'rev' chip text is --blue #1F6FD6 on a 14% blue tint — 3.4:1 on black.
   Brighten the text color in dark only; chip backgrounds stay tinted. */
[data-theme="dark"] .as-rev { color: #6cb2f5; }
[data-theme="dark"] .as-em { color: #ff5c8a; }

/* ============================================================================
 * CONTRAST-20261024 — washed-out controls Donny photographed on the live
 * dark theme (measured in a rendered sim; every value below was < 4.5:1
 * before this block and >= 4.5:1 after — see the build REPORT.md).
 * ========================================================================== */

/* + Repair Order (#newJobBtn): the header's .btn-primary rule in staff.css
   paints it var(--surface) with var(--charcoal-900) text — white pill /
   dark text in light, but in dark that resolves to BLACK text on #171717
   (measured 1.17:1 — looks disabled). Give it the design system's real
   primary treatment in dark: gold fill, dark text — exactly the pairing
   the generic .btn-primary uses everywhere else in the app. */
[data-theme="dark"] #siteHeader .header-actions .btn-primary {
  background: var(--gold); border-color: var(--gold); color: var(--on-accent);
}
[data-theme="dark"] #siteHeader .header-actions .btn-primary:hover {
  background: var(--gold-strong); border-color: var(--gold-strong); color: var(--on-accent);
}

/* Emergency (#fireAlertBtn): white on the --red fill #e05858 is 3.68:1.
   Deepen the fill in dark so the white label clears 4.5:1 (6.4:1);
   it still reads unmistakably red. The fill is an INLINE style in
   staff.html, so the dark override needs !important to win. */
[data-theme="dark"] #siteHeader .header-actions #fireAlertBtn {
  background: #b02e2e !important; border-color: #b02e2e !important; color: #ffffff;
}
[data-theme="dark"] #siteHeader .header-actions #fireAlertBtn:hover {
  background: #a02828 !important; border-color: #a02828 !important; color: #ffffff;
}

/* Notifications (#notifToggleBtn) in its disabled state ("Notifications
   blocked" / "unavailable" — staff.js disables the button): the global
   .btn:disabled opacity .45 fades its white text to an effective
   #737373 on the black header = 4.41:1, and it reads as broken-dim next
   to the bright Menu button. Keep it visibly a disabled state, but lift
   it over the line in dark. The enabled states use the plain header
   .btn treatment (white on transparent, 21:1) and are untouched. */
[data-theme="dark"] #siteHeader .header-actions .btn:disabled {
  color: #ffffff; opacity: .8;
}

/* Board zoom pill (#boardZoomWrap): its background is var(--paper), and
   this sheet remaps --paper to #ffffff for dark — so the pill stayed
   bright white while its buttons take var(--ink) (white in dark) and its
   % label var(--muted) (#c3c9cf): white-on-white 1.0:1, label 1.67:1.
   Dark surface + border, white buttons, muted label (10.7:1 on #171717). */
[data-theme="dark"] #boardZoomWrap { background: var(--surface); border-color: var(--border); }
[data-theme="dark"] #boardZoomWrap button { color: #ffffff; }
[data-theme="dark"] #boardZoomWrap button:hover { background: var(--line-subtle); }
[data-theme="dark"] #boardZoomLabel { color: var(--muted); }

/* Floating text-size widget (#textSizeQuick): base opacity .55 drops its
   "Board 100%" label (var(--muted) text) to an effective 4.09:1 on its
   own #171717 surface in dark. Raise the resting opacity in dark; the
   base :hover rule still brings it to full. */
[data-theme="dark"] .text-size-quick { opacity: .9; }
 * MGMT-COLORS-20261024 — Shop Management color-layout fix (dark half).
 *
 * The token pass at the top of this file remapped mgmt-theme.css's --mgmt-*
 * tokens, but the Shop Management surfaces still rendered as a light slab
 * inside the dark app (measured 2026-10-24, live build 015b3d469b4c):
 * rep.css's --rep-* tokens were never re-mapped (--rep-bg stayed #f4f7fa,
 * so page headers measured 1.08:1 white-on-white), and mgmt-theme.css /
 * staff.css carry hard-coded light literals for nav items, badges, alerts,
 * chips, tables, buttons and the call-notes view that no token reaches.
 * Everything below is [data-theme="dark"]-scoped, loads last, and uses the
 * app's dark palette: #0a0a0a page, #171717 surfaces, white text, #2a2a2a
 * borders, gold #C9A53F primary, and the board's semantic dark tints.
 * Every text/background pair below measures >= 4.5:1 (see REPORT.md).
 * Self-contained: disjoint from the CONTRAST-20261024 package's block, so
 * the two merge in any order.
 * ========================================================================== */

/* rep.css tokens — the Service page/board root cause */
[data-theme="dark"] #serviceOverlay {
  --rep-bg: #0a0a0a; --rep-card: #171717; --rep-ink: #ffffff; --rep-muted: #c3c9cf;
  --rep-line: #2a2a2a; --rep-navy: #000000; --rep-navy-2: #1c1c1c;
  --rep-blue: #6cb2f5; --rep-blue-dark: #6cb2f5; --rep-sky: #12283f;
  --rep-orange: #c9a53f; --rep-green: #2fae62; --rep-amber: #e0a83c; --rep-red: #ff7a7a;
}
/* --rep-navy is also a TEXT color for these; on dark surfaces it must be white */
[data-theme="dark"] #serviceOverlay .svc-panel-title,
[data-theme="dark"] #serviceOverlay .svc-line-group-head .svc-section-title,
[data-theme="dark"] #serviceOverlay .svc-totals-row.svc-grand span:last-child { color: #ffffff; }
[data-theme="dark"] #serviceOverlay .svc-balance { border: 1px solid #2a2a2a; }
[data-theme="dark"] #serviceOverlay .svc-chip-paid,
[data-theme="dark"] #serviceOverlay .svc-chip-invoiced { box-shadow: 0 0 0 1px #3d3d3d; }
[data-theme="dark"] #serviceOverlay .rep-notice { background: #2e230c; border-color: #6b5416; color: #eec25e; }
[data-theme="dark"] #serviceOverlay .rep-notice strong { color: #eec25e; }

/* Service primary buttons: blue in rep.css/mgmt-theme — app primary is gold */
[data-theme="dark"] #serviceOverlay .btn-primary,
[data-theme="dark"] #serviceOverlay .btn.btn-primary,
[data-theme="dark"] #serviceOverlay .svc-sectionhead .btn-primary,
[data-theme="dark"] #serviceOverlay .svc-toolbar .btn-primary { background: #c9a53f; border-color: #c9a53f; color: #171204; }
[data-theme="dark"] #serviceOverlay .btn-primary:hover,
[data-theme="dark"] #serviceOverlay .btn.btn-primary:hover,
[data-theme="dark"] #serviceOverlay .svc-sectionhead .btn-primary:hover,
[data-theme="dark"] #serviceOverlay .svc-toolbar .btn-primary:hover { background: #e3bc55; border-color: #e3bc55; color: #171204; }

/* Status chips (rep.css hard-coded light pastels) */
[data-theme="dark"] #serviceOverlay .svc-chip-draft { background: #232323; color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .svc-chip-active,
[data-theme="dark"] #serviceOverlay .svc-chip-sent { background: #12283f; color: #93c5fd; }
[data-theme="dark"] #serviceOverlay .svc-chip-approved,
[data-theme="dark"] #serviceOverlay .svc-chip-completed { background: #0f2c1a; color: #4cc377; }
[data-theme="dark"] #serviceOverlay .svc-chip-partial,
[data-theme="dark"] #serviceOverlay .svc-chip-expired { background: #2e230c; color: #e0a83c; }
[data-theme="dark"] #serviceOverlay .svc-chip-declined,
[data-theme="dark"] #serviceOverlay .svc-chip-cancelled,
[data-theme="dark"] #serviceOverlay .svc-chip-void { background: #2e1416; color: #ff8a8a; }
[data-theme="dark"] #serviceOverlay .svc-chip-converted { background: #2a2440; color: #b7a8ff; }

/* Mgmt shell sidebar nav (hard-coded #33404d text measured 1.69:1) */
[data-theme="dark"] #serviceOverlay .mgmt-nav-item { color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item svg { color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item:hover { background: #1f1f1f; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item.is-active { background: #2a2410; color: #e3bc55; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item.is-active svg { color: #e3bc55; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item .mgmt-count { background: #232323; color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item.is-active .mgmt-count { background: #171717; color: #e3bc55; }
[data-theme="dark"] #serviceOverlay .mgmt-nav-item .mgmt-soon { background: #2e230c; border-color: #6b5416; color: #e0a83c; }

/* Cards, tables, rows, forms (brass-ivory light treatments flip to app dark) */
[data-theme="dark"] #serviceOverlay .mg-card { border-color: #2a2a2a; }
[data-theme="dark"] #serviceOverlay .mg-table td { border-bottom-color: #2a2a2a; }
[data-theme="dark"] #serviceOverlay .mg-table tbody tr:hover td { background: #1f1f1f; }
[data-theme="dark"] #serviceOverlay .mg-row { border-bottom-color: #2a2a2a; }
[data-theme="dark"] #serviceOverlay .mg-row.mg-rowlink:hover { background: #1f1f1f; }
[data-theme="dark"] #serviceOverlay .mg-input,
[data-theme="dark"] #serviceOverlay .mg-select { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-input:focus,
[data-theme="dark"] #serviceOverlay .mg-select:focus { outline-color: rgba(201,165,63,.35); border-color: #c9a53f; }
[data-theme="dark"] #serviceOverlay .mg-btn { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-btn:hover { background: #2a2a2a; border-color: #3d3d3d; }
[data-theme="dark"] #serviceOverlay .mg-btn-primary { background: #c9a53f; border-color: #c9a53f; color: #171204; text-shadow: none; box-shadow: none; }
[data-theme="dark"] #serviceOverlay .mg-btn-primary:hover { background: #e3bc55; border-color: #e3bc55; color: #171204; }
[data-theme="dark"] #serviceOverlay .mg-btn-green { background: #166534; border-color: #166534; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-btn-green:hover { background: #14532d; border-color: #14532d; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-btn-danger { background: #2e1416; border-color: #7a3434; color: #ff7a7a; }
[data-theme="dark"] #serviceOverlay .mg-btn-danger:hover { background: #5c2626; border-color: #7a3434; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-tab { color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .mg-tab:hover { color: #ffffff; }
[data-theme="dark"] #serviceOverlay .mg-tab.is-active { color: #e3bc55; border-bottom-color: #c9a53f; }

/* Badges + alerts: backgrounds already token-dark; text/borders were light-theme literals */
[data-theme="dark"] #serviceOverlay .mg-badge.blue { color: #6cb2f5; }
[data-theme="dark"] #serviceOverlay .mg-badge.green { color: #4cc377; }
[data-theme="dark"] #serviceOverlay .mg-badge.red { color: #ff7a7a; }
[data-theme="dark"] #serviceOverlay .mg-badge.amber { color: #e0a83c; }
[data-theme="dark"] #serviceOverlay .mg-badge.purple { background: #2a2440; color: #b7a8ff; }
[data-theme="dark"] #serviceOverlay .mg-badge.gray { background: #232323; color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .mg-badge.teal { background: #0f2c2a; color: #4cc3b5; }
[data-theme="dark"] #serviceOverlay .mg-alert.red { color: #ff9a9a; border-color: #7a3434; }
[data-theme="dark"] #serviceOverlay .mg-alert.amber { color: #eec25e; border-color: #6b5416; }
[data-theme="dark"] #serviceOverlay .mg-alert.blue { color: #6cb2f5; border-color: #2c5a86; }
[data-theme="dark"] #serviceOverlay .mg-alert.green { color: #4cc377; border-color: #2c5a3c; }

/* Call Notes view (hard-coded light panels) */
[data-theme="dark"] #serviceOverlay .mg-callnotes-banner { background: #2e230c; border-color: #6b5416; color: #eec25e; }
[data-theme="dark"] #serviceOverlay .mg-callnotes-coverage { background: #12283f; border-color: #2c5a86; color: #6cb2f5; }
[data-theme="dark"] #serviceOverlay .mg-callnotes-excerpt { background: #1f1f1f; border-color: #2a2a2a; }
[data-theme="dark"] #serviceOverlay .mg-callnotes-prior { background: #171717; }
[data-theme="dark"] #serviceOverlay .mg-callnotes-prior:hover { border-color: #c9a53f; }

/* Service board chrome inside the overlay (mgmt-theme "light-touch" literals) */
[data-theme="dark"] #serviceOverlay .svc-card,
[data-theme="dark"] #serviceOverlay .svc-cardgrid .svc-card { background: #171717; border-color: #2a2a2a; box-shadow: none; }
[data-theme="dark"] #serviceOverlay .svc-col { background: #141414; border-color: #2a2a2a; }
[data-theme="dark"] #serviceOverlay .svc-colcount { background: #232323; color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .svc-toolbar .svc-search,
[data-theme="dark"] #serviceOverlay .svc-search { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .svc-fbtn { background: #1f1f1f; border-color: #3d3d3d; color: #c3c9cf; }
[data-theme="dark"] #serviceOverlay .svc-fbtn:hover { border-color: #c9a53f; color: #e3bc55; }
[data-theme="dark"] #serviceOverlay .svc-empty { background: #171717; border-color: #3d3d3d; }
[data-theme="dark"] #serviceOverlay .svc-backrow .btn,
[data-theme="dark"] #serviceOverlay .svc-sectionhead .btn,
[data-theme="dark"] #serviceOverlay .svc-toolbar .btn { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #serviceOverlay .svc-backrow .btn:hover,
[data-theme="dark"] #serviceOverlay .svc-sectionhead .btn:hover,
[data-theme="dark"] #serviceOverlay .svc-toolbar .btn:hover { background: #2a2a2a; }

/* Service money / aging / audit bits (staff.css literals) */
[data-theme="dark"] .svc-bcard-num { color: #6cb2f5; }
[data-theme="dark"] .svc-bal { color: #e0a83c; }
[data-theme="dark"] .svc-overdue { color: #ff7a7a; }
[data-theme="dark"] .svc-aging { background: #171717; border-color: #2a2a2a; color: #ffffff; }
[data-theme="dark"] .svc-aging-total { color: #ffffff; }
[data-theme="dark"] .svc-aging-bucket { background: #1f1f1f; border-color: #2a2a2a; color: #c3c9cf; }
[data-theme="dark"] .svc-audit-row { color: #c3c9cf; }
[data-theme="dark"] .svc-guide-note,
[data-theme="dark"] .svc-pay-note { color: #9aa3ab; }
[data-theme="dark"] .svc-readonly { background: #1f1f1f; border-color: #2a2a2a; color: #ffffff; }
[data-theme="dark"] .svc-tmatrix { background: #171717; color: #ffffff; }
[data-theme="dark"] .svc-type-chip { background: #232323; color: #c3c9cf; }

/* Report tables: rep.css gives thead th a hard-coded #f8fafc band */
[data-theme="dark"] #serviceOverlay .rep-table thead th { background: #1f1f1f; color: #c3c9cf; }

/* Shop Settings overlay (Admin nav) — fully hard-coded light sheet */
[data-theme="dark"] #shopSettingsOverlay .ss-box { background: #0a0a0a; color: #ffffff; }
[data-theme="dark"] #shopSettingsOverlay .ss-card,
[data-theme="dark"] #shopSettingsOverlay .ss-panel { background: #171717; border-color: #2a2a2a; }
[data-theme="dark"] #shopSettingsOverlay .ss-title,
[data-theme="dark"] #shopSettingsOverlay .ss-card-name,
[data-theme="dark"] #shopSettingsOverlay .ss-panel h3,
[data-theme="dark"] #shopSettingsOverlay .ss-dayname,
[data-theme="dark"] #shopSettingsOverlay .ss-check,
[data-theme="dark"] #shopSettingsOverlay .ss-status strong { color: #ffffff; }
[data-theme="dark"] #shopSettingsOverlay .ss-sub,
[data-theme="dark"] #shopSettingsOverlay .ss-card-desc,
[data-theme="dark"] #shopSettingsOverlay .ss-panel-desc,
[data-theme="dark"] #shopSettingsOverlay .ss-status,
[data-theme="dark"] #shopSettingsOverlay .ss-field label { color: #c3c9cf; }
[data-theme="dark"] #shopSettingsOverlay .ss-field input,
[data-theme="dark"] #shopSettingsOverlay .ss-field select,
[data-theme="dark"] #shopSettingsOverlay .ss-panel textarea { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #shopSettingsOverlay .ss-card-badge { background: #2a2410; color: #e3bc55; }
[data-theme="dark"] #shopSettingsOverlay .ss-card-target { color: #6cb2f5; }
[data-theme="dark"] #shopSettingsOverlay .ss-btn { background: #c9a53f; border-color: #c9a53f; color: #171204; }
[data-theme="dark"] #shopSettingsOverlay .ss-btn.secondary { background: #1f1f1f; border-color: #3d3d3d; color: #ffffff; }
[data-theme="dark"] #shopSettingsOverlay .ss-note { background: #1f1f1f; border-color: #2a2a2a; color: #c3c9cf; }
[data-theme="dark"] #shopSettingsOverlay .ss-msg.ok { color: #4cc377; }
[data-theme="dark"] #shopSettingsOverlay .ss-msg.err { color: #ff7a7a; }
/* Primary/active states win their ties (placed last on purpose): the app's
   gold primary button and the active filter pill must read as primary in
   dark too, not as plain dark buttons. #171204 on #c9a53f = 7.95:1. */
[data-theme="dark"] #serviceOverlay .svc-toolbar .btn-primary,
[data-theme="dark"] #serviceOverlay .svc-sectionhead .btn-primary { background: #c9a53f; border-color: #c9a53f; color: #171204; }
[data-theme="dark"] #serviceOverlay .svc-fbtn.is-active { background: #c9a53f; border-color: #c9a53f; color: #171204; }

/* ===== end MGMT-COLORS-20261024 ===== */
/* ═══ CARD-REDESIGN-20261024 (dark-theme side) — white cards ═══
   Donny (2026-10-24): the card goes WHITE when the app is on the black
   (dark) version — the mirror of the black card the light theme gets in
   staff.css. renderCard() emits the restored pre-parity arrangement
   (accent bar → flags → vehicle → customer → RO · tech → value → chips →
   completion → bottom row → timer → people row → plan chips); structure
   and sizes live in the staff.css CARD-REDESIGN-20261024 block. This
   block only re-points the card-local --cr-* variables at the white face
   and swaps the fixed color pairs to their dark-text-on-light versions
   (the same pairs the light theme uses on white surfaces, several of
   them measured in RO-READABILITY-20261024). Everything is scoped
   [data-theme="dark"] .card-restore, like the rest of this file. */
[data-theme="dark"] .card-list .card.card-restore {
  --cr-face: #ffffff;
  --cr-ink: #171a1f;
  --cr-soft: #565c66;
  --cr-faint: #5f6771;
  --cr-line: rgba(0, 0, 0, .10);
  background: var(--cr-face);
  color: var(--cr-ink);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 10px 24px rgba(0, 0, 0, .45);
}
[data-theme="dark"] .card-list .card.card-restore .priority-badge.rush { background: rgba(255, 107, 53, .16); color: #a03d16; }
[data-theme="dark"] .card-list .card.card-restore .priority-badge.emergency { background: rgba(255, 16, 83, .12); color: #c20047; }
[data-theme="dark"] .card-list .card.card-restore .priority-badge.needs-update-badge { background: rgba(244, 196, 48, .25); color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .priority-badge.inspection-badge-in { background: rgba(255, 59, 48, .14); color: #c0271b; }
[data-theme="dark"] .card-list .card.card-restore .priority-badge.inspection-badge-qa { background: rgba(88, 86, 214, .14); color: #4442b8; }
[data-theme="dark"] .card-list .card.card-restore .priority-badge.overdue-flag-badge { background: rgba(240, 180, 41, .25); color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .card-vin-flag { background: rgba(244, 196, 48, .25); color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .card-ro .card-ro-num { color: #0b4ea8; }
[data-theme="dark"] .card-list .card.card-restore .card-ro.emergency-ro { color: #c20047; }
[data-theme="dark"] .card-list .card.card-restore .card-ro.rush-ro { color: #a03d16; }
[data-theme="dark"] .card-list .card.card-restore .card-hv-star { color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .card-task-badge { color: #17703c; background: rgba(46, 139, 87, .14); }
[data-theme="dark"] .card-list .card.card-restore .card-chip {
  background: #eef0f3; border-color: #d8dce2; color: #3d4756;
}
[data-theme="dark"] .card-list .card.card-restore .card-chip.stale { background: rgba(255, 107, 53, .14); border-color: rgba(255, 107, 53, .45); color: #a03d16; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.neglected { background: rgba(255, 59, 48, .12); border-color: rgba(255, 59, 48, .45); color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.parts-wait { background: rgba(240, 180, 41, .18); border-color: rgba(240, 180, 41, .50); color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.parts-in { background: rgba(46, 139, 87, .14); border-color: rgba(46, 139, 87, .45); color: #17703c; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.msg { background: rgba(31, 111, 214, .12); border-color: rgba(31, 111, 214, .40); color: #0b4ea8; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.esc { background: rgba(168, 85, 247, .14); border-color: rgba(168, 85, 247, .45); color: #7a3ec9; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-order { background: rgba(74, 143, 214, .16); border-color: rgba(74, 143, 214, .45); color: #0b4ea8; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-chance.hi { background: rgba(46, 139, 87, .14); border-color: rgba(46, 139, 87, .45); color: #17703c; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-chance.mid { background: rgba(244, 196, 48, .18); border-color: rgba(244, 196, 48, .50); color: #8a6100; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-chance.lo { background: rgba(255, 59, 48, .12); border-color: rgba(255, 59, 48, .45); color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-key { background: rgba(168, 85, 247, .14); border-color: rgba(168, 85, 247, .45); color: #7a3ec9; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-testdrive { background: rgba(74, 143, 214, .16); border-color: rgba(74, 143, 214, .45); color: #0b4ea8; }
[data-theme="dark"] .card-list .card.card-restore .card-chip.plan-testdrive-help { background: rgba(255, 59, 48, .16); border-color: rgba(255, 59, 48, .50); color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .completion-track { background: rgba(0, 0, 0, .10); }
[data-theme="dark"] .card-list .card.card-restore .completion-fill { background: linear-gradient(90deg, #1f6fd6, #1f8a4c); }
[data-theme="dark"] .card-list .card.card-restore .status-pill { background: #eef0f3; color: #3d4756; }
[data-theme="dark"] .card-list .card.card-restore .status-pill.blue { background: #e9f2fd; color: #0b4ea8; }
[data-theme="dark"] .card-list .card.card-restore .status-pill.amber { background: #fdf3e3; color: #8a5a00; }
[data-theme="dark"] .card-list .card.card-restore .status-pill.green { background: #e9f6ec; color: #146c38; }
[data-theme="dark"] .card-list .card.card-restore .status-pill.red { background: #fdeeee; color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .card-timer.is-overdue { color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .card-plan-timer.is-overdue { color: #b32727; }
[data-theme="dark"] .card-list .card.card-restore .card-missing-info {
  background: rgba(255, 107, 53, .14); border-color: rgba(255, 107, 53, .40); color: #a03d16;
}
[data-theme="dark"] .card-list .card.card-restore .card-priority-num {
  background: #f6f7f9; color: #171a1f; border-color: #dfe3e8;
}
/* [CARD-REDESIGN-20261024] end (dark-theme side) */

/* ═══ BOARD-OUTLINE-20261025 (dark-theme side) — white column boxes ═══
   Donny (2026-10-25): white outline on the boxes the cards sit in, so
   the lanes are visible. On the dark page the white border reads as-is;
   a faint white fill separates the box interior from the page and a
   black outer edge keeps the ring crisp where columns sit side by
   side. Light-theme half is at the end of staff.css. */
[data-theme="dark"] #board .column {
  background: rgba(255, 255, 255, .05);
  border: 2px solid rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .45);
}
[data-theme="dark"] #board .column-header { border-bottom: 1px solid rgba(255, 255, 255, .16); }
[data-theme="dark"] #board .column.drag-over { border-color: var(--yellow); }
/* [BOARD-OUTLINE-20261025] end (dark-theme side) */