/* ===========================================================================
   Phase 153 / 153B — GURON visual design system: typography, spacing, color,
   and component tokens shared by every authenticated screen.

   🔑 ONE source of truth, loaded once from base.html. No per-screen
   stylesheet, no per-template dark-mode fixes unless a verified exception
   requires it (see the client_view.html notes below and the phase reports).

   Typography: virtually every font-size in the app is already `rem`, and
   `rem` is relative to <html>'s font-size — scaling that ONE value scales
   the whole app proportionally. Phase 153B adds a small, named hierarchy
   (page-title/section-title/card-title/body/secondary/small/badge) on top
   of that, so new and touched markup has 7 sizes to choose from instead of
   inventing an 8th.

   Buttons & forms: normalized through BOOTSTRAP'S OWN local CSS variables
   (`--bs-btn-*`, `--bs-border-radius`, `--bs-focus-ring-*`) rather than new
   classes — every existing `.btn-primary`/`.btn-outline-secondary`/
   `.form-control` app-wide picks up the new scale automatically, with zero
   template rewrites.

   Theme: Bootstrap 5.3+ has native dark-mode support via `data-bs-theme`
   on <html> — every Bootstrap component (.card, .table, .modal, .badge,
   .form-control, .btn, .dropdown-menu, .alert) gets a dark variant
   automatically. This file only needs to handle GuronApp's OWN custom
   surfaces that Bootstrap doesn't know about: the sidebar, dashboard tiles,
   the personal-settings cards, workbench filter panels, and Tabulator (a
   separate JS table library with its own non-Bootstrap-aware stylesheet).
   =========================================================================== */

:root {
  /* ---- Typography scale ---- */
  /* Phase 153B: pushed further than 153's 1.0625 — explicit owner direction
     was "optimize for readability, not for preserving existing values."
     1.125 = 18px root (was: unset → browser default 16px, then 17px in 153). */
  --font-scale: 1.125;

  /* Named hierarchy — 7 sizes, not "whatever felt right" per element.
     Values are rem, so they ride --font-scale like everything else. */
  /* Phase 153B: converged to client_view.html's already-established client-
     name hero size (1.65rem) rather than shrinking it to match a smaller
     draft value — that header is the single most important orientation
     anchor in the app ("which client am I looking at"). */
  --text-page-title:    1.65rem;   /* screen headers: dashboard greeting, client name */
  --text-section-title: 1.15rem;   /* modal title, tab/section headers */
  --text-card-title:    1rem;      /* card headers: metric tile, ps-card, kpi panel */
  --text-body:          0.95rem;   /* default paragraph/label/value — the workhorse size */
  --text-secondary:     0.85rem;   /* helper text, sub-labels */
  --text-small:         0.78rem;   /* fine print, timestamps */
  --text-badge:         0.72rem;   /* badges, table secondary lines */

  /* ---- Spacing scale ---- */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 20px;
  --space-xl: 32px;

  /* ---- Semantic surface palette (LIGHT). ---- */
  --surface-page:      #f8f9fa;
  --surface-card:       #ffffff;
  --surface-card-alt:   #f7f9fd;
  --text-heading:       #16375f;
  --text-primary:       #1b2c44;
  /* --text-secondary above is a SIZE token; this is the color used at
     several sizes for de-emphasized text. Two different token families
     sharing the word "secondary" is a known naming wrinkle — kept because
     renaming either would touch the other half of the codebase for no
     visual benefit. */
  --text-muted:         #7a8899;
  /* Color counterpart of the --text-secondary SIZE token above — deliberately
     a different variable name (color-text-secondary vs. text-secondary) so
     "font-size: var(--text-secondary)" and "color: var(--color-text-secondary)"
     can never be confused for each other at a glance. */
  --color-text-secondary: #5f6e7c;
  --border-color:       #e2e8f0;
  --table-stripe:       #f8fafc;
  --table-header-bg:    #eef2f7;
  --focus-ring-color:   #2e6dc9;

  /* ---- Semantic action colors — lifted directly from modals.css's already-
     proven palette (Phase 142), not invented. "Part of the shared system"
     per the phase brief, not a second visual language. ---- */
  --color-primary:      #16335c;
  --color-primary-hover:#1e4680;
  --color-danger:       #b42334;
  --color-warning:      #9a6206;
  --color-success:      #186c47;

  /* ---- Subtle status/selection backgrounds — Phase 153D.
     "Subtle" = a pale tint used as a ROW/BADGE background (not the bold
     --color-* action colors above, which are for text/buttons). Defined
     ONCE here, light + dark together, so every consumer (task-overdue
     rows, priority pills, selected-row highlights) shares one definition
     instead of each screen inventing its own light-only tint that then
     needs its own dark-mode fix. Light values match what was already on
     screen (task-overdue's #f8d7da, the dashboard pills' existing tones,
     the case-card selected blue) — this reconciles duplicates, it does
     not restyle. ---- */
  --surface-danger-subtle:  #f8d7da;
  --surface-warning-subtle: #fdf3e2;
  --surface-info-subtle:    #e9f1fd;
  --surface-selected:       #dbeafe;

  /* ---- Card standard ---- */
  /* Phase 153B: converged toward the dashboard's own already-established
     card values (16px/near-identical shadow) rather than workbench's 12px —
     the dashboard's cards are the more prominent, representative surface. */
  --radius-card: 14px;
  --shadow-card: 0 1px 2px rgba(16,35,63,0.04), 0 8px 20px rgba(16,35,63,0.045);
  /* Modal keeps its own, deliberately larger radius/heavier shadow — same
     token system, not forced pixel-identical to an elevated dialog. */
  --radius-modal: 16px;

  /* ---- Button/input standard ---- */
  --radius-control: 8px;
}

