/* =============================================================================
   theme.css — Hive2 dark-mode token contract + theme switcher styles.
   (HIVE dark-mode/mobile 2026-06-06; loaded after site.css.)

   1:1 LIGHT GUARANTEE
   - Light is the default: with NO [data-theme] attribute, only :root applies and
     the existing site.css values are untouched -> the Full-HD light layout is
     byte-identical before/after.
   - The :root additions below are PREVIOUSLY-UNREFERENCED tokens only, so giving
     them light values changes nothing that renders today. (--surface-2 is NOT set
     here: it is read in light with per-call-site fallbacks, so it stays undefined
     in light and is defined only under dark.)
   - Pre-existing tokens (--primary-text, --shadow-lg) are NOT redefined in :root;
     they are only overridden under html[data-theme="dark"].
   - All dark rules are gated on html[data-theme="dark"] -> zero effect in light.

   Palette: warm-tinted dark (chosen 2026-06-06). Sidebar tokens are intentionally
   left untouched (already pure black). WCAG AA verified for body text on surface.
   ============================================================================= */

/* ---- New semantic tokens, LIGHT values (additive; previously unreferenced) ---- */
:root {
  --surface-3: #f0f0f0;
  --hover-bg: rgba(0, 0, 0, .04);
  --overlay-bg: rgba(0, 0, 0, .45);
  --input-bg: #ffffff;
  --input-border: #d4d4d4;
  --table-header-bg: #fafafa;
  --table-row-hover: rgba(0, 0, 0, .03);
  --muted-border: #efefef;
  --shadow-color: rgba(0, 0, 0, .08);
  --focus-ring: rgba(232, 120, 10, .45);
  --success-bg: #e7f6ec; --success-text: #1f7a44;
  --warning-bg: #fbf3e0; --warning-text: #8a6400;
  --danger-bg:  #fdeaea; --danger-text:  #a32424;
  --info-bg:    #e6f0fa; --info-text:    #205a99;
}

/* ---- Dark theme (warm-tinted) — only active when html[data-theme="dark"] ---- */
html[data-theme="dark"] {
  color-scheme: dark;

  --bg:        #14110d;
  --surface:   #1c1813;
  --surface-2: #241f18;
  --surface-3: #2d2720;
  --border:        #332b22;
  --muted-border:  #271f18;

  --text:           #efe9e1;   /* ~14:1 on --surface (AAA) */
  --text-secondary: #bcae9d;   /* ~8.4:1 (AAA) */
  --text-muted:     #9a8d7c;   /* ~5.4:1 (AA)  */

  --hover-bg:   rgba(255, 240, 220, .06);
  --overlay-bg: rgba(12, 9, 5, .68);

  --input-bg:     #211c16;
  --input-border: #3d3327;

  --table-header-bg: #241f18;
  --table-row-hover: rgba(255, 240, 220, .045);

  --shadow-color: rgba(0, 0, 0, .55);
  --shadow:       0 1px 3px rgba(0, 0, 0, .55);
  --shadow-lg:    0 8px 28px rgba(0, 0, 0, .6);
  --focus-ring:   rgba(247, 150, 56, .55);

  /* Brand orange stays for fills/buttons; brightened as text-on-dark. */
  --primary-text:  #F79638;
  --primary-light: rgba(247, 150, 56, .18);

  /* --text-primary is used in several files as var(--text-primary, #1a1a1a|#111);
     undefined in light it harmlessly uses those (dark) fallbacks, but on a dark
     surface that fallback is near-black -> unreadable. Define it under dark only
     (mirrors --text), so light stays byte-identical and dark becomes legible. */
  --text-primary: var(--text);

  --success: #4cbb7c; --warning: #edca50; --danger: #e35c5c; --info: #4aa0e4;
  --success-bg: #1a2418; --success-text: #84dca6;
  --warning-bg: #2c2410; --warning-text: #f2c558;
  --danger-bg:  #2c1612; --danger-text:  #f29191;
  --info-bg:    #15212f; --info-text:    #74b6ef;
}

/* =============================================================================
   Theme switcher control (lives inside the header user dropdown — hidden until
   the dropdown is opened, so it never affects the default-page layout).
   ============================================================================= */
.theme-toggle-row {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
}
/* The dropdown copy of the switcher is mobile-only: desktop already has the
   header segmented control, so the duplicate (and its divider) stays hidden. */
.mobile-theme-menu-section {
  display: none;
}
@media (max-width: 768px) {
  .mobile-theme-menu-section {
    display: block;
  }
}
.theme-toggle-row .theme-label {
  font-size: 12px;
  color: var(--text-secondary);
  margin-right: auto;
}
.theme-opt {
  width: 30px;
  height: 28px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.theme-opt:hover { border-color: var(--primary); color: var(--text); }
.theme-opt.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }

/* Visible header theme switcher (compact segmented sun/moon/desktop, left of the
   language switcher). Reuses .theme-opt; ungated so it renders correctly in BOTH
   themes (the control must be visible in light too). This is the one intentional
   addition to the 1920 light header — the light pixel baseline is re-captured to
   accept it. */
.header-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-right: 4px;
}
.header-theme-toggle .theme-opt {
  width: 32px;
  height: 32px;
  border-radius: 7px;
}
@media (max-width: 768px) {
  /* Phones: hide the header segmented control to keep the top bar uncrowded.
     The same Light/Dark/System switcher remains reachable in the profile
     dropdown (its .theme-toggle-row), so the preference is still settable. */
  .header-theme-toggle { display: none; }
}

/* =============================================================================
   DARK-MODE "WHITE ISLAND" NEUTRALISATION  (review item #2)
   -----------------------------------------------------------------------------
   site.css hardcodes white / near-white backgrounds (#fff, #ffffff, #fafafa,
   #f9fafb, …) and near-black text (#344054, #475467, #202635, #3b4252) on a
   number of SHARED components (modals, drawers, dropdown panels, inputs, outline
   buttons, sub-surfaces, hover washes, neutral chips). Under dark these render as
   glaring light rectangles / invisible-on-dark text. Every rule below is gated on
   html[data-theme="dark"] and remaps those hardcoded values onto the dark theme
   tokens declared above — so LIGHT IS BYTE-IDENTICAL (no [data-theme] attr -> none
   of this applies). Each override matches the SAME property the source rule sets
   (background vs background-color, border vs border-color), so light specificity
   is never altered.

   DELIBERATELY LEFT COLORED (NOT touched here): .btn-primary / .btn-danger /
   .btn-success and all CTA fills; status pills (.status-active/.status-inactive/
   status-*); active states (.filter-btn-outline.filter-active, .btn-cost-type-chip
   .active, .multiselect-option.selected, .claims-wizard-step.active); the amber
   cargo block (.claims-wizard-cargo-block #fffbf6/#fde68a); the colored
   .group-member-btn.make-parent/.make-child/.remove variants; .chip-menu /
   .chip-menu-sub (already a dark #1e1e1e context menu, no fix needed). Where a
   white-bg element also carries a brand accent (e.g. .btn-primary-outline orange
   text+border, .multiselect-badge orange border) only the white SURFACE is
   neutralised; the accent is preserved.
   ============================================================================= */

/* ---- Scrims / overlays behind modals & drawers -> dark overlay token ---- */
html[data-theme="dark"] .modal-overlay,
html[data-theme="dark"] .claims-filter-overlay {
  background: var(--overlay-bg);
}

/* ---- Modals / drawers / dropdown panels / popovers -> --surface + --border ---- */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .claims-filter-sidebar,
html[data-theme="dark"] .business-info-contact-card,
html[data-theme="dark"] .assign-selected-list-wrap,
html[data-theme="dark"] .user-company-dropdown {
  background: var(--surface);
  color: var(--text);
}
/* .pipelines-summary-panel / .permissions-summary-panel: white summary strips
   inside the create/edit-user modal (the "Žalų tipai" / "Teisės" rows). */
