/* App THEMES (2026-09-04): light (the default, lives in style.css
 * :root) and DARK. The gray (graphite) one existed for a single day and
 * was removed the same day ("very ugly") - a saved gray choice migrates
 * to dark via a script in base.html. Plus the styles of the switcher in
 * the corner. Looks only - no logic: the choice is kept in localStorage,
 * the server knows nothing about themes.
 *
 * Rules:
 * - a theme = overriding style.css tokens on <html data-theme="...">;
 * - in the dark one the brand gradient runs WITHOUT the black stop (user:
 *   "the gradient of the button text etc. runs without the black");
 * - color-scheme gives the browser native dark controls. */

/* ---------- DARK ------------------------------------------------------ */

[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0e1013;
  --card-bg: #16191f;
  --surface-2: #1e232c;
  --text: #e6e8ee;
  --muted: #8a93a3;
  --border: #272d38;
  --accent: #60a5fa;
  --green: #4ade80;
  --green-bg: rgba(74, 222, 128, 0.12);
  --orange: #fbbf24;
  --orange-bg: rgba(251, 191, 36, 0.12);
  --red: #f87171;
  --red-bg: rgba(248, 113, 113, 0.13);
  --gray: #a3abba;
  --gray-bg: #272d38;
  --blue: #93c5fd;
  --blue-bg: rgba(96, 165, 250, 0.15);
  --purple: #a78bfa;
  --warn-bg: rgba(251, 191, 36, 0.09);
  --warn-text: #fbbf24;
  --warn-soft: rgba(251, 191, 36, 0.16);
  --warn-red: #e08c8c;
  /* Fill gradients - EXACTLY the chosen pair (user 2026-09-04, "these
     colors everywhere"; in the sandbox he saw it on dark backgrounds
     too). The single-color text --purple/--accent above stay lightened
     for the night - saturated dark text on dark is unreadable. */
  --title-grad: linear-gradient(90deg, #6d28d9 0%, #1d4ed8 72%);
  --btn-grad: linear-gradient(100deg, #6d28d9, #1d4ed8 85%);
}

/* ---------- spot fixes of components for the non-light themes --------- */

/* Yellow fact status rows keep dark text on a light yellow background
   (card macros) - on dark themes the background is already translucent,
   so the text needs a light yellow, not a brown one. */
[data-theme="dark"] .status-warning { color: var(--warn-text); }

/* The "no data" circle on facts is hardcoded near-black (#111827) - on
   the dark theme it is invisible; a light gray gives it meaning back. */
[data-theme="dark"] .pill-dot.pill-no_data { background: #5b6472; }

/* Shadows of the dark themes are deeper - light ones barely show. */
[data-theme="dark"] .card,
[data-theme="dark"] .hi-house {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}

/* ---------- theme switcher (visible on every page) -------------------- */

/* Since 2026-09-04 the theme pill lives INSIDE the account menu
   (account_menu.css gives it a static position) - only its looks here. */
.theme-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
}
.theme-switch button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}
.theme-switch button:hover { color: var(--text); transform: scale(1.08); }
.theme-switch button.is-on {
  background: var(--btn-grad);
  color: #fff;
}



@media (max-width: 640px) {
  .theme-switch button { width: 26px; height: 26px; font-size: 13px; }
}