html.text-size-small { --font-scale: 1.0; }
html.text-size-large { --font-scale: 1.3125; }

html {
  font-size: calc(16px * var(--font-scale));
}

/* ===========================================================================
   Typography utility classes — the 7-level hierarchy, ready to apply.
   Prefixed gr- (Guron) so they never collide with Bootstrap's own .text-*
   utilities (text-muted, text-primary, etc., which mean something else).
   =========================================================================== */
.gr-page-title    { font-size: var(--text-page-title);    font-weight: 700; color: var(--text-heading); line-height: 1.25; }
.gr-section-title { font-size: var(--text-section-title); font-weight: 700; color: var(--text-heading); line-height: 1.25; }
.gr-card-title    { font-size: var(--text-card-title);    font-weight: 700; color: var(--text-heading); line-height: 1.3; }
.gr-body          { font-size: var(--text-body);          font-weight: 400; color: var(--text-primary); }
.gr-secondary     { font-size: var(--text-secondary);     font-weight: 400; color: var(--text-muted); }
.gr-small         { font-size: var(--text-small);         font-weight: 400; color: var(--text-muted); }
.gr-badge-text    { font-size: var(--text-badge);         font-weight: 600; }

/* ===========================================================================
   Dark theme — one override block redefines the palette; every rule below
   that references var(--...) picks it up automatically.
   =========================================================================== */
html.theme-dark {
  --surface-page:      #10151d;
  --surface-card:       #1a212c;
  --surface-card-alt:   #212a37;
  --text-heading:       #e7ecf3;
  --text-primary:       #dde4ee;
  --text-muted:         #8994a3;
  --color-text-secondary: #b7c1cf;
  --border-color:       #2c3644;
  --table-stripe:       #1f2733;
  --table-header-bg:    #212a37;
  --focus-ring-color:   #7fb2ff;

  --color-primary:      #4d7fc4;
  --color-primary-hover:#6d9bd6;
  --color-danger:       #e0808e;
  --color-warning:      #d9ac5c;
  --color-success:      #6fcf8e;

  /* Phase 153D — same tones already used for .gt-badge-* in 153B, reused
     here so the "subtle status background" language is consistent
     app-wide rather than each component picking its own dark red/amber/
     blue. --surface-selected is a new, distinct muted blue (not the same
     as --surface-card-alt) so a selected row is still visibly different
     from a merely-hovered one. */
  --surface-danger-subtle:  #3a1a1a;
  --surface-warning-subtle: #3a2f10;
  --surface-info-subtle:    #182b47;
  --surface-selected:       #1e3a5f;
}

