/* ── Theme CSS Variables ─────────────────────────────────────────────────── */
/* Dark (default) */
:root {
  --bg:             #0f1117;
  --surface:        #1a1d27;
  --surface-2:      #13151f;
  --surface-hover:  #1e2130;
  --border:         #2d3142;
  --border-lt:      #334155;
  --border-subtle:  #1e293b;
  --text:           #f8fafc;
  --text-2:         #f1f5f9;
  --text-3:         #e2e8f0;
  --text-4:         #cbd5e1;
  --muted:          #94a3b8;
  --subtle:         #64748b;
  --subtle-2:       #475569;
  --subtle-3:       #334155;
  --blue:           #2563eb;
  --blue-lt:        #3b82f6;
  --blue-dk:        #1d4ed8;
  --blue-xdk:       #1e40af;
  --blue-tint:      #1e3a5f;
  --blue-glow:      #93c5fd;
  --red:            #ef4444;
  --red-lt:         #f87171;
  --red-bg:         #2d0f0f;
  --red-border:     #7f1d1d;
  --green:          #4ade80;
  --green-bg:       #052e16;
  --green-border:   #14532d;
  --yellow:         #fbbf24;
  --yellow-bg:      #2d1000;
  --yellow-border:  #92400e;
  --shadow-md:          rgba(0,0,0,0.5);
  --shadow-lg:          rgba(0,0,0,0.6);
  --header-bg:          rgba(15,17,23,0.85);
  --panel-float-bg:     rgba(10,12,20,0.88);
  --panel-float-bg-lg:  rgba(10,12,20,0.92);
  --loading-bg:         rgba(15,17,23,0.75);
}

/* Light */
[data-theme="light"] {
  --bg:             #f1f5f9;
  --surface:        #ffffff;
  --surface-2:      #f8fafc;
  --surface-hover:  #f1f5f9;
  --border:         #e2e8f0;
  --border-lt:      #cbd5e1;
  --border-subtle:  #e2e8f0;
  --text:           #0f172a;
  --text-2:         #1e293b;
  --text-3:         #334155;
  --text-4:         #475569;
  --muted:          #64748b;
  --subtle:         #94a3b8;
  --subtle-2:       #cbd5e1;
  --subtle-3:       #e2e8f0;
  --blue:           #2563eb;
  --blue-lt:        #1d4ed8;
  --blue-dk:        #1d4ed8;
  --blue-xdk:       #1e40af;
  --blue-tint:      #dbeafe;
  --blue-glow:      #2563eb;
  --red:            #dc2626;
  --red-lt:         #ef4444;
  --red-bg:         #fef2f2;
  --red-border:     #fca5a5;
  --green:          #16a34a;
  --green-bg:       #f0fdf4;
  --green-border:   #86efac;
  --yellow:         #d97706;
  --yellow-bg:      #fffbeb;
  --yellow-border:  #fcd34d;
  --shadow-md:          rgba(0,0,0,0.1);
  --shadow-lg:          rgba(0,0,0,0.15);
  --header-bg:          rgba(255,255,255,0.9);
  --panel-float-bg:     rgba(248,250,252,0.92);
  --panel-float-bg-lg:  rgba(248,250,252,0.97);
  --loading-bg:         rgba(241,245,249,0.85);
}

/* ── Theme Toggle Button ─────────────────────────────────────────────────── */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--subtle);
  color: var(--text-2);
}
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="light"] .theme-toggle .icon-sun  { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Leaflet dark/light tile layer overrides ─────────────────────────────── */
[data-theme="light"] .leaflet-tile-pane { filter: none; }