/* ==========================================================================
   Light Mode Theme Overrides
   ========================================================================== */
body.light-theme {
  --bg-color: #f1f5f9;
  --text-main: #0f172a;
  --text-muted: #334155;
  --text-dim: #64748b;
  
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(15, 23, 42, 0.08);
  --glass-border-hover: rgba(15, 23, 42, 0.16);
  --glass-shadow: 0 8px 32px 0 rgba(15, 23, 42, 0.06);

  --color-accent: #1d4ed8; /* Premium high-contrast blue for light mode */
  --color-accent-dim: rgba(29, 78, 216, 0.08);

  --blob-color-1: rgba(29, 78, 216, 0.04);
  --blob-color-2: rgba(59, 130, 246, 0.04);
  --blob-color-3: rgba(16, 185, 129, 0.04);
}

body.light-theme .mesh-bg {
  background: radial-gradient(circle at 50% 50%, #f8fafc, #cbd5e1);
}

body.light-theme .app-header {
  background: rgba(255, 255, 255, 0.5);
  border-bottom-color: var(--glass-border);
}

body.light-theme .tab-btn.active {
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(29, 78, 216, 0.25);
}

body.light-theme .theme-toggle-btn,
body.light-theme .refresh-btn {
  background: rgba(15, 23, 42, 0.04);
  color: #0f172a;
  border-color: var(--glass-border);
}

body.light-theme .theme-toggle-btn:hover,
body.light-theme .refresh-btn:hover {
  background: rgba(15, 23, 42, 0.08);
  border-color: var(--glass-border-hover);
}

body.light-theme .raw-text-block,
body.light-theme .raw-segment,
body.light-theme .notam-textarea {
  background: #f8fafc;
  color: #0f172a;
  border-color: var(--glass-border);
}

body.light-theme .atis-tab-btn.active {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}

body.light-theme .header-alert-label {
  color: #000;
}

/* Opaque enough to mask cards scrolling beneath the pinned NOTAM filter bar */
body.light-theme .notam-meta-row {
  background: rgba(255, 255, 255, 0.92);
}

/* The filter groups' dark-theme fill is white-on-white here, which would erase the
   boundary that makes each group read as ONE control. Flipped to a dark tint, matching
   .theme-toggle-btn / .atis-badge elsewhere in this file — same proportional strength as
   the dark-mode fill (0.02), just inverted. Active segments already theme themselves via
   --color-accent*; the group's own border via --glass-border. */
body.light-theme .notam-seg-group {
  background: rgba(15, 23, 42, 0.02);
}

body.light-theme .notam-seg:hover:not(.active) {
  background: rgba(15, 23, 42, 0.07);
}

body.light-theme .atis-badge,
body.light-theme .d-ind {
  background: rgba(15, 23, 42, 0.04);
}

body.light-theme .atis-badge .highlight {
  color: #2563eb !important;
}

body.light-theme .hko-alert-item {
  background: rgba(255, 255, 255, 0.85);
  border-color: rgba(15, 23, 42, 0.05);
}

body.light-theme .hko-alert-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

body.light-theme .atis-note-bubble {
  background: rgba(15, 23, 42, 0.03);
}

body.light-theme .leaflet-popup-content-wrapper,
body.light-theme .leaflet-popup-tip {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #0f172a !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
}

body.light-theme .leaflet-popup-close-button {
  color: #64748b !important;
}

body.light-theme .dial-border {
  stroke: rgba(15, 23, 42, 0.08);
}
body.light-theme .dial-center {
  fill: #0f172a;
}
body.light-theme .dial-approach-path {
  stroke: rgba(15, 23, 42, 0.1);
}
body.light-theme .dial-helipad {
  fill: rgba(0, 0, 0, 0.03);
  stroke: rgba(15, 23, 42, 0.2);
}
body.light-theme .dial-helipad-circle {
  stroke: rgba(15, 23, 42, 0.2);
}
body.light-theme .dial-label {
  fill: #475569;
}
body.light-theme .wind-arrow-chevron {
  filter: drop-shadow(0 0 4px rgba(29, 78, 216, 0.2));
}

body.light-theme .map-hud-overlay {
  background: rgba(255, 255, 255, 0.85);
}

/* Theme Toggle Button Style */
.theme-toggle-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  margin-right: 0.25rem;
}

.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--glass-border-hover);
}

.theme-icon {
  width: 16px;
  height: 16px;
}