/* ============================================================================
   ehr-credify#420 (Reports V41) - dark mode.
   On when <html data-theme="dark">: the page's applyTheme(), from the signed-in person's own Appearance
   (users.personalTheme, on their Provider Profile in the EHR; /api/state me.theme). Linked media="screen":
   PDF / Print (window.print) never sees any of this, so printed and saved reports stay light.
   - The tokens below re-color everything the page draws with var(--...).
   - Between the dark:generated markers: the rules that hard-code a color, from
     scripts/gen-dark-theme.mjs. Regenerate after changing those rules (test/unit/dark-theme.test.mjs checks).
   Palette (the EHR's): a green-tinted near-black page, slightly lighter cards, light text; the brand
   greens, red, amber and blue lifted so they read on dark.
   ============================================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;
  /* --green-deep is text (selected options, positive numbers, pills) and a fill (the step rail, chart tip,
     toast, selected chips). Lifted for text here; the fills read var(--green-deep-fill, var(--green-deep)),
     so they stay deep in dark and are unchanged in light (where --green-deep-fill is not defined). */
  --green-deep: #5cc49c;
  --green-deep-fill: #0d4a34;
  --green-primary: #27a07a;
  --green-accent: #34b88d;
  --green-accent-2: #4cc79e;
  --mint-pale: #15302a;
  --mint-pale-2: #1d3d33;
  --text-main: #e6efe9;
  --text-muted: #9db3a8;
  --text-muted-2: #7f978b;
  --surface: #0f1714;
  --surface-2: #1b2722;
  --border: #2a3a33;
  --white: #17211d;
  --caution: #f0a23b;
  --caution-soft: #33280f;
  --problem: #ef6b5e;
  --problem-soft: #3a1d1b;
  --blue: #5bbfd6;
  --blue-soft: #12303a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.6);
  /* Colors the chart scripts write inline (fill="var(--inl-axis,#5b6b64)"): each falls back to its light
     color, so these exist only here. */
  --inl-axis: #9db3a8;
  --inl-tick: #7f978b;
  --inl-grid: #24332d;
  --inl-cell: #1b2722;
  --inl-slash: #33463e;
  --inl-no: #3a4d45;
  --inl-strong: #e6efe9;
  --inl-celltext: #e6efe9;
  --inl-target: #7f978b;
  --inl-muted: #9db3a8;
  --inl-colb: #d6a75a;
  --inl-heat: #34b88d;
}
/* Form controls the browser draws: dark fields, light text, a visible placeholder (zero specificity). */
:where(:root[data-theme='dark']) :where(input, select, textarea) {
  background-color: var(--white);
  color: var(--text-main);
  border-color: var(--border);
}
:where(:root[data-theme='dark']) :where(input, textarea)::placeholder {
  color: var(--text-muted-2);
}
:where(:root[data-theme='dark']) option {
  background: var(--white);
  color: var(--text-main);
}
/* Chart series (CHART_COLORS in the page: hex on purpose, tintColor() mixes them). Validated for a light chart
   surface; on the dark card the darker ones lift so each series still reads. Same hue order. A CSS fill beats
   the SVG fill attribute; the legend swatch's inline background needs !important. */
:root[data-theme='dark'] [fill='#1a8a66'] { fill: #34b88d; }
:root[data-theme='dark'] [fill='#7c3aed'] { fill: #a78bfa; }
:root[data-theme='dark'] [fill='#d97706'] { fill: #f0a23b; }
:root[data-theme='dark'] [fill='#2563eb'] { fill: #7aa5f2; }
:root[data-theme='dark'] [fill='#be185d'] { fill: #f472b6; }
:root[data-theme='dark'] [stroke='#1a8a66'] { stroke: #34b88d; }
:root[data-theme='dark'] [stroke='#7c3aed'] { stroke: #a78bfa; }
:root[data-theme='dark'] [stroke='#d97706'] { stroke: #f0a23b; }
:root[data-theme='dark'] [stroke='#2563eb'] { stroke: #7aa5f2; }
:root[data-theme='dark'] [stroke='#be185d'] { stroke: #f472b6; }
:root[data-theme='dark'] [style*='background:#1a8a66'] { background: #34b88d !important; }
:root[data-theme='dark'] [style*='background:#7c3aed'] { background: #a78bfa !important; }
:root[data-theme='dark'] [style*='background:#d97706'] { background: #f0a23b !important; }
:root[data-theme='dark'] [style*='background:#2563eb'] { background: #7aa5f2 !important; }
:root[data-theme='dark'] [style*='background:#be185d'] { background: #f472b6 !important; }

/* dark:generated:start */
/* GENERATED from public/index.html (6 rules): edit the source rule, then run node scripts/gen-dark-theme.mjs */
:where(:root[data-theme="dark"]) .btn.dash-btn {
  background: #1c3429;
}
:where(:root[data-theme="dark"]) .me-rule-x {
  background: var(--surface,#17211c);
}
:where(:root[data-theme="dark"]) .me-rule-x:hover {
  color: #e26d64;
}
:where(:root[data-theme="dark"]) .me-rule-add {
  color: var(--brand,#6bdcb7);
}
:where(:root[data-theme="dark"]) .sbd-pill.p-amber {
  color: #f1a955;
}
:where(:root[data-theme="dark"]) .sbd-pill.p-red {
  color: #db776b;
}
/* dark:generated:end */