/* TGO Investigations™ — © 2026 Damon Townsend. All rights reserved.
   Themes. Pages define the DARK palette in their own :root; this file overrides
   for LIGHT (the default) and FOREST (green + cream, matching the other TGO apps).
   Loaded after each page's styles so it wins ties. */

/* ---------- brand assets ----------
   The artwork is drawn in dark ink (#1e2a24) + green, which reads on light/cream
   surfaces. On dark surfaces (the dark theme everywhere, and the Forest theme's
   green header) it is knocked out to cream so it stays legible. */
.tgi-logo { height:30px; display:block; }
.tgi-logo-mark { width:74px; height:74px; display:block; margin:0 auto; }
.tgi-ico { width:17px; height:17px; vertical-align:-3px; }
.tgi-empty { width:200px; max-width:60%; opacity:.85; display:block; margin:0 auto 10px; }
.tgi-dev-ico { width:22px; height:22px; vertical-align:-5px; }

/* dark theme = no data-theme attribute */
:root:not([data-theme]) .tgi-logo,
:root:not([data-theme]) .tgi-logo-mark,
:root:not([data-theme]) .tgi-ico,
:root:not([data-theme]) .tgi-dev-ico,
:root:not([data-theme]) .tgi-empty { filter:brightness(0) invert(1); opacity:.92; }
/* Forest: header is dark green, so knock out only what sits in the header */
[data-theme="forest"] header .tgi-logo,
[data-theme="forest"] header .tgi-ico { filter:brightness(0) invert(1); }
[data-theme="forest"] nav .tgi-ico { filter:none; }

/* ---------- LIGHT (default) ---------- */
:root[data-theme="light"] {
  --bg:#eef0f4; --panel:#ffffff; --panel2:#f4f6f9; --line:#c9d0da;
  --ink:#1f242c; --dim:#5d6674; --amber:#9a6d10; --amber-dk:#7c5608;
  --green:#177245; --red:#b3261e; --blue:#1f6aa5;
}
[data-theme="light"] header { background:linear-gradient(90deg,#dfe4ec,#f2f4f8); }
[data-theme="light"] nav { background:#e6e9ef; }

/* ---------- FOREST (green + cream) ---------- */
:root[data-theme="forest"] {
  --bg:#f4f1e8; --panel:#fffdf7; --panel2:#eef3f0; --line:#cfd8d1;
  --ink:#1e2a24; --dim:#5b6b62; --amber:#2f6f4e; --amber-dk:#245a3e;
  --green:#15803d; --red:#b3261e; --blue:#1f6aa5;
}
[data-theme="forest"] header {
  background:linear-gradient(135deg,#2f6f4e 0%,#1e5c40 100%);
  border-bottom-color:#1e5c40;
}
[data-theme="forest"] header, [data-theme="forest"] header h1,
[data-theme="forest"] header .who, [data-theme="forest"] header .lnk { color:#f4f1e8; }
[data-theme="forest"] header h1 b { color:#ffe9b0; }
[data-theme="forest"] header .lnk { border-color:rgba(244,241,232,.35); }
[data-theme="forest"] header .lnk:hover { background:rgba(255,255,255,.12); }
[data-theme="forest"] nav { background:#e7ede9; border-bottom-color:#cfd8d1; }
[data-theme="forest"] .brand .mark { color:#2f6f4e; }
[data-theme="forest"] h2 { letter-spacing:.8px; }
[data-theme="forest"] .st-open { background:#e3edf7; color:#1f6aa5; }
[data-theme="forest"] .st-active { background:#d1e7dd; color:#15803d; }
[data-theme="forest"] .st-on_hold { background:#fbf0d9; color:#8a6410; }
[data-theme="forest"] .kind { background:#e8e3f2; color:#5b4b86; }

/* ---------- shared light-surface rules (light + forest) ---------- */
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea,
[data-theme="forest"] input, [data-theme="forest"] select, [data-theme="forest"] textarea,
[data-theme="light"] .chip, [data-theme="forest"] .chip {
  background:#ffffff; color:var(--ink); border-color:var(--line);
}
[data-theme="light"] .chip.on, [data-theme="forest"] .chip.on {
  background:var(--amber); color:#fff; border-color:var(--amber);
}
[data-theme="light"] .btn, [data-theme="forest"] .btn { color:#ffffff; }
[data-theme="light"] .btn.ghost, [data-theme="forest"] .btn.ghost,
[data-theme="light"] main .lnk, [data-theme="forest"] main .lnk { color:var(--ink); }
[data-theme="light"] td, [data-theme="forest"] td { border-bottom-color:#e2e6ec; }
[data-theme="light"] tr:hover td { background:#f0f3f7; }
[data-theme="forest"] tr:hover td { background:#f1f6f3; }
[data-theme="light"] .modal-bg, [data-theme="forest"] .modal-bg { background:rgba(40,45,55,.5); }
[data-theme="light"] .pwbox, [data-theme="light"] .timer,
[data-theme="forest"] .pwbox, [data-theme="forest"] .timer { background:#fdf6e6 !important; }
[data-theme="light"] .conflict, [data-theme="forest"] .conflict {
  background:#fbf3df; border-color:#d9c07a; color:#4a3d14;
}
[data-theme="light"] .err, [data-theme="forest"] .err { background:#f6dfe1; color:#8a2230; }
[data-theme="light"] code, [data-theme="forest"] code { background:#eceff3; }
[data-theme="forest"] code { background:#e9efeb; }
[data-theme="light"] .case-card:hover, [data-theme="forest"] .case-card:hover { border-color:var(--amber); }