/* ============================================================================
   ehr-credify#420 (Alerts Hub) - dark mode.
   On when <html data-theme="dark">: the page's applyTheme() (src/frontend/v13-layer.js), from the signed-in
   person's own Appearance (users.personalTheme, on their Provider Profile in the EHR; /api/state me.theme).
   - 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 and rebuilding public/index.html (test/dark-theme.test.js checks).
   Palette (the EHR's): a green-tinted near-black page, slightly lighter cards, light text; the brand greens,
   red and amber lifted so they read as text on dark. Already-dark panels (the sidenav, the view-as switcher,
   the bulk bar) keep their own colors. Light mode never loads a rule from here.
   ============================================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;
  --primary: #27a07a;
  /* --primary-dk is text (chips, the active tab, a filtered Filters button) and one fill (the bulk bar):
     lifted for the text here, the bulk bar keeps the deep green below */
  --primary-dk: #9fdcc4;
  --primary-lt: #34b88d;
  --accent: #4cc79e;
  --mint-pale: #15302a;
  --mint-soft: #1d3d33;
  --border: #2a3a33;
  /* --text is text, and the fill of the tooltip, the toast and a group's count pill (pinned below) */
  --text: #e6efe9;
  --muted: #9db3a8;
  --muted-lt: #7f998c;
  /* --white is the cards and panels; where it is the text on a green or red button, #fff is pinned below */
  --white: #17211d;
  --crit: #ef6b5e;
  --crit-bg: #3a1d1b;
  --crit-bd: #5c2b27;
  --high: #f0a23b;
  --high-bg: #33280f;
  --high-bd: #5a4318;
  --normal: #34b88d;
  --normal-bg: #15302a;
  --normal-bd: #2b5246;
  --low: #9db3a8;
  --low-bg: #1b2722;
  --low-bd: #2a3a33;
  --bg: #0f1714;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45);
  --shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
}
:root[data-theme='dark'] body {
  background: var(--bg);
  color: var(--text);
}
/* Form controls the browser draws: dark fields, light text, a visible placeholder (zero specificity, so any
   rule in the page wins). */
:where(:root[data-theme='dark']) :where(input, select, textarea) {
  background-color: var(--white);
  color: var(--text);
  border-color: var(--border);
}
:where(:root[data-theme='dark']) :where(input, textarea)::placeholder {
  color: var(--muted-lt);
}
:where(:root[data-theme='dark']) option {
  background: var(--white);
  color: var(--text);
}
/* --white is the text on these colored buttons and badges: it stays white */
:root[data-theme='dark'] .btn-primary,
:root[data-theme='dark'] .btn-primary:hover,
:root[data-theme='dark'] .bell-badge,
:root[data-theme='dark'] .role-switcher select,
:root[data-theme='dark'] .role-switcher select option {
  color: #fff;
}
/* red fills stay deep under white text (the lifted --crit is for red text) */
:root[data-theme='dark'] .btn.danger-solid,
:root[data-theme='dark'] .bell-badge {
  background: #c0392b;
  border-color: #c0392b;
}
:root[data-theme='dark'] .btn.danger-solid:hover {
  background: #a83224;
  border-color: #a83224;
}
/* --primary-dk / --text fill these: the bulk bar keeps its deep green, the tooltip, the toast and a group's
   count pill take a raised dark surface */
:root[data-theme='dark'] .bulk-bar {
  background: #0f3d2e;
}
:root[data-theme='dark'] .role-switcher select option {
  background: #0f3d2e;
}
:root[data-theme='dark'] #credify-tip,
:root[data-theme='dark'] .toast {
  background: #2a3a33;
  color: #e6efe9;
}
:root[data-theme='dark'] .group-row .group-count {
  background: #3a4d45;
  color: #e6efe9;
}
/* the active status tab sat white on the grey track; on dark it is a step lighter than the track */
:root[data-theme='dark'] .tab-btn.active {
  background: #22302a;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
/* modal shadows and the dimmer read as a lighter haze on dark: make them black */
:root[data-theme='dark'] .modal-box,
:root[data-theme='dark'] .dt-picker-box,
:root[data-theme='dark'] .modal,
:root[data-theme='dark'] .v13-modal,
:root[data-theme='dark'] .filters-panel {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
}

/* dark:generated:start */
/* GENERATED from public/index.html (25 rules): edit the source rule, then run node scripts/gen-dark-theme.mjs */
:where(:root[data-theme="dark"]) .hub-bar {
  background: #16281f;
}
:where(:root[data-theme="dark"]) .tag-resolved {
  background: #1f3921;
  color: #7dc981;
}
:where(:root[data-theme="dark"]) .modal-box {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .form-input {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .form-textarea {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .dt-picker-box {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .dt-picker-nav .nav-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .dt-cal-day:hover:not(.selected) {
  background: #1b3328;
}
:where(:root[data-theme="dark"]) .dt-time-sel {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .tag-reassigned-from {
  background: #342d1c;
  color: #ecb05a;
}
:where(:root[data-theme="dark"]) .tag-snoozed {
  background: #191e2f;
  color: #707ed6;
  border: 1px solid #22263e;
}
:where(:root[data-theme="dark"]) .sw-slider {
  background: #3d5449;
}
:where(:root[data-theme="dark"]) .nl-chip-email {
  background: #1b2531;
  border-color: #273748;
  color: #7ca2ca;
}
:where(:root[data-theme="dark"]) .nl-chip-sms {
  background: #362c1d;
  border-color: #55452e;
  color: #d1ae75;
}
:where(:root[data-theme="dark"]) .nl-chip-desktop {
  background: #231b31;
  border-color: #3a2b50;
  color: #9b82c5;
}
:where(:root[data-theme="dark"]) .nl-held {
  background: #362c1d;
  color: #d1ae75;
  border: 1px solid #55452e;
}
:where(:root[data-theme="dark"]) .nl-digest {
  background: #1b2531;
  color: #7ca2ca;
  border: 1px solid #273748;
}
:where(:root[data-theme="dark"]) .tag.src-chip.src-rcm {
  background: #19212f;
  color: #768fd1;
  border-color: #28324a;
}
:where(:root[data-theme="dark"]) .tag.src-chip.src-forms {
  background: #211a30;
  color: #9477cf;
  border-color: #2f2545;
}
:where(:root[data-theme="dark"]) .tag.src-chip.src-calendar {
  background: #34291c;
  color: #f6af51;
  border-color: #55442e;
}
:where(:root[data-theme="dark"]) .tag.src-chip.src-ehr {
  background: #1e372c;
  color: #71d6b0;
  border-color: #2f5644;
}
:where(:root[data-theme="dark"]) .tag.src-chip.src-reminders {
  background: #301b1a;
  color: #d57a71;
  border-color: #502d2b;
}
:where(:root[data-theme="dark"]) .card-acts .btn.card-act-danger {
  border-color: #58342f;
}
:where(:root[data-theme="dark"]) .v13-timefmt {
  background: #1a2a20;
}
:where(:root[data-theme="dark"]) .dtf-combo:hover {
  border-color: #42564a;
}
/* dark:generated:end */