html[data-theme="dark"] .pipelines-summary-panel,
html[data-theme="dark"] .permissions-summary-panel {
  background: var(--surface-2);
}
/* .multiselect-dropdown / .claim-email-modal .cef-dropdown panels (panel float). */
html[data-theme="dark"] .multiselect-dropdown {
  background: var(--surface);
}
html[data-theme="dark"] .claim-email-modal .cef-dropdown {
  background: var(--surface);
  color: var(--text);
}
/* .contract-fees-accordion sets `border:` shorthand + bg with hardcoded hex. */
html[data-theme="dark"] .contract-fees-accordion {
  background: var(--surface);
  border-color: var(--border);
}
/* .business-info-section is a light-gray sub-surface card (#fafafa). */
html[data-theme="dark"] .business-info-section {
  background: var(--surface-2);
}
/* .business-info-contact-card hardcodes border #e6e8eb. */
html[data-theme="dark"] .business-info-contact-card {
  border-color: var(--border);
}
/* .clients-wizard-steps step strip: hardcoded #f9fafb bg + #eaecf0 border. */
html[data-theme="dark"] .clients-wizard-steps {
  background: var(--surface-2);
  border-color: var(--border);
}
/* .hive-alert-modal near-black heading/body text on the now-dark modal surface. */
html[data-theme="dark"] .hive-alert-modal .modal-header h2 { color: var(--text); }
html[data-theme="dark"] .hive-alert-modal .modal-body p { color: var(--text-secondary); }
/* (.user-company-dropdown surface handled in the panel group above — its border
   already uses var(--border) in site.css. .new-user-modal carries no bg of its
   own; it inherits the now-dark .modal-content surface.) */

/* ---- Text inputs / selects / textareas -> --input-bg + --input-border ---- */
/* (.form-control / .claims-wizard-form-row input|select already use
   --surface/--border/--text in site.css and adapt automatically.) */
