:root{
  /* Surface palette tuned so panels read as raised cards on a grey
     canvas. The previous values had --bg at #f6f7fb and --panel at
     #ffffff — a 4-step luminance gap that disappears at typical screen
     brightness, making the three panes blend into one wash. The new
     --bg sits at ~92% luminance so white panels pop cleanly against it;
     --panel2 is now genuinely distinct from --panel so header gradients
     and hover surfaces are visible; --line is a half-step darker to
     keep edges crisp against the new bg. */
  --bg:#e8ebf2;
  --panel:#ffffff;
  --panel2:#f3f5fa;
  --text:#0f172a;
  --muted:#64748b;
  --line:#d8dce4;
  --shadow:0 10px 30px rgba(2,6,23,.10);
  --radius:16px;
  color-scheme: light;

  --headerH:56px;
  --sidebarW:320px;

  /* Primary button = sage green, matching the sidebar's "Project Overview"
     headline (--mod-headline-bg). Slate-900 felt too high-contrast for the
     calmer construction-PM aesthetic. */
  --btn:#4a6b3a;
  --btnHover:#3e5a30;
  --btnText:#fff;
  --accent:#2563eb;
  --accent2:#22c55e;
  --danger:#ef4444;

  /* Default 3-pane layout widths.
     - Pane A (left sidebar / project nav): fixed, ~325px.
     - Pane B (middle activity / module controls): fixed, ~380px.
     - Pane C (right workspace / canvas): flex — absorbs the remainder so
       the drawing/canvas area is the widest pane by default. */
  --paneA: 325px;
  --paneB: 380px;

  --splitW: 10px;
  --gap: 16px;
}

/* =====================================================================
   DARK THEME — toggled by the header toolbar's sun/moon button.
   Palette lifted from breakingmetrics.com — pure black canvas, warm
   gold primary accent, cool cyan secondary accent, near-white text
   stepped down to ~45% for muted. The whole UI is driven by the CSS
   variables in :root, so flipping them under body[data-theme="dark"]
   swaps the entire palette in one place.
   ===================================================================== */
body[data-theme="dark"] {
  /* Breaking Metrics palette (kept as named vars so module-specific
     dark themes can reference them by name if desired). */
  --bm-bg:        #000000;
  --bm-bg2:       #0a0a0a;
  --bm-bg3:       #111111;
  --bm-bg-warm:   #0d0c09;
  --bm-ink:       #ffffff;
  --bm-ink2:      rgba(255,255,255,.72);
  --bm-ink3:      rgba(255,255,255,.45);
  --bm-line:      rgba(255,255,255,.07);
  --bm-line2:     rgba(255,255,255,.13);
  --bm-gold:      #c8a96e;
  --bm-gold2:     #a8894e;
  --bm-gold-soft: rgba(200,169,110,.08);
  --bm-cyan:      #00d2c8;

  /* Map the dashboard's design tokens onto the BM palette. */
  --bg:        var(--bm-bg);      /* canvas behind the panels */
  --panel:     var(--bm-bg3);     /* raised surface (header, pane chrome) */
  --panel2:    var(--bm-bg2);     /* recessed (pane body, input wells) */
  --text:      var(--bm-ink);
  --muted:     var(--bm-ink3);    /* secondary text */
  --line:      var(--bm-line);
  --shadow:    0 10px 30px rgba(0,0,0,.7);
  color-scheme: dark;

  /* Primary button = warm gold (Breaking Metrics' signature accent).
     Black text on gold reads cleanly. */
  --btn:       var(--bm-gold);
  --btnHover:  var(--bm-gold2);
  --btnText:   #000;
  /* Secondary accent → cool cyan, for links and focused-input rings. */
  --accent:    var(--bm-cyan);
}

/* Sidebar module-buttons palette — Breaking Metrics black with gold
   active state and white-stepped text. */
body[data-theme="dark"] .controlStack {
  --mod-card-bg:      var(--bm-bg2);             /* deep dark card */
  --mod-card-hover:   var(--bm-bg3);             /* slight raise on hover */
  --mod-border:       var(--bm-line);            /* faint border */
  --mod-border-hover: var(--bm-line2);           /* hover border */
  --mod-text:         var(--bm-ink2);            /* 72% white ink */
  --mod-text-soft:    var(--bm-ink3);            /* 45% white for icons */
  --mod-text-strong:  var(--bm-ink);             /* full white on hover/active */
  --mod-active-bg:    var(--bm-gold);            /* gold active button */
  --mod-active-fg:    #000;                      /* black on gold */
  --mod-headline-bg:  var(--bm-gold);            /* gold headline button */
  --mod-headline-bg-hover: var(--bm-gold2);
  --mod-headline-fg:  #000;
  --mod-section:      var(--bm-ink3);            /* dim section header */
}

/* Invert the header logo so it reads as white against the black bg.
   The logo PNG is dark on transparent, so invert() flips the dark
   pixels to light while leaving alpha alone. */
body[data-theme="dark"] .hv-logo-img {
  filter: invert(1) hue-rotate(180deg);
}
/* The "CivilXL" wordmark next to the logo: keep "Civil" sage green
   (brand) but brighten it for legibility on black. Set "XL" to
   light grey instead of slate so the second half doesn't disappear. */
body[data-theme="dark"] .logo-text span:first-child {
  color: #7fb087 !important;   /* brightened sage — same hue as #355E3B */
}
body[data-theme="dark"] .logo-text span:last-child {
  color: var(--bm-ink2) !important;
}

/* Dark theme patches for the rules that didn't use variables. */
body[data-theme="dark"] input,
body[data-theme="dark"] textarea,
body[data-theme="dark"] select {
  background: var(--panel2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(0,210,200,.18) !important;
}
body[data-theme="dark"] .moduleFrame { color: var(--text); }
/* Focus / fullscreen overlay tints — in dark mode the original
   "darken with rgba(0,0,0,.05)" reads inverted, AND a colored tint
   (which I tried first) muddies module-dark surfaces like EasyCAD /
   CG Calculator. Use a barely-perceptible white lighten instead, and
   keep the focused pane fully clear so it stands out cleanly. */
body[data-theme="dark"] .workspace[data-focus] .panel::after {
  background: rgba(255,255,255,0.025) !important;
}
body[data-theme="dark"] .workspace[data-focus] .panel.focused::after {
  background: transparent !important;
}
body[data-theme="dark"] .workspace[data-focus] .panel:not(.focused):hover::after {
  background: rgba(255,255,255,0.04) !important;
}
/* Project list "active" outline — gold ring on dark, on-brand. */
body[data-theme="dark"] .project-item.active {
  border-color: rgba(200,169,110,.6) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18) !important;
}
/* The header pane-view toolbar uses --panel / --panel2 as its surface,
   so it darkens for free. The active layout button picks up the gold
   --btn automatically — no extra rule needed. */

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11'; /* Inter's improved letterforms */
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  transition:0.2s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app{ height:100%; display:flex; flex-direction:column; }
/* --demoBannerH defaults to 0; only the readonly-guest demo session sets it
   (body[data-demo="1"] below). The content height subtracts both so panes
   still fill the viewport correctly whether or not the banner is present. */
.content{ height:calc(100% - var(--headerH) - var(--demoBannerH, 0px)); display:flex; position:relative; }

/* ───── Demo (read-only sample-project) banner ─────────────────────────────
   Server-rendered above <header> when $is_readonly_guest. The body gets
   data-demo="1" so CSS can both size the banner slot and gate tour styles. */
