/* ============================================================================
   ehr-credify#420 (Messaging) - dark mode.
   On when <html data-theme="dark">: index.html's applyTheme(), 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 (qa/darkTheme.test.js checks).
   Palette (the EHR's): a green-tinted near-black page, slightly lighter cards, light text; the brand
   greens lifted so they read on dark.
   ============================================================================ */
:root[data-theme='dark'] {
  color-scheme: dark;
  --ink: #e6efe9;
  --forest: #3fae86;
  --pine: #4cc79e;
  --mint-soft: #1d3d33;
  --mist: #1b2722;
  --surface: #17211d;
  --line: #2a3a33;
  --line-2: #22302a;
  --muted: #9db3a8;
  --slate: #e6efe9;
  --danger: #f08a5d;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.6);
  /* colors the page's scripts write inline (style="border-top:1px solid var(--inl-line,#e5e7eb)"):
     each falls back to its light color, so these exist only here */
  --inl-line: #2a3a33;
}
:root[data-theme='dark'] body {
  background: #0f1714;
  color: var(--slate);
}
/* 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(--surface);
  color: var(--slate);
  border-color: var(--line);
}
:where(:root[data-theme='dark']) :where(input, textarea)::placeholder {
  color: var(--muted);
}
:where(:root[data-theme='dark']) option {
  background: var(--surface);
  color: var(--slate);
}
/* --forest / --pine are lifted for text on dark; where they fill a panel or a button the deep green stays */
:root[data-theme='dark'] .rail,
:root[data-theme='dark'] .rail-resize {
  background: #0f3d2e;
}
:root[data-theme='dark'] .kw-addbtn,
:root[data-theme='dark'] .au-chip.on {
  background: #1f8f6b;
  border-color: #1f8f6b;
}
:root[data-theme='dark'] .kw-addbtn:hover,
:root[data-theme='dark'] .sr-active {
  background: #27a07a;
}
/* a file in my own message sat on a white wash; on dark it takes a dark one */
:root[data-theme='dark'] .row.me .att-file {
  background: rgba(0, 0, 0, 0.25);
}