/* data-bs-theme drives every native Bootstrap component; set together with
   the .theme-dark class (base.html sets both on <html> from one preference).
   Phase 153E — `!important` added: <body class="bg-light"> (base.html) is a
   Bootstrap utility class, which ships `!important` by definition, so this
   rule silently never won at all. Every page relying on body's own dark
   background (any screen whose .main-content sets no background of its
   own — Links, Settings, sysadmin, and any future page) showed the literal
   Bootstrap light-gray at the edges. Higher specificity (html.theme-dark)
   plus matching !important restores the intended win. */
html.theme-dark body {
  background: var(--surface-page) !important;
  color: var(--text-primary);
}

/* ===========================================================================
   Buttons — normalized once via Bootstrap 5.3's own local CSS variables.
   Every .btn/.btn-primary/.btn-outline-secondary/.btn-danger app-wide picks
   this up automatically; no template touches its buttons directly for this.
   Values mirror modals.css's already-proven language (Phase 142): 8px
   radius, 600 weight, calm padding — generalized, not reinvented.
   =========================================================================== */
.btn {
  --bs-btn-border-radius: var(--radius-control);
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: var(--text-secondary);
  --bs-btn-padding-y: 0.4rem;
  --bs-btn-padding-x: 0.85rem;
}
.btn-sm {
  --bs-btn-border-radius: 6px;
  --bs-btn-font-size: var(--text-small);
  --bs-btn-padding-y: 0.3rem;
  --bs-btn-padding-x: 0.65rem;
}
.btn-primary {
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
}
.btn-danger {
  --bs-btn-bg: var(--color-danger);
  --bs-btn-border-color: var(--color-danger);
}
.btn:focus-visible {
  outline: 2px solid var(--focus-ring-color);
  outline-offset: 2px;
}

/* ===========================================================================
   Forms — same technique via Bootstrap's own variables. Radius + focus ring
   normalized globally; label/placeholder colors handled per-element below
   since Bootstrap has no single variable for "label color".
   =========================================================================== */
.form-control, .form-select {
  --bs-border-radius: var(--radius-control);
  font-size: var(--text-body);
}
.form-control-sm, .form-select-sm {
  --bs-border-radius: 6px;
  font-size: var(--text-secondary);
}
.form-label {
  font-size: var(--text-secondary);
  font-weight: 600;
  color: var(--text-heading);
}
.form-control:focus, .form-select:focus {
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 3px rgba(47, 111, 191, 0.12);
}
html.theme-dark .form-control:focus, html.theme-dark .form-select:focus {
  box-shadow: 0 0 0 3px rgba(127, 178, 255, 0.18);
}
::placeholder { color: var(--text-muted); opacity: 1; }

/* ===========================================================================
   Cards — the general standard (dashboard hero/kpi/panel, metric tiles,
   personal-settings cards, filter panels). Modal keeps its own
   --radius-modal, same token family. Values converged toward the
   dashboard's own already-good numbers (see the note on --radius-card).
   =========================================================================== */
.metric-tile, .ps-card, .pdp-card,
.dash-hero, .kpi-card, .panel,
.main-content .tasks-filter-panel, .main-content .wb-filter-panel {
  border-radius: var(--radius-card);
}

/* ---- Dashboard metric tiles (app.css .metric-tile) ---- */
html.theme-dark .metric-tile {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}
html.theme-dark .metric-tile .label { color: var(--text-muted); }
html.theme-dark .metric-tile .value { color: var(--text-heading); }

/* ---- Personal settings cards (settings_personal.html .ps-card) ---- */
html.theme-dark .ps-card {
  background: var(--surface-card);
  border-color: var(--border-color);
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.3);
}
html.theme-dark .ps-header h1,
html.theme-dark .ps-card h2,
html.theme-dark .ps-row .value { color: var(--text-heading); }
html.theme-dark .ps-header .sub,
html.theme-dark .ps-row .label { color: var(--text-muted); }
html.theme-dark .ps-row { border-bottom-color: var(--border-color); }
html.theme-dark .ps-note {
  background: var(--surface-card-alt);
  color: var(--text-muted);
}

