/* Dark / night mode — <html data-theme="dark"> (set by js/theme.js and the inline script in index.html).
 *
 * Two layers:
 *  1. js/theme.js derives a `[data-theme="dark"]` copy of every hard-coded colour in the app's stylesheets at runtime
 *     (light backgrounds → dark surfaces, dark text → light text, light borders → dark borders) into
 *     <style id="theme-dark-derived">, inserted just before this file.
 *  2. This file: palette variables, base surfaces and hand-tuned fixes. It loads last, so it wins ties.
 * Everything is screen-only: printing and the #/print/ view stay light (theme.js forces light on #/print/).
 * Also holds the (theme-independent) styles of the chart-templates UI at the bottom.
 */
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #131b23;
    --bg-soft: #1b2631;
    --bg-nav: #18222c;
    --line: #2c3a47;
    --line-2: #364756;
    --text: #dbe3ea;
    --text-2: #a9b7c4;
    --muted: #8696a5;
    --blue-link: #4fb8f0;
    --shadow: 0 6px 24px rgba(0, 0, 0, .55);
    --dk-surface: #1a242e;     /* cards, panels, modals */
    --dk-surface-2: #222e3a;   /* raised / hover */
    --dk-input: #0f161d;       /* inputs */
    --dk-heading: #e8eef3;
  }
  /* Base / generic rules use :where() (no extra specificity): they only fill in where a page set nothing itself. */
  :where([data-theme="dark"]) body { background: var(--bg); color: var(--text); }
  :where([data-theme="dark"]) h1, :where([data-theme="dark"]) h2, :where([data-theme="dark"]) h3, :where([data-theme="dark"]) h4 { color: var(--dk-heading); }
  :where([data-theme="dark"]) a { color: var(--blue-link); }
  :where([data-theme="dark"]) ::selection { background: #2b5f86; color: #fff; }
  :where([data-theme="dark"]) * { scrollbar-color: #3a4a59 transparent; }

  /* ---------- form controls ---------- */
  :where([data-theme="dark"]) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
  :where([data-theme="dark"]) textarea, :where([data-theme="dark"]) select, :where([data-theme="dark"]) .input, :where([data-theme="dark"]) .search-input {
    background-color: var(--dk-input); color: var(--text); border-color: var(--line-2);
  }
  :where([data-theme="dark"]) input::placeholder, :where([data-theme="dark"]) textarea::placeholder { color: #6f8090; }
  :where([data-theme="dark"]) input:disabled, :where([data-theme="dark"]) textarea:disabled, :where([data-theme="dark"]) select:disabled { background-color: #18212a; color: #8c9aa7; }
  :where([data-theme="dark"]) input[type=checkbox], :where([data-theme="dark"]) input[type=radio] { accent-color: #2ecc71; }
  :where([data-theme="dark"]) option { background: var(--dk-input); color: var(--text); }
  :where([data-theme="dark"]) input[type=date]::-webkit-calendar-picker-indicator,
  :where([data-theme="dark"]) input[type=datetime-local]::-webkit-calendar-picker-indicator,
  :where([data-theme="dark"]) input[type=time]::-webkit-calendar-picker-indicator { filter: none; opacity: .85; } /* color-scheme: dark already draws it light; inverting made it near-invisible */

  /* ---------- buttons ---------- */
  :where([data-theme="dark"]) .btn-light { background: #26323e; color: var(--text); border-color: #3a4a59; }
  :where([data-theme="dark"]) .btn-light:hover { background: #2e3c4a; }
  :where([data-theme="dark"]) .btn-outline { background: transparent; }
  :where([data-theme="dark"]) .link { color: var(--blue-link); }
  :where([data-theme="dark"]) .seg button { background: #1d2833; color: var(--text); border-color: var(--line-2); }

  /* ---------- generic page building blocks (also used by new tools / ops / sim pages) ---------- */
  :where([data-theme="dark"]) .page, :where([data-theme="dark"]) .app-main { color: var(--text); }
  :where([data-theme="dark"]) .card, :where([data-theme="dark"]) .panel, :where([data-theme="dark"]) section.panel,
  :where([data-theme="dark"]) .modal, :where([data-theme="dark"]) .shelf, :where([data-theme="dark"]) .pop-menu { background-color: var(--dk-surface); color: var(--text); border-color: var(--line); }
  :where([data-theme="dark"]) .panel-head, :where([data-theme="dark"]) .card-head:not(.blue):not(.navy):not(.green) { color: var(--dk-heading); }
  :where([data-theme="dark"]) table { color: var(--text); }
  :where([data-theme="dark"]) th { color: var(--text-2); }
  :where([data-theme="dark"]) tr.clickable:hover td, :where([data-theme="dark"]) tbody tr:hover td { background-color: #1f2a35; }
  :where([data-theme="dark"]) code, :where([data-theme="dark"]) pre, :where([data-theme="dark"]) kbd { background-color: #0f161d; color: #d7e2ec; border-color: var(--line); }
  :where([data-theme="dark"]) hr { border-color: var(--line); }
  :where([data-theme="dark"]) .empty-state, :where([data-theme="dark"]) .empty-small, :where([data-theme="dark"]) .empty-sub { color: var(--muted); }
  :where([data-theme="dark"]) .empty-title { color: var(--text-2); }
  :where([data-theme="dark"]) img.brand-logo, :where([data-theme="dark"]) .dash-logo { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .35)); }

  /* ---------- chrome ---------- */
  [data-theme="dark"] .app-header { background: #1a242e; border-bottom-color: #0d141a; }
  [data-theme="dark"] .top-icon-btn { color: #cfe0ee; }
  [data-theme="dark"] .top-icon-btn:hover { background: #263340; }
  [data-theme="dark"] .theme-toggle { color: #f2c200; }
  [data-theme="dark"] .pop-item { color: var(--text); }
  [data-theme="dark"] .pop-item:hover { background: var(--dk-surface-2); }
  [data-theme="dark"] .brand-mark { background: #fff; } /* logo tile stays white (the derived sheet darkened it in the chart bar and developer portal) */
  [data-theme="dark"] .rp-footer { background: #241d0b; color: #f1d98a; border-top-color: #4a3b10; }

  /* ---------- modals / shelves / pickers ---------- */
  [data-theme="dark"] .modal-backdrop, [data-theme="dark"] .shelf-backdrop { background: rgba(0, 0, 0, .62); }
  [data-theme="dark"] .modal-header, [data-theme="dark"] .shelf-header { background-color: #1f2a35; border-color: var(--line); color: var(--dk-heading); }
  [data-theme="dark"] .modal-body, [data-theme="dark"] .shelf-body { background-color: var(--dk-surface); color: var(--text); }
  [data-theme="dark"] .pick-item { color: var(--text); border-color: var(--line); }
  [data-theme="dark"] .pick-item:hover { background-color: var(--dk-surface-2); }
  [data-theme="dark"] .pick-sub { color: var(--muted); }

  /* ---------- toasts ---------- */
  [data-theme="dark"] .toast { box-shadow: 0 6px 20px rgba(0, 0, 0, .6); }

  /* ---------- inline SVG with light strokes set from JS ---------- */
  [data-theme="dark"] svg [stroke="#e3e8ec"], [data-theme="dark"] svg [stroke="#eee"], [data-theme="dark"] svg [stroke="#eeeeee"] { stroke: #2c3a47; }
  [data-theme="dark"] svg line[stroke="#2d3e50"], [data-theme="dark"] svg path[stroke="#2d3e50"] { stroke: #8fa3b6; } /* QI run chart target line (navy) */
  [data-theme="dark"] svg text[fill="#2d3e50"] { fill: #c3d0dc; }
  [data-theme="dark"] svg rect[fill="#eef1f3"] { fill: #1b2631; } /* "No data" chart placeholder */
  [data-theme="dark"] svg text[fill="#333"], [data-theme="dark"] svg text[fill="#2f3d4a"], [data-theme="dark"] svg text[fill="#5d6d7c"], [data-theme="dark"] svg text[fill="#666"] { fill: #b9c6d2; }

  /* ---------- signature pads stay white (ink is dark) ---------- */
  [data-theme="dark"] .sig-canvas, [data-theme="dark"] .sig-area, [data-theme="dark"] .sig-box img { background: #fff; color: #222; }

  /* ---------- theme selector (Account) ---------- */
  .theme-seg button.on { background: var(--green); color: #fff; }
}

/* ======================================================================================================
   Chart templates UI (picker / save dialog / admin) — light defaults; dark handled by the variables above.
   ====================================================================================================== */
.tpl-note { display: flex; gap: 8px; align-items: flex-start; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 4px; padding: 8px 12px; font-size: 13px; color: var(--text-2); margin-bottom: 12px; }
.tpl-note .ico { color: var(--blue); margin-top: 1px; }
.tpl-search { max-width: 260px; margin-left: auto; margin-right: 12px; }
.tpl-list { display: flex; flex-direction: column; gap: 8px; }
.tpl-group { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-2); margin: 10px 0 2px; }
.tpl-row { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 8px 10px; background: var(--bg); }
.tpl-row:hover { border-color: var(--blue); }
.tpl-main { flex: 1; min-width: 0; text-align: left; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.tpl-name { font-weight: 700; color: var(--text); display: flex; align-items: center; gap: 8px; }
.tpl-desc { font-size: 13px; color: var(--text-2); margin-top: 2px; }
.tpl-actions { display: flex; gap: 6px; flex: none; }
.tpl-badge { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--bg-soft); color: var(--text-2); border: 1px solid var(--line); border-radius: 10px; padding: 1px 7px; }
.tpl-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.tpl-chip { font-size: 11px; background: rgba(11, 152, 222, .12); color: var(--blue-link); border-radius: 10px; padding: 1px 8px; }
.tpl-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.tpl-checks-inline { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.tpl-check, .adm-field label.tpl-check { display: flex; gap: 8px; align-items: flex-start; cursor: pointer; font-size: 14px; }
.tpl-check input { margin-top: 3px; }
.tpl-check > span { display: flex; flex-direction: column; }
.tpl-check-hint { font-size: 12px; color: var(--text-2); }
.tpl-check-empty { font-size: 11px; color: var(--muted); font-style: italic; }
.tpl-check-off { opacity: .6; cursor: not-allowed; }
.tpl-scope { display: flex; gap: 18px; flex-wrap: wrap; }
.tpl-radio, .adm-field label.tpl-radio { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.tpl-json { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.tpl-table td { vertical-align: top; }
@media (max-width: 640px) { .tpl-checks { grid-template-columns: 1fr; } .tpl-row { flex-wrap: wrap; } }
.adm-field label.tpl-check, .adm-field label.tpl-radio { font-size: 14px; color: var(--text); font-weight: 400; margin: 0; }