/* ==========================================================================
   ENNAT ROI Calculator — DARK variant (roi-calculator-dark.html only)
   ------------------------------------------------------------------------
   The base design (css/roi.css) makes the calculator a LIGHT "island" on the
   dark site. This override flips that island to a dark, elevated surface using
   the site's own "Ignition" dark palette (theme.css), so the whole calculator
   reads dark. Nothing here touches the light page — it only applies under
   `.roi-app.roi-dark`, and this file is loaded AFTER roi.css so it wins.

   Strategy:
   1) Re-map the panel's local tokens (roi.css set them to LIGHT ink on .ennat-light)
      back to DARK-surface values — this fixes everything token-driven for free
      (text, borders, input bg, chart grid/axis, the "$ saved" ink, etc.).
   2) Override the few hardcoded light surfaces (#fff cards/KPIs/family tiles,
      the white modal, the muddy-on-dark greens/ambers) explicitly.
   ========================================================================== */

/* Render native controls (the range slider track, text carets, scrollbars) in dark
   mode — otherwise the <input type=range> keeps a light default track on the dark card. */
.roi-app.roi-dark { color-scheme: dark; }

/* 1) Token remap — beats `.roi-panel.ennat-light` (higher specificity + later). */
.roi-app.roi-dark .roi-panel.ennat-light {
  --text: #F4F2F7;
  --text-2: #B7B4C2;
  --text-3: #85818F;
  --surface-2: #232230;          /* input / control bg — a step above the card */
  --line: rgba(255,255,255,.08);
  --line-strong: rgba(255,255,255,.17);
  --accent-ink: #FFC825;         /* amber ink that pops on dark (was a dim amber for white) */
  --roi-grid: rgba(255,255,255,.07);
  --roi-axis: #8A8797;
  --roi-ennat: #E7AE24;          /* brighter amber for the ENNAT line/dot on dark */
  --roi-sav-ink: #FFCE45;        /* "$X saved" label ink — bright on the dark card */

  background: #111015;
  border-color: rgba(255,255,255,.07);
  box-shadow: 0 40px 120px -50px rgba(0,0,0,.9);
}

/* 2) Family strip ---------------------------------------------------------- */
.roi-app.roi-dark .roi-fams::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); }
.roi-app.roi-dark .roi-fam { background: #1A1922; border-color: rgba(255,255,255,.08); }
.roi-app.roi-dark .roi-fam:hover { box-shadow: 0 16px 32px -18px rgba(0,0,0,.7); }
/* Renders stay in full colour on dark too (the amber ring is the only "selected" cue).
   A slightly lighter tile keeps the product from sinking into the near-black card. */
.roi-app.roi-dark .roi-fam .th { background: #14131A; }
.roi-app.roi-dark .roi-fam.on {
  border-color: rgba(255,200,37,.5);
  box-shadow: inset 0 0 0 1.5px rgba(255,200,37,.55), 0 16px 34px -16px rgba(255,200,37,.3);
}

/* 3) Cards + KPIs ---------------------------------------------------------- */
.roi-app.roi-dark .roi-card { background: #16151C; border-color: rgba(255,255,255,.08); }
.roi-app.roi-dark .roi-kpi  { background: #16151C; border-color: rgba(255,255,255,.08); }
/* KPI numbers: keep the warm "per-number" family, but brighter so each pops on dark. */
.roi-app.roi-dark #k-roi { color: #FFC61F; }   /* 5-Year ROI — brand amber */
.roi-app.roi-dark #k-sav { color: #FF9F45; }   /* 5-Year Savings — warm orange */
.roi-app.roi-dark #k-pay { color: #FF6E4D; }   /* Payback — coral / terracotta */
/* Project ROI KPIs (quote-roi.html) — same warm family, project + family levels. */
.roi-app.roi-dark #g-roi, .roi-app.roi-dark #f-roi { color: #FFC61F; }
.roi-app.roi-dark #g-sav, .roi-app.roi-dark #f-sav { color: #FF9F45; }
.roi-app.roi-dark #g-pay, .roi-app.roi-dark #f-pay { color: #FF6E4D; }
.roi-app.roi-dark #g-inv { color: #FFD54F; }   /* total investment — gold */

/* 4) Badge, inputs, buttons ----------------------------------------------- */
.roi-app.roi-dark .roi-badge {
  background: rgba(255,200,37,.10); border-color: rgba(255,200,37,.24); color: #FFC825;
}
.roi-app.roi-dark .roi-ghost:hover { background: #211F2B; border-color: rgba(255,255,255,.24); }
/* Impact-scenario presets: the active chip is bright amber on dark, so its text must be DARK ink
   (white would vanish). Idle chips sit on the #232230 control surface. */
.roi-app.roi-dark .roi-seg { background: #1E1D28; }
.roi-app.roi-dark .roi-seg button.on { color: #1A1200; }
.roi-app.roi-dark .roi-seg button.on em { color: rgba(26,18,0,.62); }
/* L2 preset control sits OUTSIDE the light panel (in the header), where --accent-ink is the dim
   dark-amber for white; force the bright amber so the active chip pops on the dark page. */
.roi-app.roi-dark .roi-headside .roi-seg button.on { background: #FFC825; }
.roi-app.roi-dark .roi-presets-side .roi-presets-lbl { color: #F4F2F7; }

/* 5) $0 warranty cell + its ⓘ tooltip -------------------------------------- */
.roi-app.roi-dark .roi-free,
.roi-app.roi-dark .roi-io td.roi-vc.roi-free { color: #34D399; }   /* brighter green on dark */
.roi-app.roi-dark .roi-info { color: #1A1200; }                   /* dark 'i' on the amber circle */
.roi-app.roi-dark .roi-info::after {
  background: #26242F; color: #F4F2F7; border: 1px solid rgba(255,255,255,.14);
}
.roi-app.roi-dark .roi-info::before { border-top-color: #26242F; }

/* 6) "How is this calculated?" link + methodology modal -------------------- */
.roi-app.roi-dark .roi-method:hover { color: #FFD65A; }
.roi-app.roi-dark .roi-modal-box {
  background: #16151C; color: #F4F2F7; border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.85);
}
.roi-app.roi-dark .roi-modal-box h3 { color: #F4F2F7; }
.roi-app.roi-dark .roi-modal-x { color: #85818F; }
.roi-app.roi-dark .roi-modal-x:hover { color: #F4F2F7; }
.roi-app.roi-dark .roi-method-body { color: #B7B4C2; }
.roi-app.roi-dark .roi-method-body b { color: #F4F2F7; }

/* 7) Project-ROI tables (not on the public calc, but keep the variant coherent) */
.roi-app.roi-dark .roi-ftable tbody tr[data-idx]:hover,
.roi-app.roi-dark .roi-ftable tbody tr[data-idx]:focus-visible { background: rgba(255,255,255,.04); }
.roi-app.roi-dark .roi-ftable td.th img { background: #0E0D13; }