/* ---- Workbench / task-filter panels (workbench.css) ---- */
html.theme-dark .main-content .tasks-filter-panel,
html.theme-dark .main-content .wb-filter-panel {
  background: var(--surface-card);
  border-color: var(--border-color);
}
html.theme-dark .main-content .tasks-filter-panel .filter-btn,
html.theme-dark .main-content .wb-filter-panel .filter-btn {
  background: var(--surface-card-alt);
  color: var(--color-text-secondary);
  border-color: var(--border-color);
}

/* ---- Custom status badges (tables.css .gt-badge-*, distinct from
   Bootstrap's own .badge, which already gets a dark variant natively) ---- */
.gt-badge-success, .gt-badge-danger, .gt-badge-neutral, .gt-badge-info, .gt-badge-warning {
  font-size: var(--text-badge);
  font-weight: 600;
  border-radius: 999px;
  padding: 2px 10px;
}
html.theme-dark .gt-badge-success { background: #16321f; color: #6fcf8e; }
html.theme-dark .gt-badge-danger  { background: #3a1a1a; color: #f19c9c; }
html.theme-dark .gt-badge-neutral { background: #232a33; color: #b8c2cd; }
html.theme-dark .gt-badge-info    { background: #182b47; color: #8fb6f0; }
html.theme-dark .gt-badge-warning { background: #3a2f10; color: #e0c069; }

/* ===========================================================================
   Tables (Tabulator) — a separate JS table library with its OWN stylesheet,
   not Bootstrap-aware at all. Normalized for BOTH light and dark: header/
   cell font on the new type scale, calm hover, readable row height.
   =========================================================================== */
.tabulator {
  font-size: var(--text-secondary);
  border-color: var(--border-color);
}
.tabulator .tabulator-header {
  background: var(--table-header-bg);
  font-size: var(--text-badge);
  font-weight: 700;
  border-color: var(--border-color);
}
.tabulator-row {
  border-color: var(--border-color);
}
.tabulator-row.tabulator-row-even {
  background: var(--table-stripe);
}
.tabulator-row:hover {
  background: var(--surface-card-alt) !important;
}

html.theme-dark .tabulator {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}
html.theme-dark .tabulator .tabulator-header {
  background: var(--table-header-bg);
  color: var(--text-heading);
  border-color: var(--border-color);
}
html.theme-dark .tabulator .tabulator-col {
  background: var(--table-header-bg);
  color: var(--text-heading);
  border-color: var(--border-color);
}
html.theme-dark .tabulator-row {
  background: var(--surface-card);
  color: var(--text-primary);
  border-color: var(--border-color);
}
html.theme-dark .tabulator-cell {
  border-color: var(--border-color) !important;
}
html.theme-dark .tabulator .tabulator-footer {
  background: var(--table-header-bg);
  color: var(--text-muted);
  border-color: var(--border-color);
}

/* ---- Phase 153E — Dark Theme Consolidation.
   Six work-table screens (Clients/Tasks/Filing Reports/Events/Reminders/
   Leads) each carry their OWN copy-pasted <style> block re-declaring
   .tabulator/.tabulator-header/.tabulator-col/.tabulator-row/
   .tabulator-tableholder with literal #fff/#f3f6fb + !important. The
   generic dark rules above already existed and were already correct —
   they just never had !important, so an !important light literal always
   won regardless of specificity. Every selector below is deliberately
   HIGHER specificity (html.theme-dark prefix) AND !important, so it wins
   over every page-local block without editing six templates individually.
   Verified live against Clients/Tasks/Filing Reports/Events/Reminders/
   Leads after writing this block — see the phase report. ---- */
html.theme-dark .tabulator,
html.theme-dark .tabulator .tabulator-tableholder,
html.theme-dark .tabulator .tabulator-table {
  background: var(--surface-card) !important;
}
html.theme-dark .tabulator .tabulator-header,
html.theme-dark .tabulator .tabulator-col {
  background: var(--table-header-bg) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .tabulator-col-title {
  color: var(--text-muted) !important;
}
html.theme-dark .tabulator-row {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .tabulator-row .tabulator-cell {
  color: var(--text-primary) !important;
}
html.theme-dark .tabulator-row:hover,
html.theme-dark .tabulator-row:hover .tabulator-cell {
  background: var(--surface-card-alt) !important;
}
html.theme-dark .tabulator-col.col-filtered {
  background: var(--surface-info-subtle) !important;
}
html.theme-dark .tabulator-placeholder-contents {
  color: var(--text-muted) !important;
}
/* Overdue/warning row tints — same pattern as the P0-1 fix in Phase 153D
   (.tabulator-row.task-overdue in app.css), just three more class names
   that carry the identical bug in three more files: .row-overdue (Events/
   Reminders), .task-overdue-filing (Filing Reports), .row-warning (both).
   #c0392b (the filing-report overdue text) measured 2.87:1 against the new
   dark background — a WCAG AA failure — so it is remapped too, not left
   literal; --focus-ring-color is the same proven-readable swap 153D used
   for the identical near-miss on .pill-low (6.58:1 dark). */
html.theme-dark .tabulator-row.row-overdue .tabulator-cell,
html.theme-dark .tabulator-row.task-overdue-filing .tabulator-cell {
  background-color: var(--surface-danger-subtle) !important;
}
html.theme-dark .tabulator-row.task-overdue-filing .tabulator-cell {
  color: var(--focus-ring-color) !important;
}
html.theme-dark .tabulator-row.row-warning .tabulator-cell {
  background-color: var(--surface-warning-subtle) !important;
}
html.theme-dark #col-filter-popup {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark #col-filter-popup label:hover {
  background: var(--surface-card-alt) !important;
}
/* #report-table needs its own ID-scoped line: reports.css's own
   `#report-table.tabulator { background: #fff !important; }` carries an ID,
   which always outranks a class-only selector regardless of !important —
   the generic .tabulator rule above cannot win against it on specificity
   alone. Matching the ID here keeps the fix inside theme.css rather than
   editing reports.css, per the approved migration map. */
html.theme-dark #report-table.tabulator {
  background: var(--surface-card) !important;
}
/* Same ID-outranks-class issue, found live while verifying Filing Reports:
   static/tables.css's own `#meetings-table.tabulator .tabulator-header,
   #filing-table..., #reminders-table..., #leads-table...
   { background: #fbfcfe !important; }` (its "section 10", scoped to these
   four table IDs specifically) beats the class-only dark rule above the
   same way #report-table did. Matched here rather than edited in
   tables.css, per the same rule. */
html.theme-dark #meetings-table.tabulator .tabulator-header,
html.theme-dark #filing-table.tabulator .tabulator-header,
html.theme-dark #reminders-table.tabulator .tabulator-header,
html.theme-dark #leads-table.tabulator .tabulator-header {
  background: var(--table-header-bg) !important;
}
/* reports.css also ID-scopes the empty-state layer specifically (found live
   on /reports: the huge white block behind "אין נתונים להצגה"), plus its
   own copy of the placeholder text color — same ID-outranks-class shape,
   matched here rather than edited in reports.css. */
html.theme-dark #report-table .tabulator-tableholder,
html.theme-dark #report-table .tabulator-placeholder {
  background: var(--surface-card) !important;
}
html.theme-dark #report-table .tabulator-placeholder-contents {
  color: var(--text-muted) !important;
}

/* ===========================================================================
   Phase 153E — Dark Theme Consolidation, part 2: page shell + repeated
   card/button chrome duplicated across the six work-table screens (Clients/
   Tasks/Filing Reports/Events/Reminders/Leads) plus Document Templates/PDF
   Editor/Merge Wizard/Landing Page settings/Links/Settings/Client Card.
   Every selector is additive and scoped to html.theme-dark — Light Mode is
   byte-for-byte unchanged (no rule below has a bare, unscoped form).
   =========================================================================== */

/* .main-content: 8 templates hardcode `background: #eef2f7` with no dark
   variant; Links/Settings/sysadmin set no background at all and fell
   through to <body> (see the body fix above). One rule here covers both
   gaps for every current AND future page — the exact "shared system"
   the phase asked for, instead of 8+ separate template edits.
   Client Card (client_view.html) already sets --surface-card-alt directly
   (a deliberate, already-dark choice, not a bug) — this rule resolves to
   the same visual family, so it is a no-op there, not a behavior change. */
html.theme-dark .main-content {
  background: var(--surface-page) !important;
}

/* .hero-btn / .toolbar-search-input / .toolbar-action-btn: the light
   outline "chip" button and search box, byte-identical across Clients,
   Tasks, Filing Reports, Events, Reminders, Leads, Document Templates,
   Merge Wizard, PDF Editor and Client Card. */
html.theme-dark .hero-btn,
html.theme-dark .toolbar-search-input,
html.theme-dark .toolbar-action-btn {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .toolbar-search-input:focus {
  background: var(--surface-card) !important;
}
/* Reports has its own equivalent filter chips (reports.css), found live
   while verifying /reports: same light-outline-pill shape as .hero-btn,
   different class names, not !important there so this wins on specificity
   alone. */
html.theme-dark .filter-pill,
html.theme-dark .date-cal-btn {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .filter-pill:hover:not(.active),
html.theme-dark .date-cal-btn:hover {
  background: var(--surface-card-alt) !important;
}

/* Toolbar wrapper (the card that holds the search box + action buttons) —
   found live on Document Templates: `background: #fff` on the wrapper
   itself, distinct from the .toolbar-search-input/.toolbar-action-btn
   fixed above. Clients/Tasks/Filing Reports/Events/Reminders carry the
   identical literal on their own copy of this wrapper (.clients-toolbar,
   .tasks-toolbar, .meetings-toolbar) — it wasn't visible there only
   because their toolbar row is fully packed with opaque children, not
   because the wrapper itself was ever fixed. Fixed everywhere at once. */
html.theme-dark .clients-toolbar,
html.theme-dark .tasks-toolbar,
html.theme-dark .meetings-toolbar,
html.theme-dark .tmpl-toolbar {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .hero-btn:hover,
html.theme-dark .toolbar-action-btn:hover {
  background: var(--surface-card-alt) !important;
}

/* Hero card wrapper (the gradient white panel at the top of each page).
   Nine template-local class names, all carrying the identical literal
   `linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%)`. .tasks-hero and
   .meetings-hero (meetings_sidebar.html's copy only) already use
   var(--surface-card) per the 153B precedent — included here too so a
   single rule covers every hero, not six of seven. */
html.theme-dark .clients-hero,
html.theme-dark .tasks-hero,
html.theme-dark .filing-hero,
html.theme-dark .meetings-hero,
html.theme-dark .tmpl-hero,
html.theme-dark .pdf-hero,
html.theme-dark .merge-hero,
html.theme-dark .page-hero,
html.theme-dark .cv-hero,
html.theme-dark .reports-page-header {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}

/* Table-card wrappers + their header strips — same shape as .cv-work-card/
   .cv-work-header (Client Card, fixed in the 153D follow-up) repeated
   across every work-table screen under different names. */
html.theme-dark .clients-table-card,
html.theme-dark .tasks-table-card,
html.theme-dark .filing-table-card,
html.theme-dark .meetings-table-card,
html.theme-dark .tmpl-table-card,
html.theme-dark .cv-work-card,
html.theme-dark .cv-cases-panel {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .clients-table-card-header,
html.theme-dark .tasks-table-card-header,
html.theme-dark .filing-table-card-header,
html.theme-dark .meetings-table-card-header,
html.theme-dark .tmpl-table-card-header,
html.theme-dark .cv-work-header,
html.theme-dark .cv-cases-header {
  background: var(--table-header-bg) !important;
  border-color: var(--border-color) !important;
}
/* Client Card's case-cards side panel carries three more literal-light
   surfaces found live (not caught by the Step 1 screenshot pass — this is
   exactly what the required full visual QA pass is for): the case-summary
   strip (.cv-case-strip, an info-tinted bar), the summary bubble and the
   parameter chips (.cv-summary-bubble/.cv-param-chip, both a paler variant
   of the same card-alt surface). */
html.theme-dark .cv-case-strip {
  background: var(--surface-info-subtle) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .cv-summary-bubble,
html.theme-dark .cv-param-chip {
  background: var(--surface-card-alt) !important;
  border-color: var(--border-color) !important;
}

/* Document Templates' own plain HTML table (.tmpl-table — not Tabulator,
   so none of the .tabulator-* rules above reach it). */
html.theme-dark .tmpl-table th {
  background: var(--table-header-bg) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .tmpl-table tr:hover td {
  background: var(--surface-card-alt) !important;
}

/* Merge Wizard's own plain HTML table + selection/action panels. */
html.theme-dark .merge-table thead th {
  background: var(--table-header-bg) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-color) !important;
}
html.theme-dark .merge-table tbody tr.item-row:hover {
  background: var(--surface-card-alt) !important;
}
html.theme-dark .merge-table .separator-row td {
  background: var(--surface-card-alt) !important;
  color: var(--text-heading) !important;
  border-color: var(--border-color) !important;
}
/* #dbeafe is byte-identical to --surface-selected's LIGHT value — a pure
   token swap, not a new dark-only override, exactly like the 153D fix for
   .cv-case-card.selected. */
html.theme-dark .item-row.row-selected {
  background: var(--surface-selected) !important;
}
html.theme-dark .merge-panel,
html.theme-dark .merge-actions-bar,
html.theme-dark .merge-options-bar {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}
/* Merge Wizard's own preview canvas surround (.preview-box, unique class
   name — no collision with PDF Editor's #preview-wrap or the Landing Page
   preview) — same "desk around the page" treatment. */
html.theme-dark .preview-box {
  background: var(--surface-page) !important;
  border-color: var(--border-color) !important;
}
/* Landing Page settings — the admin-side URL display box and outline save
   button. NOT the live preview (.preview-frame-wrap, a DIFFERENT class —
   left untouched, see the intentional-exceptions list). */
html.theme-dark .url-box {
  background: var(--surface-card-alt) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .btn-save-outline {
  background: var(--surface-card) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .btn-save-outline:hover {
  background: var(--surface-card-alt) !important;
}

/* PDF Editor's canvas surround — the "desk" area around the rendered PDF
   page image, NOT the page image itself (#pdf-image stays literal white:
   it is real paper, the Step 5 exception). Scoped by ID rather than the
   bare .preview-wrap class: leads_landing_settings.html defines a
   DIFFERENT, unrelated .preview-wrap (the public landing-page live
   preview, deliberately left light — see the intentional-exceptions list)
   that must never be touched by this rule. */
html.theme-dark #preview-wrap {
  background: var(--surface-page) !important;
}

/* PDF Editor's own toolbar buttons + zoom control — found live: the
   toolbar row reads as a solid white bar not because of a wrapper
   background (.pdf-editor-toolbar sets none) but because every individual
   .pa-btn/.zoom-icon-btn/#zoom-display packed into it is opaque white.
   .pa-export/.pa-client keep their pale-green "success action" tint and
   .pa-reset keeps its red text/border — genuine status accents, Step 3's
   exception — only the plain white base is fixed. */
html.theme-dark .pa-btn,
html.theme-dark .pa-btn.pa-reset,
html.theme-dark .zoom-icon-btn,
html.theme-dark #zoom-display {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .pa-btn:hover,
html.theme-dark .zoom-icon-btn:hover {
  background: var(--surface-card-alt) !important;
}
html.theme-dark #zoom-display:focus {
  background: var(--surface-card) !important;
}
html.theme-dark .ic-header {
  background: var(--table-header-bg) !important;
  border-color: var(--border-color) !important;
}
/* .tool-btn (Text/Arrow/Line/Circle/Rectangle/Sign/Erase/Select in the
   right-hand toolbar) — every one of them, not just the active one,
   carries its own `!important` white gradient regardless of state. The
   active tint (#e7f1ff) is a genuine selected-state indicator, mapped to
   --surface-selected like every other "currently selected" surface in
   the app rather than left as an isolated light-blue patch. */
html.theme-dark .tool-btn {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}
html.theme-dark .tool-btn.active {
  background: var(--surface-selected) !important;
  color: var(--focus-ring-color) !important;
}
html.theme-dark .tool-btn:hover:not(.active) {
  background: var(--surface-card-alt) !important;
}

/* Settings' sticky save bar (the footer/action bar Step 1 asked about). */
html.theme-dark .save-bar {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}

/* Dashboard's bottom-row tables (.mini — the reminders/events/tasks lists)
   are deliberately plain HTML, not Tabulator (see the template's own
   comment on why), so none of the .tabulator-* rules above reach them.
   Sticky header background was the one item from the original Step 1
   Dashboard audit that did not make it into the first implementation
   pass — caught here by the required full-screen re-scan, not assumed
   fixed. */
html.theme-dark .mini th {
  background: var(--surface-card) !important;
}
html.theme-dark .mini tbody tr.is-clickable:hover td {
  background: var(--surface-card-alt) !important;
}

/* Document Templates' two upload/create modals are plain Bootstrap modals
   with INLINE style="...background:#fbfcfe..." on their header/footer —
   they never joined the shared .app-modal system (modals.css), so nothing
   there reaches them. Scoped to the two exact modal IDs (#uploadModal,
   #createDocModal) rather than a bare .modal-header/.modal-footer rule,
   which would also repaint every OTHER plain Bootstrap modal in the app
   that relies on Bootstrap's own data-bs-theme default — out of scope and
   not asked for. An inline style with no !important still loses to an
   external !important rule, which is what makes this fix possible without
   touching the template. */
html.theme-dark #uploadModal .modal-header,
html.theme-dark #uploadModal .modal-footer,
html.theme-dark #createDocModal .modal-header,
html.theme-dark #createDocModal .modal-footer {
  background: var(--surface-card) !important;
  border-color: var(--border-color) !important;
}

/* ---- Focus states — kept clearly visible in both themes. ---- */
html.theme-dark a:focus-visible,
html.theme-dark button:focus-visible,
html.theme-dark input:focus-visible,
html.theme-dark select:focus-visible,
html.theme-dark textarea:focus-visible,
html.theme-dark [tabindex]:focus-visible {
  outline-color: var(--focus-ring-color);
}

/* ---- client_view.html: the client-card screen has, by far, the largest
   inline-color footprint in the app. Rather than a full per-line rewrite,
   its most-repeated colors were mapped to these SAME variables directly in
   the template (Phase 153), plus a further pass in 153B fixing specific
   high-impact dark/light-typography inconsistencies found on inspection —
   see the phase report for the exact, named list of what remains a known
   exception (not silently claimed as covered). ---- */

/* ===========================================================================
   Personal display-preferences card (_personal_display_prefs.html) — shared
   between settings_personal.html and settings.html, one style source.
   =========================================================================== */
.pdp-card {
  background: var(--surface-card);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}
html.theme-dark .pdp-card {
  box-shadow: 0 1px 2px rgba(0,0,0,0.25), 0 8px 20px rgba(0,0,0,0.3);
}
.pdp-card h2 {
  font-size: var(--text-card-title); font-weight: 700; color: var(--text-heading);
  margin: 0 0 var(--space-md); display: flex; align-items: center; gap: var(--space-sm);
}
.pdp-group { border: none; padding: 0; margin: 0 0 var(--space-md); }
.pdp-group legend {
  font-size: var(--text-secondary); font-weight: 600; color: var(--text-muted);
  padding: 0; margin-bottom: var(--space-sm); float: none; width: auto;
}
.pdp-radio-row { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.pdp-radio-row input[type="radio"] {
  position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden;
}
.pdp-radio-row label {
  cursor: pointer; padding: var(--space-sm) var(--space-lg); border-radius: 999px;
  border: 1px solid var(--border-color); font-size: var(--text-secondary);
  color: var(--text-muted); background: var(--surface-card-alt);
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pdp-radio-row input[type="radio"]:checked + label {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff; font-weight: 600;
}
.pdp-radio-row input[type="radio"]:focus-visible + label {
  outline: 2px solid var(--focus-ring-color); outline-offset: 2px;
}

/* ===========================================================================
   Print — dark mode must NEVER bleed into printed output (client_view.html
   has its own @media print block that already forces white paper/black text
   independently; this is a defensive backstop for every OTHER dark-themed
   surface). Real bug caught and fixed in Phase 153 — kept as a permanent
   guard, not just a one-time fix.
   =========================================================================== */
@media print {
  html.theme-dark,
  html.theme-dark body {
    background: #fff !important;
    color: #000 !important;
  }
}