body[data-demo="1"]{ --demoBannerH:40px; }
.demoBanner{
  height:var(--demoBannerH);
  display:flex; align-items:center; justify-content:center;
  gap:14px; padding:0 16px;
  background:linear-gradient(90deg,#fef3c7,#fde68a);
  color:#78350f;
  border-bottom:1px solid #f59e0b;
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden;
}
.demoBanner .demoBanner-dot{
  width:8px; height:8px; border-radius:50%;
  background:#b45309; box-shadow:0 0 0 4px rgba(180,83,9,.18);
  flex:0 0 8px;
}
.demoBanner .demoBanner-text{
  overflow:hidden; text-overflow:ellipsis;
}
.demoBanner .demoBanner-cta{
  background:#b45309; color:#fff;
  padding:5px 12px; border-radius:999px;
  text-decoration:none; font-weight:800; font-size:12px;
  flex:0 0 auto;
}
.demoBanner .demoBanner-cta:hover{ background:#92400e; }
@media (max-width:640px){
  body[data-demo="1"]{ --demoBannerH:56px; } /* wraps to 2 lines on phones */
  .demoBanner{ white-space:normal; text-align:center; font-size:12px; }
}

/* ───── Demo guided tour ────────────────────────────────────────────────────
   Dim-the-room + spotlight cutout + tooltip card. Shown once per browser
   session for readonly guests via demo-tour.js. */
.demoTour-overlay{
  position:fixed; inset:0; z-index:9000;
  pointer-events:auto;
  /* The spotlight is a giant box-shadow with a transparent cutout. We set
     its dimensions via CSS vars updated from JS per step. */
  background:transparent;
}
.demoTour-spotlight{
  position:fixed;
  left:var(--dt-x,50vw); top:var(--dt-y,50vh);
  width:var(--dt-w,0px); height:var(--dt-h,0px);
  border-radius:12px;
  box-shadow:0 0 0 9999px rgba(15,23,42,.55), 0 0 0 3px rgba(59,130,246,.9);
  transition:left .25s ease, top .25s ease, width .25s ease, height .25s ease;
  pointer-events:none;
  z-index:9001;
}
/* When the step has no target (welcome / outro), we hide the cutout and
   just dim everything by stretching a covering layer. */
.demoTour-spotlight.demoTour-spotlight--center{
  left:50vw; top:50vh; width:1px; height:1px;
}
.demoTour-card{
  position:fixed; z-index:9002;
  max-width:340px;
  background:#fff; color:#0f172a;
  border-radius:14px; padding:16px 18px;
  box-shadow:0 24px 60px -10px rgba(2,6,23,.5);
  font-size:14px; line-height:1.45;
  transition:left .25s ease, top .25s ease;
}
.demoTour-card .demoTour-title{
  font-weight:800; font-size:15px; margin:0 0 6px;
}
.demoTour-card .demoTour-body{
  color:#334155; margin:0 0 14px;
}
.demoTour-card .demoTour-footer{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
}
.demoTour-card .demoTour-dots{
  display:flex; gap:6px;
}
.demoTour-card .demoTour-dot{
  width:7px; height:7px; border-radius:50%;
  background:#cbd5e1;
}
.demoTour-card .demoTour-dot.is-active{ background:#2563eb; }
.demoTour-card .demoTour-actions{ display:flex; gap:8px; }
.demoTour-card .demoTour-btn{
  appearance:none; border:1px solid var(--line);
  background:#fff; color:#0f172a;
  padding:7px 12px; border-radius:8px;
  font-weight:700; font-size:13px; cursor:pointer;
}
.demoTour-card .demoTour-btn:hover{ background:#f1f5f9; }
.demoTour-card .demoTour-btn.is-primary{
  background:#2563eb; color:#fff; border-color:transparent;
}
.demoTour-card .demoTour-btn.is-primary:hover{ background:#1d4ed8; }
.demoTour-card .demoTour-skip{
  background:transparent; border:none; color:#64748b;
  font-size:12px; cursor:pointer; padding:0; font-weight:600;
}
.demoTour-card .demoTour-skip:hover{ color:#0f172a; text-decoration:underline; }
/* Mobile tweaks — match the dashboard.css 920px breakpoint where the
   three-pane layout collapses into the pane-switcher view. Tighter
   padding, smaller font, and the card claims full width minus safe-area
   margins. The JS-driven placement uses the mobile-pane-switcher's
   bounding box as a bottom inset, so card position is correct without
   needing fixed margins here. */
@media (max-width:920px){
  .demoTour-card{
    max-width:calc(100vw - 24px);
    padding:14px 16px;
    border-radius:12px;
  }
  .demoTour-card .demoTour-title{ font-size:14px; }
  .demoTour-card .demoTour-body{ font-size:13px; margin-bottom:12px; }
  .demoTour-card .demoTour-btn{ padding:8px 12px; font-size:13px; }
  /* Hit-targets a hair larger on touch. */
  .demoTour-card .demoTour-actions{ gap:6px; }
}

.sidebar{
  position:absolute; top:0; left:0; height:100%; width:var(--sidebarW);
  background:var(--panel);
  border-right:1px solid var(--line);
  transform:translateX(-102%);
  transition:transform .18s ease;
  box-shadow:var(--shadow);
  z-index:40;
  display:flex;
  flex-direction:column;
}
.sidebar.open{ transform:translateX(0); }

.scrim{
  position:absolute; inset:0;
  background:rgba(15,23,42,.35);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease;
  z-index:30;
}
.scrim.show{ opacity:1; pointer-events:auto; }

.workspace{
  height:100%; width:100%;
  padding:16px;
  display:flex;
  align-items:stretch;
  min-width:0;
  /* Safety net: if a stored pane width (from localStorage) was saved
     under the old, incorrect resize math, it can be wider than the
     viewport allows. Clip the overflow so the page doesn't horizontally
     scroll — the user's next drag will land inside the correct bounds. */
  overflow:hidden;
  transition: padding .18s ease;
}

/* =====================================================================
   Max-view mode — toggled by the header toolbar button. Strips the
   workspace padding and squares off every pane so the work area
   stretches edge to edge. Pane chrome / borders stay so you can still
   tell them apart, but they meet without any breathing gap.
   ===================================================================== */
body[data-max-view="1"] .workspace { padding: 0 !important; }
body[data-max-view="1"] .workspace .panel {
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The splitters between panes can stay clickable but visually shrink
   to a hairline so the max view feels truly edge-to-edge. */
body[data-max-view="1"] .workspace .splitter::before {
  top: 0; bottom: 0; border-radius: 0;
}

.panel{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  /* Proper card elevation. The old box-shadow was effectively a 1px
     bottom border (.04 alpha), invisible against the near-white page
     background. Two-layer shadow gives the panel real lift against the
     new grey canvas without feeling heavy. */
  box-shadow:0 1px 2px rgba(2,6,23,.04), 0 4px 14px -6px rgba(2,6,23,.08);
  overflow:hidden;
  min-width:0;
}
.panel .ph{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  /* Header stays solid white so it reads as a distinct strip against
     the tinted body below it. The previous gradient (panel2 → panel)
     made sense when the body was also white; with the new tinted body
     a flat white header is the cleaner seam. */
  background:var(--panel);
  font-weight:600;
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  /* Added specific layout for header controls */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 75px;
}
.panel .pb{
  padding:14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.35;
  min-height:0;
  height:calc(100% - 44px);
  overflow-y:auto;
  /* The panel body now carries a soft tinted background so the cards,
     tables, and section wrappers inside each module render as proper
     white "islands" rather than disappearing into a uniform white
     wash. Modules I've already rebuilt with card layouts (overview,
     contracts, SOV, payapps) immediately look right; modules whose
     content fills the body edge-to-edge (RFIs, submittals, tables
     with their own bg) still read fine because they paint over this
     tint with their own white surfaces. */
  background:var(--panel2);
}

.colA{ width:var(--paneA); flex:0 0 var(--paneA); }
.colB{ width:var(--paneB); flex:0 0 var(--paneB); min-width:0; }
.colC{ flex:1 1 auto; min-width:0; }

.splitter{
  width:var(--splitW);
  flex:0 0 var(--splitW);
  border-radius:10px;
  background:transparent;
  position:relative;
  cursor:col-resize;
  user-select:none;
  touch-action:none;
}
.splitter::before{
  content:"";
  position:absolute;
  top:10px;
  bottom:10px;
  left:50%;
  width:2px;
  transform:translateX(-50%);
  background:rgba(100,116,139,.35);
  border-radius:999px;
}
.splitter:hover::before{ background:rgba(37,99,235,.55); }
.splitter.dragging::before{ background:rgba(37,99,235,.85); width:3px; }

.btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  border-radius:12px;
  padding:9px 10px;
  font-weight:700;
  font-size:13px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  user-select:none;
  text-decoration:none;
  white-space:nowrap;
  transition:transform .06s ease, background .12s ease;
}
.btn:hover{ background:var(--panel2); }
.btn:active{ transform:translateY(1px); }
.btn.primary{ background:var(--btn); color:var(--btnText); border-color:transparent; }
.btn.primary:hover{ background:var(--btnHover); }

.pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  border:1px solid var(--line);
  color:var(--muted);
  background:var(--panel2);
}

.flash{
  position:absolute;
  left:16px; top:16px;
  z-index:20;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:14px;
  padding:10px 12px;
  box-shadow:var(--shadow);
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:10px;
}
.flash.success{ border-color:rgba(34,197,94,.35); }
.flash.error{ border-color:rgba(239,68,68,.35); }
.dot{ width:10px;height:10px;border-radius:999px;background:var(--accent); }
.flash.success .dot{ background:var(--accent2); }
.flash.error .dot{ background:var(--danger); }

body.is-resizing{ cursor:col-resize !important; user-select:none !important; }

.project-item.active{
  border-color:rgba(37,99,235,.45) !important;
  box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

.controlStack{ display:flex; flex-direction:column; gap:10px; }
.controlHint{ font-size:12px; font-weight:500; color:var(--muted); margin-top:4px; }

.moduleTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.moduleTitle{ font-weight:700; color:var(--text); letter-spacing:-0.01em; }

.moduleShell{
  height:calc(100% - 44px);
  min-height:0;
}
.moduleFrame{
  width:100%;
  height:100%;
  border:0;
  background:transparent;
  color:#000;
}

.modalWrap{
  position:absolute; inset:0;
  display:none; align-items:center; justify-content:center;
  z-index:60;
}
.modalWrap.show{ display:flex; }
.modalScrim{ position:absolute; inset:0; background:rgba(15,23,42,.45); }
.modal{
  position:relative;
  width:min(720px, calc(100% - 28px));
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.modalHead{
  padding:14px 14px 10px;
  border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:linear-gradient(180deg, var(--panel2), var(--panel));
}
.modalTitle{ font-weight:700; font-size:14px; letter-spacing:-0.01em; }
.modalBody{ padding:14px; }
.grid{ display:grid; grid-template-columns: 1fr 180px; gap:12px; }
.field{ display:flex; flex-direction:column; gap:6px; }
label{ font-size:12px; font-weight:600; color:var(--muted); }
input, textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 11px;
  font:inherit;
  font-size:14px;
  outline:none;
  background:#fff;
}
textarea{ min-height:110px; resize:vertical; }
input:focus, textarea:focus{
  border-color:rgba(37,99,235,.35);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}
.modalFoot{
  padding:12px 14px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

@media (max-width: 920px){
  .colA, .colC{ display:none; }
  .splitter{ display:none; }
  .workspace{ padding:12px; }
  :root{ --sidebarW: 86vw; }
  .grid{ grid-template-columns:1fr; }
  .moduleShell{ height:auto; }
}

/* Prevents iframes from capturing mouse events during resize */
body.is-resizing iframe {
  pointer-events: none;
}

/* 1. Performance: Kill transitions during manual resize */
body.is-resizing .panel {
  transition: none !important;
}

.panel {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative; /* Needed for overlay */
  pointer-events: auto !important;
}

/* 2. Layout Rules */
.colA { min-width: 200px !important; }
/* Pane B was floored at 300px which prevented users from shrinking it
   below that even when Pane A was collapsed to its 64px mini state — so
   the workspace pane couldn't take advantage of the freed room. 220px is
   still enough to keep the schedule tabs / list readable, and the JS
   drag clamp below has matching logic. */
/* Middle pane (Activity / module controls) is now the fixed-width column.
   Default width comes from --paneB; drag the splitter on its right edge
   to resize. The 220px floor matches the JS drag clamp so the splitter
   can't be dragged narrower than the controls can render. */
.colB { min-width: 220px; }
/* Right pane (Workspace) is the flex column — it absorbs whatever
   width is left after colA and colB, so the canvas/drawing area is the
   widest pane by default and grows with the viewport. */
.colC { min-width: 60px; flex: 1 1 auto; }

/* 3. ORIGINAL FOCUS MODE: Focus (Widens Pane, shrinks others) */
/* When C is focused */
.workspace[data-focus="C"] { --paneA: 200px; }
.workspace[data-focus="C"] .colB { 
  flex: 0 0 300px !important; 
  width: 300px !important;
}
.workspace[data-focus="C"] .colC { flex: 1 1 auto; }

/* When B is focused */
.workspace[data-focus="B"] { --paneA: 200px; }
.workspace[data-focus="B"] .colC { 
  flex: 0 0 200px !important; 
  width: 60px !important;
}
.workspace[data-focus="B"] .colB { flex: 1 1 auto; }

/* Focus Mode Visuals */
.workspace[data-focus] .panel {
  opacity: 1 !important;
  z-index: auto;
}
.workspace[data-focus] .panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.05);
  pointer-events: none;
  border-radius: inherit;
  transition:.3s;
}
.workspace[data-focus] .panel.focused { z-index: 10; }
.workspace[data-focus] .panel.focused::after { background: transparent; }
.workspace[data-focus] .panel:not(.focused):hover::after { background: rgba(0,0,0,0.01); }

/* Remove splitters during focus to prevent layout fighting */
.workspace[data-focus] .splitter {
  display: none !important;
  pointer-events: none !important;
}

/* 4. NEW FULLSCREEN MODE: Hides other panes completely */
.workspace[data-fullscreen="B"] .colC,
.workspace[data-fullscreen="B"] #splitC { display: none !important; }
.workspace[data-fullscreen="B"] .colB { flex: 1 1 auto !important; width: 100% !important; }

.workspace[data-fullscreen="C"] .colB,
.workspace[data-fullscreen="C"] #splitC { display: none !important; }
.workspace[data-fullscreen="C"] .colC { flex: 1 1 auto !important; width: 100% !important; }

/* 5. Header Control Buttons */
/* Container for buttons in top right */
.panel .ph .header-controls {
    position: absolute;
    top: 9px;
    right: 10px;
    display: flex;
    gap: 6px;
    z-index: 20;
}

.focus-btn {
  width: 26px; height: 26px; 
  border-radius: 6px; 
  border: 1px solid var(--line);
  background: var(--panel); 
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 13px;
  pointer-events: auto;
}
.focus-btn:hover { background: var(--accent); color: #fff; }

/* 6. Mini Sidebar A State */
.workspace[data-mini="true"] { --paneA: 64px !important; }
.workspace[data-mini="true"] .colA { min-width: 64px !important; }
.workspace[data-mini="true"] #splitA { display: none !important; }
.workspace[data-mini="true"] .colA .ph span,
.workspace[data-mini="true"] .colA .btn b, 
.workspace[data-mini="true"] .colA .controlHint { display: none; }
.workspace[data-mini="true"] .colA .ph { justify-content: center; padding-right: 0; }
.workspace[data-mini="true"] .colA .btn { justify-content: center; padding: 9px 13px; }

/* Sidebar Group Headers */
.nav-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--muted);
  margin: 16px 0 6px 4px; /* Space above, little space below */
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* Group Container (Optional: if you want tighter spacing between buttons in a group) */
.nav-group {
  display: flex;
  flex-direction: column;
  gap: 4px; /* Slightly tighter than the default controlStack gap */
}

/* ... existing mini sidebar rules ... */

/* Transform Headers into Dividers when Minimized */
.workspace[data-mini="true"] .colA .nav-header {
    font-size: 0;            /* Hide the text */
    color: transparent;      /* Make text invisible */
    height: 1px;             /* Turn container into a thin line */
    background: var(--line); /* Use your standard border color */
    margin: 10px 12px;       /* Center the line with vertical spacing */
    overflow: hidden;        /* Clip any remaining text rendering */
    opacity: 0.5;            /* Make it subtle */
}














/* Default: Switcher hidden on Desktop */
.mobile-pane-switcher { display: none; }

/* MOBILE STYLES */
@media (max-width: 920px) {

    /* 1. HIDE ALL PANES BY DEFAULT */
    /* This overrides the flex layout */
    .colA, .colB, .colC {
        display: none !important; /* Force hide */
        width: 100% !important;   /* Full width when visible */
        flex: none !important;
        border: none;
        border-radius: 0;
        height: 100%;
    }

    /* 2. SHOW PANE BASED ON BODY CLASS */
    body.show-pane-A .colA { display: block !important; }
    body.show-pane-B .colB { display: block !important; }
    body.show-pane-C .colC { display: block !important; }

    /* 3. SWITCHER BAR STYLING */
    .mobile-pane-switcher {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        height: 64px;
        background: var(--panel); /* Light in light mode (white) */
        border-top: 1px solid var(--line);
        z-index: 999;
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Keep the dark blue background in dark theme */
    body[data-theme="dark"] .mobile-pane-switcher {
        background: #0f172a;
        border-top: 1px solid rgba(255,255,255,0.1);
    }

    .switcher-btn {
        flex: 1;
        background: transparent;
        border: none;
        color: #64748b; /* Inactive Color */
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        cursor: pointer;
        position: relative;
    }

    .switcher-btn span {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .switcher-btn svg {
        width: 24px; height: 24px;
        fill: currentColor;
    }

    /* ACTIVE STATE (Highlight the selected button) */
    .switcher-btn.active { color: #38bdf8; } /* CivilXL Blue */
    .switcher-btn.active::before {
        content: "";
        position: absolute; top: 0; left: 30%; right: 30%;
        height: 2px;
        background: #38bdf8;
        box-shadow: 0 2px 8px #38bdf8;
    }
    
    /* Adjust Workspace padding so content isn't hidden behind the bar */
    .panel .pb { padding-bottom: 80px; }
	
	
	/* Inside dashboard.css -> @media (max-width: 920px) { ... */

	  /* Hide the desktop-specific header controls (Expand/Fullscreen buttons) */
	  .panel .ph .header-controls {
		  display: none !important;
	  }

	/* } */
}

/* Default: Hide mobile-only buttons on Desktop */
.mobile-only-btn {
    display: none !important;
}

/* Mobile View: Show the button */
@media (max-width: 920px) {
    .mobile-only-btn {
        display: inline-flex !important; /* Force show */
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        color: var(--text);
        margin-right: 8px;
        padding: 4px;
        cursor: pointer;
        border-radius: 50%;
    }
    
    .mobile-only-btn:active {
        background: rgba(0,0,0,0.1);
    }
}

/* ==========================================================================
   MODULE BUTTONS — pale sage green / near-white palette
   Scoped to .controlStack so the rest of the app is untouched.
   ========================================================================== */
.controlStack {
  --mod-card-bg:     #f4f7f0;          /* near-white with a hint of sage */
  --mod-card-hover:  #e8efe1;          /* slightly more saturated sage on hover */
  --mod-border:      #dde6d2;          /* soft sage border */
  --mod-border-hover:#c5d3b3;          /* hover border */
  --mod-text:        #3f4a36;          /* deep sage-ink, readable but soft */
  --mod-text-soft:   #6b7a5d;          /* sage-grey for icons */
  --mod-text-strong: #1f2a18;          /* near-black with sage tint for hover */
  --mod-active-bg:   #6b8e5a;          /* sage green for pressed/active */
  --mod-active-fg:   #f4f7f0;
  --mod-headline-bg: #4a6b3a;          /* deeper sage for the headline button */
  --mod-headline-bg-hover:#3e5a30;
  --mod-headline-fg: #f4f7f0;
  --mod-section:     #5a7048;          /* mid-sage for the section header text */
}

/* Default state: outlined card on white, low-contrast taupe text */
.controlStack .btn.primary {
  background: var(--mod-card-bg);
  color: var(--mod-text);
  border: 1px solid var(--mod-border);
  font-weight: 600;
  letter-spacing: 0.01em;
  box-shadow: 0 1px 0 rgba(28, 25, 23, 0.03);
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.controlStack .btn.primary i,
.controlStack .btn.primary svg {
  color: var(--mod-text-soft);
  fill: currentColor;
}

/* Hover: slightly warmer card, stronger ink, taupe icon */
.controlStack .btn.primary:hover {
  background: var(--mod-card-hover);
  color: var(--mod-text-strong);
  border-color: var(--mod-border-hover);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.06);
}
.controlStack .btn.primary:hover i,
.controlStack .btn.primary:hover svg {
  color: var(--mod-active-bg);
}

/* Pressed / persisted active state */
.controlStack .btn.primary:active,
.controlStack .btn.primary.is-active {
  background: var(--mod-active-bg);
  color: var(--mod-active-fg);
  border-color: var(--mod-active-bg);
  box-shadow: inset 0 1px 0 rgba(0, 0, 0, 0.18);
}
.controlStack .btn.primary:active i,
.controlStack .btn.primary:active svg,
.controlStack .btn.primary.is-active i,
.controlStack .btn.primary.is-active svg {
  color: var(--mod-active-fg);
}

/* Headline button — Project Overview gets the olive */
.controlStack #btnOverview.btn.primary {
  background: var(--mod-headline-bg);
  color: var(--mod-headline-fg);
  border-color: var(--mod-headline-bg);
}
.controlStack #btnOverview.btn.primary i,
.controlStack #btnOverview.btn.primary svg {
  color: var(--mod-headline-fg);
}
.controlStack #btnOverview.btn.primary:hover {
  background: var(--mod-headline-bg-hover);
  border-color: var(--mod-headline-bg-hover);
  color: var(--mod-headline-fg);
}

/* Section headers ("Construction Admin", "Revenue Management", etc.) */
.controlStack .nav-header {
  color: var(--mod-section);
  opacity: 1;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 11px;
}

/* Settings/Project Entities (.btn without .primary) — keep ghosty */
.controlStack .btn:not(.primary) {
  background: transparent;
  color: var(--mod-text-soft);
  border: 1px dashed var(--mod-border);
}
.controlStack .btn:not(.primary):hover {
  background: var(--mod-card-hover);
  color: var(--mod-text-strong);
  border-style: solid;
  border-color: var(--mod-border-hover);
}

/* =====================================================================
   MODULE DARK-THEME OVERRIDES
   Per-module scoped rules that only apply when body[data-theme="dark"]
   is set. Modules hardcoded many of their light surfaces and tinted
   alert backgrounds before we had a dark theme, so we recolor them
   here rather than rewriting each module's own <style> block.
   ===================================================================== */

/* ---- Module: Project Overview ---- */
body[data-theme="dark"] .ovx-status {
  background: rgba(16,185,129,.12) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .ovx-status[data-tone="warn"] {
  background: rgba(245,158,11,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .ovx-status[data-tone="muted"] {
  background: rgba(148,163,184,.10) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.25) !important;
}
body[data-theme="dark"] .ovx-filter input,
body[data-theme="dark"] .ovx-filter select {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .ovx-filter input:focus,
body[data-theme="dark"] .ovx-filter select:focus {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .ovx-filter .ovx-go {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .ovx-filter .ovx-go:hover {
  background: var(--bm-gold2) !important;
}
body[data-theme="dark"] .ovx-kpi,
body[data-theme="dark"] .ovx-card,
body[data-theme="dark"] .ovx-fin,
body[data-theme="dark"] .ovx-subs,
body[data-theme="dark"] .ovx-chart-wrap {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ovx-kpi .delta.up   { color: #34d399 !important; }
body[data-theme="dark"] .ovx-kpi .delta.down { color: #f87171 !important; }
body[data-theme="dark"] .ovx-kpi .bar-bg,
body[data-theme="dark"] .ovx-hit .bar-bg     { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .ovx-fin .row.hl .k,
body[data-theme="dark"] .ovx-fin .row.hl .v { color: var(--bm-gold) !important; }
body[data-theme="dark"] .ovx-fin .row.danger .v { color: #f87171 !important; }
body[data-theme="dark"] .ovx-fin .row.pos .v    { color: #34d399 !important; }
body[data-theme="dark"] .ovx-fin-alert.good {
  background: rgba(16,185,129,.10) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .ovx-fin-alert.bad {
  background: rgba(239,68,68,.10) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .ovx-chart-tip {
  background: var(--bm-bg) !important;
  border: 1px solid var(--line2) !important;
}
body[data-theme="dark"] .ovx-chart-tip .t-title .badge.ok {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .ovx-cross line { stroke: var(--bm-ink3) !important; }
body[data-theme="dark"] .ovx-skel {
  background: linear-gradient(90deg, var(--bm-bg2), var(--bm-bg3), var(--bm-bg2)) !important;
}

/* ---- Module: Project Overview (Pane C — overview_main.php) ---- */
body[data-theme="dark"] .ovp-card,
body[data-theme="dark"] .ovp-insights {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ovp-quick a {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ovp-quick a:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .ovp-quick a[data-tone="warn"] .n {
  color: #fbbf24 !important;
}
body[data-theme="dark"] .ovp-banner.ok {
  background: rgba(16,185,129,.10) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .ovp-banner.warn {
  background: rgba(245,158,11,.10) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .ovp-banner.bad {
  background: rgba(239,68,68,.10) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .ovp-ins {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .ovp-feed .ic[data-t="log"] {
  background: rgba(148,163,184,.15) !important; color: #cbd5e1 !important;
}
body[data-theme="dark"] .ovp-feed .ic[data-t="rfi"] {
  background: rgba(249,115,22,.15) !important; color: #fdba74 !important;
}
body[data-theme="dark"] .ovp-feed .ic[data-t="sub"] {
  background: rgba(59,130,246,.15) !important; color: #93c5fd !important;
}
body[data-theme="dark"] .ovp-feed .ic[data-t="pay"] {
  background: rgba(16,185,129,.15) !important; color: #6ee7b7 !important;
}

/* ---- Module: Field Logs (list — fieldlog.php) ---- */
body[data-theme="dark"] .cx-feed {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .feed-topbar,
body[data-theme="dark"] .filter-bar {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .feed-title {
  color: var(--text) !important;
}
body[data-theme="dark"] .filter-input,
body[data-theme="dark"] .search-input,
body[data-theme="dark"] .fl-search-box,
body[data-theme="dark"] .fl-type-select,
body[data-theme="dark"] .type-select {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .filter-input:focus,
body[data-theme="dark"] .search-input:focus {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .btn-export,
body[data-theme="dark"] .fl-export-btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .btn-export:hover,
body[data-theme="dark"] .fl-export-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .feed-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] .feed-time,
body[data-theme="dark"] .empty-state,
body[data-theme="dark"] .loading {
  color: var(--muted) !important;
}
body[data-theme="dark"] .feed-title-text {
  color: var(--text) !important;
}
body[data-theme="dark"] .feed-body {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .badge-issue {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .badge-report {
  background: rgba(34,197,94,.12) !important;
  color: #4ade80 !important;
  border-color: rgba(34,197,94,.30) !important;
}
body[data-theme="dark"] .badge-update {
  background: rgba(59,130,246,.12) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.30) !important;
}
body[data-theme="dark"] .media-grid {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .file-chip {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}

/* ---- Module: Field Logs (editor — fieldlog_editor.php) ---- */
/* The outermost wrapper is .cx-notepad (#ffffff in light mode), not
   .editor-wrapper — that's just the Quill frame. Both need darkening
   so the strip above/below the editor body doesn't show white. */
body[data-theme="dark"] .cx-notepad {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .editor-wrapper {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .title-input {
  background: transparent !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .title-input::placeholder {
  color: var(--muted) !important;
}
body[data-theme="dark"] .meta-input-group {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .meta-input-group:hover {
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .meta-control,
body[data-theme="dark"] .meta-input-group select,
body[data-theme="dark"] .meta-input-group input {
  background: transparent !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ql-toolbar.ql-snow,
body[data-theme="dark"] .ql-container.ql-snow {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ql-snow .ql-stroke { stroke: var(--bm-ink2) !important; }
body[data-theme="dark"] .ql-snow .ql-fill   { fill:   var(--bm-ink2) !important; }
body[data-theme="dark"] .ql-snow .ql-picker { color:  var(--bm-ink2) !important; }
body[data-theme="dark"] .ql-snow .ql-picker-options {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ql-editor {
  color: var(--text) !important;
}
body[data-theme="dark"] .ql-editor h1,
body[data-theme="dark"] .ql-editor h2,
body[data-theme="dark"] .ql-editor h3 {
  color: var(--text) !important;
}
body[data-theme="dark"] .ql-editor.ql-blank::before {
  color: var(--muted) !important;
}
body[data-theme="dark"] .ql-editor ul[data-checked] > li::before {
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .tag-chip.entity {
  background: rgba(148,163,184,.15) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body[data-theme="dark"] .tag-chip.doc {
  background: rgba(56,189,248,.12) !important;
  color: #7dd3fc !important;
  border-color: rgba(56,189,248,.30) !important;
}
body[data-theme="dark"] .add-tag-btn {
  border-color: var(--line2) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .add-tag-btn:hover {
  border-color: var(--bm-ink3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .share-popover {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .mini-input,
body[data-theme="dark"] .mini-search {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .mini-input:focus {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .mini-item {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .mini-item:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .mini-group-label,
body[data-theme="dark"] .att-header {
  color: var(--muted) !important;
}
body[data-theme="dark"] .att-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .action-bar {
  background: var(--bm-bg2) !important;
  border-top-color: var(--line) !important;
}
body[data-theme="dark"] .btn-icon {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .btn-icon:hover {
  border-color: var(--line2) !important;
  color: var(--text) !important;
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .editor-fallback {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .progress-line {
  background: var(--bm-gold) !important;
}
body[data-theme="dark"] .feed-badge {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .update-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .update-card.is-self {
  background: rgba(74,107,58,.14) !important;       /* faint sage tint */
  border-color: rgba(127,176,135,.30) !important;
}
body[data-theme="dark"] .update-meta {
  color: var(--muted) !important;
}
body[data-theme="dark"] .update-time {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .update-author {
  color: var(--muted) !important;
}
body[data-theme="dark"] .update-action-btn {
  color: var(--muted) !important;
}
body[data-theme="dark"] .update-action-btn:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line2) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .update-action-btn.danger:hover {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.40) !important;
}
body[data-theme="dark"] .update-body {
  color: var(--text) !important;
}
body[data-theme="dark"] .update-body[contenteditable="true"] {
  background: var(--bm-bg3) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .update-body[contenteditable="true"]:focus {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .update-edit-bar .btn-save,
body[data-theme="dark"] .update-composer-post {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .update-edit-bar .btn-save:hover,
body[data-theme="dark"] .update-composer-post:hover {
  background: var(--bm-gold2) !important;
}
body[data-theme="dark"] .update-composer-post:disabled {
  background: var(--line2) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .update-edit-bar .btn-cancel {
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .update-composer {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .update-composer textarea {
  background: transparent !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .update-composer textarea::placeholder {
  color: var(--muted) !important;
}
body[data-theme="dark"] .update-composer-hint {
  color: var(--muted) !important;
}
body[data-theme="dark"] .empty-state {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}

/* ---- Module: RFIs (list — rfi.php) ---- */
body[data-theme="dark"] .cx-rfi,
body[data-theme="dark"] .cx-container {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-rfi .topbar {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-rfi .h1 {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-rfi .badge-count {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-rfi .action-row,
body[data-theme="dark"] .cx-rfi .filter-bar {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-rfi .filter-group label {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-rfi .btn-icon {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-rfi .btn-icon:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line2) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ds-feed,
body[data-theme="dark"] .ds-row {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .ds-row:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .ds-row .ds-strip { background: var(--line2) !important; }
body[data-theme="dark"] .ds-row.status-open     .ds-strip { background: #3b82f6 !important; }
body[data-theme="dark"] .ds-row.status-answered .ds-strip { background: #10b981 !important; }
body[data-theme="dark"] .ds-row.status-closed   .ds-strip { background: var(--muted) !important; }
body[data-theme="dark"] .ds-id    { color: #7eb1ff !important; }
body[data-theme="dark"] .ds-row.status-closed .ds-id { color: var(--muted) !important; }
body[data-theme="dark"] .ds-main,
body[data-theme="dark"] .ds-title { color: var(--text) !important; }
body[data-theme="dark"] .ds-row.status-closed .ds-title { color: var(--muted) !important; }
body[data-theme="dark"] .ds-meta,
body[data-theme="dark"] .ds-date,
body[data-theme="dark"] .ds-empty,
body[data-theme="dark"] .badge-att {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-rfi .badge-high {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .cx-rfi .badge-ans {
  background: rgba(16,185,129,.12) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .cx-rfi .badge-closed {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}

/* ---- Module: RFIs (editor — rfi_editor.php) ---- */
body[data-theme="dark"] .cx-editor {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-label {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-section-header {
  color: var(--text) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-input,
body[data-theme="dark"] .cx-select,
body[data-theme="dark"] .cx-textarea {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-input:focus,
body[data-theme="dark"] .cx-select:focus,
body[data-theme="dark"] .cx-textarea:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .cx-input-plain {
  background: transparent !important;
  color: var(--text) !important;
}
/* The RFI editor wraps the doc-number / recipient / date / priority /
   discipline fields in an inline-styled card. Adding a class hook
   (.rfi-meta-card) lets us recolor it cleanly. */
body[data-theme="dark"] .rfi-meta-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-editor .badge-open {
  background: rgba(59,130,246,.12) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.30) !important;
}
body[data-theme="dark"] .cx-editor .badge-answered {
  background: rgba(34,197,94,.12) !important;
  color: #4ade80 !important;
  border-color: rgba(34,197,94,.30) !important;
}
body[data-theme="dark"] .cx-editor .badge-closed {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body[data-theme="dark"] .cx-editor .att-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-editor .att-prev {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-editor .att-info {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-editor .att-del {
  background: var(--bm-bg2) !important;
  color: #f87171 !important;
  border-top-color: var(--line) !important;
}
body[data-theme="dark"] .cx-editor .att-del:hover {
  background: rgba(239,68,68,.12) !important;
}
body[data-theme="dark"] .file-drop-zone {
  background: var(--bm-bg2) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .file-drop-zone:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .file-drop-text {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .file-drop-text strong {
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .resp-timeline::before {
  background: var(--line) !important;
}
body[data-theme="dark"] .resp-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] .resp-icon {
  background: var(--bm-bg3) !important;
  border-color: var(--line2) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .resp-header {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .resp-body {
  color: var(--text) !important;
}
body[data-theme="dark"] .new-resp-box {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .btnrma-primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .btnrma-primary:hover {
  background: var(--bm-gold2) !important;
  border-color: var(--bm-gold2) !important;
}
body[data-theme="dark"] .btnrma-default {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .btnrma-default:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .btnrma-danger {
  background: var(--bm-bg3) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .btnrma-danger:hover {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.50) !important;
}
body[data-theme="dark"] .pill-msg {
  background: rgba(16,185,129,.10) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .err-msg {
  background: rgba(239,68,68,.10) !important;
  color: #fca5a5 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .progress-track {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .progress-bar {
  background: var(--bm-gold) !important;
}

/* ---- Module: Submittals (list — submittals.php) ---- */
body[data-theme="dark"] .cx-sheet {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-topbar {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-h1 {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-count {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-search {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-search:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .cx-btn-icon {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-btn-icon:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--line2) !important;
}
body[data-theme="dark"] .filter-tray {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .filter-tray .filter-group label {
  color: var(--muted) !important;
}
body[data-theme="dark"] .filter-tray .filter-group select,
body[data-theme="dark"] .filter-tray .filter-group input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-list {
  background: var(--bm-bg) !important;
}
body[data-theme="dark"] .cx-row {
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-row:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-row.cx-row-selected {
  background: rgba(200,169,110,.12) !important;
}
body[data-theme="dark"] .cx-strip { background: var(--line2) !important; }
body[data-theme="dark"] .status-approved .cx-strip { background: #10b981 !important; }
body[data-theme="dark"] .status-revise   .cx-strip { background: #f59e0b !important; }
body[data-theme="dark"] .status-rejected .cx-strip { background: #ef4444 !important; }
body[data-theme="dark"] .status-pending  .cx-strip { background: #3b82f6 !important; }
body[data-theme="dark"] .status-closed   .cx-strip { background: var(--muted) !important; }
body[data-theme="dark"] .col-id   { color: #7eb1ff !important; }
body[data-theme="dark"] .cx-title { color: var(--text) !important; }
body[data-theme="dark"] .cx-meta-line { color: var(--muted) !important; }
body[data-theme="dark"] .cx-meta-line strong { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-empty { color: var(--muted) !important; }
body[data-theme="dark"] .badge-rev {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body[data-theme="dark"] .badge-bic {
  background: rgba(59,130,246,.12) !important;
  color: #93c5fd !important;
  border-color: rgba(59,130,246,.30) !important;
}
body[data-theme="dark"] .badge-bic.urgent {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .disp-ok {
  background: rgba(16,185,129,.12) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .disp-warn {
  background: rgba(245,158,11,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .disp-bad {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .disp-neu {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body[data-theme="dark"] .date-text { color: var(--muted) !important; }
body[data-theme="dark"] .date-text.overdue { color: #f87171 !important; }

/* ---- Module: Submittals (editor — submittal_editor.php) ----
   The editor scopes its own CSS variables (--bg/--surface/--border/
   --text-main/--text-sub/--primary/--primary-soft/--danger) on
   :root inside its inline <style>. Redefining those vars on the
   editor's root in dark mode is much cleaner than overriding each
   .cx-* rule — every internal `background: var(--surface)` etc.
   picks up the dark values automatically. */
body[data-theme="dark"] #cxSubmittalEditorRoot,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-editor {
  --bg:           var(--bm-bg)   !important;
  --surface:      var(--bm-bg2)  !important;
  --border:       var(--line)    !important;
  --text-main:    var(--text)    !important;
  --text-sub:     var(--muted)   !important;
  --primary:      var(--bm-gold) !important;
  --primary-soft: rgba(200,169,110,.14) !important;
  --danger:       #f87171        !important;
}
/* A few editor rules use hardcoded #f9fafb / #f3f4f6 / inline styles
   that var redefinition can't reach — patch those. */
/* Explicit overrides for the surfaces — the var redefinition above
   should propagate, but some browsers / cascades don't pick up the
   redefined --surface on grandchild elements when the var was first
   set on :root by the module's own inline style. These direct rules
   guarantee the dark surface. */
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-header-card,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-timeline-card,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-att-item,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-edit-form {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-sidebar {
  background: var(--bm-bg2) !important;
  border-right-color: var(--line) !important;
}
/* Two inline-styled blocks in submittal_editor.php had hardcoded
   background:#f9fafb. We added .cx-sub-text-box and .cx-next-step-box
   class hooks; override them here with !important to beat the inline. */
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-sub-text-box {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-next-step-box {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line2) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-next-step-box h4 {
  color: var(--text) !important;
}

/* ---- Module: Contracts (list — contracts.php) ---- */
body[data-theme="dark"] .cx-contracts {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contracts input[type="text"],
body[data-theme="dark"] .cx-contracts input[type="search"],
body[data-theme="dark"] .cx-contracts select {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-contracts input:focus,
body[data-theme="dark"] .cx-contracts select:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .cx-contracts .kpi,
body[data-theme="dark"] .cx-contracts .card,
body[data-theme="dark"] .cx-contracts .table-wrap {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contracts .kpi .lab,
body[data-theme="dark"] .cx-contracts .kpi .sub,
body[data-theme="dark"] .cx-contracts .charts-empty,
body[data-theme="dark"] .cx-contracts .no-results,
body[data-theme="dark"] .cx-contracts .empty-state {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contracts .kpi .num,
body[data-theme="dark"] .cx-contracts .kpi .val {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contracts .title {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contracts .kpi.up   .sub b { color: #34d399 !important; }
body[data-theme="dark"] .cx-contracts .kpi.down .sub b { color: #f87171 !important; }
body[data-theme="dark"] .cx-contracts .tb-name { color: var(--text) !important; }
body[data-theme="dark"] .cx-contracts .tb-val  { color: var(--text) !important; }
body[data-theme="dark"] .cx-contracts .tb-meta { color: var(--muted) !important; }
body[data-theme="dark"] .cx-contracts .tb-bar {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .cx-contracts .co-stack {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .cx-contracts .scale {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contracts .legend {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contracts table {
  background: var(--bm-bg2) !important;
}
body[data-theme="dark"] .cx-contracts thead {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-contracts thead th {
  border-bottom-color: var(--line) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contracts tr.contract-row {
  border-bottom-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-contracts tr.contract-row:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-contracts tr.contract-row td.bold,
body[data-theme="dark"] .cx-contracts tr.contract-row td.amount,
body[data-theme="dark"] .cx-contracts .vendor-name {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contracts tr.contract-row td.orig,
body[data-theme="dark"] .cx-contracts .vendor-trade {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contracts tr.contract-row td.co-delta b { color: #34d399 !important; }
body[data-theme="dark"] .cx-contracts tr.contract-row td.co-delta i { color: #fbbf24 !important; }
body[data-theme="dark"] .cx-contracts .status-pill {
  background: rgba(148,163,184,.12) !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.30) !important;
}
body[data-theme="dark"] .cx-contracts .status-pill.active {
  background: rgba(16,185,129,.12) !important;
  color: #34d399 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] .cx-contracts .status-pill.closed {
  background: rgba(245,158,11,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .cx-contracts .status-donut .ring { stroke: var(--line) !important; }

/* ---- Module: Contracts (detail — contract_detail.php) ----
   This file uses heavy inline styles, so we use attribute selectors
   to override anything with `background:#fff` or `background:#f8fafc`
   inside .cx-contract-detail, plus targeted rules for the summary
   tile and panel containers. */
body[data-theme="dark"] .cx-contract-detail { color: var(--text) !important; }
body[data-theme="dark"] .cx-contract-detail > div > div[style*="background:#fff"],
body[data-theme="dark"] .cx-contract-detail div[style*="background:#fff"] {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="background:#f8fafc"] {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
}
/* The SOV and Change Orders panel headers use a CSS linear-gradient
   from #fbfcff → #ffffff for a subtle highlight — both ends nearly
   white, so they render as a clean white strip in dark mode. Override
   to the dark panel-header surface used elsewhere. */
body[data-theme="dark"] .cx-contract-detail div[style*="linear-gradient"] {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="background:#f0f9ff"] {
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.30) !important;
}
body[data-theme="dark"] .cx-contract-detail thead[style*="background:#f1f5f9"] {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-contract-detail tr[style*="background:#f8fafc"] {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .cx-contract-detail tr[style*="border-bottom:1px solid #f1f5f9"] {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#0f172a"],
body[data-theme="dark"] .cx-contract-detail label[style*="color:#0f172a"] {
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#334155"] {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#64748b"],
body[data-theme="dark"] .cx-contract-detail label[style*="color:#64748b"],
body[data-theme="dark"] .cx-contract-detail span[style*="color:#94a3b8"],
body[data-theme="dark"] .cx-contract-detail div[style*="color:#94a3b8"] {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#059669"] {
  color: #34d399 !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#0284c7"] {
  color: #7dd3fc !important;
}
body[data-theme="dark"] .cx-contract-detail div[style*="color:#0369a1"] {
  color: #7dd3fc !important;
}
/* Inline-styled <input>s inside the detail page use white bg + black
   text. Force dark equivalents. */
body[data-theme="dark"] .cx-contract-detail input[style*="background:#fff"],
body[data-theme="dark"] .cx-contract-detail input[style*="background:#f1f5f9"] {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-contract-detail select[style*="background"] {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-contract-detail button[style*="background:#fff"],
body[data-theme="dark"] .cx-contract-detail a[style*="background:#fff"] {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-contract-detail button[style*="color:#b91c1c"] {
  background: rgba(239,68,68,.10) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .cx-contract-detail .co-block {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}

/* ---- Module: Schedule of Values (sov.php) ---- */
body[data-theme="dark"] .cx-sov { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .sov-title { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .footnote  { color: var(--muted) !important; }

/* KPI cards on the top strip */
body[data-theme="dark"] .cx-sov .kpi-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-sov .kpi-card.accent {
  background: rgba(56,189,248,.08) !important;
  border-color: rgba(56,189,248,.30) !important;
}
body[data-theme="dark"] .cx-sov .kpi-card.warning {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .cx-sov .kpi-label { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .kpi-card.accent  .kpi-label { color: #7dd3fc !important; }
body[data-theme="dark"] .cx-sov .kpi-card.warning .kpi-label { color: #fbbf24 !important; }
body[data-theme="dark"] .cx-sov .kpi-value { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .kpi-value.green  { color: #34d399 !important; }
body[data-theme="dark"] .cx-sov .kpi-value.blue   { color: #7dd3fc !important; }
body[data-theme="dark"] .cx-sov .kpi-value.orange { color: #fb923c !important; }

/* The main SOV table */
body[data-theme="dark"] .cx-sov .sov-table-wrap {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov #sovTable { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-sov #sovTotalsRow {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .totals-label { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .totals-value { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .sov-col-headers th {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-sov .sov-col-headers th:hover {
  color: var(--text) !important;
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-sov tr.sovRow:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cx-sov .sov-empty { color: var(--muted) !important; }

/* Column picker dropdown */
body[data-theme="dark"] .cx-sov #sovColsMenu {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cx-sov #sovColsMenu .menu-title { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov #sovColsList .col-row:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cx-sov #sovColsList .col-row .col-label { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-sov #sovColsMenu .menu-foot {
  color: var(--muted) !important;
  border-top-color: var(--line) !important;
}

/* Import dialog modal */
body[data-theme="dark"] .cx-sov #sovImportDialog {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov #sovImportDialog .modal-title { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov #sovImportDialog .modal-body  { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-sov #sovImportDialog .req-label   { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov #sovImportDialog .req-note,
body[data-theme="dark"] .cx-sov #sovImportDialog .hdr-title,
body[data-theme="dark"] .cx-sov #sovImportDialog .hdr-tip {
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-sov #sovImportDialog .headers-card {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov #sovImportDialog .hdr-grid { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov #sovImportDialog .modal-foot {
  background: var(--bm-bg3) !important;
  border-top-color: var(--line) !important;
}

/* Prime CO blocks (change orders for the SOV) */
body[data-theme="dark"] .cx-sov .pco-section {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .pco-section-head { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .cx-sov .pco-section-title { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .pco-section-body { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cx-sov .pco-empty { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .prime-co-block .co-head {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .prime-co-block .co-head input:not([type]),
body[data-theme="dark"] .cx-sov .prime-co-block .co-head input[type="text"] {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .prime-co-block .co-head .co-num { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block .co-table-wrap { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block .co-table thead {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .cx-sov .prime-co-block .co-table tbody tr.co-item:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-sov .prime-co-block .co-table td { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block .co-table td.bold { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block .co-table tr.co-add { background: var(--bm-bg2) !important; }
body[data-theme="dark"] .cx-sov .prime-co-block .co-table tr.co-add input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Pane B side (sov.php is dual-pane: main table on B, KPI strip + charts also there).
   The kpi/timeline/over-budget cards used in Pane B. */
body[data-theme="dark"] .cx-sov .kpi,
body[data-theme="dark"] .cx-sov .chart-card,
body[data-theme="dark"] .cx-sov .headers-card,
body[data-theme="dark"] .cx-sov .ob-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .kpi .lab    { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .kpi .num    { color: var(--text)  !important; }
body[data-theme="dark"] .cx-sov .kpi .sub    { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .kpi .sub b  { color: var(--text)  !important; }
body[data-theme="dark"] .cx-sov .progress    { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .cx-sov .tl-meta .pct      { color: #34d399 !important; }
body[data-theme="dark"] .cx-sov .tl-meta .pct.warn { color: #fbbf24 !important; }
body[data-theme="dark"] .cx-sov .tl-meta .pct.over { color: #f87171 !important; }
body[data-theme="dark"] .cx-sov .chart-empty { color: var(--muted) !important; }

/* Over-budget cards keep a warning amber tint, but on a dark base. */
body[data-theme="dark"] .cx-sov .ob-card {
  background: rgba(245,158,11,.08) !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] .cx-sov .ob-card h3,
body[data-theme="dark"] .cx-sov .ob-card .menu-title {
  color: #fbbf24 !important;
}
body[data-theme="dark"] .cx-sov .ob-row {
  background: var(--bm-bg2) !important;
  border-color: rgba(245,158,11,.20) !important;
}
body[data-theme="dark"] .cx-sov .ob-row:hover { border-color: rgba(245,158,11,.45) !important; }

/* The "Ln" code chip on each over-budget row */
body[data-theme="dark"] .cx-sov .ln {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}

/* The SOV KPI strip uses .val (not .num) for its big numbers, and the
   inline stylesheet hard-codes color:#0f172a — invisible on black.
   Map onto --text in dark, and brighten the sub b accent too. */
body[data-theme="dark"] .cx-sov .kpi .val { color: var(--text) !important; }

/* Top-Line-Items chart (left chart in pane B): row description, $ value,
   the line-number chip, and the bar's empty/contract track all had
   light-mode colors with no dark override. */
body[data-theme="dark"] .cx-sov .tl-name .desc { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .tl-val        { color: var(--text) !important; }
body[data-theme="dark"] .cx-sov .tl-name .ln {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cx-sov .tl-bar { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .cx-sov .tl-bar .contract-fill {
  background: repeating-linear-gradient(45deg,
    rgba(255,255,255,.08), rgba(255,255,255,.08) 4px,
    rgba(255,255,255,.03) 4px, rgba(255,255,255,.03) 8px) !important;
}

/* Progress-composition donut card (right chart): the "1 / Complete" stack
   in the center, plus the legend rows and the card's eyebrow heading. */
body[data-theme="dark"] .cx-sov .pc-center .n   { color: var(--text)  !important; }
body[data-theme="dark"] .cx-sov .pc-center .l   { color: var(--muted) !important; }
body[data-theme="dark"] .cx-sov .pc-legend .lr .k { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-sov .pc-legend .v     { color: var(--text)    !important; }
body[data-theme="dark"] .cx-sov .chart-card h3,
body[data-theme="dark"] .cx-sov .chart-card h3 .right { color: var(--muted) !important; }
/* Background ring drawn by the SVG before the JS paints the segments. */
body[data-theme="dark"] .cx-sov #sovProgressDonut > circle:not([stroke-dasharray]) {
  stroke: var(--bm-bg3) !important;
}

/* SOV main table — the sticky COLUMN HEADER row had background:#fff
   directly on the <tr> with no dark override, which is the white strip
   visible between the totals row and the data rows in pane B. */
body[data-theme="dark"] .cx-sov .sov-col-headers {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-sov .sov-col-headers th {
  background: var(--bm-bg2) !important;
}

/* Prime CO inner table: the inline rule paints background on <th>, so the
   thead-level dark override doesn't reach it. Hit the th directly. */
body[data-theme="dark"] .cx-sov .prime-co-block .co-table thead th {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}

/* ---- SOV editor (payitem_editor.php) ---- */
body[data-theme="dark"] #piEditorScope { color: var(--text) !important; }
body[data-theme="dark"] #piEditorScope .pi-title { color: var(--text) !important; }
body[data-theme="dark"] #piEditorScope .pi-card,
body[data-theme="dark"] #piEditorScope .logs-table-wrap {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .pi-card label,
body[data-theme="dark"] #piEditorScope .pi-card-foot,
body[data-theme="dark"] #piEditorScope .logs-card-hint {
  color: var(--muted) !important;
}
body[data-theme="dark"] #piEditorScope .logs-card-title { color: var(--text) !important; }
body[data-theme="dark"] #piEditorScope .log-add {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .log-add label { color: var(--muted) !important; }
body[data-theme="dark"] #piEditorScope .log-add input,
body[data-theme="dark"] #piEditorScope .pi-card input,
body[data-theme="dark"] #piEditorScope .pi-card select,
body[data-theme="dark"] #piEditorScope .pi-card textarea {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .log-add input:focus,
body[data-theme="dark"] #piEditorScope .pi-card input:focus,
body[data-theme="dark"] #piEditorScope .pi-card select:focus,
body[data-theme="dark"] #piEditorScope .pi-card textarea:focus {
  outline: 2px solid var(--bm-gold) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #piEditorScope .logs-table { color: var(--bm-ink2) !important; }
body[data-theme="dark"] #piEditorScope .logs-table thead {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
/* The inline stylesheet paints background:#f1f5f9 on the <th> directly,
   so the thead-level rule above doesn't reach it — this is the white
   header strip in pane C. Override at the th level. */
body[data-theme="dark"] #piEditorScope .logs-table thead th {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .logs-table tbody td {
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .logs-table td.num { color: var(--text) !important; }
body[data-theme="dark"] #piEditorScope .logs-table .log-empty { color: var(--muted) !important; }
body[data-theme="dark"] #piEditorScope .log-btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #piEditorScope .log-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #piEditorScope .log-btn.danger {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] #piEditorScope .log-btn.danger:hover {
  background: rgba(239,68,68,.10) !important;
}
body[data-theme="dark"] #piEditorScope .log-btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #piEditorScope .log-btn.primary:hover {
  background: var(--bm-gold2) !important;
}

/* ============================================================
   Module: Pay Applications — list view (payapps.php) in pane B.
   The inline stylesheet hard-codes a lot of light-mode colors
   (white panel surfaces, slate-900 headings, slate-500 muted
   text). Map all of them onto the BM dark palette so the module
   reads the same as SOV / Contracts / Overview in dark mode.
   ============================================================ */
body[data-theme="dark"] .cx-pa-list { color: var(--text) !important; }
body[data-theme="dark"] .cx-pa-list .title { color: var(--text) !important; }

/* Pay-apps list table — header bg was #fff (THE white-header strip),
   body cells used slate-700, hover rows used near-white. */
body[data-theme="dark"] .cx-pa-list .data-grid th {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-pa-list .data-grid td {
  color: var(--bm-ink2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-pa-list .data-grid tr:hover,
body[data-theme="dark"] .cx-pa-list .pa-row:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-pa-list .hl { color: var(--text) !important; }

/* Status badges — keep status hues but on a dark-tinted surface */
body[data-theme="dark"] .cx-pa-list .badge.draft {
  background: rgba(148,163,184,.15) !important;
  color: #cbd5e1 !important;
}
body[data-theme="dark"] .cx-pa-list .badge.pending {
  background: rgba(217,119,6,.18) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] .cx-pa-list .badge.approved {
  background: rgba(74,107,58,.22) !important;
  color: #86efac !important;
}

/* KPI strip — the dollar values used #0f172a (slate-900), invisible on black */
body[data-theme="dark"] .cx-pa-list .kpi {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-pa-list .kpi:hover {
  border-color: var(--bm-line2) !important;
  box-shadow: 0 6px 20px -10px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .cx-pa-list .kpi .lab   { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .kpi .val   { color: var(--text)  !important; }
body[data-theme="dark"] .cx-pa-list .kpi .sub   { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .kpi .sub b { color: var(--text)  !important; }

/* Legacy stat-card variant (still referenced by updateStatCard() flash) */
body[data-theme="dark"] .cx-pa-list .stat-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-pa-list .stat-label          { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .stat-value.neutral  { color: var(--text) !important; }
body[data-theme="dark"] .cx-pa-list .stat-value.muted    { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .stat-value.positive { color: #34d399 !important; }
body[data-theme="dark"] .cx-pa-list .stat-value.warning  { color: #fb923c !important; }

/* Chart cards (Billing Trend + Status Mix) */
body[data-theme="dark"] .cx-pa-list .pa-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-pa-list .pa-card h3,
body[data-theme="dark"] .cx-pa-list .pa-card h3 .right { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .pa-legend         { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-empty    { color: var(--muted) !important; }

/* Status-mix donut: center stack + legend */
body[data-theme="dark"] .cx-pa-list .pa-donut .center .n { color: var(--text)  !important; }
body[data-theme="dark"] .cx-pa-list .pa-donut .center .l { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .pa-donut .lr .k     { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cx-pa-list .pa-donut .lr .v     { color: var(--text)    !important; }
body[data-theme="dark"] .cx-pa-list .pa-donut .lr .v .sub { color: var(--muted) !important; }

/* The background track ring drawn before JS paints the segments */
body[data-theme="dark"] .cx-pa-list #paStatusDonut > circle:not([stroke-dasharray]) {
  stroke: var(--bm-bg3) !important;
}

/* Billing trend chart — the SVG is generated with hard-coded fills on
   text and lines. Target those by attribute so the axis labels and
   grid lines read against the dark canvas. */
body[data-theme="dark"] .cx-pa-list .pa-chart-svg text[fill="#94a3b8"],
body[data-theme="dark"] .cx-pa-list .pa-chart-svg text[fill="#64748b"] {
  fill: var(--muted) !important;
}
body[data-theme="dark"] .cx-pa-list .pa-chart-svg text[fill="#2563eb"] { fill: #7dd3fc !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-svg path[stroke="#2563eb"]   { stroke: #7dd3fc !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-svg circle[stroke="#2563eb"] { stroke: #7dd3fc !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-svg line[stroke="#f1f5f9"]   { stroke: var(--bm-line) !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-svg line[stroke="#cbd5e1"]   { stroke: var(--bm-line2) !important; }

/* Crosshair + tooltip on the trend chart */
body[data-theme="dark"] .cx-pa-list .pa-cross .v-line   { stroke: var(--bm-ink3) !important; }
body[data-theme="dark"] .cx-pa-list .pa-cross .h-line-l { stroke: var(--muted)   !important; }
body[data-theme="dark"] .cx-pa-list .pa-cross .axis-pill { fill: var(--bm-bg3) !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-tip {
  background: var(--bm-bg3) !important;
  border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(0,0,0,.7) !important;
}
body[data-theme="dark"] .cx-pa-list .pa-chart-tip .t-row .k { color: var(--muted) !important; }
body[data-theme="dark"] .cx-pa-list .pa-chart-tip .t-row .v.line { color: #7dd3fc !important; }

/* The list table is wrapped in an inline-styled div: background:#fff /
   border:#e2e8f0. Match by attribute so the wrapper darkens cleanly. */
body[data-theme="dark"] .cx-pa-list > div[style*="background:#fff"] {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}

/* Export CSV button on the toolbar — inline styles override .btn,
   so we beat them at the !important level. */
body[data-theme="dark"] .cx-pa-list a.btn,
body[data-theme="dark"] .cx-pa-list a.btn:hover {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}

/* ============================================================
   Module: Pay App Editor (payapp_editor.php) — pane C.
   The editor's <style> block was written before the dark theme,
   so almost every surface, label, input, table, and button uses
   light-mode hex values directly. Translate the lot to BM tokens.
   ============================================================ */
body[data-theme="dark"] #paEditorScope { color: var(--text) !important; }
body[data-theme="dark"] #paEditorScope .title-blk h2 { color: var(--text) !important; }

/* Top "Bill To / Period / Status" grid */
body[data-theme="dark"] #paEditorScope .top-grid {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .field label { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .field input,
body[data-theme="dark"] #paEditorScope .field select {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .field input:focus,
body[data-theme="dark"] #paEditorScope .field select:focus {
  outline-color: var(--bm-gold) !important;
  border-color: var(--bm-gold) !important;
}

body[data-theme="dark"] #paEditorScope .section-title {
  color: var(--text) !important;
  border-bottom-color: var(--line) !important;
}

/* Base Contract Items + Change Orders tables — these had the
   second white-header strip in pane C. */
body[data-theme="dark"] #paEditorScope .items-table {
  background: var(--bm-bg2) !important;
  box-shadow: none !important;
}
body[data-theme="dark"] #paEditorScope .items-table th {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .items-table td {
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] #paEditorScope .items-table tr:hover {
  background: var(--bm-bg-warm) !important;
}

/* Money input cells */
body[data-theme="dark"] #paEditorScope input.money-in {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope input.money-in:focus {
  border-color: var(--bm-gold) !important;
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] #paEditorScope .ro-val {
  background: var(--bm-bg) !important;
  color: var(--muted) !important;
}
/* Manual-retainage amber highlight: keep it visible on dark */
body[data-theme="dark"] #paEditorScope input.manual-ret {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}

/* Floating summary card (bottom-right) */
body[data-theme="dark"] #paEditorScope .fin-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] #paEditorScope .fin-card-header span { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .fin-card-toggle      { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .fin-row              { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .fin-row.total {
  color: var(--text) !important;
  border-top-color: var(--line) !important;
}

/* Inline pay-log panel — toggle button + count badge */
body[data-theme="dark"] #paEditorScope .log-toggle {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .log-toggle:hover {
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] #paEditorScope .log-toggle.open {
  color: var(--bm-gold) !important;
  border-color: rgba(200,169,110,.30) !important;
  background: rgba(200,169,110,.10) !important;
}
body[data-theme="dark"] #paEditorScope .log-count {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] #paEditorScope .log-count.has {
  background: rgba(200,169,110,.18) !important;
  color: var(--bm-gold) !important;
}

/* Expanded sub-row that holds the pay-log panel */
body[data-theme="dark"] #paEditorScope tr.logs-row > td {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .logs-panel-title       { color: var(--text)  !important; }
body[data-theme="dark"] #paEditorScope .logs-panel-hint        { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .logs-panel-hint strong { color: var(--text)  !important; }

/* Logs table inside the sub-row */
body[data-theme="dark"] #paEditorScope .logs-table {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .logs-table th {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .logs-table td {
  color: var(--bm-ink2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .logs-table td.num     { color: var(--text)  !important; }
body[data-theme="dark"] #paEditorScope .logs-table .log-empty { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .logs-table input.log-edit-input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Log action buttons (Edit / Delete / Save / Cancel / Add Log) */
body[data-theme="dark"] #paEditorScope .log-btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .log-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #paEditorScope .log-btn.danger {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] #paEditorScope .log-btn.danger:hover { background: rgba(239,68,68,.10) !important; }
body[data-theme="dark"] #paEditorScope .log-btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #paEditorScope .log-btn.primary:hover { background: var(--bm-gold2) !important; }

/* "Add log" form (dashed border, light bg by default) */
body[data-theme="dark"] #paEditorScope .log-add {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope .log-add label { color: var(--muted) !important; }
body[data-theme="dark"] #paEditorScope .log-add input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* Inline-styled toolbar buttons in the editor (Export PDF / Excel /
   View Only). They use `style="background:#fff; ..."` directly so we
   need !important to win. Keep the red/green action colors. */
body[data-theme="dark"] #paEditorScope a.btn {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #paEditorScope a.btn[href*="payapp_pdf"]   { color: #fca5a5 !important; }
body[data-theme="dark"] #paEditorScope a.btn[href*="payapp_excel"] { color: #86efac !important; }

/* Inline view-only / error / info banners */
body[data-theme="dark"] #paEditorScope > div[style*="#fef3c7"] {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.30) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] #paEditorScope > div[style*="#fef3c7"] strong { color: #fcd34d !important; }
body[data-theme="dark"] #paErrorBanner {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] #paInfoBanner {
  background: rgba(59,130,246,.10) !important;
  border-color: rgba(59,130,246,.30) !important;
  color: #93c5fd !important;
}
/* The "Set period start/end first" hint that renderLogsPanel emits
   uses inline amber styles too. */
body[data-theme="dark"] #paEditorScope .logs-panel-hint[style*="#fef3c7"] {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.30) !important;
  color: #fbbf24 !important;
}

/* ============================================================
   Module: Budget & Forecast (budget.php + budget_editor.php)
   These two files were authored before the dark theme and use
   inline `style="..."` attributes almost exclusively — white
   card surfaces, slate-900 text, slate-50 hovers, tinted info
   panels. Rather than enumerate every element, we use attribute
   substring selectors (`[style*="…"]`) to catch all elements
   whose inline style contains a known light-mode hex. CSS
   `!important` beats inline non-important rules, so this
   approach lets a small set of selectors handle a large surface.
   ============================================================ */

/* Wrapper scopes (added by PHP):
   - .cx-budget       → root of budget.php (pane B)
   - #bdEditorScope   → root of budget_editor.php (pane C)
   - #periodUploadModal, #costUploadModal → modal dialogs */
body[data-theme="dark"] .cx-budget,
body[data-theme="dark"] #bdEditorScope {
  color: var(--text);
  /* The Spent column uses `color:var(--primary)` inline. That
     variable isn't defined for this scope by default, so the cell
     text collapses to an unrenderable value. Bind --primary to a
     readable accent blue so those cells become visible without
     having to touch every inline style. */
  --primary: #93c5fd;
}

/* The two main tables (.cx-budget budget table + #bdEditorScope's
   Quantities/Expenses tables) have many <td> cells with no inline
   color. Inheritance from .cx-budget should give them var(--text),
   but in practice the tbody cells render with an unset/dim color in
   dark mode (see the other modules — SOV, payapps, contracts —
   which all set td color explicitly for the same reason). We do
   the same here, scoped to body cells. We do NOT add !important so
   that the dozens of inline status colors (var(--accent2), var(--danger),
   #15803d, etc.) on individual cells continue to win. */
body[data-theme="dark"] .cx-budget tbody td,
body[data-theme="dark"] #bdEditorScope tbody td {
  color: var(--bm-ink2);
}
/* Bold/key cells get the brighter primary white */
body[data-theme="dark"] .cx-budget tbody td.c-code,
body[data-theme="dark"] .cx-budget tbody td.c-desc {
  color: var(--text);
}
/* Column headers — muted, matches the language used in other modules */
body[data-theme="dark"] .cx-budget thead th,
body[data-theme="dark"] #bdEditorScope thead th {
  color: var(--muted);
}

/* ── Surfaces: white panels become BM raised dark ───────────── */
body[data-theme="dark"] .cx-budget [style*="background:#fff"],
body[data-theme="dark"] .cx-budget [style*="background:#ffffff"],
body[data-theme="dark"] #bdEditorScope [style*="background:#fff"],
body[data-theme="dark"] #bdEditorScope [style*="background:#ffffff"],
body[data-theme="dark"] #periodUploadModal [style*="background:#fff"],
body[data-theme="dark"] #periodUploadModal [style*="background:#ffffff"],
body[data-theme="dark"] #costUploadModal [style*="background:#fff"],
body[data-theme="dark"] #costUploadModal [style*="background:#ffffff"] {
  background: var(--bm-bg2) !important;
}

/* Slate-50/100, gray-50 — recessed dark surface (date pill, toggle
   pill, top-vendor cards, drilldown headers, etc.) */
body[data-theme="dark"] .cx-budget [style*="background:#f8fafc"],
body[data-theme="dark"] .cx-budget [style*="background:#f1f5f9"],
body[data-theme="dark"] .cx-budget [style*="background:#f9fafb"],
body[data-theme="dark"] .cx-budget [style*="background:#f3f4f6"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f8fafc"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f1f5f9"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f9fafb"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f3f4f6"],
body[data-theme="dark"] #periodUploadModal [style*="background:#f9fafb"],
body[data-theme="dark"] #periodUploadModal [style*="background:#f8fafc"],
body[data-theme="dark"] #periodUploadModal [style*="background:#f3f4f6"],
body[data-theme="dark"] #costUploadModal [style*="background:#f9fafb"],
body[data-theme="dark"] #costUploadModal [style*="background:#f8fafc"],
body[data-theme="dark"] #costUploadModal [style*="background:#f3f4f6"] {
  background: var(--bm-bg3) !important;
}

/* The Add-Quantity form uses a slate gradient — re-tint for dark */
body[data-theme="dark"] #bdEditorScope [style*="linear-gradient(135deg, #f8fafc"] {
  background: linear-gradient(135deg, var(--bm-bg-warm) 0%, var(--bm-bg3) 100%) !important;
}

/* Two dark-slate table headers (Quantities + Expense Ledger) used
   #1e293b which is already dark-ish — flatten them onto bm-bg3 so
   they blend with the surrounding card chrome. */
body[data-theme="dark"] #bdEditorScope thead[style*="background:#1e293b"] {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] #bdEditorScope thead[style*="background:#1e293b"] th {
  color: var(--bm-ink2) !important;
}

/* ── Text colors ───────────────────────────────────────────── */
/* Slate-900 headings + value labels — primary white */
body[data-theme="dark"] .cx-budget [style*="color:#0f172a"],
body[data-theme="dark"] #bdEditorScope [style*="color:#0f172a"] {
  color: var(--text) !important;
}

/* Slate-500/600/700 muted body — softened white */
body[data-theme="dark"] .cx-budget [style*="color:#64748b"],
body[data-theme="dark"] .cx-budget [style*="color:#475569"],
body[data-theme="dark"] .cx-budget [style*="color:#334155"],
body[data-theme="dark"] .cx-budget [style*="color:#6b7280"],
body[data-theme="dark"] .cx-budget [style*="color:#4b5563"],
body[data-theme="dark"] .cx-budget [style*="color:#374151"],
body[data-theme="dark"] .cx-budget [style*="color:#1f2937"],
body[data-theme="dark"] #bdEditorScope [style*="color:#64748b"],
body[data-theme="dark"] #bdEditorScope [style*="color:#475569"],
body[data-theme="dark"] #bdEditorScope [style*="color:#334155"],
body[data-theme="dark"] #bdEditorScope [style*="color:#6b7280"],
body[data-theme="dark"] #bdEditorScope [style*="color:#4b5563"],
body[data-theme="dark"] #bdEditorScope [style*="color:#374151"],
body[data-theme="dark"] #bdEditorScope [style*="color:#1f2937"],
body[data-theme="dark"] #periodUploadModal [style*="color:#64748b"],
body[data-theme="dark"] #periodUploadModal [style*="color:#374151"],
body[data-theme="dark"] #periodUploadModal [style*="color:#1f2937"],
body[data-theme="dark"] #periodUploadModal [style*="color:#4b5563"],
body[data-theme="dark"] #periodUploadModal [style*="color:#6b7280"],
body[data-theme="dark"] #costUploadModal [style*="color:#64748b"],
body[data-theme="dark"] #costUploadModal [style*="color:#374151"],
body[data-theme="dark"] #costUploadModal [style*="color:#1f2937"],
body[data-theme="dark"] #costUploadModal [style*="color:#4b5563"],
body[data-theme="dark"] #costUploadModal [style*="color:#6b7280"] {
  color: var(--muted) !important;
}

/* Slate-300/400 placeholder text — faintest white */
body[data-theme="dark"] .cx-budget [style*="color:#94a3b8"],
body[data-theme="dark"] .cx-budget [style*="color:#cbd5e1"],
body[data-theme="dark"] #bdEditorScope [style*="color:#94a3b8"],
body[data-theme="dark"] #bdEditorScope [style*="color:#cbd5e1"] {
  color: var(--bm-ink3) !important;
}

/* Dark-on-tinted-card text — the financial-overview cards in pane C
   used very dark text on pastel tints. Re-color so the same hues
   read on the dark card surfaces we set above. */
body[data-theme="dark"] #bdEditorScope [style*="color:#0c4a6e"],
body[data-theme="dark"] #bdEditorScope [style*="color:#0369a1"] { color: #7dd3fc !important; }
body[data-theme="dark"] #bdEditorScope [style*="color:#78350f"],
body[data-theme="dark"] #bdEditorScope [style*="color:#92400e"],
body[data-theme="dark"] #bdEditorScope [style*="color:#a16207"] { color: #fbbf24 !important; }
body[data-theme="dark"] #bdEditorScope [style*="color:#166534"],
body[data-theme="dark"] #bdEditorScope [style*="color:#15803d"] { color: #86efac !important; }
body[data-theme="dark"] #bdEditorScope [style*="color:#1e40af"] { color: #93c5fd !important; }
body[data-theme="dark"] #bdEditorScope [style*="color:#991b1b"] { color: #fca5a5 !important; }
/* Same for the Snapshot-mode info badge on the list view */
body[data-theme="dark"] .cx-budget [style*="color:#1e40af"] { color: #93c5fd !important; }

/* ── Tinted info panels ────────────────────────────────────── */
/* Sky-tinted cards / hints */
body[data-theme="dark"] .cx-budget [style*="background:#eff6ff"],
body[data-theme="dark"] .cx-budget [style*="background:#dbeafe"],
body[data-theme="dark"] #bdEditorScope [style*="background:#eff6ff"],
body[data-theme="dark"] #bdEditorScope [style*="background:#dbeafe"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f0f9ff"],
body[data-theme="dark"] #periodUploadModal [style*="background:#dbeafe"],
body[data-theme="dark"] #costUploadModal [style*="background:#dbeafe"] {
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.30) !important;
}

/* Amber-tinted cards / hints */
body[data-theme="dark"] .cx-budget [style*="background:#fef3c7"],
body[data-theme="dark"] #bdEditorScope [style*="background:#fef3c7"],
body[data-theme="dark"] #periodUploadModal [style*="background:#fef3c7"],
body[data-theme="dark"] #costUploadModal [style*="background:#fef3c7"] {
  background: rgba(245,158,11,.10) !important;
  border-color: rgba(245,158,11,.30) !important;
}

/* Green-tinted cards / hints */
body[data-theme="dark"] .cx-budget [style*="background:#dcfce7"],
body[data-theme="dark"] #bdEditorScope [style*="background:#dcfce7"],
body[data-theme="dark"] #bdEditorScope [style*="background:#f0fdf4"] {
  background: rgba(74,107,58,.18) !important;
  border-color: rgba(74,107,58,.40) !important;
}

/* Red-tinted cards / hints */
body[data-theme="dark"] .cx-budget [style*="background:#fee2e2"],
body[data-theme="dark"] #bdEditorScope [style*="background:#fee2e2"] {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
}

/* ── Borders ───────────────────────────────────────────────── */
/* Any inline border using the slate-100..gray-300 family gets
   mapped onto --line. Match the literal `solid <hex>` substring
   so we don't accidentally retint the green/red status borders. */
body[data-theme="dark"] .cx-budget [style*="solid #e5e7eb"],
body[data-theme="dark"] .cx-budget [style*="solid #e2e8f0"],
body[data-theme="dark"] .cx-budget [style*="solid #f1f5f9"],
body[data-theme="dark"] .cx-budget [style*="solid #d1d5db"],
body[data-theme="dark"] .cx-budget [style*="solid #cbd5e1"],
body[data-theme="dark"] #bdEditorScope [style*="solid #e5e7eb"],
body[data-theme="dark"] #bdEditorScope [style*="solid #e2e8f0"],
body[data-theme="dark"] #bdEditorScope [style*="solid #f1f5f9"],
body[data-theme="dark"] #bdEditorScope [style*="solid #d1d5db"],
body[data-theme="dark"] #bdEditorScope [style*="solid #cbd5e1"],
body[data-theme="dark"] #periodUploadModal [style*="solid #e5e7eb"],
body[data-theme="dark"] #costUploadModal [style*="solid #e5e7eb"] {
  border-color: var(--line) !important;
}

/* Tinted-card borders — set their border-color to match the
   re-tinted surfaces above. */
body[data-theme="dark"] #bdEditorScope [style*="solid #bae6fd"],
body[data-theme="dark"] #bdEditorScope [style*="solid #bfdbfe"] { border-color: rgba(56,189,248,.30) !important; }
body[data-theme="dark"] #bdEditorScope [style*="solid #fde047"],
body[data-theme="dark"] #bdEditorScope [style*="solid #fde68a"] { border-color: rgba(245,158,11,.30) !important; }
body[data-theme="dark"] #bdEditorScope [style*="solid #86efac"],
body[data-theme="dark"] #bdEditorScope [style*="solid #bbf7d0"] { border-color: rgba(74,107,58,.40) !important; }

/* ── Misc bits ─────────────────────────────────────────────── */
/* Progress bar tracks (light-mode #e2e8f0) — dark slot */
body[data-theme="dark"] #bdEditorScope [style*="background:#e2e8f0"] {
  background: var(--bm-bg3) !important;
}

/* Dropdown menu hover and modal backdrop don't pick up the dark
   theme automatically — the .p-item:hover rule lives inside an
   inline <style> tag at the bottom of budget.php, scoped to the
   whole document. Re-scope it for dark. */
body[data-theme="dark"] .cx-budget .p-item:hover {
  background: var(--bm-bg-warm) !important;
}

/* Snapshot menu source button (active state set by JS to #fff) and
   the View toggle buttons (Cost / Financial) — these get their bg
   flipped to white by inline JS when active. The CSS rule above
   catches them via [style*="background:#fff"], so the active state
   is dark-themed for free. */

/* Modal backdrop is rgba(0,0,0,0.5) which is fine on both themes */

/* Modal dialog corners + input controls inside modals */
body[data-theme="dark"] #periodUploadModal input,
body[data-theme="dark"] #costUploadModal input,
body[data-theme="dark"] #periodUploadModal textarea,
body[data-theme="dark"] #costUploadModal textarea {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* The inline-styled "Add Quantity" form inputs (set bg to #fff) are
   already covered by the global white-bg → bm-bg2 rule. Refine to
   bm-bg3 (recessed) for input wells. */
body[data-theme="dark"] #bdEditorScope input[style*="background:#fff"],
body[data-theme="dark"] #bdEditorScope textarea[style*="background:#fff"] {
  background: var(--bm-bg3) !important;
}

/* Pay-item select on the edit form sets border:1px solid #ddd inline */
body[data-theme="dark"] #bdEditorScope [style*="solid #ddd"] {
  border-color: var(--line) !important;
}

/* Drilldown collapsible header chevron — the SVG uses currentColor */
body[data-theme="dark"] #bdEditorScope #drilldown-icon {
  color: var(--muted);
}

/* The Snapshot-mode "(capped at snapshot date: …)" inline note
   used color:#dc2626 — keep red but brighten for legibility. */
body[data-theme="dark"] .cx-budget [style*="color:#dc2626"],
body[data-theme="dark"] #bdEditorScope [style*="color:#dc2626"] {
  color: #f87171 !important;
}

/* "Upload New Snapshot" item used color:#3b82f6 — keep blue accent */
body[data-theme="dark"] .cx-budget [style*="color:#3b82f6"] { color: #7dd3fc !important; }

/* Forecast-icon "Q" and manual-forecast "*" hints — keep their hues */
/* (color:#d97706 / #06b6d4 stay readable on dark, no override needed) */

/* ============================================================
   Module: Lookahead (view_list.php + view_daily.php +
   view_hourly.php). Two of the three views (daily, hourly)
   declare their own CSS custom properties on #cxld_root /
   #cxlh_root, so the cleanest dark-mode hookup is to redefine
   those vars — most styling in daily.css / hourly.css picks
   up the dark palette for free. The remaining work is patches
   for hex literals that bypass the vars, plus a fresh dark
   theme for view_list.php (which uses class-based styles).
   ============================================================ */

/* ── Pane B: schedule list (view_list.php) ──────────────────── */
body[data-theme="dark"] .sched-list-container {
  background: var(--bm-bg2) !important;
  border-right-color: var(--line) !important;
}
body[data-theme="dark"] .sched-list-container .sched-tabs,
body[data-theme="dark"] .sched-list-container .sched-toolbar {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .sched-list-container .sched-tab        { color: var(--muted) !important; }
body[data-theme="dark"] .sched-list-container .sched-tab:hover {
  color: var(--text) !important;
  background: var(--bm-bg-warm) !important;
}
/* Active tab — keep the accent ring, but switch from cobalt to cyan
   so it reads against the dark surface like the rest of the dashboard. */
body[data-theme="dark"] .sched-list-container .sched-tab.active {
  color: #7dd3fc !important;
  border-bottom-color: #7dd3fc !important;
}
body[data-theme="dark"] .sched-list-container .sched-tab .count {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .sched-list-container .sched-tab.active .count {
  background: rgba(125,211,252,.18) !important;
  color: #7dd3fc !important;
}
body[data-theme="dark"] .sched-list-container .sched-toolbar h6 { color: var(--muted) !important; }

/* List rows */
body[data-theme="dark"] .sched-list-container .sched-item {
  color: var(--bm-ink2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .sched-list-container .sched-item:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .sched-list-container .sched-item.active {
  background: rgba(125,211,252,.10) !important;
  border-left-color: #7dd3fc !important;
  color: #7dd3fc !important;
}
body[data-theme="dark"] .sched-list-container .empty-msg { color: var(--muted) !important; }

/* Row-action buttons + share badge */
body[data-theme="dark"] .sched-list-container .sched-item .dup-btn { color: #7dd3fc !important; }
body[data-theme="dark"] .sched-list-container .sched-item .dup-btn:hover { background: rgba(125,211,252,.12) !important; }
body[data-theme="dark"] .sched-list-container .sched-item .share-btn { color: #86efac !important; }
body[data-theme="dark"] .sched-list-container .sched-item .share-btn:hover { background: rgba(74,107,58,.18) !important; }
body[data-theme="dark"] .sched-list-container .sched-item .del-btn { color: #f87171 !important; }
body[data-theme="dark"] .sched-list-container .sched-item .del-btn:hover { background: rgba(239,68,68,.10) !important; }

/* "Public" share badge */
body[data-theme="dark"] .sched-list-container .sched-item .share-badge {
  background: rgba(74,107,58,.18) !important;
  color: #86efac !important;
  border-color: rgba(74,107,58,.40) !important;
}

/* Type pills (Daily / Hourly) — tone the pastel tints down */
body[data-theme="dark"] .sched-list-container .badge-daily {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] .sched-list-container .badge-hourly {
  background: rgba(125,211,252,.18) !important;
  color: #7dd3fc !important;
}

/* All-schedules card layout */
body[data-theme="dark"] .sched-list-container .sched-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .sched-list-container .sched-card:hover {
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .sched-list-container .sched-card .nm   { color: var(--text)  !important; }
body[data-theme="dark"] .sched-list-container .sched-card .meta { color: var(--muted) !important; }

/* ── Schedule modals (.sched-modal lives outside .sched-list-container
   when an overlay opens fixed, so target by overlay/modal class). */
body[data-theme="dark"] .sched-modal-overlay .sched-modal {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 25px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .sched-modal-overlay .sched-modal h5 { color: var(--text) !important; }
body[data-theme="dark"] .sched-modal-overlay .sched-modal label { color: var(--muted) !important; }
body[data-theme="dark"] .sched-modal-overlay .sched-modal input[type=text] {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .sched-modal-overlay .type-card {
  border-color: var(--line) !important;
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] .sched-modal-overlay .type-card:hover {
  border-color: var(--bm-line2) !important;
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .sched-modal-overlay .type-card.selected {
  border-color: #7dd3fc !important;
  background: rgba(125,211,252,.10) !important;
}
body[data-theme="dark"] .sched-modal-overlay .type-card .nm { color: var(--text) !important; }
body[data-theme="dark"] .sched-modal-overlay .type-card .desc { color: var(--muted) !important; }

/* Share modal extras */
body[data-theme="dark"] .sched-modal-overlay .share-row .lab  { color: var(--text)  !important; }
body[data-theme="dark"] .sched-modal-overlay .share-row .desc,
body[data-theme="dark"] .sched-modal-overlay .share-help     { color: var(--muted) !important; }
body[data-theme="dark"] .sched-modal-overlay .share-toggle    { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .sched-modal-overlay .share-toggle.on { background: var(--bm-gold) !important; }
body[data-theme="dark"] .sched-modal-overlay .share-toggle::after {
  background: var(--text) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-url-row input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-url-row .copy-btn {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-url-row .copy-btn:hover { background: var(--bm-gold2) !important; }
body[data-theme="dark"] .sched-modal-overlay .share-secondary-actions {
  border-top-color: var(--line) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-secondary-actions button {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-secondary-actions button:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-secondary-actions button.danger {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .sched-modal-overlay .share-secondary-actions button.danger:hover {
  background: rgba(239,68,68,.10) !important;
}

/* ── Pane C: Daily editor (#cxld_root, daily.css) ────────────
   Redefine the module's CSS custom properties — most rules in
   daily.css consume these, so the dark palette propagates
   automatically. Then patch the literal hex values that bypass
   the vars. */
body[data-theme="dark"] #cxld_root {
  --cxld-bg:           var(--bm-bg)      !important;
  --cxld-panel:        var(--bm-bg2)     !important;
  --cxld-ink:          var(--text)       !important;
  --cxld-muted:        var(--muted)      !important;
  --cxld-line:         var(--line)       !important;
  --cxld-line-strong:  var(--bm-line2)   !important;
  --cxld-line-week:    rgba(255,255,255,.35) !important;
  --cxld-section-bg:   var(--bm-bg3)     !important;
  --cxld-section-fg:   var(--text)       !important;
}

/* Topbar / catbar / buttons — these use `background:#fff` literally
   instead of var(--cxld-panel). Patch them. */
body[data-theme="dark"] #cxld_root .cxld-topbar input[type=text],
body[data-theme="dark"] #cxld_root .cxld-topbar input[type=number],
body[data-theme="dark"] #cxld_root .cxld-topbar input[type=date],
body[data-theme="dark"] #cxld_root .cxld-btn {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #cxld_root .cxld-btn:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] #cxld_root .cxld-icon:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxld_root .cxld-cat-chip {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] #cxld_root .cxld-cat-chip:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] #cxld_root .cxld-cat-chip .cat-count {
  background: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}

/* Status text — overdue/saved hues still work, dirty re-tinted */
body[data-theme="dark"] #cxld_root .cxld-status.dirty { color: #fbbf24 !important; }

/* Time header — months/days with weekend + today shading. The greys
   collapse to near-invisible on dark, so re-tint with subtle alpha. */
body[data-theme="dark"] #cxld_root .cxld-time-header .month {
  background: var(--bm-bg3) !important;
}
/* Weekend + holiday columns appear in TWO places:
   1. .cxld-time-header .day.weekend  → the day-of-week cell up top
   2. .cxld-row .weekend-shade         → the vertical band that runs
      through all body rows. daily.js reuses this same class name for
      holiday columns too (see comment in daily.js renderWeekendShades:
      "Class name kept as 'weekend-shade' so existing CSS styling
      still applies"), so this one rule covers both.
   The panel surface is already near-black (#0a0a0a), so a pure-black
   overlay just blends in. A subtle white tint lifts the band into
   visible dark-grey territory (~#222) while staying clearly part
   of the same theme. */
body[data-theme="dark"] #cxld_root .cxld-time-header .day.weekend {
  background: rgba(255,255,255,.10) !important;
}
body[data-theme="dark"] #cxld_root .cxld-time-header .day.weekend .dow,
body[data-theme="dark"] #cxld_root .cxld-time-header .day.weekend .dom {
  color: var(--bm-ink3) !important;
}
body[data-theme="dark"] #cxld_root .cxld-row .weekend-shade {
  background: rgba(255,255,255,.08) !important;
}
body[data-theme="dark"] #cxld_root .cxld-time-header .day.today {
  background: rgba(239,68,68,.18) !important;
}
/* Logistics-ribbon weekend marker — same dark-grey tint */
body[data-theme="dark"] #cxld_root .cxld-logi-laneBody .cxld-logi-weekend {
  background: rgba(255,255,255,.08) !important;
}

/* Left-column input states */
body[data-theme="dark"] #cxld_root .cxld-task-row.left input.task-name:hover,
body[data-theme="dark"] #cxld_root .cxld-task-row.left input.task-name:focus {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] #cxld_root .cxld-task-row.left input.preds:focus {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxld_root .cxld-task-row.left.is-critical {
  background: rgba(239,68,68,.08) !important;
}
body[data-theme="dark"] #cxld_root .cxld-task-row.left .cat-dot.empty {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] #cxld_root .cxld-task-row.left .row-menu-btn:hover {
  background: rgba(255,255,255,.10) !important;
  color: var(--text) !important;
}

/* Add-task / add-section rows — daily.css has TWO sibling classes
   for these (.cxld-add-row in the left column + .cxld-row.add-task
   in the body column) and both hard-code background:#fafaf9. They
   sit at the same Y so missing either one leaves a white strip
   poking out of the gantt. Re-tint both onto the warm-dark surface. */
body[data-theme="dark"] #cxld_root .cxld-add-row,
body[data-theme="dark"] #cxld_root .cxld-row.add-task {
  background: var(--bm-bg-warm) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #cxld_root .cxld-add-row button {
  color: var(--muted) !important;
}
body[data-theme="dark"] #cxld_root .cxld-add-row button:hover {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
}

/* Phase-row background body (gridbg overlay on the dark phase row) —
   already uses rgba(255,255,255,.08), which reads on the new dark
   section bg, so nothing extra needed. */

/* Logistics overlay — uses amber wash + purple events lane.
   Tone these for dark. */
body[data-theme="dark"] #cxld_root .cxld-logi-laneCol {
  background: rgba(245,158,11,.06) !important;
  border-bottom-color: var(--line) !important;
  border-right-color: var(--line) !important;
}
body[data-theme="dark"] #cxld_root .cxld-logi-laneHeader { color: var(--bm-ink2) !important; }
body[data-theme="dark"] #cxld_root .cxld-logi-laneHeader .cxld-logi-laneCount {
  background: rgba(245,158,11,.18) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] #cxld_root .cxld-logi-laneHeader.is-events {
  background: rgba(124,58,237,.10) !important;
  color: #c4b5fd !important;
}
body[data-theme="dark"] #cxld_root .cxld-logi-laneHeader.is-events .cxld-logi-laneCount {
  background: rgba(124,58,237,.20) !important;
  color: #c4b5fd !important;
}
body[data-theme="dark"] #cxld_root .cxld-logi-laneBody {
  background: linear-gradient(180deg, rgba(245,158,11,.06), transparent) !important;
  border-bottom-color: var(--line) !important;
}

/* Bar text + critical halo — already use var(--cxld-critical) so the
   bar outlines pick up red automatically. The link-handle dot uses
   #fff for the inner fill — re-tint to bg3 so it doesn't pop out on
   the dark canvas. */
body[data-theme="dark"] #cxld_root .cxld-bar .link-handle {
  background: var(--bm-bg2) !important;
}
body[data-theme="dark"] #cxld_root .cxld-bar-delete {
  background: var(--bm-bg2) !important;
}

/* Phase-bar gradients (the chevron-ended phase indicator) — these are
   hard-coded #1c1917 which is already near-black, but it disappears on
   the dark section row. Lighten to a visible contrast against bg3. */
body[data-theme="dark"] #cxld_root .cxld-bar.is-phase {
  background: linear-gradient(180deg,#525252 0%,#525252 35%,transparent 35%,transparent 65%,#525252 65%,#525252 100%) !important;
}
body[data-theme="dark"] #cxld_root .cxld-bar.is-phase::before { border-color: #525252 transparent transparent transparent !important; }
body[data-theme="dark"] #cxld_root .cxld-bar.is-phase::after  { border-color: #525252 transparent transparent transparent !important; }
body[data-theme="dark"] #cxld_root .cxld-bar.is-milestone { background: #d4d4d4 !important; }

/* Link layer halo — was white to contrast on light bg. On dark, the
   halo should be near-black so the colored stroke reads. */
body[data-theme="dark"] #cxld_root .cxld-link-layer path.link-halo {
  stroke: var(--bm-bg) !important;
}

/* Modals + popovers appended to document.body (outside #cxld_root) —
   the CSS-var redefinition above doesn't reach them, so style them
   directly. */
body[data-theme="dark"] .cxld-modal {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .cxld-modal .row-form label { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-modal input[type=text],
body[data-theme="dark"] .cxld-modal input[type=number],
body[data-theme="dark"] .cxld-modal input[type=date],
body[data-theme="dark"] .cxld-modal select {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cxld-tip {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.6) !important;
}

body[data-theme="dark"] .cxld-cat-popover,
body[data-theme="dark"] .cxld-rowmenu,
body[data-theme="dark"] .cxld-cal-popover {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 12px 32px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .cxld-cat-popover .cat-pick-item       { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cxld-cat-popover .cat-pick-item:hover { background: var(--bm-bg-warm) !important; color: var(--text) !important; }
body[data-theme="dark"] .cxld-cat-popover .cat-pick-item.active {
  background: rgba(74,107,58,.18) !important;
  color: #86efac !important;
}
body[data-theme="dark"] .cxld-cat-popover .cat-pick-item.secondary       { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-cat-popover .cat-pick-item.secondary:hover { color: var(--text) !important; }
body[data-theme="dark"] .cxld-cat-popover .cat-pick-divider {
  background: var(--line) !important;
}

body[data-theme="dark"] .cxld-rowmenu button { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .cxld-rowmenu button:hover:not(:disabled) { background: var(--bm-bg-warm) !important; color: var(--text) !important; }
body[data-theme="dark"] .cxld-rowmenu button .icon { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-rowmenu button.danger { color: #f87171 !important; }
body[data-theme="dark"] .cxld-rowmenu button.danger .icon { color: #f87171 !important; }
body[data-theme="dark"] .cxld-rowmenu button.danger:hover:not(:disabled) { background: rgba(239,68,68,.10) !important; }
body[data-theme="dark"] .cxld-rowmenu .sep { background: var(--line) !important; }

/* Calendar popover — keep "off-day" red tint but on a dark base */
body[data-theme="dark"] .cxld-cal-popover .cal-title,
body[data-theme="dark"] .cxld-cal-popover .cal-help { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-day {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .cxld-cal-popover .cal-day:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-day.is-off {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .cxld-cal-popover .cal-day .lbl       { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-day.is-off .lbl { color: #f87171 !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-mode-row { border-color: var(--line) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-mode {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-right-color: var(--line) !important;
}
body[data-theme="dark"] .cxld-cal-popover .cal-mode:hover     { background: var(--bm-bg-warm) !important; color: var(--text) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-mode.is-active {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .cxld-cal-popover .cal-hol-empty { color: var(--muted) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-hol-chip {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: #fca5a5 !important;
}
body[data-theme="dark"] .cxld-cal-popover .cal-hol-x { color: #fca5a5 !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-hol-x:hover { background: rgba(239,68,68,.20) !important; }
body[data-theme="dark"] .cxld-cal-popover .cal-hol-input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}

/* ── Pane C: Hourly editor (#cxlh_root, hourly.css) ──────────
   Same approach — redefine the module's vars + patch the bits
   that bypass them. */
body[data-theme="dark"] #cxlh_root {
  --cxlh-bg:           var(--bm-bg)      !important;
  --cxlh-panel:        var(--bm-bg2)     !important;
  --cxlh-ink:          var(--text)       !important;
  --cxlh-muted:        var(--muted)      !important;
  --cxlh-line:         var(--line)       !important;
  --cxlh-line-strong:  var(--bm-line2)   !important;
  --cxlh-line-day:     rgba(255,255,255,.35) !important;
  --cxlh-section-bg:   var(--bm-bg3)     !important;
  --cxlh-section-fg:   var(--text)       !important;
  /* The hourly editor's accent default is slate-900 (#0f172a) — replace
     it with the warm gold accent so the primary button reads on dark. */
  --cxlh-accent:       var(--bm-gold)    !important;
}

body[data-theme="dark"] #cxlh_root .cxlh-topbar input[type=text],
body[data-theme="dark"] #cxlh_root .cxlh-topbar input[type=number],
body[data-theme="dark"] #cxlh_root .cxlh-topbar input[type=datetime-local],
body[data-theme="dark"] #cxlh_root .cxlh-btn {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-btn:hover    { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] #cxlh_root .cxlh-btn.primary  { color: #000 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-icon:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-crew-chip {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-crew-chip:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] #cxlh_root .cxlh-crew-chip .crew-hours {
  background: rgba(255,255,255,.12) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-status.dirty { color: #fbbf24 !important; }

/* Day-of-week tint cells — the 7 colored backgrounds (mon/tue/wed…) are
   far too saturated for dark mode. Knock them back to a subtle hue. */
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.fri { background: rgba(245,158,11,.10) !important; color: #fbbf24 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.sat { background: rgba(56,189,248,.10) !important; color: #7dd3fc !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.sun { background: rgba(239,68,68,.10) !important; color: #fca5a5 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.mon { background: rgba(16,185,129,.10) !important; color: #6ee7b7 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.tue { background: rgba(124,58,237,.10) !important; color: #c4b5fd !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.wed { background: rgba(244,114,182,.10) !important; color: #f9a8d4 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .day.thu { background: rgba(234,179,8,.10) !important; color: #fde047 !important; }
body[data-theme="dark"] #cxlh_root .cxlh-time-header .hour.day-start {
  background: rgba(255,255,255,.06) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-time-header .hour.six { color: var(--text) !important; }

/* Left-column hover/focus states */
body[data-theme="dark"] #cxlh_root .cxlh-task-row.left input.task-name:hover,
body[data-theme="dark"] #cxlh_root .cxlh-task-row.left input.task-name:focus {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-add-row { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] #cxlh_root .cxlh-add-row button:hover {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxlh_root .cxlh-shift-left,
body[data-theme="dark"] #cxlh_root .cxlh-shift-row,
body[data-theme="dark"] #cxlh_root .cxlh-row.add-task {
  background: var(--bm-bg-warm) !important;
}

/* Bar artwork in hourly */
body[data-theme="dark"] #cxlh_root .cxlh-bar-delete { background: var(--bm-bg2) !important; }

/* Modals + popovers for the hourly editor */
body[data-theme="dark"] .cxlh-modal {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  box-shadow: 0 10px 40px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .cxlh-modal .row-form label { color: var(--muted) !important; }
body[data-theme="dark"] .cxlh-modal input[type=text],
body[data-theme="dark"] .cxlh-modal input[type=color] {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cxlh-tip {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .cxlh-move-popover,
body[data-theme="dark"] .cxlh-crew-popover {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .cxlh-move-popover .popover-head { color: var(--muted) !important; }
body[data-theme="dark"] .cxlh-move-popover button:hover:not(:disabled),
body[data-theme="dark"] .cxlh-crew-popover .crew-pick-item:hover {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cxlh-move-popover button:disabled,
body[data-theme="dark"] .cxlh-move-popover button.is-current { color: var(--muted) !important; }
body[data-theme="dark"] .cxlh-move-popover button .count {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .cxlh-move-popover button .here {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] .cxlh-move-popover .popover-sep,
body[data-theme="dark"] .cxlh-crew-popover .crew-pick-divider { background: var(--line) !important; }
body[data-theme="dark"] .cxlh-move-popover .popover-detach { color: #fbbf24 !important; }
body[data-theme="dark"] .cxlh-move-popover .popover-detach:hover { background: rgba(245,158,11,.10) !important; }
body[data-theme="dark"] .cxlh-crew-popover .crew-pick-item.is-active {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cxlh-crew-popover .crew-pick-item.is-secondary { color: #86efac !important; }
body[data-theme="dark"] .cxlh-crew-popover .crew-pick-item .check { color: var(--text) !important; }

/* ============================================================
   Module: Logistics (logistics.php + logistics_job.php).
   The module declares its own CSS custom properties (--bg /
   --card / --text / --muted / --border / --accent / --danger
   / etc.) on .logi-app / .logi-jobs-page / .logi-modal-bg-cls
   / .logi-toast-cls / .logi-sidebar-cls / .logi-sidebar-
   backdrop-cls / #logi-trackBanner. Redefining those vars for
   dark mode propagates the palette through every rule that
   goes through them — then a smaller set of patches handles
   the literal `background:#fff` / hardcoded hex values that
   bypass the vars (chips, buttons, cards, sidebar, gantt).
   ============================================================ */
body[data-theme="dark"] .logi-app,
body[data-theme="dark"] .logi-jobs-page,
body[data-theme="dark"] .logi-modal-bg-cls,
body[data-theme="dark"] .logi-toast-cls,
body[data-theme="dark"] .logi-sidebar-cls,
body[data-theme="dark"] .logi-sidebar-backdrop-cls,
body[data-theme="dark"] #logi-trackBanner {
  --bg:          var(--bm-bg)          !important;
  --card:        var(--bm-bg2)         !important;
  --text:        var(--bm-ink)         !important;
  --muted:       var(--bm-ink2)        !important;
  --mute2:       var(--bm-ink3)        !important;
  --border:      var(--bm-line)        !important;
  --border2:     var(--bm-line2)       !important;
  --accent:      #7dd3fc               !important;
  --accent-soft: rgba(125,211,252,.10) !important;
  --danger:      #f87171               !important;
  --danger-soft: rgba(239,68,68,.10)   !important;
  --success:     #86efac               !important;
  --warn:        #fbbf24               !important;
  color-scheme: dark;
}

/* The module sets `color: #14181f` LITERALLY on .logi-app /
   .logi-jobs-page (not through var(--text)), so every descendant
   that inherits — <h1>, <h3>, <p>, plain <span>s — ends up
   slate-900 on black. Force the wrapper's base color to white. */
body[data-theme="dark"] .logi-app,
body[data-theme="dark"] .logi-jobs-page {
  color: var(--text) !important;
}

/* Hardcoded slate-700 (#4b5563) text in a handful of rules that
   don't go through a CSS variable — kanban headers, calendar
   day-num, modal-row labels. Map them onto --muted. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) :is(.kcol h3, .kcol h3 .count, .cal-day .num),
body[data-theme="dark"] .logi-modal-cls .row label {
  color: var(--muted) !important;
}

/* Hard-coded #fff surfaces (buttons, kanban cards, gantt grid, suggest
   dropdown, modal/sidebar chrome, etc.) → BM raised dark.
   .date-c is the sticky date column on the left of the Schedule view —
   it's painted `background:#fff` and z-index:2 so it sits on TOP of the
   page background as a literal white column. .chip is intentionally
   NOT in this list: chips paint their own location-tinted background
   inline via chipTint() and we want that tint visible, just brightened. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) :is(.btn, .kcard, .wk-event, .cal-event, .gantt2, .gantt2 .g-loc-name, .gantt2 .g-cell, .gantt .axis, .suggest, .sb-multi-row, .sb-mov-btn, .date-c),
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .sb-mov:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) input[type=color],
body[data-theme="dark"] .logi-modal-cls,
body[data-theme="dark"] .logi-sidebar-cls,
body[data-theme="dark"] .sb-header,
body[data-theme="dark"] .logi-cols-menu {
  background: var(--bm-bg2) !important;
}

/* Chip pills are colored entirely from inline styles — JS calls
   chipText(hex) which subtracts 60 from each RGB channel to get a
   *darker* version of the location color (designed for contrast on a
   light background). On dark, that gives near-invisible dark-on-dark
   text. Rather than override every inline color (which would require
   enumerating every possible location hex), apply a CSS filter to the
   chip as a whole — border, text, and the faint tinted background
   all brighten together. saturate(.85) keeps the colors from going
   too neon, brightness(1.9) lifts them into readable range. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .chip {
  filter: brightness(1.9) saturate(.85);
}
/* Tracked-state highlight ring uses var(--accent) — already brightened
   by the var redefinition. Just make sure the filter doesn't double-
   brighten the active ring into white-out. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .chip.tracked {
  filter: brightness(1.6) saturate(.9);
}

/* Slate-50/100 recessed surfaces (vsched-head, setup-row, kcol,
   sb-status, sb-mov, cal-day, gantt2 corner+day, kcol count pill) */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) :is(.vsched-head, .setup-row, .empty-pane .step, .kcol, .sb-status, .sb-mov, .cal-day, .gantt2 .g-corner, .gantt2 .g-day),
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .kcol h3 .count,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-job-card.archived {
  background: var(--bm-bg3) !important;
}

/* Weekend columns + today highlight — mirror the lookahead daily editor:
   a subtle white tint reads as dark-grey on the near-black canvas. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .vsched-row.weekend .date-c,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .wk-day.weekend,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-day.weekend,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-cell.weekend {
  background: rgba(255,255,255,.06) !important;
}

/* Hover backgrounds — slightly warm dark */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn.ghost:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .vsched-row:hover .date-c,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-cell:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .cell-c:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .h-row:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .sb-multi-row:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt-row:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-cols-menu label:hover,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .suggest-item:hover,
body[data-theme="dark"] .sb-close:hover {
  background: var(--bm-bg-warm) !important;
}

/* Primary button — swap cobalt for the dashboard's gold accent */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn.primary:hover {
  background: var(--bm-gold2) !important;
  border-color: var(--bm-gold2) !important;
}
/* Danger button keeps its red tint on a dark base */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn.danger {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .btn.danger:hover {
  background: rgba(239,68,68,.10) !important;
}

/* All form inputs (text + dates + color picker + sidebar notes
   + modal fields) get the consistent dark input well treatment. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) :is(input.text, select.text, textarea.text, input[type=date], input[type=color]),
body[data-theme="dark"] .logi-modal-cls .row :is(input, select, textarea),
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .sb-notes {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) :is(input.text, select.text, textarea.text):focus,
body[data-theme="dark"] .logi-modal-cls .row :is(input, select, textarea):focus,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .sb-notes:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18) !important;
}

/* Logistics-job cards on the index page */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-job-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-job-card:hover {
  border-color: var(--bm-line2) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-toolbar {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-empty {
  background: var(--bm-bg2) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .logi-badge {
  background: var(--bm-bg3) !important;
  color: var(--muted) !important;
}

/* Tabs */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .tab        { color: var(--muted) !important; }
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .tab:hover  { color: var(--text)  !important; }

/* Modal overlay + dialog */
body[data-theme="dark"] .logi-modal-bg-cls {
  background: rgba(0,0,0,.65) !important;
}
body[data-theme="dark"] .logi-modal-cls {
  color: var(--text) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .logi-modal-cls .row label { color: var(--muted) !important; }

/* Toast */
body[data-theme="dark"] .logi-toast-cls {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .logi-toast-cls button {
  border-color: var(--bm-line2) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .logi-toast-cls button:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}

/* Sidebar — the .logi-sidebar-cls element is a SIBLING of .logi-app
   in the DOM (it lives directly under <body> alongside the modal +
   toast), so rules scoped to `:is(.logi-app, .logi-jobs-page) .sb-X`
   never match. All sidebar selectors are unprefixed below. */
body[data-theme="dark"] .logi-sidebar-cls {
  background: var(--bm-bg2) !important;
  border-left-color: var(--line) !important;
  box-shadow: -4px 0 20px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .logi-sidebar-backdrop-cls {
  background: rgba(0,0,0,.45) !important;
}
body[data-theme="dark"] .sb-header h2  { color: var(--text)  !important; }
body[data-theme="dark"] .sb-close      { color: var(--muted) !important; }
body[data-theme="dark"] .sb-section h3 { color: var(--muted) !important; }
body[data-theme="dark"] .sb-empty      { color: var(--bm-ink3) !important; }

/* Status row at the top of the sidebar (date / status pill row) */
body[data-theme="dark"] .sb-status {
  background: var(--bm-bg3) !important;
  border-bottom-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .sb-status .pill {
  background: var(--bm-bg2) !important;
  border-color: var(--bm-line2) !important;
  color: var(--text) !important;
}

/* Movement rows — the loud white panel in the screenshot */
body[data-theme="dark"] .sb-mov {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .sb-mov:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .sb-mov .arrow,
body[data-theme="dark"] .sb-mov .date  { color: var(--muted) !important; }
body[data-theme="dark"] .sb-mov .where { color: var(--text)  !important; }
body[data-theme="dark"] .sb-mov .x     { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .sb-mov .x:hover {
  background: rgba(239,68,68,.10) !important;
  color: #f87171 !important;
}

/* Day-nudge buttons inside each movement row */
body[data-theme="dark"] .sb-mov-btn {
  background: var(--bm-bg2) !important;
  color: var(--muted) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .sb-mov-btn:hover {
  background: rgba(125,211,252,.10) !important;
  border-color: #7dd3fc !important;
  color: #7dd3fc !important;
}

/* Multi-select rows (when tracking multiple units) */
body[data-theme="dark"] .sb-multi-row {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .sb-multi-row:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .sb-multi-last { color: var(--muted) !important; }
body[data-theme="dark"] .sb-multi-remove { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .sb-multi-remove:hover {
  background: rgba(239,68,68,.10) !important;
  color: #f87171 !important;
}

/* Notes textarea in the sidebar */
body[data-theme="dark"] .sb-notes {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .sb-notes:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 3px rgba(200,169,110,.18) !important;
}

/* Sidebar action buttons (+ Add movement / Edit unit / Archive /
   Delete unit). These use the generic .btn class without a scope
   prefix in their CSS, but my .btn rules ARE prefixed with
   .logi-app — so the sidebar buttons need their own rules. */
body[data-theme="dark"] .logi-sidebar-cls .btn {
  background: var(--bm-bg2) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .logi-sidebar-cls .btn:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line2) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .logi-sidebar-cls .btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .logi-sidebar-cls .btn.primary:hover {
  background: var(--bm-gold2) !important;
  border-color: var(--bm-gold2) !important;
}
body[data-theme="dark"] .logi-sidebar-cls .btn.danger {
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .logi-sidebar-cls .btn.danger:hover {
  background: rgba(239,68,68,.10) !important;
}

/* Suggest dropdown */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .suggest {
  border-color: var(--bm-line2) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .suggest-item {
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .suggest-item.active {
  background: rgba(125,211,252,.10) !important;
}

/* Column-picker popover */
body[data-theme="dark"] .logi-cols-menu {
  border-color: var(--line) !important;
  color: var(--text) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.55) !important;
}
body[data-theme="dark"] .logi-cols-menu .cols-title,
body[data-theme="dark"] .logi-cols-menu .cols-foot {
  color: var(--muted) !important;
  border-color: var(--line) !important;
}

/* Onboarding "steps" — keep status hues on a dark base */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .empty-pane .step.done {
  background: rgba(74,107,58,.20) !important;
  border-color: rgba(74,107,58,.45) !important;
  color: #86efac !important;
}
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .empty-pane .step.next {
  background: rgba(125,211,252,.10) !important;
  border-color: rgba(125,211,252,.35) !important;
  color: #7dd3fc !important;
}

/* Drag-over highlights (drop zones) */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .setup-row.drag-over,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .cell-c.drag-over,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-cell.drag-over,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .wk-day.drag-over,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .kcol.drag-over {
  background: rgba(125,211,252,.10) !important;
  outline-color: #7dd3fc !important;
}

/* sb-mov-btn nudge buttons — hover state uses var(--accent-soft);
   the redefinition above already adapts that. Border + text on hover. */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .sb-mov-btn:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* History view diff colors — keep red/green status hues for legibility */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .h-row .change .old { color: #f87171 !important; }
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .h-row .change .new { color: #86efac !important; }

/* Today-highlight on the vertical schedule's date column */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .vsched-row.today,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .vsched-row.today .date-c,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .wk-day.today,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-day.today,
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt2 .g-cell.today {
  background: rgba(125,211,252,.10) !important;
}

/* Today indicator on the lookahead-style gantt — re-tint to bright red */
body[data-theme="dark"] :is(.logi-app, .logi-jobs-page) .gantt .today-line { background: #f87171 !important; }

/* ============================================================
   Module: Scratchpad / Issue Tracker
   (scratchpad.php + scratchpad_editor.php).

   Pane B is .cx-iss — declares its own CSS custom properties
   (--bg / --panel / --ink / --ink-soft / --muted / --line /
   --line-strong / --sage*) on #issuesPane.cx-iss, so we
   redefine them for dark and patch the hexes that bypass them.

   Pane C is #issEditor — uses NO custom properties. Every
   color and surface is a literal hex, so every class gets an
   explicit override.
   ============================================================ */

/* ── Pane B: kanban + list view (.cx-iss) ───────────────────── */
body[data-theme="dark"] .cx-iss {
  --bg:               var(--bm-bg)         !important;
  --panel:            var(--bm-bg2)        !important;
  --ink:              var(--bm-ink)        !important;
  --ink-soft:         var(--bm-ink2)       !important;
  --muted:            var(--bm-ink3)       !important;
  --line:             var(--bm-line)       !important;
  --line-strong:      var(--bm-line2)      !important;
  /* Keep the sage accent but slightly brighter so it reads on dark */
  --sage:             #7fb087              !important;
  --sage-deep:        #6b9876              !important;
  --sage-tint:        rgba(127,176,135,.10) !important;
  --sage-tint-strong: rgba(127,176,135,.18) !important;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4), 0 1px 1px rgba(0,0,0,.2) !important;
  --shadow-md: 0 2px 6px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3) !important;
  --shadow-lg: 0 12px 32px rgba(0,0,0,.7), 0 4px 8px rgba(0,0,0,.4) !important;
  color-scheme: dark;
}

/* Hardcoded hexes that bypass the vars */
body[data-theme="dark"] .cx-iss .toggle {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .cx-iss .toggle button.active {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.5) !important;
}
body[data-theme="dark"] .cx-iss .quick-add {
  background: var(--bm-bg3) !important;
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px var(--sage-tint) !important;
}
body[data-theme="dark"] .cx-iss .quick-add input {
  background: transparent !important;
  color: var(--text) !important;
}
/* The "No issues" empty column placeholder */
body[data-theme="dark"] .cx-iss .col-empty {
  background: var(--bm-bg-warm) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink3) !important;
}
/* Drag clone (the floating card while reordering) */
body[data-theme="dark"] .cx-iss .drag-clone {
  background: var(--bm-bg2) !important;
  border-color: var(--sage) !important;
}
/* Inline "No activity yet" hint inside card footers (color:#a8a29e) */
body[data-theme="dark"] .cx-iss .card-footer [style*="color:#a8a29e"] {
  color: var(--bm-ink3) !important;
}

/* New-issue primary button uses --sage which we brightened above —
   the white text on top stays legible. */
body[data-theme="dark"] .cx-iss .btn-new {
  color: #000 !important;
  background: var(--bm-gold) !important;
}
body[data-theme="dark"] .cx-iss .btn-new:hover { background: var(--bm-gold2) !important; }

/* Card priority chip text — keep status colors */
body[data-theme="dark"] .cx-iss .chip.who {
  background: rgba(127,176,135,.18) !important;
  border-color: rgba(127,176,135,.35) !important;
  color: #86efac !important;
}

/* List view table */
body[data-theme="dark"] .cx-iss .list-table th {
  background: rgba(127,176,135,.10) !important;
  color: #86efac !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-iss .list-table td {
  color: var(--bm-ink2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .cx-iss .list-table tr:hover td {
  background: var(--bm-bg-warm) !important;
}
body[data-theme="dark"] .cx-iss .list-table tr.is-active td {
  background: rgba(127,176,135,.14) !important;
}
/* Inline-styled cells in the list table — issue # is color:#a8a29e */
body[data-theme="dark"] .cx-iss .list-table td[style*="color:#a8a29e"] {
  color: var(--bm-ink3) !important;
}

/* Active card / list row outline */
body[data-theme="dark"] .cx-iss .card.is-active {
  border-color: var(--sage) !important;
  box-shadow: 0 0 0 3px var(--sage-tint), 0 2px 6px rgba(0,0,0,.5) !important;
}

/* Empty board state */
body[data-theme="dark"] .cx-iss .all-empty .h { color: var(--text) !important; }

/* ── Pane C: issue editor (#issEditor) ──────────────────────
   No CSS variables in scratchpad_editor.php — everything is
   hardcoded hex. Override class by class. */
body[data-theme="dark"] #issEditor {
  background: var(--bm-bg) !important;
  color: var(--text) !important;
}

/* Header */
body[data-theme="dark"] #issEditor .ied-header {
  background: var(--bm-bg2) !important;
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .ied-title-input {
  color: var(--text) !important;
  background: transparent !important;
}
body[data-theme="dark"] #issEditor .ied-title-input::placeholder {
  color: var(--bm-ink3) !important;
}

/* Meta dropdowns at top */
body[data-theme="dark"] #issEditor .meta-select {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .meta-select:focus {
  outline-color: var(--bm-gold) !important;
  border-color: var(--bm-gold) !important;
}

/* "✓ Saved" pill */
body[data-theme="dark"] #issEditor .saved-pill {
  background: rgba(74,107,58,.18) !important;
  border-color: rgba(74,107,58,.40) !important;
  color: #86efac !important;
}

/* Body / timeline */
body[data-theme="dark"] #issEditor .ied-body {
  background: var(--bm-bg) !important;
}
body[data-theme="dark"] #issEditor .timeline::before {
  background: var(--line) !important;
}
body[data-theme="dark"] #issEditor .tl-dot {
  border-color: var(--bm-bg2) !important;
  box-shadow: 0 0 0 2px var(--line) !important;
}
body[data-theme="dark"] #issEditor .tl-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .tl-card:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,.55) !important;
}
body[data-theme="dark"] #issEditor .tl-date    { color: var(--bm-ink3) !important; }
body[data-theme="dark"] #issEditor .tl-title   { color: var(--text)    !important; }
body[data-theme="dark"] #issEditor .tl-body    { color: var(--bm-ink2) !important; }
body[data-theme="dark"] #issEditor .tl-entity  { color: var(--muted)   !important; }

/* Attachments */
body[data-theme="dark"] #issEditor .tl-attach-thumb {
  border-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .tl-attach-file {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] #issEditor .tl-del-btn { color: var(--bm-ink3) !important; }
body[data-theme="dark"] #issEditor .tl-del-btn:hover { color: #f87171 !important; }

/* Resolved banner */
body[data-theme="dark"] #issEditor .resolved-banner {
  background: rgba(74,107,58,.18) !important;
  border-color: rgba(74,107,58,.40) !important;
  color: #86efac !important;
}

/* Add-event panel */
body[data-theme="dark"] #issEditor .add-event-panel {
  background: var(--bm-bg2) !important;
  border-top-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .aep-toggle-btn {
  border-color: var(--bm-line2) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] #issEditor .aep-toggle-btn:hover {
  border-color: #7dd3fc !important;
  color: #7dd3fc !important;
  background: rgba(125,211,252,.10) !important;
}
body[data-theme="dark"] #issEditor :is(.aep-select, .aep-date, .aep-entity, .aep-title-input, .aep-body-input) {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor :is(.aep-select, .aep-date, .aep-title-input, .aep-body-input):focus {
  outline-color: var(--bm-gold) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #issEditor .aep-file-label {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] #issEditor .aep-file-label:hover {
  border-color: #7dd3fc !important;
  color: #7dd3fc !important;
}
body[data-theme="dark"] #issEditor .aep-file-chip {
  background: rgba(125,211,252,.10) !important;
  border-color: rgba(125,211,252,.35) !important;
  color: #93c5fd !important;
}
body[data-theme="dark"] #issEditor .aep-file-chip button {
  color: #7dd3fc !important;
}

/* Empty timeline / new-issue prompt */
body[data-theme="dark"] #issEditor .tl-empty {
  background: var(--bm-bg2) !important;
  border-color: var(--bm-line2) !important;
  color: var(--bm-ink3) !important;
}
body[data-theme="dark"] #issEditor .new-issue-prompt {
  color: var(--bm-ink3) !important;
}
body[data-theme="dark"] #issEditor .new-issue-prompt [style*="color:#334155"] {
  color: var(--text) !important;
}

/* Inline status / meta text spans in the header (issue # / Opened date) */
body[data-theme="dark"] #issEditor [style*="color:#94a3b8"] { color: var(--bm-ink3) !important; }
body[data-theme="dark"] #issEditor [style*="color:#64748b"] { color: var(--muted)   !important; }
body[data-theme="dark"] #issEditor [style*="color:#475569"] { color: var(--bm-ink2) !important; }
body[data-theme="dark"] #issEditor [style*="color:#334155"] { color: var(--text)    !important; }
body[data-theme="dark"] #issEditor [style*="color:#0f172a"] { color: var(--text)    !important; }
body[data-theme="dark"] #issEditor [style*="color:#cbd5e1"] { color: var(--bm-ink3) !important; }

/* Issue-editor generic .btn (Delete / Save / Cancel etc. use the
   global .btn class — give it a sensible dark surface). */
body[data-theme="dark"] #issEditor .btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #issEditor .btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #issEditor .btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #issEditor .btn.primary:hover {
  background: var(--bm-gold2) !important;
  border-color: var(--bm-gold2) !important;
}

/* ── .tl-type-badge + .tl-dot inline-style overrides ──────────
   The PHP foreach in scratchpad_editor.php paints each timeline
   event's type-pill and dot with inline `style="background:#xxx;
   color:#xxx"` pulled from the $eventTypes lookup. Inline styles
   beat regular cascade rules, so the existing .tl-card / .tl-body
   dark-mode overrides above can't reach them — the pills and dots
   stay on their hardcoded pastel backgrounds (#f5f3ff, #f0f9ff,
   etc.) and read as white against the dark cards.

   Strategy:
   1. Universal fallback — kill the pastel bg on EVERY badge / dot
      with !important. Works even if the inline hex changes or
      gets normalised by the browser (some engines collapse
      #abc → #aabbcc, lowercase hex, etc. — so the attribute
      substring match below isn't 100% guaranteed).
   2. Per-type tint — attribute substring selectors add the hue
      back. These have higher specificity (class + attribute) than
      the universal rule, so when the inline hex DOES match they
      win and the type's color identity is preserved. */

/* (1) Universal fallback — flat dark bg, brighter neutral text. */
body[data-theme="dark"] #issEditor .tl-type-badge,
body[data-theme="dark"] #issEditor .tl-dot {
  background-color: var(--bm-bg3) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge {
  color: var(--bm-ink2) !important;
}

/* (2) Per-type tints (override the universal fallback via higher
       specificity from the attribute selector). */

/* observation — purple (#f5f3ff bg, #7c3aed text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#f5f3ff"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#f5f3ff"] {
  background-color: rgba(167,139,250,.18) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#7c3aed"] {
  color: #c4b5fd !important;
}

/* email — sky blue (#f0f9ff bg, #0369a1 text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#f0f9ff"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#f0f9ff"] {
  background-color: rgba(56,189,248,.18) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#0369a1"] {
  color: #7dd3fc !important;
}

/* meeting — cyan (#ecfeff bg, #0891b2 text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#ecfeff"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#ecfeff"] {
  background-color: rgba(34,211,238,.18) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#0891b2"] {
  color: #67e8f9 !important;
}

/* call + resolution — green (#f0fdf4 bg, #059669 / #15803d text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#f0fdf4"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#f0fdf4"] {
  background-color: rgba(74,222,128,.16) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#059669"],
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#15803d"] {
  color: #86efac !important;
}

/* site_visit — amber (#fffbeb bg, #b45309 text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#fffbeb"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#fffbeb"] {
  background-color: rgba(251,191,36,.18) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#b45309"] {
  color: #fcd34d !important;
}

/* decision — red (#fef2f2 bg, #dc2626 text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#fef2f2"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#fef2f2"] {
  background-color: rgba(248,113,113,.16) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#dc2626"] {
  color: #fca5a5 !important;
}

/* document + note — slate (#f8fafc bg, #475569 / #64748b text) */
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#f8fafc"],
body[data-theme="dark"] #issEditor .tl-dot[style*="#f8fafc"] {
  background-color: rgba(148,163,184,.18) !important;
}
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#475569"],
body[data-theme="dark"] #issEditor .tl-type-badge[style*="#64748b"] {
  color: #cbd5e1 !important;
}

/* ============================================================
   Module: Job Builder (jobbuilder_controls.php + jobbuilder_canvas.php).
   Both panes share a .jb-root wrapper that declares its own CSS
   custom properties (--jb-bg / --jb-panel / --jb-text / --jb-text-2 /
   --jb-text-3 / --jb-line / --jb-line-2 / --jb-hover / --jb-accent /
   --jb-accent-2 / --jb-accent-soft / --jb-paint / --jb-paint-soft /
   --jb-warn + shadows). Redefining those for dark covers most of
   the styling; a handful of literal hexes (the dark default
   button, the canvas dot-grid, white card surfaces, the amber
   paint-mode banner) get explicit patches.
   ============================================================ */
body[data-theme="dark"] .jb-root {
  --jb-bg:          var(--bm-bg)        !important;
  --jb-panel:       var(--bm-bg2)       !important;
  --jb-text:        var(--bm-ink)       !important;
  --jb-text-2:      var(--bm-ink2)      !important;
  --jb-text-3:      var(--bm-ink3)      !important;
  --jb-line:        var(--bm-line)      !important;
  --jb-line-2:      var(--bm-line2)     !important;
  --jb-hover:       var(--bm-bg-warm)   !important;
  /* Swap the indigo accent for warm gold so it matches the rest
     of the dashboard's dark theme. */
  --jb-accent:      var(--bm-gold)      !important;
  --jb-accent-2:    var(--bm-gold2)     !important;
  --jb-accent-soft: rgba(200,169,110,.14) !important;
  /* Keep the amber paint hue but soften the bg tint */
  --jb-paint:       #fbbf24             !important;
  --jb-paint-soft:  rgba(245,158,11,.10) !important;
  --jb-warn:        #f87171             !important;
  --jb-shadow:    0 1px 2px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06) !important;
  --jb-shadow-md: 0 4px 14px rgba(0,0,0,.5)  !important;
  --jb-shadow-lg: 0 24px 50px rgba(0,0,0,.7) !important;
  color-scheme: dark;
}

/* The default .jb-btn is hard-coded near-black (#09090b) — flip it
   to the BM gold accent for primary actions in dark mode. The
   .secondary / .primary variants are handled separately below. */
body[data-theme="dark"] .jb-root .jb-btn {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .jb-root .jb-btn:hover { background: var(--bm-gold2) !important; }
body[data-theme="dark"] .jb-root .jb-btn.secondary {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-root .jb-btn.secondary:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-root .jb-btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .jb-root .jb-btn.primary:hover { background: var(--bm-gold2) !important; }
/* Danger variant (Delete cell, etc.) */
body[data-theme="dark"] .jb-root .jb-btn.jb-btn-danger {
  background: var(--bm-bg3) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .jb-root .jb-btn.jb-btn-danger:hover {
  background: rgba(239,68,68,.10) !important;
}

/* ── Pane B: controls (.jb-controls) ────────────────────────── */
body[data-theme="dark"] .jb-controls {
  background: var(--bm-bg2) !important;
}
body[data-theme="dark"] .jb-controls-header {
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .jb-controls-header .jb-build-picker {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-controls-header .jb-build-picker:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .jb-controls-body::-webkit-scrollbar-thumb {
  background: var(--bm-line) !important;
}

/* Section headers + inline editable setup line */
body[data-theme="dark"] .jb-section-h .jb-title  { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-section-h .jb-action { color: var(--bm-gold) !important; }
body[data-theme="dark"] .jb-section-h .jb-action:hover { background: rgba(200,169,110,.14) !important; }
body[data-theme="dark"] .jb-setup-line { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-ed:hover { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .jb-ed:focus { background: var(--bm-bg3) !important; }

/* Layer toggles + paint-status palette + bulk-delete pill */
body[data-theme="dark"] .jb-layer-toggle { background: var(--bm-bg3) !important; }
body[data-theme="dark"] .jb-layer-toggle.on { background: var(--bm-gold) !important; }
body[data-theme="dark"] .jb-paint-status-hint { color: var(--bm-ink3) !important; }

/* Paint-status pills (Scheduled / Pending / In Progress / Done /
   Blocked / etc.). The pill background is set inline per-status to
   a light pastel (light grey for Pending, light teal for In Progress,
   etc.) and the CSS sets color:var(--jb-text) — which is now white,
   leaving white text on light pastel backgrounds (invisible).
   Force the pill text to near-black in dark mode so it contrasts
   the inline pastel bg regardless of which status it is.
   Same rule for .jb-status-pill in the floating properties card. */
body[data-theme="dark"] .jb-ps-pill,
body[data-theme="dark"] .jb-status-pill {
  color: #09090b !important;
}
body[data-theme="dark"] .jb-pd-pill {
  background: rgba(239,68,68,.10) !important;
  color: #f87171 !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] .jb-pd-pill:hover {
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.45) !important;
}
body[data-theme="dark"] .jb-pd-pill.active {
  background: var(--jb-warn) !important;
  color: #000 !important;
  border-color: #f87171 !important;
}

/* Workstream cards */
body[data-theme="dark"] .jb-ws-card {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-ws-card:hover { border-color: var(--bm-line2) !important; }
body[data-theme="dark"] .jb-ws-card.painting {
  background: var(--jb-paint-soft) !important;
  border-color: var(--jb-paint) !important;
}
body[data-theme="dark"] .jb-ws-name { color: var(--text) !important; }
body[data-theme="dark"] .jb-ws-name:focus { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .jb-ws-count {
  background: var(--bm-bg-warm) !important;
  color: var(--bm-ink3) !important;
}
body[data-theme="dark"] .jb-ws-btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-ws-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-ws-btn.paint.active {
  background: var(--jb-paint) !important;
  color: #000 !important;
  border-color: #fbbf24 !important;
}
body[data-theme="dark"] .jb-ws-btn.del:hover {
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .jb-ws-empty {
  border-color: var(--bm-line) !important;
  color: var(--bm-ink3) !important;
}

/* Band rows */
body[data-theme="dark"] .jb-band-row:hover { background: var(--bm-bg-warm) !important; }
body[data-theme="dark"] .jb-band-row input {
  color: var(--text) !important;
  background: transparent !important;
}
body[data-theme="dark"] .jb-band-row input:hover {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-band-row input:focus {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .jb-band-row select {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-band-row .jb-x:hover {
  background: rgba(239,68,68,.10) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .jb-band-row .jb-mv {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-band-row .jb-mv:hover:not(:disabled) {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}

/* Populate-cells helper row */
body[data-theme="dark"] .jb-band-populate .jb-btn {
  background: transparent !important;
  color: var(--bm-gold) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-band-populate .jb-btn:hover:not(:disabled) {
  background: rgba(200,169,110,.14) !important;
  border-color: var(--bm-gold) !important;
}

/* Edge-label chip wells */
body[data-theme="dark"] .jb-edge-group-h { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-chips {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-chips:focus-within {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .jb-chip {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .jb-chip .jb-x { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-chip .jb-x:hover { color: #f87171 !important; }
body[data-theme="dark"] .jb-chips input { color: var(--text) !important; }

/* Build list (when no build is selected) */
body[data-theme="dark"] .jb-build-list .jb-build-item {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-build-list .jb-build-item:hover {
  background: rgba(200,169,110,.10) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-build-list .jb-build-item.primary {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-build-list .jb-pill {
  background: rgba(200,169,110,.18) !important;
  color: var(--bm-gold) !important;
}

/* Controls empty state */
body[data-theme="dark"] .jb-controls-empty   { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-controls-empty b { color: var(--bm-ink2) !important; }

/* ── Pane C: canvas (.jb-canvas-shell) ──────────────────────── */
/* The dot-grid is painted with a radial gradient using a dark stop
   on a light bg. Flip the gradient to a faint white dot on the dark
   canvas. */
body[data-theme="dark"] .jb-canvas-shell {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0) 0 0 / 22px 22px,
    var(--bm-bg) !important;
}

/* SVG element hover strokes — were near-black, flip to white-ish */
body[data-theme="dark"] .jb-canvas-shell .jb-cell:hover .jb-cell-rect,
body[data-theme="dark"] .jb-canvas-shell .jb-span:hover rect,
body[data-theme="dark"] .jb-canvas-shell .jb-conn:hover .jb-conn-rect {
  stroke: var(--text) !important;
}
body[data-theme="dark"] .jb-canvas-shell .station-line {
  stroke: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-canvas-shell .painting-target .jb-cell-rect {
  stroke: var(--bm-line2) !important;
}

/* The canvas SVG renders every "unpainted" cell, station label box,
   span box, and connector with a literal fill="#ffffff" attribute
   (set by jb-render-canvas.js — not via CSS). In dark mode that
   leaves blocks of pure white scattered across a near-black canvas,
   and the white labels rendered inside them disappear. Override the
   raw fill via attribute selector — no JS changes needed. */
body[data-theme="dark"] .jb-canvas-shell rect[fill="#ffffff"],
body[data-theme="dark"] .jb-canvas-shell rect[fill="#fff"] {
  fill: var(--bm-bg3) !important;
}
/* The pier-station dots are 1.2-2.2px circles also painted #ffffff —
   keep them light so the markers read against the dark canvas. */
body[data-theme="dark"] .jb-canvas-shell circle[fill="#ffffff"],
body[data-theme="dark"] .jb-canvas-shell circle[fill="#fff"] {
  fill: var(--bm-ink2) !important;
}
/* Station-label box stroke (#ffffff) — flip to a visible BM line */
body[data-theme="dark"] .jb-canvas-shell rect[stroke="#ffffff"],
body[data-theme="dark"] .jb-canvas-shell rect[stroke="#fff"] {
  stroke: var(--bm-line2) !important;
}
/* Mid-grey strokes used for station labels and painting targets —
   stay visible but a touch brighter in dark */
body[data-theme="dark"] .jb-canvas-shell rect[stroke="#a1a1aa"] {
  stroke: var(--bm-line2) !important;
}

/* Cell / span / connector labels inside the painted cells. In dark
   mode the label fill is white (--jb-text), but the cell behind it
   is one of the light pastel STATUS colors (yellow / green / beige /
   light-blue), set inline by jb-render-canvas.js based on paint
   status. White text on light pastels is illegible.
   Adding paint-order + stroke gives every label a thin dark halo,
   so the white fill stays visible on light status colors AND on the
   dark empty cells (the halo blends into the dark background). */
body[data-theme="dark"] .jb-canvas-shell .cell-label,
body[data-theme="dark"] .jb-canvas-shell .cell-date,
body[data-theme="dark"] .jb-canvas-shell .span-label,
body[data-theme="dark"] .jb-canvas-shell .jb-conn-label {
  paint-order: stroke fill;
  stroke: rgba(0,0,0,.65);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Pier illustration in the empty-state card — recolor for dark */
body[data-theme="dark"] .jb-empty-illustration .jb-pier {
  background: linear-gradient(180deg, var(--bm-line2), var(--bm-ink3)) !important;
}
body[data-theme="dark"] .jb-empty-illustration .jb-deck {
  background: linear-gradient(90deg, var(--bm-ink3), var(--bm-ink2)) !important;
}

/* Zoom toolbar */
body[data-theme="dark"] .jb-zoom {
  background: rgba(17,17,17,.92) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .jb-zoom button { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-zoom button:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .jb-zoom .jb-zoom-pct {
  color: var(--bm-ink3) !important;
  border-top-color: var(--line) !important;
}

/* Sticker bar — Plan/Elevation toggle + "Add equipment" menu.
   Same glass-on-dark treatment as the zoom toolbar so the whole row of
   floating canvas chrome reads as one family. The active state on the
   view toggle uses the BM gold accent to match other "selected" cues
   throughout the dark theme. */
body[data-theme="dark"] .jb-view-toggle {
  background: rgba(17,17,17,.92) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .jb-view-toggle .jb-view-btn {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .jb-view-toggle .jb-view-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-view-toggle .jb-view-btn.active {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .jb-view-toggle .jb-view-btn.active:hover {
  background: var(--bm-gold2) !important;
  color: #000 !important;
}

body[data-theme="dark"] .jb-sticker-add-btn {
  background: rgba(17,17,17,.92) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-sticker-add-btn:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-sticker-add-btn .jb-plus {
  color: var(--bm-gold) !important;
}

/* Dropdown menu (kind picker) */
body[data-theme="dark"] .jb-sticker-add-menu {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.7) !important;
}
body[data-theme="dark"] .jb-sticker-add-menu button {
  color: var(--bm-ink2) !important;
  background: transparent !important;
}
body[data-theme="dark"] .jb-sticker-add-menu button:hover {
  background: var(--bm-gold-soft) !important;
  color: var(--bm-gold) !important;
}

/* Sticker label text on the canvas — paint-order keeps the white
   stroke that gives it contrast on light theme, but on the dark canvas
   we need the stroke to be dark and the fill to be light. */
body[data-theme="dark"] .jb-canvas-shell .jb-sticker-label {
  fill: var(--bm-ink) !important;
  stroke: rgba(0,0,0,.8) !important;
}

/* Properties-card sticker controls — chip picker, view toggle, dim
   inputs all need dark surfaces. The card itself already has dark
   styling from the .jb-props-card overrides further down. */
body[data-theme="dark"] .jb-sticker-kind-pill {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .jb-sticker-kind-pill:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-sticker-kind-pill.active {
  background: var(--bm-gold) !important;
  border-color: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .jb-toggle-pair {
  background: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-toggle-pair .jb-toggle {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .jb-toggle-pair .jb-toggle:hover {
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-toggle-pair .jb-toggle.active {
  background: var(--bm-gold) !important;
  color: #000 !important;
  box-shadow: none !important;
}
body[data-theme="dark"] .jb-dim-label input[data-jb-dim-inactive="1"] {
  background: var(--bm-bg-warm) !important;
}

/* Sticker selection chrome on the canvas — switch the dashed outline
   and corner-handle stroke from indigo to gold so it's consistent with
   the rest of the dark theme's accent. */
body[data-theme="dark"] .jb-sticker-chrome polygon {
  stroke: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-sticker-handle {
  fill: var(--bm-bg2) !important;
  stroke: var(--bm-gold) !important;
}

/* Uniform-sizes section in Pane B — small number inputs need dark
   well treatment so they don't glow white in the dark sidebar. */
body[data-theme="dark"] .jb-uniform-row label {
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-uniform-row input[type="number"] {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-uniform-row input[type="number"]:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px var(--bm-gold-soft) !important;
}
body[data-theme="dark"] .jb-uniform-row .jb-uniform-unit {
  color: var(--bm-ink3) !important;
}

/* ── Build list modal ─────────────────────────────────────────── */
body[data-theme="dark"] .jb-blist-row {
  background: var(--bm-bg3) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .jb-blist-row:hover {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-blist-row.is-current {
  background: var(--bm-gold-soft) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-blist-name { color: var(--text) !important; }
body[data-theme="dark"] .jb-blist-meta { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-blist-pill {
  background: var(--bm-gold) !important;
  color: #000 !important;
}
body[data-theme="dark"] .jb-blist-meta-tag {
  background: var(--bm-gold-soft) !important;
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-blist-star {
  color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-blist-star:hover {
  background: var(--bm-gold-soft) !important;
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-blist-star.is-primary {
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-blist-actions .jb-icon-btn {
  color: var(--bm-ink2) !important;
}
body[data-theme="dark"] .jb-blist-actions .jb-icon-btn:hover {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  color: var(--bm-ink) !important;
}
body[data-theme="dark"] .jb-blist-empty { color: var(--bm-ink3) !important; }

/* Paint-mode banner — keep amber feel on a softer dark base */
body[data-theme="dark"] .jb-modebar {
  background: rgba(245,158,11,.12) !important;
  border-color: rgba(245,158,11,.40) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] .jb-modebar .jb-exit {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(245,158,11,.40) !important;
  color: #fbbf24 !important;
}
body[data-theme="dark"] .jb-modebar .jb-exit:hover {
  background: rgba(245,158,11,.18) !important;
}
body[data-theme="dark"] .jb-modebar.jb-modebar-delete {
  background: rgba(239,68,68,.12) !important;
  border-color: rgba(239,68,68,.40) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .jb-modebar.jb-modebar-delete .jb-exit {
  border-color: rgba(239,68,68,.40) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .jb-modebar.jb-modebar-delete .jb-exit:hover {
  background: rgba(239,68,68,.18) !important;
  border-color: #f87171 !important;
}

/* ── Floating properties card (Pane C overlay) ──────────────── */
body[data-theme="dark"] .jb-props-card {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] .jb-props-head {
  border-bottom-color: var(--line) !important;
}
body[data-theme="dark"] .jb-props-head .jb-props-title { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-props-head .jb-props-close { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-props-head .jb-props-close:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .jb-props-body::-webkit-scrollbar-thumb {
  background: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-props .jb-label { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-props input[type="text"],
body[data-theme="dark"] .jb-props input[type="date"],
body[data-theme="dark"] .jb-props textarea {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-props input:hover,
body[data-theme="dark"] .jb-props textarea:hover {
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-props input:focus,
body[data-theme="dark"] .jb-props textarea:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .jb-props .jb-meta-line   { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-props .jb-meta-line b { color: var(--text)    !important; }
body[data-theme="dark"] .jb-props .jb-props-hint   { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-props .jb-props-hint b { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-id-pill {
  background: var(--bm-bg-warm) !important;
  color: var(--bm-ink3) !important;
}
body[data-theme="dark"] .jb-ws-block {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-ws-block h4 { color: var(--text) !important; }
body[data-theme="dark"] .jb-ws-block .jb-lil-x { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-ws-block .jb-lil-x:hover {
  background: rgba(239,68,68,.12) !important;
  color: #f87171 !important;
}
body[data-theme="dark"] .jb-legend-grid .jb-it { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-props .jb-cell-actions {
  border-top-color: var(--line) !important;
}
body[data-theme="dark"] .jb-props .jb-cell-actions .jb-btn.secondary.active {
  background: var(--jb-paint) !important;
  color: #000 !important;
  border-color: #fbbf24 !important;
}

/* ── Modals (new build / templates) — appended to <body> ──── */
body[data-theme="dark"] .jb-modal-backdrop {
  background: rgba(0,0,0,.65) !important;
}
body[data-theme="dark"] .jb-modal {
  background: var(--bm-bg2) !important;
  color: var(--text) !important;
  box-shadow: 0 24px 50px rgba(0,0,0,.7) !important;
}
body[data-theme="dark"] .jb-modal h2 { color: var(--text) !important; }
body[data-theme="dark"] .jb-modal p.jb-sub { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-modal .jb-close { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-modal .jb-close:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] .jb-setup-field label { color: var(--bm-ink2) !important; }
body[data-theme="dark"] .jb-setup-field input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-setup-field input:focus {
  border-color: var(--bm-gold) !important;
  box-shadow: 0 0 0 2.5px rgba(200,169,110,.18) !important;
}
body[data-theme="dark"] .jb-quick-buttons button {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-quick-buttons button:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
  border-color: var(--bm-line2) !important;
}
body[data-theme="dark"] .jb-quick-buttons button.active {
  background: rgba(200,169,110,.14) !important;
  border-color: var(--bm-gold) !important;
  color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-setup-band {
  background: var(--bm-bg-warm) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-setup-band input { color: var(--text) !important; }
body[data-theme="dark"] .jb-setup-band select {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-setup-band .jb-x:hover { color: #f87171 !important; }
body[data-theme="dark"] .jb-setup-bands-add {
  color: var(--bm-gold) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-setup-bands-add:hover {
  background: rgba(200,169,110,.10) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-template-card {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-template-card:hover {
  background: rgba(200,169,110,.10) !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-template-card p { color: var(--bm-ink2) !important; }

/* Color picker popover (appended to body) */
body[data-theme="dark"] .jb-color-popover {
  background: var(--bm-bg2) !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.6) !important;
}
body[data-theme="dark"] .jb-cp-title { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-color-grid .jb-sw.active {
  box-shadow: 0 0 0 2px var(--bm-gold) !important;
}
body[data-theme="dark"] .jb-color-custom { border-top-color: var(--line) !important; }
body[data-theme="dark"] .jb-color-custom label { color: var(--bm-ink3) !important; }
body[data-theme="dark"] .jb-color-custom input[type="color"] {
  background: var(--bm-bg3) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-color-custom input[type="text"] {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--bm-line) !important;
}
body[data-theme="dark"] .jb-color-custom input[type="text"]:focus {
  background: var(--bm-bg2) !important;
  border-color: var(--bm-gold) !important;
}

/* Toast — already dark, just bump shadow for the new theme */
body[data-theme="dark"] .jb-toast {
  background: rgba(0,0,0,.85) !important;
}

body[data-theme="dark"] #cxSubmittalEditorRoot {
  background: var(--bm-bg) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-doc-title,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-rev-title {
  color: var(--text) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-k,
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-hint {
  color: var(--muted) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-timeline-node::before {
  background: var(--line) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-btn {
  background: var(--bm-bg3) !important;
  color: var(--bm-ink2) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-btn:hover {
  background: var(--bm-bg-warm) !important;
  color: var(--text) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-btn.primary {
  background: var(--bm-gold) !important;
  color: #000 !important;
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-btn.primary:hover {
  background: var(--bm-gold2) !important;
  border-color: var(--bm-gold2) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-input {
  background: var(--bm-bg3) !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-input:focus {
  border-color: var(--bm-gold) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-input[readonly] {
  background: var(--bm-bg-warm) !important;
  color: var(--muted) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-timeline-header {
  background: var(--bm-bg3) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-node-active .cx-timeline-header {
  background: rgba(200,169,110,.10) !important;
  border-bottom-color: rgba(200,169,110,.30) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-disp-pill.good {
  background: rgba(16,185,129,.18) !important;
  color: #6ee7b7 !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-disp-pill.bad {
  background: rgba(239,68,68,.18) !important;
  color: #fca5a5 !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-success-pill {
  background: rgba(16,185,129,.12) !important;
  color: #6ee7b7 !important;
  border-color: rgba(16,185,129,.30) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-warn {
  background: rgba(245,158,11,.12) !important;
  color: #fbbf24 !important;
  border-color: rgba(245,158,11,.30) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot .cx-btn.danger {
  color: #f87171 !important;
  background: rgba(239,68,68,.10) !important;
  border-color: rgba(239,68,68,.30) !important;
}
body[data-theme="dark"] #cxSubmittalEditorRoot #cxSubmittalEditorError {
  background: rgba(239,68,68,.10) !important;
  color: #fca5a5 !important;
}

/* =====================================================================
   Module-specific pane theming
   dashboard-loader.js sets body[data-module="..."] whenever a module
   loads. Modules that want dark pane chrome (EasyCAD, CG Calculator)
   opt in by name below. These rules live in the main stylesheet so
   they aren't subject to innerHTML-injected stylesheet timing issues,
   and they auto-revert when the loader switches data-module to another
   value.
   ===================================================================== */
body[data-module="easycad"] #paneB.panel,
body[data-module="easycad"] #paneC.panel,
body[data-module="cg_calculator"] #paneB.panel,
body[data-module="cg_calculator"] #paneC.panel {
  background: #1e1e1e !important;
  border-color: #111 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 14px -6px rgba(0,0,0,.45) !important;
}
body[data-module="easycad"] #paneB .ph,
body[data-module="easycad"] #paneC .ph,
body[data-module="cg_calculator"] #paneB .ph,
body[data-module="cg_calculator"] #paneC .ph {
  background: #161616 !important;
  border-bottom-color: #111 !important;
  color: #ddd !important;
}
body[data-module="easycad"] #paneB .pb,
body[data-module="easycad"] #paneC .pb,
body[data-module="cg_calculator"] #paneB .pb,
body[data-module="cg_calculator"] #paneC .pb {
  background: #1e1e1e !important;
  color: #ddd !important;
}
/* EasyCAD wants its content flush — kill the default .pb padding. */
body[data-module="easycad"] #paneB .pb,
body[data-module="easycad"] #paneC .pb {
  padding: 0 !important;
}
/* The moduleShell + moduleFrame wrappers inside Pane B also need to
   stay dark, otherwise their default background bleeds through edge
   gaps. */
body[data-module="easycad"] #paneB .moduleShell,
body[data-module="cg_calculator"] #paneB .moduleShell,
body[data-module="easycad"] #paneB #moduleFrame,
body[data-module="cg_calculator"] #paneB #moduleFrame {
  background: #1e1e1e !important;
}
/* CRITICAL: EasyCAD's sidebar panels (Drawings, Units, Layers, Snap,
   Properties) reuse the `.panel` class name, which collides with the
   dashboard's own `.panel { background: var(--panel) }` rule and gets
   painted white. Reset every property dashboard's .panel sets so the
   inner panels render in EasyCAD's flat dark styling. */
body[data-module="easycad"] .ec-root .panel {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid #111 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  padding: 8px 10px !important;
}
/* Pane header focus/fullscreen buttons need contrast on the dark bg. */
body[data-module="easycad"] #paneB .ph .focus-btn,
body[data-module="easycad"] #paneC .ph .focus-btn,
body[data-module="cg_calculator"] #paneB .ph .focus-btn,
body[data-module="cg_calculator"] #paneC .ph .focus-btn {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #ddd !important;
}
body[data-module="easycad"] #paneB .ph .focus-btn:hover,
body[data-module="easycad"] #paneC .ph .focus-btn:hover {
  background: #4fc3f7 !important;
  border-color: #4fc3f7 !important;
  color: #1e1e1e !important;
}
body[data-module="cg_calculator"] #paneB .ph .focus-btn:hover,
body[data-module="cg_calculator"] #paneC .ph .focus-btn:hover {
  background: #f0a000 !important;
  border-color: #f0a000 !important;
  color: #16181c !important;
}
/* Splitter rails for the same dark modules. */
body[data-module="easycad"] #splitA::before,
body[data-module="easycad"] #splitC::before,
body[data-module="cg_calculator"] #splitA::before,
body[data-module="cg_calculator"] #splitC::before {
  background: rgba(180,180,180,.30) !important;
}
body[data-module="easycad"] #splitA:hover::before,
body[data-module="easycad"] #splitC:hover::before {
  background: rgba(79,195,247,.6) !important;
}
body[data-module="cg_calculator"] #splitA:hover::before,
body[data-module="cg_calculator"] #splitC:hover::before {
  background: rgba(240,160,0,.55) !important;
}