/* App-wide light/dark theme. Injected into every HTML page by a response middleware.
   Dark mode overrides the CSS variables every page declares in :root (higher specificity
   so it wins regardless of source order), plus the few common literal colours
   (#f3f0f1 inputs, #fff cards/modals/buttons). White text on the red accent is left
   alone — it stays white in both themes. */

:root[data-theme="dark"] {
  --bg:#15171a; --panel:#1e2125; --card:#1e2125; --line:#33373d;
  --ink:#e8e6e3; --muted:#9aa0a8;
  --accent:#e23b48;            /* brand red, brightened a touch for contrast on dark */
  --positive:#4caf78; --warn:#d8a32a; --negative:#e0685e;
  color-scheme: dark;
}

html[data-theme="dark"] body { background:#15171a; color:#e8e6e3; }
html[data-theme="dark"] body::before { opacity:0.06; }   /* dim the logo watermark on dark */

html[data-theme="dark"] .card,
html[data-theme="dark"] .modalcard,
html[data-theme="dark"] .modalfoot { background:#1e2125; }

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea { background:#262a30; color:#e8e6e3; border-color:#3a3f46; }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color:#8b9199; }

html[data-theme="dark"] pre { background:#262a30; color:#e8e6e3; }

/* Non-accent buttons that used a white literal background. The accent ("primary"/active)
   buttons keep their red via var(--accent). */
html[data-theme="dark"] .b:not(.primary),
html[data-theme="dark"] .tab:not(.active) { background:#262a30; color:#e8e6e3; }

html[data-theme="dark"] table th,
html[data-theme="dark"] table td { border-color:#33373d; }

/* The light/dark toggle button (injected next to the language switch). */
.theme-toggle {
  background:transparent; border:1px solid var(--line); color:var(--muted);
  border-radius:999px; min-width:36px; height:32px; padding:0 11px;
  font-size:15px; font-weight:600; line-height:1; cursor:pointer;
}
.theme-toggle:hover { color:var(--ink); border-color:var(--muted); }

@media print { .theme-toggle { display:none !important; } }