/* ============================================================================
   ehr-credify#420 (Reminders) - dark mode.
   On when <html data-theme="dark">: the seam's remApplyTheme() (scripts/remsync.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(--c-...).
   - Between the dark:generated markers: the rules that hard-code a color, from scripts/gen-dark-theme.mjs
     (it reads the built public/index.html). Regenerate after changing those rules; the unit test 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 on dark. The EHR sidenav is already a dark panel and stays.
   ============================================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;
  --c-primary: #27a07a;
  --c-primary-dark: #4cc79e; /* text on mint chips; the fills that use it stay deep (below) */
  --c-accent: #34b88d;
  --c-accent-2: #4cc79e;
  --c-mint: #15302a;
  --c-mint-2: #1d3d33;
  --c-text: #e6efe9;
  --c-muted: #9db3a8;
  --c-muted-2: #7d968a;
  --c-surface: #0f1714;
  --c-surface-2: #16201c;
  --c-surface-3: #3a4d45;
  --c-border: #2a3a33;
  --c-danger: #ef6b5e;
  --c-danger-bg: #3a1d1b;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
}
:root[data-theme='dark'] body {
  background: var(--c-surface);
  color: var(--c-text);
}
/* Form controls the browser draws: dark fields, light text, a visible placeholder (zero specificity). */
:where(:root[data-theme='dark']) :where(input, select, textarea)::placeholder {
  color: #6f877b;
}
:where(:root[data-theme='dark']) option {
  background: #17211d;
  color: var(--c-text);
}
/* .mod-btn-primary (Save changes) sits after .mod-btn in the page; the generated .mod-btn override would
   otherwise outrank it, so the green fill is restated */
:root[data-theme='dark'] .mod-btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
}
/* the editor pane is the page (var(--c-surface)), not a card: .cf-pane-editor comes after .cf-pane, whose
   generated override would otherwise outrank it */
:root[data-theme='dark'] .cf-pane-editor {
  background: var(--c-surface);
}
/* --c-primary-dark is lifted for text on dark; where it fills a button (hover) the deep green stays */
:root[data-theme='dark'] .cf-btn-primary:hover,
:root[data-theme='dark'] .cf-cond-save-btn:hover,
:root[data-theme='dark'] .cf-tmpl-save-btn:hover,
:root[data-theme='dark'] .mod-btn-primary:hover,
:root[data-theme='dark'] .cf-rule-save:hover {
  background: #1f8f6b;
  border-color: #1f8f6b;
}
:root[data-theme='dark'] .cf-dp-day.is-sel:hover {
  background: #1f8f6b;
}
/* --c-danger is lifted for text; the danger button keeps a deep red fill under its white label */
:root[data-theme='dark'] .cf-btn-danger {
  background: #b4453a;
  border-color: #b4453a;
}
/* the tooltip is drawn in var(--c-text) (dark on light); on dark it stays a dark chip with light text */
:root[data-theme='dark'] #credify-tip {
  background: #2a3a33;
  color: #e6efe9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* dark:generated:start */
/* GENERATED from public/index.html (59 rules): edit the source rule, then run node scripts/gen-dark-theme.mjs */
:where(:root[data-theme="dark"]) input,
:where(:root[data-theme="dark"]) select,
:where(:root[data-theme="dark"]) textarea,
:where(:root[data-theme="dark"]) button {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mod-head {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mod-scope-reset {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-pane {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-select-trigger {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-select-list {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-select-options::-webkit-scrollbar-thumb,
:where(:root[data-theme="dark"]) .cf-tsel-options::-webkit-scrollbar-thumb,
:where(:root[data-theme="dark"]) .cf-picker-list::-webkit-scrollbar-thumb {
  background: #3f5a4e;
  border: 2px solid #17211c;
}
:where(:root[data-theme="dark"]) .cf-tsel-tab.is-active {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tsel-trigger {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tsel-panel {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-step-card,
:where(:root[data-theme="dark"]) .cf-channel-card,
:where(:root[data-theme="dark"]) .cf-recurrence-card {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-weekday {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-rule-row {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-template-block {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-btn-secondary {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-modal {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-lang-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-row {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-mode-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-chanchip {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-guard input[type=number] {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-picker {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-chan-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-mode-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-search-input {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-card {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-active-pill {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tmpl-action-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-head {
  background: linear-gradient(180deg, #16281f, #17211c);
}
:where(:root[data-theme="dark"]) .cf-chan-chk {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-addrow .cf-btn-secondary {
  border: 1.5px dashed #394e44;
}
:where(:root[data-theme="dark"]) .cf-pager .cf-rule-add:disabled:hover {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tp-combo {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tp-panel {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-lrow {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-lchip.is-warn {
  background: #3b3120;
  border-color: #584a2f;
  color: #e3b064;
}
:where(:root[data-theme="dark"]) .cf-lrow-actions button {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-msg-tab {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-prail {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mod-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-tsel-tabs-seg .cf-tsel-tab.is-active {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-grid .cf-cond-mode-btn.is-new,
:where(:root[data-theme="dark"]) .cf-cond-grid .cf-cond-mode-btn.is-saved.is-active {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-wi-seg-btn.is-active {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-rule-block {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-rule-name:focus {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-rule-menu {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-rule-sec-cond {
  background: #16281f;
}
:where(:root[data-theme="dark"]) .cf-rule-add {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-rm:hover {
  border-color: #482b27;
}
:where(:root[data-theme="dark"]) .cf-action-chip.conflict {
  background: #312d1b;
  color: #f6c851;
}
:where(:root[data-theme="dark"]) .cf-action-chip-gear:hover {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-action-chip-rm:hover {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-wi-saved-item {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-cond-neq-hint {
  background: var(--c-caution-soft, #342c1c);
  border: 1px solid #5b4d31;
  color: #f6c851;
}
:where(:root[data-theme="dark"]) .cf-picker-tick {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-dp {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-dp-head {
  border-bottom: 1px solid #233128;
}
:where(:root[data-theme="dark"]) .cf-dp-nav-btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .cf-dp-foot {
  border-top: 1px solid #233128;
}
/* dark:generated:end */