html[data-theme="dark"] .country-code-select,
html[data-theme="dark"] .client-contact-card .select-wrapper select {
  background-color: var(--input-bg);
  color: var(--text);
}
html[data-theme="dark"] .multiselect-trigger,
html[data-theme="dark"] .multiselect-display,
html[data-theme="dark"] .user-company-control {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .agr-fee-field input,
html[data-theme="dark"] .agr-fee-inline-input,
html[data-theme="dark"] .agr-fee-notes-row textarea {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .claims-wizard-payout-date {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .payout-input-row select {
  background: var(--input-bg);
  color: var(--text);
  /* border stays var(--primary) from site.css — deliberate accent, untouched. */
}
/* .claims-wizard-status-select / .claims-wizard-priority-select hardcode white bg,
   #D0D5DD border and #344054 text. Neutralise the SURFACE only; their orange
   :hover / :focus accent (#EC7B29) is on separate rules and is left intact. */
html[data-theme="dark"] .claims-wizard-status-select,
html[data-theme="dark"] .claims-wizard-priority-select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* .claim-email-modal inputs/dropdowns hardcode #fff bg + #dedede border. */
html[data-theme="dark"] .claim-email-modal .form-control {
  background: var(--input-bg);
  border-color: var(--input-border);
}
/* .claims-wizard-currency-symbol is the input-adjacent prefix box (#f9fafb). */
html[data-theme="dark"] .claims-wizard-currency-symbol {
  background: var(--input-bg);
}

/* ---- Secondary / outline buttons -> --surface + --border, hover --hover-bg ---- */
html[data-theme="dark"] .btn-cancel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-cancel:hover { background: var(--hover-bg); }
html[data-theme="dark"] .btn-export {
  background-color: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .btn-export:hover {
  background-color: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}
/* .btn-primary-outline: keep orange text + orange border (brand accent);
   only neutralise the white fill so it isn't a light island on dark. */
html[data-theme="dark"] .btn-primary-outline { background: var(--surface); }
/* .btn-cost-type-chip (inactive): white pill. .active variant (orange fill) left. */
html[data-theme="dark"] .btn-cost-type-chip,
html[data-theme="dark"] .btn-additional-cost-chip,
html[data-theme="dark"] .btn-dp-cost-chip { background: var(--surface); }
html[data-theme="dark"] .btn-cost-type-chip:hover,
html[data-theme="dark"] .btn-additional-cost-chip:hover,
html[data-theme="dark"] .btn-dp-cost-chip:hover { background: var(--hover-bg); }
/* .filter-btn-outline (inactive): white + near-black text/icons.
   .filter-active (orange) is a separate rule and is deliberately left colored. */
html[data-theme="dark"] .filter-btn-outline {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .filter-btn-outline:hover {
  background: var(--hover-bg);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .filter-btn-outline i { color: var(--text-secondary); }
/* .group-member-btn (plain): white pill. The .make-parent/.make-child/.remove
   colored variants are deliberately left as-is. */
html[data-theme="dark"] .group-member-btn {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .group-member-btn:hover { background: var(--hover-bg); }
/* .claim-email-modal .btn-secondary / .btn-cancel: white + #dedede border. */
html[data-theme="dark"] .claim-email-modal .btn-secondary,
html[data-theme="dark"] .claim-email-modal .btn-cancel {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .claim-email-modal .btn-secondary:hover,
html[data-theme="dark"] .claim-email-modal .btn-cancel:hover {
  background: var(--hover-bg);
  border-color: var(--border);
}

/* ---- Header + dashboard chrome icon/text contrast (P0) ----------------------
   Scan-confirmed near-black-on-dark controls in dark mode (cr ~1.0-1.2):
     .header-icon-btn  -> #101828 bell/envelope/bug icons on the dark header
     .cal-nav-btn      -> #1f2937 calendar prev/next glyphs
     .quick-action-*   -> #201B16 dashboard quick-action label/icon
   A higher-specificity literal-color rule wins over the token-based color in
   these spots, so we mirror !important to guarantee the dark control reads.
   Brand-accent variants keep the orange (--primary-text); neutral chrome uses
   --text-secondary (icons) / --text (glyphs). All html[data-theme="dark"]-gated
   so light is byte-identical. */
html[data-theme="dark"] .header-icon-btn { color: var(--text-secondary) !important; }
html[data-theme="dark"] .header-icon-btn:hover { color: var(--text) !important; }
html[data-theme="dark"] .cal-nav-btn,
html[data-theme="dark"] .cal-nav-btn i { color: var(--text) !important; }
/* feature #8 — the dashboard (.quick-action-*) and claim rail (.claims-wizard-quick-action-*)
   quick-action buttons were redesigned to a fully theme-tokenised hierarchy
   (neutral-outline secondary / brand-fill primary / danger). Those tokens already
   resolve correctly in dark, so the old rainbow-era dark overrides here (which forced
   the whole stack to orange and re-pointed the retired -dark/transfer variants) were
   removed — they now flatten the hierarchy. Dark values come from the tokens. */

/* ---- App-wide chart text/grid legibility in dark (P0) -----------------------
   ApexCharts everywhere (Reports, Dashboard, Monitoring). Many charts bypass the
   chart-theme.js themer and create ApexCharts directly with hard-coded axis/label
   fills (e.g. #0f172a via labels.style.colors or text.setAttribute('fill',…)),
   which render near-black on a dark chart surface. This CSS recolours the
   RENDERED svg text (CSS fill beats the presentation attribute / inline style),
   so it works regardless of how the chart was built — WITHOUT mutating the DOM
   fill attributes, so export clones keep the original (dark) colours and stay
   legible on white. Data labels (.apexcharts-datalabel) are excluded: they sit
   on coloured slices/bars where the page picks a contrasting colour. The export
   path additionally forces #373d3f via ReportExportRenderer + svgToPngDataUri. */
html[data-theme="dark"] .apexcharts-canvas text:not(.apexcharts-datalabel) {
  fill: var(--text-secondary) !important;
}
html[data-theme="dark"] .apexcharts-legend-text { color: var(--text-secondary) !important; }
html[data-theme="dark"] .apexcharts-gridline,
html[data-theme="dark"] .apexcharts-grid-borders line { stroke: rgba(255, 255, 255, 0.09) !important; }
html[data-theme="dark"] .apexcharts-tooltip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .apexcharts-tooltip-title {
  background: var(--surface-3, var(--surface-2)) !important;
  border-bottom-color: var(--border) !important;
}
html[data-theme="dark"] .apexcharts-xaxistooltip,
html[data-theme="dark"] .apexcharts-yaxistooltip {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
/* Dark polish: gently desaturate + dim chart SERIES FILLS so large bright slices
   / bars (e.g. the PBIX neon-yellow pie) read as accents rather than glow on the
   dark surface, while staying distinguishable. Display-only filter (no DOM
   mutation) → PDF/Print/DOCX exports keep full PBIX saturation (the export doc
   has no data-theme="dark"). Axis text/data labels are separate elements, so the
   chart-text legibility above is unaffected. */
html[data-theme="dark"] .apexcharts-pie-area,
html[data-theme="dark"] .apexcharts-bar-area,
html[data-theme="dark"] .apexcharts-area-series .apexcharts-area,
html[data-theme="dark"] .apexcharts-radialBar-area,
html[data-theme="dark"] .apexcharts-slices path {
  filter: saturate(0.82) brightness(0.9);
}
/* ApexCharts' built-in export menu (.apexcharts-menu) is kept in the DOM but
   hidden (opacity:0) — the visible toolbar uses custom copy/download icons. It
   still has a #fff fill, so a strict scan flags it as a (hidden) white island.
   Dark-style it so it's correct if a future chart re-enables it AND the scan no
   longer false-positives. */
html[data-theme="dark"] .apexcharts-menu {
  background: var(--surface-2) !important;
  border-color: var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
html[data-theme="dark"] .apexcharts-menu-item { color: var(--text) !important; }
html[data-theme="dark"] .apexcharts-menu-item:hover { background: var(--hover-bg) !important; }

/* Page background safety net: body uses var(--bg) but a few pages (e.g.
   EmailTracking) leave their content containers transparent, and a stray
   later-loaded rule can repaint body light — which shows through as a light page
   behind dark chrome. Pin body to the dark bg in dark mode (0,2,1 specificity).
   Light is untouched. Real generated-artifact surfaces keep their own light fill. */
html[data-theme="dark"] body { background: var(--bg); }

/* ---- Light-gray sub-surfaces -> --surface-2 ---- */
html[data-theme="dark"] .claims-wizard-cost-table-header,
html[data-theme="dark"] .claims-wizard-cost-table-footer,
html[data-theme="dark"] .claims-wizard-info-bar,
html[data-theme="dark"] .multiselect-option,
html[data-theme="dark"] .group-members-list .group-member-row {
  background: var(--surface-2);
}
html[data-theme="dark"] .group-members-list .group-member-row {
  border-color: var(--border);
}
/* .data-table tr.group-member-row (Clients LIST grouped child rows): site.css
   gives these a literal #f8f9fb fill (+ #f0f2f6 hover) which renders as a
   below-the-fold white island on /Clients in dark. The earlier override only
   covered the wizard's `.group-members-list` context, not the rendered table
   row. Use the elevated surface so grouped children stay distinct from the
   parent row; keep the primary accent left-border (it reads fine on dark). */
html[data-theme="dark"] .data-table tr.group-member-row {
  background: var(--surface-2);
}
html[data-theme="dark"] .data-table tr.group-member-row:hover {
  background: var(--table-row-hover);
}

/* ---- Hover washes -> --table-row-hover / --hover-bg ---- */
html[data-theme="dark"] .data-table tbody tr:hover {
  background: var(--table-row-hover);
}
html[data-theme="dark"] .agr-card-header:hover { background: var(--hover-bg); }
html[data-theme="dark"] .multiselect-option:hover { background: var(--hover-bg); }

/* ---- Neutral chips -> --surface-2, --text-secondary, --border ---- */
html[data-theme="dark"] .claims-filter-chip,
html[data-theme="dark"] .clients-filter-chip {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-color: var(--border);
}
/* .claims-filter-chip:hover is a deliberate red "remove" affordance — left as-is. */
/* .multiselect-badge keeps its orange border (accent); only neutralise the white
   fill so the badge body is not a light island. */
html[data-theme="dark"] .multiselect-badge { background: var(--surface-2); }

/* ---- Neutral status pills (.status-active / .status-inactive) -> dark chips ----
   site.css gives these a near-white fill (#f8fafc) + light border (#d0d5dd) which
   reads as a light island on dark rows. Neutralise only the pill SURFACE/border/text;
   the green/red status DOT (::before) keeps its own semantic color (untouched). */
html[data-theme="dark"] .status-active,
html[data-theme="dark"] .status-inactive {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text);
}

/* ---- Semantic claim-status pills (.status-open / -inprogress / -underreview /
   -approved / -denied / -done) -> dark-tinted chips (item 30 re-entry) ----
   site.css:1388-1440 gives these LIGHT pastel fills (open=#e0e7ff lavender,
   inprogress=#fef0c7, …) with dark text. On dark rows they read as light islands
   (the reviewer confirmed .status-open computing rgb(224,231,255)). The mild
   .status-badge filter below can't darken a pastel, and only .status-active/
   -inactive had an override. Give each a LOW-lightness tint of its own hue +
   legible light text so the semantic distinction survives (the reviewer asked for
   ALL status colors, not a flat neutral). Dots (::before) keep/lighten their
   semantic color so they stay visible on dark. Dark-gated; light byte-identical. */
html[data-theme="dark"] .status-open      { background: #2b3350; color: #c7d2fe; }
html[data-theme="dark"] .status-open::before      { background: #8b9bf5; }
html[data-theme="dark"] .status-inprogress { background: #3a2c10; color: #fcd489; }
html[data-theme="dark"] .status-underreview { background: #38152c; color: #f4b6dd; }
html[data-theme="dark"] .status-approved  { background: #0f2e1e; color: #86e0ad; }
html[data-theme="dark"] .status-denied    { background: #3a1512; color: #fca29b; }
html[data-theme="dark"] .status-done      { background: #2a2f38; color: #cdd3dc; }
html[data-theme="dark"] .status-done::before      { background: #98a2b3; }

/* Dark polish: claim STAGE pills (.status-badge) carry admin-configured SOLID
   colours via inline style; a few (bright greens/ambers) glow against the dark
   rows. A gentle desaturate/dim softens them to accents without hurting
   readability or distinguishability. Inline-style colours can't be tokenised, so
   a display-only filter is the right tool; light is untouched (dark-gated). */
html[data-theme="dark"] .status-badge {
  filter: saturate(0.88) brightness(0.93);
}

/* =============================================================================
   PAGE-FAMILY DARK ISLANDS  (rollout 2026-06-06)
   -----------------------------------------------------------------------------
   The shared-component block above covers site.css. These per-page CSS files
   hardcode their own white / near-white surfaces (#fff/#ffffff/#fafafa/#f8fafc/
   #fbbfcd/…), light borders (#e4e7ec/#d0d5dd/#e5e5e5/…) and near-black text
   (#0f172a/#1f2937/#111827/#1a1a1a/#344054/#475467/#5B6370/…) that the shared
   rules never touch. Each family below is gated on html[data-theme="dark"] so
   LIGHT (and every >=769px desktop render) stays byte-identical.

   STRATEGY
   - Files that drive themselves off LOCAL design-system variables (email-tracking
     --email-*, mtpl-statistics --stats-*, mtpl-liable --mtpl-*) get those vars
     REMAPPED onto the dark theme tokens, scoped to the page-root element. One
     scoped block neutralises the bulk of the surfaces in those files at once.
   - Remaining hardcoded literals (and files with no local var system) get
     class-level overrides matching the SAME property the source rule sets.

   DELIBERATELY LEFT COLORED (NOT flattened anywhere below): status / stage /
   followup / outbox / kind / activity pills and their dots; semantic alert
   blocks (success/warning/danger washes); brand-orange accents, CTAs, primary
   buttons, focus rings, "today"/selected highlights; column-group header colors
   in the stats matrix table; tooltip chips that are intentionally dark already.
   For elements that carry BOTH a white surface and a brand accent (orange border
   etc.) only the white SURFACE is neutralised; the accent is preserved.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   FAMILY: Dashboard  (wwwroot/css/dashboard/*.css)
   calendar grid, reminder/transfer/schedule/bulk modals, KPI + rail cards.
   These files hardcode #ffffff surfaces, #e4e7ec/#d0d5dd borders, #1f2937/
   #111827/#344054/#475467/#5B6370 text, #f8fafc/#fbfbfc/#fafbfc/#f0f0f0/#fafafa
   sub-surfaces, and a set of warm orange "today / hover / accent" washes
   (#fff8f1/#fff7f1/#fff9f3/#fff4eb/#fff5ec/#fff5f5/#fffaf0/#fff4eb) plus a
   #fffbeb/#fde68a attention block and #fef2f2/#fecaca danger block.
   --------------------------------------------------------------------------- */

/* calendar.css ---------------------------------------------------------------- */
html[data-theme="dark"] .cal-month-grid {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .cal-month-header {
  background: var(--surface-2);
  color: var(--text-secondary);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .cal-month-cell {
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .cal-month-cell:hover { background: var(--hover-bg); }
/* "today" is an intentional brand wash -> keep warm, use the brand tint token. */
html[data-theme="dark"] .cal-month-cell.today { background: var(--primary-light); }
html[data-theme="dark"] .date-number,
html[data-theme="dark"] .cal-reminder-item { color: var(--text); }
html[data-theme="dark"] .date-day-label { color: var(--text-secondary); }
/* dashboard.css list/cell hover washes (#fafafa). */
html[data-theme="dark"] .cal-reminder-row:hover { background: var(--hover-bg); }
@media (max-width: 768px) {
  html[data-theme="dark"] .cal-month-cell { border-bottom-color: var(--border); }
}

/* rail.css — right-hand rail cards (transfers inbox + new-claims feed) --------- */
html[data-theme="dark"] .rail-card,
html[data-theme="dark"] .inbox-card,
html[data-theme="dark"] .claim-feed-card,
html[data-theme="dark"] .claim-feed-card.source-fromclient,
html[data-theme="dark"] .claim-feed-card.source-autoassigned,
html[data-theme="dark"] .claim-source-badge {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .rail-card-header h2 { color: var(--text); }
html[data-theme="dark"] .rail-card-eyebrow { color: var(--text-secondary); }
/* the orange transfer-count pill (#fff4eb) is a brand accent -> brand tint. */
html[data-theme="dark"] .transfer-count-pill { background: var(--primary-light); }

/* shell.css — the page CANVAS itself is a hardcoded light-gray (#f2f2f2) -> --bg,
   else the whole /Dashboard/My background is a glaring light island. */
html[data-theme="dark"] .dashboard-layout.dashboard-page { background: var(--bg); }
html[data-theme="dark"] .dashboard-header-copy h1 { color: var(--text); }
/* shell.css — overview + handler-stat cards, calendar toolbar + day grids ------ */
html[data-theme="dark"] .dashboard-overview-card,
html[data-theme="dark"] .handler-stat-card,
html[data-theme="dark"] .calendar-toolbar,
html[data-theme="dark"] .day-timeline-shell,
html[data-theme="dark"] .cal-day-section,
html[data-theme="dark"] .day-slot-row {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .day-slot-row { border-bottom-color: var(--border); }
html[data-theme="dark"] .day-timeline-header {
  background: var(--surface-2);
  border-bottom-color: var(--border);
  color: var(--text);
}
html[data-theme="dark"] .day-timeline-header .event-count,
html[data-theme="dark"] .day-empty-state { color: var(--text-secondary); }
/* toolbar buttons -> --input-bg surface; the .view-toggle-btn keeps its orange
   border (brand accent) — only the white fill is neutralised. */
html[data-theme="dark"] .cal-today-btn {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* item 19 — the toggle is now a segmented pill: the .view-toggle CONTAINER carries
   the --surface fill (already theme-tokenised), so each btn is a transparent
   segment; the active one keeps the shared --primary rule. */
html[data-theme="dark"] .view-toggle-btn { background: transparent; color: var(--text-secondary); }

/* modals.css — reminder / detail / transfer / schedule / bulk ----------------- */
/* (.modal-content surface + .modal-overlay scrim come from the shared block.) */
html[data-theme="dark"] .reminder-modal .modal-header h2,
html[data-theme="dark"] .transfer-single-modal .modal-header h2,
html[data-theme="dark"] .bulk-action-panel .modal-header h2,
html[data-theme="dark"] .schedule-reminder-title,
html[data-theme="dark"] .transfer-table-title,
html[data-theme="dark"] .schedule-reminder-meta-value,
html[data-theme="dark"] .reminder-detail-modal .detail-row-content,
html[data-theme="dark"] .reminder-detail-modal .detail-row-primary,
html[data-theme="dark"] .reminder-detail-modal .detail-row-secondary,
html[data-theme="dark"] .reminder-detail-modal #viewReminderPriority,
html[data-theme="dark"] .reminder-detail-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal #viewReminderClaimContent a {
  color: var(--text);
}
html[data-theme="dark"] .reminder-modal .form-row label,
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-modal .autocomplete-item,
html[data-theme="dark"] .reminder-modal .btn-cancel,
html[data-theme="dark"] .reminder-detail-modal .detail-row-icon,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .transfer-single-modal .transfer-single-heading,
html[data-theme="dark"] .transfer-single-modal .transfer-single-subtitle,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .transfer-table-from-cell,
html[data-theme="dark"] .transfer-inbox-from-cell,
html[data-theme="dark"] .transfer-inbox-date-cell,
html[data-theme="dark"] .transfer-table-note-snippet,
html[data-theme="dark"] .transfer-table-subtitle,
html[data-theme="dark"] .schedule-form-row label,
html[data-theme="dark"] .schedule-reminder-meta-row,
html[data-theme="dark"] .schedule-reminder-meta-label,
html[data-theme="dark"] .transfer-inbox-empty,
html[data-theme="dark"] .bulk-action-panel .reschedule-section-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times small,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info span,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row label {
  color: var(--text-secondary);
}
/* inputs / selects / textareas across the dashboard modals */
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .bulk-action-panel .bulk-field input,
html[data-theme="dark"] .bulk-action-panel .select-wrapper select,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime,
html[data-theme="dark"] .bulk-action-panel .quick-select-btn,
html[data-theme="dark"] .bulk-action-panel .btn-cancel,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row select,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row textarea,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row .colleague-autocomplete-input,
html[data-theme="dark"] .quick-select-btn,
html[data-theme="dark"] .bulk-tab {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* floating autocomplete dropdown panels -> --surface */
html[data-theme="dark"] .reminder-modal .autocomplete-dropdown,
html[data-theme="dark"] .reminder-modal .autocomplete-item {
  background: var(--surface);
  border-color: var(--border);
}
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover,
html[data-theme="dark"] .reminder-detail-modal .btn-icon:hover,
html[data-theme="dark"] .transfer-inbox-row:hover,
html[data-theme="dark"] .bulk-table tbody tr:hover,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody tr:hover { background: var(--hover-bg); }
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover { color: var(--text); }
/* light-gray info / note blocks -> --surface-2 */
html[data-theme="dark"] .transfer-single-info,
html[data-theme="dark"] .schedule-info,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .incoming-transfer-note,
html[data-theme="dark"] .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table-wrapper,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td { background: var(--surface-2); }
html[data-theme="dark"] .bulk-action-panel .bulk-table-wrapper,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th { border-color: var(--border); }
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-title-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-date-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-claim-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th { color: var(--text-secondary); }
html[data-theme="dark"] .bulk-table tbody td { border-bottom-color: var(--border); }
html[data-theme="dark"] .bulk-table tbody tr:hover,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody tr:hover { background: var(--hover-bg); }
/* warm orange washes (hover / schedule / incoming-transfer) -> brand tint token */
html[data-theme="dark"] .transfer-inbox-row:hover,
html[data-theme="dark"] .incoming-transfer-schedule-btn,
html[data-theme="dark"] .schedule-transfer-modal .schedule-info,
html[data-theme="dark"] .btn-decline,
html[data-theme="dark"] .bulk-action-panel .bulk-tab:hover:not(.active),
html[data-theme="dark"] .bulk-action-panel .quick-select-btn:hover { background: var(--primary-light); }
/* attention (amber) + danger washes -> semantic tokens */
html[data-theme="dark"] .bulk-attention {
  background: var(--warning-bg);
  border-color: var(--warning-text);
  color: var(--warning-text);
}
html[data-theme="dark"] .bulk-attention-danger {
  background: var(--danger-bg);
  border-color: var(--danger-text);
  color: var(--danger-text);
}
html[data-theme="dark"] .schedule-transfer-modal .schedule-info { border-color: var(--border); }

/* kpi.css — most cards already read var(--surface); the literal islands are the
   pipeline tile (#fff) and the green/yellow/red health washes. The health washes
   are SEMANTIC status encodings -> remap to the dark status-bg/-text tokens so
   they stay legible (not flattened to a neutral surface). */
html[data-theme="dark"] .dashboard-pipeline-tile {
  background: var(--surface-2);
  border-color: var(--border);
}
html[data-theme="dark"] .dashboard-pipeline-code {
  background: color-mix(in srgb, var(--pipeline-color) 22%, var(--surface));
}
html[data-theme="dark"] .dashboard-health-signal.green,
html[data-theme="dark"] .dashboard-health-overall.green {
  background: var(--success-bg); color: var(--success-text);
}
html[data-theme="dark"] .dashboard-health-signal.yellow,
html[data-theme="dark"] .dashboard-health-overall.yellow {
  background: var(--warning-bg); color: var(--warning-text);
}
html[data-theme="dark"] .dashboard-health-signal.red,
html[data-theme="dark"] .dashboard-health-overall.red {
  background: var(--danger-bg); color: var(--danger-text);
}

/* -----------------------------------------------------------------------------
   FAMILY: Email tracking  (wwwroot/css/email-tracking.css)
   Driven by --email-* on .email-tracking-page plus many hardcoded literals.
   Remap the local vars, then mop up the literals not covered by a var.
   --------------------------------------------------------------------------- */
/* Step 1: remap the local vars (handles --surface panels' borders + muted/soft). */
html[data-theme="dark"] .email-tracking-page {
  --email-panel-border: var(--border);
  --email-muted-bg: var(--surface-2);
  --email-soft-orange: var(--primary-light);
}
/* Step 2: headings + blue-gray meta text literals (#111827/#475467/#667085/
   #1f2937/#64748b/#94a3b8/#334155/#0f172a) that aren't bound to a var. */
html[data-theme="dark"] .email-thread-list-title h2,
html[data-theme="dark"] .email-thread-detail-header h2,
html[data-theme="dark"] .email-tracking-side-panel h2,
html[data-theme="dark"] .email-compose-header h2,
html[data-theme="dark"] .email-message-body,
html[data-theme="dark"] .email-body-content,
html[data-theme="dark"] .email-thread-row-top strong,
html[data-theme="dark"] .email-recipient-label,
html[data-theme="dark"] .email-outbox-subject a { color: var(--text); }
html[data-theme="dark"] .email-count-pill,
html[data-theme="dark"] .email-filter,
html[data-theme="dark"] .email-search i,
html[data-theme="dark"] .email-search input,
html[data-theme="dark"] .email-thread-row-top span,
html[data-theme="dark"] .email-thread-preview,
html[data-theme="dark"] .email-thread-meta,
html[data-theme="dark"] .email-confirm-body,
html[data-theme="dark"] .email-quick-reply-label-inline,
html[data-theme="dark"] .email-outbox-empty,
html[data-theme="dark"] .email-followup-empty { color: var(--text-secondary); }
/* Step 3: hardcoded white surfaces / light input + filter borders. */
html[data-theme="dark"] .email-search input,
html[data-theme="dark"] .email-quick-reply-to,
html[data-theme="dark"] .email-quick-reply-cc,
html[data-theme="dark"] .email-quick-reply-body,
html[data-theme="dark"] .email-confirm-modal,
html[data-theme="dark"] .email-quick-reply-card,
html[data-theme="dark"] .email-thread-detail,
html[data-theme="dark"] .email-tracking-page .form-control {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* neutral source/status badge (#eef2f7) -> --surface-2; the colored is-overdue/
   is-replied/is-draft status variants stay semantic and are NOT listed. */
html[data-theme="dark"] .email-source-badge,
html[data-theme="dark"] .email-status-badge {
  background: var(--surface-2);
  color: var(--text-secondary);
}
/* neutral "outbound" sender avatar circle (#eef2f7) -> --surface-3. The warm
   inbound (#ffe5d2) + yellow system (#fff3cc) avatars are intentionally tinted
   and are left as-is. */
html[data-theme="dark"] .email-avatar.is-outbound {
  background: var(--surface-3);
  color: var(--text);
}
/* the page's many small white controls (selects / chips / toggles / compose
   fields / outbox chips+cards / links) -> --input-bg surface + --border. */
html[data-theme="dark"] .email-timer-relative-inputs select,
html[data-theme="dark"] .email-preset-chip,
html[data-theme="dark"] .email-source-filter select,
html[data-theme="dark"] .email-modal-mode-toggle,
html[data-theme="dark"] .email-modal-preset,
html[data-theme="dark"] .email-compose-field textarea,
html[data-theme="dark"] .email-compose-scheduled-at,
html[data-theme="dark"] .email-followup-link,
html[data-theme="dark"] .email-outbox-chip,
html[data-theme="dark"] .email-outbox-card,
html[data-theme="dark"] .email-outbox-filter-field select,
html[data-theme="dark"] .email-side-open-claim,
html[data-theme="dark"] .email-thread-toggle-btn,
html[data-theme="dark"] .email-followup-tab,
html[data-theme="dark"] .email-outbox-tab {
  background: var(--input-bg);
  border-color: var(--border);
  color: var(--text-secondary);
}
/* their warm #fff7ea hover/active washes -> brand tint (kept warm, not white). */
html[data-theme="dark"] .email-thread-toggle-btn:hover,
html[data-theme="dark"] .email-preset-chip:hover,
html[data-theme="dark"] .email-followup-link:hover,
html[data-theme="dark"] .email-side-open-claim:hover,
html[data-theme="dark"] .email-followup-tab.is-active,
html[data-theme="dark"] .email-outbox-tab.is-active,
html[data-theme="dark"] .email-outbox-link:hover { background: var(--primary-light); }
html[data-theme="dark"] .email-filter {
  background: var(--surface-2);
  border-color: var(--border);
}
/* thread-row default text (#344054) + the #f6f7f9 hover/active wash. */
html[data-theme="dark"] .email-thread-row { color: var(--text-secondary); }
html[data-theme="dark"] .email-thread-row:hover,
html[data-theme="dark"] .email-thread-row.is-active,
html[data-theme="dark"] .email-followup-row:hover,
html[data-theme="dark"] .email-outbox-row:hover { background: var(--hover-bg); }
/* (.is-active keeps its inset orange accent bar — that rule is untouched.) */
/* .email-filter.is-active (#111827 dark fill + white text) reads fine on dark and
   is an intentional active state — left untouched. status / followup / outbox /
   tab pills stay semantic — explicitly NOT overridden. */

/* -----------------------------------------------------------------------------
   FAMILY: MTPL statistics  (wwwroot/css/mtpl-statistics.css)
   Driven by --stats-* on .stats-page. Remap surface/border/text vars; the
   column-group colors (--stats-g1..g7) + matrix header fills are INTENTIONAL
   data-encoding colors and are left as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .stats-page {
  --stats-bg: var(--bg);
  --stats-surface: var(--surface);
  --stats-border: var(--border);
  --stats-text: var(--text);
  --stats-text-muted: var(--text-secondary);
}
/* The .stats-table head/body, .composer-field/.composer-input, .stats-summary-
   badge etc. all read var(--stats-surface|border|text|text-muted) -> covered by
   the remap above. Mop up the literal stragglers: the #fafaf8 row hover and the
   #fffef5 warm inline-edit input. */
html[data-theme="dark"] .stats-table tbody tr:hover { background: var(--hover-bg); }
html[data-theme="dark"] .stats-inline-input {
  background: var(--input-bg);
  color: var(--text);
}
html[data-theme="dark"] .composer-btn-secondary:hover { background: var(--hover-bg); }
/* row-mismatch (#fde2e2 / #fbcfcf) is an intentional error highlight -> danger. */
html[data-theme="dark"] .stats-table tbody tr.row-mismatch td,
html[data-theme="dark"] .stats-table tbody tr.row-mismatch:hover td { background: var(--danger-bg); }
/* the column-group --stats-g1..g7 header colors + the dark tooltip chip
   (#1f2330, already dark) are intentional -> left untouched. */

/* -----------------------------------------------------------------------------
   FAMILY: MTPL liable invoices  (wwwroot/css/mtpl-liable-invoices.css)
   Defines --mtpl-* on :root (light values). Re-point them under dark, scoped to
   the page wrapper so light :root is untouched. Brand orange + soft/line accents
   and the colored stage pills stay as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .mtpl-liable-shell {
  --mtpl-surface: var(--surface);
  --mtpl-border: var(--border);
  --mtpl-text: var(--text);
  --mtpl-muted: var(--text-secondary);
  --mtpl-soft: var(--surface-2);
  /* semantic tonal washes used by the alert/success/danger strips: keep tonal
     (NOT flattened) but move off the light hex so they aren't light islands. */
  --mtpl-warning-soft: var(--warning-bg);
  --mtpl-success-soft: var(--success-bg);
  --mtpl-danger-soft: var(--danger-bg);
}
/* the strips also hardcode their TEXT (#7a5a14 / #1f5333) -> semantic text. */
html[data-theme="dark"] .mtpl-liable-shell .mtpl-alert-strip,
html[data-theme="dark"] .mtpl-liable-shell .mtpl-liable-message,
html[data-theme="dark"] .mtpl-liable-shell .mtpl-success-strip.mtpl-success-strip-mixed { color: var(--warning-text); border-color: var(--warning-text); }
html[data-theme="dark"] .mtpl-liable-shell .mtpl-success-strip { color: var(--success-text); border-color: var(--success-text); }
html[data-theme="dark"] .mtpl-liable-shell .mtpl-liable-message.error { color: var(--danger-text); border-color: var(--danger-text); }
/* The .mtpl-modal-dialog / .mtpl-mode-option / .mtpl-card surfaces all read
   var(--mtpl-surface|border|text), so the remap above covers them. Mop up the
   few literal stragglers: the white recipient input + #fafafb zebra rows.
   (.recipient-pill #eef2ff is a semantic info pill -> left as-is.) */
html[data-theme="dark"] .mtpl-liable-shell .mtpl-recipient-input,
html[data-theme="dark"] .mtpl-liable-shell input[type="text"],
html[data-theme="dark"] .mtpl-liable-shell input[type="search"],
html[data-theme="dark"] .mtpl-liable-shell textarea,
html[data-theme="dark"] .mtpl-liable-shell select {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
html[data-theme="dark"] .mtpl-liable-shell .mtpl-table tbody tr:nth-child(even) td,
html[data-theme="dark"] .mtpl-liable-shell tr.zebra { background: var(--surface-2); }

/* -----------------------------------------------------------------------------
   FAMILY: Claim assignment  (wwwroot/css/claim-assignment.css)
   This file is almost entirely token-driven (.ca-bulk-toolbar / .assignment-
   report-card / .ca-config-* etc. already read var(--surface|border|text)), so
   it auto-adapts. The only literal islands are the amber "sunset"/"ooo" strips,
   which are SEMANTIC notices -> remap to the warning tokens (kept warm/legible,
   not flattened). Fairness-cell rgba(0,0,0,.08) hairlines are left (subtle).
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .claim-assignment-sunset-banner {
  background: var(--warning-bg);
  color: var(--warning-text);
}
html[data-theme="dark"] .claim-assignment-ooo-strip {
  background: var(--warning-bg);
  border-color: var(--warning-text);
  color: var(--warning-text);
}

/* -----------------------------------------------------------------------------
   FAMILY: Admin — Insurer reminders  (wwwroot/css/admin-reminders.css)
   Mostly token-driven already; the alert blocks are semantic. Remap white
   panels, light pills/toolbars (#f8fafc + #d0d5dd) and the activity drawer.
   --------------------------------------------------------------------------- */
/* main cards (.insurer-reminder-branch-card / -log-card) already use --surface.
   White inputs / inline buttons / filter controls -> --input-bg + --input-border. */
html[data-theme="dark"] .reminder-edit-button,
html[data-theme="dark"] .reminder-inline-input,
html[data-theme="dark"] .reminder-inline-cancel,
html[data-theme="dark"] .reminder-filter-mode,
html[data-theme="dark"] .reminder-filter-select,
html[data-theme="dark"] .reminder-filter-helper,
html[data-theme="dark"] .safety-banner-field input {
  background: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text);
}
/* white modal + side drawer surfaces -> --surface (their #-hex scrims handled by
   the shared .modal-overlay rule where the class matches; explicit here too). */
html[data-theme="dark"] .reminders-confirm-modal,
html[data-theme="dark"] .branch-config-drawer,
html[data-theme="dark"] .branch-config-drawer-head {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* light-gray dashed empty-state + card footer -> --surface-2 */
html[data-theme="dark"] .branch-empty-state,
html[data-theme="dark"] .branch-card-footer { background: var(--surface-2); }
/* neutral status pill surface/border -> tokens (the colored *-dot stays semantic). */
html[data-theme="dark"] .reminders-activity-chip,
html[data-theme="dark"] .reminders-status-pill.status-previewed,
html[data-theme="dark"] .reminders-status-pill.status-skipped {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}
/* the colored per-status reminders-*-pill variants (sent/drafted/acknowledged/
   failed) stay SEMANTIC — NOT overridden. */
/* safety banner tonal variants: light hex bg + dark text -> dark semantic tokens
   (kept tonal/legible, not flattened to a neutral surface). */
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-info,
html[data-theme="dark"] .branch-chip.info {
  background: var(--info-bg); color: var(--info-text); border-color: var(--info-text);
}
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-warning,
html[data-theme="dark"] .branch-chip.warning {
  background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text);
}
html[data-theme="dark"] .branch-chip.live {
  background: var(--primary-light); color: var(--primary-text);
}
html[data-theme="dark"] .insurer-reminders-safety-banner.safety-tone-danger,
html[data-theme="dark"] .branch-chip.danger,
html[data-theme="dark"] .insurer-reminders-alert.danger {
  background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-text);
}
html[data-theme="dark"] .insurer-reminders-alert.success {
  background: var(--success-bg); color: var(--success-text); border-color: var(--success-text);
}
html[data-theme="dark"] .insurer-reminders-alert.warning {
  background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-text);
}
/* neutral chips + the neutral preview-stat card + inline code chips + config
   items -> --surface-2. */
html[data-theme="dark"] .branch-chip.paused,
html[data-theme="dark"] .branch-chip.neutral,
html[data-theme="dark"] .branch-preview-stat,
html[data-theme="dark"] .branch-card-code code,
html[data-theme="dark"] .branch-config-value code,
html[data-theme="dark"] .branch-config-item {
  background: var(--surface-2);
  color: var(--text-secondary);
}
/* (.insurer-reminders-alert success/warning/danger washes + .safety-tone-danger
   reuse the same hex pattern; the danger banner is handled by its own tonal rule
   in admin-reminders via --danger; left tonal.) */

/* -----------------------------------------------------------------------------
   FAMILY: Admin — Insurers directory  (wwwroot/css/admin-insurers.css)
   Token-driven toolbar/cards already adapt; mop up the literal #f8fafc/#fafafa
   table surfaces, #d0d5dd pill borders and #344054 pill text.
   --------------------------------------------------------------------------- */
/* (.insurers-drawer / .insurers-toolbar / .insurers-result-count already use
   --surface.) Light table headers + sub-surfaces -> --surface-2. */
html[data-theme="dark"] .insurers-table th,
html[data-theme="dark"] .insurers-contacts-table th,
html[data-theme="dark"] .insurers-contact-row-inactive,
html[data-theme="dark"] .insurers-readonly-grid > div,
html[data-theme="dark"] .insurers-contact-form,
html[data-theme="dark"] .insurers-usage-pipeline-list div { background: var(--surface-2); }
/* zebra / icon-button hover washes -> --hover-bg */
html[data-theme="dark"] .insurers-row:hover,
html[data-theme="dark"] .insurers-icon-button:hover { background: var(--hover-bg); }
/* neutral badge + chip pill surface/border -> tokens (their colored variants,
   e.g. .insurers-badge-warning #fff7ed, stay semantic and are NOT listed). */
html[data-theme="dark"] .insurers-badge,
html[data-theme="dark"] .insurers-chip {
  background: var(--surface-2);
  border-color: var(--border);
  color: var(--text-secondary);
}

/* -----------------------------------------------------------------------------
   FAMILY: COBX directory  (wwwroot/css/cobx-directory.css)
   Token-driven cells adapt; neutralise the translucent-white sticky toolbar,
   #fbfcfd zebra rows, #f8fafc/#fafafa/#f8f9fb sub-surfaces and #fff modals.
   The colored .cobx-kind-chip[data-kind] chips are semantic and left as-is.
   --------------------------------------------------------------------------- */
html[data-theme="dark"] .cobx-toolbar {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}
/* table header / zebra / footer / summary sub-surfaces -> --surface-2 */
html[data-theme="dark"] .cobx-table th,
html[data-theme="dark"] .cobx-footer,
html[data-theme="dark"] .cobx-relation-footer,
html[data-theme="dark"] .cobx-drawer-summary > div,
html[data-theme="dark"] .cobx-import-grid > div,
html[data-theme="dark"] .cobx-selected-target,
html[data-theme="dark"] .cobx-inactive-pill,
html[data-theme="dark"] .cobx-relation-item--inactive { background: var(--surface-2); }
/* hover washes -> --hover-bg */
html[data-theme="dark"] .cobx-table tbody tr:hover,
html[data-theme="dark"] .cobx-icon-button:hover,
html[data-theme="dark"] .cobx-mini-button:hover,
html[data-theme="dark"] .cobx-relation-item:hover,
html[data-theme="dark"] .cobx-target-option:hover,
html[data-theme="dark"] .cobx-target-option.selected { background: var(--hover-bg); }
/* white floating surfaces -> --surface */
html[data-theme="dark"] .cobx-relation-item,
html[data-theme="dark"] .cobx-multi-popover,
html[data-theme="dark"] .cobx-multi-popover input[type="search"],
html[data-theme="dark"] .cobx-multi-option input[type="checkbox"] {
  background: var(--surface);
  border-color: var(--border);
  color: var(--text);
}
/* progress track -> neutral surface-3 */
html[data-theme="dark"] .cobx-import-progress-track { background: var(--surface-3); }
/* light pill border + text on the neutral .cobx-badge -> tokens (its colored
   dot ::before stays semantic). */
html[data-theme="dark"] .cobx-badge {
  background: var(--surface-2);
  border-color: var(--border);
}
/* success / error toasts -> semantic tokens */
html[data-theme="dark"] .cobx-toast {
  background: var(--success-bg);
  border-color: var(--success-text);
}
html[data-theme="dark"] .cobx-toast.error {
  background: var(--danger-bg);
  border-color: var(--danger-text);
}
/* .cobx-kind-chip[data-kind] + contact badges stay semantic — NOT overridden. */

/* -----------------------------------------------------------------------------
   FAMILY: Admin — misc (invoice-settings / mass-mailing / agreement-settings /
   claim-section-layout). These files already read var(--surface|border|text|…)
   with light hex fallbacks, so they auto-adapt under dark. Only their few
   hardcoded-white literals need help.
   --------------------------------------------------------------------------- */
/* mass-mailing: white recipient-card states + template/skip swatches. */
html[data-theme="dark"] .mm-rcp-card.is-skipped { background: var(--surface-2); }
html[data-theme="dark"] .mm-sw-tpl { background: var(--primary-light); border-color: var(--border); }
html[data-theme="dark"] .mm-sw-skp { background: var(--surface-2); border-color: var(--border); }
/* invoice-settings: the white Saskaita123 config card forced bg. */
html[data-theme="dark"] .invsettings-s123-card,
html[data-theme="dark"] .invsettings-panel,
html[data-theme="dark"] .invsettings-modal { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ════════════════════════════════════════════════════════════════════════
   DASHBOARD FAMILY — DARK TEXT CONTRAST (2026-06-07)
   dashboard/*.css hard-codes near-black text (#1f2937/#344054/#111827
   primary; #475467/#6b7280/#5B6370 secondary) with no dark override →
   ~1.2:1 on dark. primary→--text, secondary→--text-secondary. Every
   individual selector is html[data-theme="dark"]-gated → light 1:1.
   Accent colours (blue/green/orange/red) are intentionally left.
   ════════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .date-number,
html[data-theme="dark"] .cal-reminder-item,
html[data-theme="dark"] .hive-toast-message strong,
html[data-theme="dark"] .hive-toast-undo:hover,
html[data-theme="dark"] .hive-toast-close:hover,
html[data-theme="dark"] .reminder-modal .modal-header h2,
html[data-theme="dark"] .reminder-modal .form-row label,
html[data-theme="dark"] .reminder-modal .form-row input[type="text"],
html[data-theme="dark"] .reminder-modal .form-row textarea,
html[data-theme="dark"] .reminder-modal .form-row select,
html[data-theme="dark"] .reminder-modal .autocomplete-toggle:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-clear:hover,
html[data-theme="dark"] .reminder-modal .autocomplete-item,
html[data-theme="dark"] .reminder-modal .btn-cancel,
html[data-theme="dark"] .reminder-detail-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal .detail-row-content,
html[data-theme="dark"] .reminder-detail-modal .detail-row-primary,
html[data-theme="dark"] .reminder-detail-modal .detail-row-secondary,
html[data-theme="dark"] .reminder-detail-modal #viewReminderClaimContent a,
html[data-theme="dark"] .reminder-detail-modal #viewReminderPriority,
html[data-theme="dark"] .transfer-single-modal .modal-header h2,
html[data-theme="dark"] .transfer-single-modal .transfer-single-info,
html[data-theme="dark"] .transfer-single-modal .transfer-single-heading,
html[data-theme="dark"] .transfer-table-title,
html[data-theme="dark"] .transfer-inbox-from-cell,
html[data-theme="dark"] .transfer-inbox-date-cell,
html[data-theme="dark"] .incoming-transfer-note,
html[data-theme="dark"] .schedule-form-row label,
html[data-theme="dark"] .schedule-reminder-title,
html[data-theme="dark"] .schedule-reminder-meta-label,
html[data-theme="dark"] .schedule-reminder-meta-value,
html[data-theme="dark"] .bulk-action-panel .modal-header h2,
html[data-theme="dark"] .bulk-action-panel .bulk-field input,
html[data-theme="dark"] .bulk-action-panel .select-wrapper select,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime,
html[data-theme="dark"] .bulk-action-panel .reschedule-section-label,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times-label,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info span,
html[data-theme="dark"] .bulk-action-panel .btn-cancel,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row label,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row select,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row textarea,
html[data-theme="dark"] .bulk-action-panel .bulk-transfer-fields .bulk-transfer-row .colleague-autocomplete-input,
html[data-theme="dark"] .colleague-autocomplete-clear:hover,
html[data-theme="dark"] .rail-card-header h2,
html[data-theme="dark"] .inbox-card-title,
html[data-theme="dark"] .claim-card-number,
html[data-theme="dark"] .quick-action-transfer,
html[data-theme="dark"] .dashboard-header-copy h1,
html[data-theme="dark"] .handler-stat-value,
html[data-theme="dark"] .overview-name,
html[data-theme="dark"] .overview-stat-value,
html[data-theme="dark"] .cal-nav-btn,
html[data-theme="dark"] .cal-nav-title,
html[data-theme="dark"] .day-timeline-header,
html[data-theme="dark"] .day-reminder-title,
html[data-theme="dark"] .cal-reminder-info-title,
html[data-theme="dark"] .day-reminder-complete,
html[data-theme="dark"] .cal-mark-complete,
html[data-theme="dark"] .priority-normal,
html[data-theme="dark"] .priority-high,
html[data-theme="dark"] .cal-day-header { color: var(--text); }
html[data-theme="dark"] .cal-month-header,
html[data-theme="dark"] .date-day-label,
html[data-theme="dark"] .hive-toast-message small,
html[data-theme="dark"] .hive-toast-undo,
html[data-theme="dark"] .hive-toast-close,
html[data-theme="dark"] .reminder-modal .form-row input::placeholder,
html[data-theme="dark"] .reminder-modal .form-row textarea::placeholder,
html[data-theme="dark"] .reminder-modal .form-row select:invalid,
html[data-theme="dark"] .reminder-modal .autocomplete-toggle,
html[data-theme="dark"] .reminder-modal .autocomplete-clear,
html[data-theme="dark"] .reminder-modal .btn-close-modal,
html[data-theme="dark"] .reminder-detail-modal .btn-icon,
html[data-theme="dark"] .reminder-detail-modal .detail-row-icon,
html[data-theme="dark"] .transfer-single-modal .transfer-single-subtitle,
html[data-theme="dark"] .transfer-single-modal .transfer-single-meta,
html[data-theme="dark"] .transfer-inbox-empty,
html[data-theme="dark"] .transfer-table-subtitle,
html[data-theme="dark"] .transfer-table-note-snippet,
html[data-theme="dark"] .transfer-table-empty,
html[data-theme="dark"] .schedule-reminder-meta-row,
html[data-theme="dark"] .schedule-reminder-meta-dot,
html[data-theme="dark"] .bulk-action-panel .btn-close-modal,
html[data-theme="dark"] .bulk-action-panel .bulk-field input::placeholder,
html[data-theme="dark"] .bulk-action-panel #rescheduleNewTime::placeholder,
html[data-theme="dark"] .bulk-action-panel .bulk-table thead th,
html[data-theme="dark"] .bulk-action-panel .bulk-table tbody td,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-title-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-date-cell,
html[data-theme="dark"] .bulk-action-panel .bulk-table .bulk-claim-cell,
html[data-theme="dark"] .bulk-action-panel .reschedule-keep-times small,
html[data-theme="dark"] .bulk-action-panel .quick-select-btn,
html[data-theme="dark"] .bulk-action-panel .bulk-footer-info,
html[data-theme="dark"] .colleague-autocomplete-clear,
html[data-theme="dark"] .rail-card-eyebrow,
html[data-theme="dark"] .inbox-tab,
html[data-theme="dark"] .inbox-tab span,
html[data-theme="dark"] .transfer-rail-list:empty::before,
html[data-theme="dark"] .inbox-card-meta,
html[data-theme="dark"] .inbox-card-desc,
html[data-theme="dark"] .claim-card-desc,
html[data-theme="dark"] .claim-card-time,
html[data-theme="dark"] .handler-stat-head,
html[data-theme="dark"] .handler-stat-unit,
html[data-theme="dark"] .handler-stat-foot,
html[data-theme="dark"] .handler-stat-sublabel,
html[data-theme="dark"] .overview-role,
html[data-theme="dark"] .overview-stat-label,
html[data-theme="dark"] .cal-today-btn,
html[data-theme="dark"] .day-timeline-header .event-count,
html[data-theme="dark"] .day-empty-state,
html[data-theme="dark"] .day-slot-time,
html[data-theme="dark"] .day-reminder-claim,
html[data-theme="dark"] .cal-reminder-info-claim,
html[data-theme="dark"] .cal-month-claim,
html[data-theme="dark"] .day-reminder-notes,
html[data-theme="dark"] .cal-reminder-info-desc,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-title,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-claim,
html[data-theme="dark"] .day-reminder-card.completed .day-reminder-notes,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-title,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-claim,
html[data-theme="dark"] .cal-reminder-row.completed .cal-reminder-info-desc,
html[data-theme="dark"] .cal-day-header .event-count,
html[data-theme="dark"] .cal-reminder-time,
html[data-theme="dark"] .cal-reminder-empty { color: var(--text-secondary); }

/* Claims header tab counts (.claims-tab-count): on INACTIVE (dark) tabs the
   pill bg rgba(0,0,0,.1) vanishes on dark, leaving the count text low-contrast —
   give it a light translucent pill + bright text. But the ACTIVE tab is GOLD
   (var(--gold) #ffd074) with BLACK text in BOTH themes, so its count must stay
   DARK on a dark-translucent pill (matching the active label + light mode) —
   light text there is the ~1.2:1 bug. Light untouched. */
html[data-theme="dark"] .claims-tab-count {
    background: rgba(255, 255, 255, 0.12);
    color: var(--text);
}
html[data-theme="dark"] .claims-tab.active .claims-tab-count {
    background: rgba(0, 0, 0, 0.15);
    color: #000;
}

/* ── Final handoff: claim quick-action modal + landing-card dark contrast ─────── */
/* Priority chips (dashboard.css .priority-*): light-tinted semantic fills
   (#FEE2E2/#FEF3C7/#F3F4F6/#D1FAE5) become light islands with low-contrast text
   in dark (reminder modal ~1.0–1.6:1). Map to the dark status pairs. The
   .selected outline (var(--primary)) is preserved. */
html[data-theme="dark"] .priority-urgent {
    background: var(--danger-bg); color: var(--danger-text); border-color: var(--danger-bg);
}
html[data-theme="dark"] .priority-high {
    background: var(--warning-bg); color: var(--warning-text); border-color: var(--warning-bg);
}
html[data-theme="dark"] .priority-normal {
    background: var(--surface-2); color: var(--text-secondary); border-color: var(--border);
}
html[data-theme="dark"] .priority-completed {
    background: var(--success-bg); color: var(--success-text); border-color: var(--success-bg);
}

/* Landing cards (site.css .activity-landing-card, reused by ActivityHistory /
   Admin / Assets): h2 hard-codes #201B16 (near-black, ~1.0:1 on dark) and p #666.
   The gold icon on its #201B16 chip already reads; just fix the text. */
html[data-theme="dark"] .activity-landing-card h2 { color: var(--text); }
html[data-theme="dark"] .activity-landing-card p { color: var(--text-secondary); }
html[data-theme="dark"] .activity-landing-card-icon { background: var(--surface-2); }