/* dark:generated:start */
/* GENERATED from public/index.html (103 rules): edit the source rule, then run node scripts/gen-dark-theme.mjs */
:where(:root[data-theme="dark"]) ::-webkit-scrollbar-thumb {
  background: #3c4f46;
}
:where(:root[data-theme="dark"]) .brand .logo {
  color: #62e4c2;
}
:where(:root[data-theme="dark"]) .seatpick-native option {
  color: #73d4b4;
}
:where(:root[data-theme="dark"]) .seat-menu {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .seat-menu .sm-head {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .newbtn {
  color: #62e4c2;
}
:where(:root[data-theme="dark"]) #testToolsBtn {
  color: #e06666;
  background-color: #17211c;
}
:where(:root[data-theme="dark"]) .thread .av .pres,
:where(:root[data-theme="dark"]) .panel .av .pres,
:where(:root[data-theme="dark"]) .modal .av .pres {
  border-color: #17211c;
}
:where(:root[data-theme="dark"]) .icobtn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .icobtn:hover {
  border-color: #364f43;
}
:where(:root[data-theme="dark"]) .icobtn.on {
  border-color: #305a45;
}
:where(:root[data-theme="dark"]) .bubble {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .row.me .bubble {
  border-color: #2e5542;
  color: #6fd7b4;
}
:where(:root[data-theme="dark"]) .row.me .bubble .edited {
  color: #a4d2c2;
}
:where(:root[data-theme="dark"]) .att-file:hover {
  border-color: #305a45;
  background: #17211c;
}
:where(:root[data-theme="dark"]) .pv-modal .mbd {
  background: #1f2b23;
}
:where(:root[data-theme="dark"]) .pv-body iframe {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .pv-body pre {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .invtag {
  background: #352c1c;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .notif-ask button {
  color: #62e4c2;
}
:where(:root[data-theme="dark"]) .react {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .react.mine {
  border-color: #305a45;
}
:where(:root[data-theme="dark"]) .bubble.sched {
  border-color: #315b49;
}
:where(:root[data-theme="dark"]) .row.me .bubble.sched {
  background: #192e25;
  border-color: #315b49;
}
:where(:root[data-theme="dark"]) .sched-chip.quiet {
  color: #ebb65b;
  background: #484127;
}
:where(:root[data-theme="dark"]) .sched-acts button {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .actions {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .emoji-pop {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .typing .dots {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .inbar {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .sendbtn:disabled {
  background: #365144;
}
:where(:root[data-theme="dark"]) .tpl-popover {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .tpl-row {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .tpl-row-head .tr-del:hover {
  background: #371e1e;
}
:where(:root[data-theme="dark"]) .sms-counter.multi {
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .panel .pbtn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .panel .pbtn.danger {
  border-color: #50382b;
}
:where(:root[data-theme="dark"]) .panel .pbtn.danger:hover {
  background: #33241b;
}
:where(:root[data-theme="dark"]) .empty .eill {
  background: linear-gradient(145deg,var(--mint-soft),#17211c);
}
:where(:root[data-theme="dark"]) .modal {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mbd input[type=text].input-error {
  background: #2f2019;
}
:where(:root[data-theme="dark"]) .msearch {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mini-check .cbx {
  border: 2px solid #364f43;
}
:where(:root[data-theme="dark"]) .pick.sel {
  border-color: #305a45;
}
:where(:root[data-theme="dark"]) .pick .chk {
  border: 2px solid #364f43;
}
:where(:root[data-theme="dark"]) .mft {
  background: #182518;
}
:where(:root[data-theme="dark"]) .btn {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .btn.primary:disabled {
  background: #365144;
  border-color: #365144;
}
:where(:root[data-theme="dark"]) .btn.ghostdanger {
  border-color: #50382b;
}
:where(:root[data-theme="dark"]) .btn.ghostdanger:hover {
  background: #33241b;
}
:where(:root[data-theme="dark"]) .tabs button.on {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .taxrow .del:hover {
  background: #33241b;
}
:where(:root[data-theme="dark"]) .taxadd input {
  border: 1px dashed #3f544a;
}
:where(:root[data-theme="dark"]) .provrow select {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .seg button.on {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .valrow select {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .kw-dd {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .kw-trigger {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .kw-sw {
  background: #3e4f46;
}
:where(:root[data-theme="dark"]) .kw-sw span {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .kw-rm:hover {
  background: #38251e;
}
:where(:root[data-theme="dark"]) .kw-input {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .rule-del {
  background: #17211c;
  border: 1px solid #55362e;
}
:where(:root[data-theme="dark"]) .rule-del:hover {
  background: #30201a;
}
:where(:root[data-theme="dark"]) .ntf-trigger {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .ntf-panel {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .ntf-item .cbx {
  border: 2px solid #364f43;
}
:where(:root[data-theme="dark"]) .chip-t {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .chip-t.on {
  border-color: #305a45;
}
:where(:root[data-theme="dark"]) .smart-toggle .sw {
  background: #3c4f46;
}
:where(:root[data-theme="dark"]) .av .sms-tag {
  border: 2px solid #17211c;
}
:where(:root[data-theme="dark"]) .thread .av .sms-tag,
:where(:root[data-theme="dark"]) .panel .av .sms-tag {
  border-color: #17211c;
}
:where(:root[data-theme="dark"]) .row.sms.me .bubble {
  background: #202b3b;
  border-color: #29394d;
  color: #69a2de;
}
:where(:root[data-theme="dark"]) .row.sms:not(.me) .bubble {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .send-fix {
  border: 1px solid #5c3d32;
  background: #17211c;
}
:where(:root[data-theme="dark"]) .send-fix:hover {
  background: #33241b;
}
:where(:root[data-theme="dark"]) .receipt.delivered {
  color: #5e8ae8;
}
:where(:root[data-theme="dark"]) .note {
  background: #352d1c;
  border: 1px solid #605434;
  color: #d4bc72;
}
:where(:root[data-theme="dark"]) .note .note-h {
  color: #e6bb60;
}
:where(:root[data-theme="dark"]) .note .txt {
  color: #cdb779;
}
:where(:root[data-theme="dark"]) .risk-banner.high {
  background: #371e1e;
  color: #e06666;
}
:where(:root[data-theme="dark"]) .risk-banner.med {
  background: #484127;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .optout-bar {
  background: #2d1818;
  border: 1px solid #412323;
  color: #d76f6f;
}
:where(:root[data-theme="dark"]) .note-toggle .ntdot {
  background: #415049;
}
:where(:root[data-theme="dark"]) .note-toggle.on {
  background: #352d1c;
  color: #e3c164;
  border-color: #605434;
}
:where(:root[data-theme="dark"]) .inbar.notemode {
  border-color: #605434;
}
:where(:root[data-theme="dark"]) .consent-chip.out {
  background: #371e1e;
  color: #e06666;
}
:where(:root[data-theme="dark"]) .ppick {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .mini-toggle .sw {
  background: #3c4f46;
}
:where(:root[data-theme="dark"]) .rule-tester #riskTest {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .sev-pill.high {
  background: #371e1e;
  color: #e06666;
}
:where(:root[data-theme="dark"]) .sev-pill.medium {
  background: #484127;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .ob-status.held_quiet_hours {
  background: #484127;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .au-chip {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .ra-resolve textarea {
  background: #17211c;
}
:where(:root[data-theme="dark"]) .st-chip.stnew {
  background: #202c3b;
  color: #6485e2;
}
:where(:root[data-theme="dark"]) .st-chip.stack {
  background: #484127;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .src-tag {
  background: #201b33;
  color: #9669dd;
}
:where(:root[data-theme="dark"]) .sync-chip:hover {
  background: #2e5644;
}
:where(:root[data-theme="dark"]) .au-item.au-received .au-ic {
  background: #1e2e38;
  color: #54baf3;
}
:where(:root[data-theme="dark"]) .au-item.au-scheduled .au-ic {
  background: #484127;
  color: #ebb65b;
}
:where(:root[data-theme="dark"]) .au-item.au-risk .au-ic {
  background: #371e1e;
  color: #e06666;
}
:where(:root[data-theme="dark"]) .au-item.au-alerts .au-ic {
  background: #351d2b;
  color: #e16697;
}
/* dark:generated:end */