.root-vars {
}
:root {
  --bs-body-bg: #121212;
  --bs-body-color: #e0e0e0;
  --accent: #f57c00; /* warm accent (replaces bright yellow) */
  --accent-rgb: 245,124,0;
  --action: #29b6f6; /* main action color for dark theme (avoid yellow/orange) */
  --action-rgb: 41,182,246;
  --success: #43a047;
  --danger: #e53935;
}
body { background: var(--bs-body-bg); color: var(--bs-body-color); font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 1rem; }
.navbar { box-shadow: 0 2px 12px rgba(0,0,0,.5); }
.card { background: #1e1e2e; }
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 .2rem rgba(var(--accent-rgb),.18);
}

/* Toggle-specific visuals (content area only): show green when enabled, red when disabled.
   Scope to `.container-fluid` so navbar switches keep Bootstrap/default appearance. */
.container-fluid .form-check.toggle-enabled .form-check-input:checked {
  background-color: var(--success) !important;
  border-color: var(--success) !important;
}
.container-fluid .form-check.toggle-disabled .form-check-input {
  border-color: var(--danger) !important;
  box-shadow: 0 0 0 .12rem rgba(229,57,53,0.06);
}

/* Override Bootstrap warning color in dark theme to use a theme-appropriate action color */
.text-warning { color: var(--action) !important; }
#searchBox { background: rgba(18,18,18,.9) !important; }
#searchSuggestions .list-group-item {
  background: #1e1e2e;
  color: #eee;
  border-color: #333;
  cursor: pointer;
}
#searchSuggestions .list-group-item:hover { background: #2a2a3e; }
.toast { background: #1e1e2e; color: #eee; }
/* Custom toast appearance (override for all themes) */
.custom-toast {
  background: #ffffff !important;
  color: #0b3d91 !important; /* dark blue text */
  border: 1px solid #0b3d91 !important;
  box-shadow: 0 2px 8px rgba(11,61,145,0.08);
}
.custom-toast .toast-body { color: inherit; }
.custom-toast .btn-close { filter: none; }
.nav-poll-track { background: rgba(255,255,255,.12); }
.leaflet-control-zoom a { background: #1e1e2e !important; color: #eee !important; }
.leaflet-tile-pane { filter: brightness(0.85) saturate(0.9); }
/* Popup – zero padding so two-section layout fills edge-to-edge */
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 10px !important;
  background: #111d2e !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.45);
}
.leaflet-popup-content { margin: 0 !important; }
.leaflet-popup-tip { background: #111d2e !important; }
canvas#compassCanvas { border-radius: 50%; background: rgba(255,255,255,.05); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1e1e2e; }
::-webkit-scrollbar-thumb { background: #444; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* Global dark-theme fixes to ensure readable text */
/* Navbar */
.navbar { background: #0b0b0b; }
.navbar .navbar-brand { color: var(--accent) !important; font-size: 1.2rem; font-weight: 700; letter-spacing: .01em; }
.navbar .nav-link { color: rgba(224,224,224,0.9) !important; }
.navbar .nav-link:hover, .navbar .nav-link.active { color: #fff !important; background: rgba(255,255,255,0.02); border-radius: 6px; }
/* Ensure navbar toggler (hamburger) is visible on dark navbar */
.navbar-toggler { border-color: rgba(255,255,255,0.08); }
.navbar-toggler-icon { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/></svg>") !important; }

/* ── Navbar alert-toggles (Global Alerts / My Alerts) ───────────
   Override --bs-form-switch-bg so the knob circle is ALWAYS white
   and clearly visible on the dark navbar in both states.
   Track colours are visually distinct from the #0b0b0b navbar bg.
──────────────────────────────────────────────────────────────── */
.navbar .form-check {
  display: flex; align-items: center;
  gap: .5rem; margin: 0 .25rem; z-index: 1020;
}
.navbar .form-check-label {
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 0; font-size: .92rem;
}
.navbar .form-check-label .fas { color: rgba(255,255,255,0.9) !important; }

/* Unchecked: faint-white track + white knob circle */
.navbar .form-switch .form-check-input {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba(255%2c255%2c255%2c0.8)'/%3e%3c/svg%3e");
  background-color: rgba(255,255,255,0.18) !important;
  border-color: rgba(255,255,255,0.28) !important;
  box-shadow: none !important;
}
.navbar .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 .12rem rgba(255,255,255,0.15) !important;
  outline: none;
}
/* Checked: action-colour track + white knob circle */
.navbar .form-switch .form-check-input:checked {
  --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
  background-color: var(--action) !important;
  border-color: var(--action) !important;
}

/* Dropdowns */
.dropdown-menu { background: #18181b; color: #e0e0e0; border: 1px solid #2b2b2f; }
.dropdown-item { color: #e0e0e0 !important; }
.dropdown-item:hover { background: rgba(255,255,255,0.03); color: #fff !important; }

/* Cards / Modals / Toasts */
.card, .modal-content, .toast { background: #1e1e2e; color: #e0e0e0; border-color: #2b2b35; }
.card .card-header { background: #23232a; color: #e0e0e0; }

/* Forms */
.form-control, .form-select { background: #17171a; color: #e0e0e0; border: 1px solid #2b2b35; }
.form-control[readonly], .form-select[readonly] {
  background: #17171a !important;
  color: #e0e0e0 !important;
  opacity: 1; /* ensure readonly inputs aren't dimmed */
}
.form-control::placeholder { color: rgba(224,224,224,0.55); }
.input-group-text { background: #1b1b1f; color: #e0e0e0; border-color: #2b2b35; }

/* Switch / toggle styling (content area only) — scope to .container-fluid so
   navbar switches use Bootstrap's default visuals and don't get resized. */
.container-fluid .form-check-input {
  background-color: transparent;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}
.container-fluid .form-check-input:checked {
  background-color: var(--action) !important;
  border-color: var(--action) !important;
}
.container-fluid .form-check-input:focus {
  box-shadow: 0 0 0 .18rem rgba(var(--action-rgb),.12);
}

/* Theme toggle button visibility */
#themeToggleBtn { color: var(--bs-body-color); border-color: rgba(255,255,255,0.12); }

/* Sidebar and helpers */
#sidebar, .bg-secondary-subtle { background: #121212 !important; }
.text-muted { color: rgba(224,224,224,0.65) !important; }

/* Tables */
.table { color: #e0e0e0; background: transparent; }
.table thead th { background: #151515; color: #e0e0e0; border-color: #2b2b35; }
.table tbody tr:hover { background: rgba(255,255,255,0.02); }

/* Scrollable table wrapper for logs pages */
.table-scroll { overflow-y: auto; }
.table-scroll thead th { position: sticky; top: 0; z-index: 3; background: #151515; }
.table-scroll tbody td { vertical-align: middle; }

/* Sortable column headers */
th[data-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
th[data-sort]::after { content: ' ⇅'; opacity: .32; font-size: .72em; }
th[data-sort][data-sort-dir="asc"]::after  { content: ' ↑'; opacity: 1; color: #29b6f6; }
th[data-sort][data-sort-dir="desc"]::after { content: ' ↓'; opacity: 1; color: #29b6f6; }

/* Column filter inputs row */
thead tr.log-col-filters th { position: sticky; top: 37px; z-index: 2; padding: 2px 4px; background: #111117; }
thead tr.log-col-filters input {
  width: 100%; min-width: 40px; font-size: .72rem; padding: 2px 5px;
  background: #1a1a22; color: #e0e0e0; border: 1px solid #2b2b35;
  border-radius: 3px; outline: none;
}
thead tr.log-col-filters input:focus { border-color: #29b6f6; box-shadow: none; }
thead tr.log-col-filters input::placeholder { color: rgba(200,200,220,.38); }

/* Lists and search suggestions */
.list-group-item, .list-group-item-action { background: #1e1e2e; color: #e0e0e0; border-color: #2b2b35; }

/* Buttons */
.btn-outline-secondary { color: #e0e0e0; border-color: #3a3a3a; }
.btn-outline-secondary:hover { background: #2b2b30; color: #fff; }

/* Action / alert buttons (dark theme) - avoid yellow/orange fonts */
.btn-warning {
  background: var(--action);
  border-color: var(--action);
  color: #fff;
  font-weight: 600;
}
.btn-warning:hover {
  background: rgba(var(--action-rgb), .95);
  border-color: rgba(var(--action-rgb), .95);
  color: #fff;
}

/* Progress bars: rounded and theme-aware */
.progress { height: 8px; background: rgba(255,255,255,0.03); border-radius: 8px; }
.progress-bar { border-radius: 8px; background: linear-gradient(90deg, var(--action), #42a5f5); }
/* Ensure semantic bg-* classes override the default gradient */
.progress-bar.bg-success { background: #43a047 !important; }
.progress-bar.bg-warning { background: #fdd835 !important; }
.progress-bar.bg-danger  { background: #e53935 !important; }
.progress-bar.bg-info    { background: #29b6f6 !important; }
.progress-bar.bg-secondary { background: #6c757d !important; }

/* Alert / event badge semantic colors (international-practice inspired)
  - info: informational alerts (low severity)
  - warning: advisory / moderate severity
  - danger: high/critical severity
  - success: confirmations or sent status
  - neutral: secondary/unknown
*/
.badge-alert-info    { background: #0dcaf0; color: #04233a; } /* cyan-ish */
.badge-alert-warning { background: #f0ad4e; color: #2b1f00; } /* orange */
.badge-alert-danger  { background: #e53935; color: #fff; } /* red */
.badge-alert-success { background: #43a047; color: #fff; } /* green */
.badge-alert-neutral { background: #6c757d; color: #fff; } /* grey */

/* Smaller pill style for inline alert-type badges */
.badge-alert { font-weight:600; padding:.35em .55em; border-radius:.5rem; }

/* Weather hero temperature */
.weather-hero {
  font-size: 3rem;
  font-weight: 800;
  color: var(--action);
  text-shadow: 0 2px 8px rgba(41,182,246,.2);
}
@media (max-width: 768px) { .weather-hero { font-size: 2.2rem; } }

/* Wind inline layout for compact display */
.wind-val { font-size: 1.6rem; font-weight: 700; }
.wind-inline { display:flex; justify-content:center; align-items:center; gap:22px; }
.wind-inline .wind-block { min-width:110px; }
.wind-inline .wind-val { margin:0; font-size:1.6rem; }
.wind-inline .wind-block .small { font-size:.78rem; }
.wind-inline canvas { max-width:120px; height:auto; }

/* Modal pre blocks (SMS/email plain text) - dark mode readable */
.modal-body pre { background: #17171a !important; color: #e0e0e0 !important; border: 1px solid #2b2b35; }

/* Email modal nav-tabs - dark mode */
.modal .nav-tabs { border-color: #2b2b35; }
.modal .nav-tabs .nav-link { color: #b0b8c8; background: transparent; border-color: transparent; }
.modal .nav-tabs .nav-link:hover { color: #e0e0e0; background: rgba(255,255,255,0.04); border-color: #2b2b35 #2b2b35 transparent; }
.modal .nav-tabs .nav-link.active { color: #fff; background: #1e1e2e; border-color: #2b2b35 #2b2b35 #1e1e2e; }

/* Small utilities */
.badge { color: #fff; }
.fw-bold, .h5, h5, h4, h3, h2, h1 { color: #eaeaea; }

/* Leaflet controls contrast */
.leaflet-control-zoom a { background: #1e1e2e !important; color: #e0e0e0 !important; }
/* ── Map weather marker (dark theme) ───────────────────────── */
.wx-map-marker {
  width: 48px; height: 48px; border-radius: 10px;
  background: rgba(18, 26, 58, 0.82);
  border: 2.5px solid rgba(100, 180, 255, 0.32);
  box-shadow: 0 4px 18px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: border-color .25s, box-shadow .25s;
}
.wx-map-marker img { width: 40px; height: 40px; object-fit: contain; display: block; }
.wx-map-marker.sev-warn  { border-color: #f57c00; box-shadow: 0 4px 18px rgba(245,124,0,.45); }
.wx-map-marker.sev-alert { border-color: #e53935; box-shadow: 0 4px 18px rgba(229,57,53,.45); }

/* Mobile map visibility: ensure map has visible height when stacked */
#map { min-height: 200px; }
@media (max-width: 767px) {
  #map { height: 45vh !important; }
}

/* AQI grid: show 8 columns on md+ screens (12.5% each), 2 columns on xs */
#aqiComponents { display:flex; flex-wrap:wrap; margin:0 -0.25rem; }
#aqiComponents .aqi-item { box-sizing:border-box; padding:0 0.25rem; width:50%; }
/* show 4 columns on md+ (25% each) */
@media (min-width: 768px) {
  #aqiComponents .aqi-item { width:25%; }
}
#aqiComponents .aqi-item .fw-bold { font-size:0.95rem; }
#aqiComponents .aqi-item .progress { height:6px; border-radius:6px; }
/* Small stat cards */
.small-stat-card { padding:8px; border-radius:8px; }
.small-stat-card .top-row { display:flex; justify-content:space-between; align-items:center; }
.small-stat-card .top-row .small { margin:0; }
.small-stat-card .top-row .fw-bold { margin:0; }
.small-stat-card .progress { margin-top:8px; height:6px; }

/* Stat cards */
.stat-card { background: #1e1e2e; border-radius: 10px; padding: 10px; text-align: center; border: 1px solid #2b2b35; }
.stat-card .label { font-size: .75rem; color: rgba(224,224,224,0.65); }
.stat-card .value { font-weight: 700; color: #e0e0e0; }

/* AQI badge */
.aqi-badge { font-size: 1rem; padding: .4em .8em; border-radius: 20px; font-weight: 600; }

/* Forecast cards */
.forecast-card .fc-time { font-size: .72rem; }
.forecast-card .fc-temp { font-weight: 700; }
.forecast-card .fc-pop  { font-size: .75rem; }

/* Sidebar label */
.sidebar-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(224,224,224,0.65); font-weight: 600; }

/* Search suggestions font size */
#searchSuggestions .list-group-item { font-size: .88rem; }