/* CTXRS — day / night theme
 * Dark is the default palette, defined in styles.css :root.
 * This file supplies the light-mode overrides (applied when JS sets
 * html[data-theme="light"]) plus the toggle switch itself.
 * Load this AFTER styles.css, nav.css, and any page stylesheet.
 */

html[data-theme="light"] {
  /* Light-mode override values. */
  --bg: #f3f7fb;
  --panel: rgba(255, 255, 255, .92);
  --panel-2: #ffffff;
  --line: rgba(20, 65, 100, .14);
  --line-soft: rgba(20, 65, 100, .09);
  --line-strong: rgba(20, 65, 100, .24);
  --text: #0f2233;
  --muted: #5b7286;
  --muted-2: #3c5266;
  --accent: #0f7bc4;
  --blue: #1c7fd6;
  --cyan: #0e9e8e;
  --green: #1f9a5c;
  --amber: #a9720a;
  --red: #c53c53;
  --shadow: 0 16px 40px rgba(20, 40, 70, .10);
  --radius: 20px;

  --field-bg: #ffffff;
  --field-border: rgba(20, 65, 100, .22);
  --placeholder: #8fa2b4;
  --surface-hover: rgba(20, 65, 100, .05);
  --surface-hover-2: rgba(20, 65, 100, .035);
  --code-bg: #eef2f6;
  --code-text: #17324a;
  --scrollbar-track: rgba(20, 65, 100, .08);
  --scrollbar-thumb: rgba(20, 65, 100, .28);
  --map-bg: #dbe6ef;
  --skeleton-base: rgba(20, 65, 100, .06);
  --skeleton-hi: rgba(20, 65, 100, .16);
  --topbar-bg: rgba(255, 255, 255, .78);
  --card-bg: linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(244, 248, 252, .96));

  --nav-hover-bg: rgba(15, 123, 196, .10);
  --nav-active-bg: rgba(15, 123, 196, .16);
  --nav-active-ring: rgba(15, 123, 196, .35);

  color-scheme: light;
}

/* Leaflet ships bright tiles; only tone them down for the dark theme. */
html[data-theme="dark"] #map .leaflet-tile-pane {
  filter: brightness(0.72) saturate(0.78) contrast(1.05);
}

/* Global scrollbars, so the chrome matches the active theme everywhere. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 5px;
}

/* ---------------------------------------------------------------- */
/* Day / night toggle switch — sits top right of the nav             */
/* ---------------------------------------------------------------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  margin-left: 6px;
  padding: 0;
  border: 1px solid var(--field-border);
  border-radius: 10px;
  background: var(--field-bg);
  color: var(--text);
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
  border-color: var(--accent);
  outline: none;
}

.theme-toggle svg {
  width: 19px;
  height: 19px;
  display: block;
}

.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }