/* ==========================================================================
   STPT Live — Theme System
   Dark theme is the default (:root). Light theme overrides via [data-theme="light"].
   The JavaScript sets document.documentElement.dataset.theme = "dark" | "light".
   ========================================================================== */

/* ── Shared / accent (same in both themes) ───────────────────────────────── */
:root {
  --accent:            #FFC107;
  --accent-glow:       rgba(255,193,7,0.28);
  --btn-hover-bg:      rgba(255,193,7,0.90);
  --btn-hover-border:  rgba(255,193,7,0.50);
  --btn-hover-color:   #000;
  --btn-hover-shadow:  0 3px 10px rgba(0,0,0,0.35);
  --btn-active-bg:     #FFC107;
  --btn-active-border: rgba(255,193,7,0.60);
  --btn-active-shadow: 0 2px 8px rgba(255,193,7,0.28);
  --zoom-hover-bg:     rgba(255,193,7,0.14);
  --table-header-bg:   rgba(255,193,7,0.92);
}

/* ── Dark (default) ──────────────────────────────────────────────────────── */
:root {
  /* Backgrounds */
  --bg-body:          linear-gradient(135deg, #003366, #0055aa);
  --panel-bg:         linear-gradient(180deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);
  --panel-bg-deep:    linear-gradient(180deg, rgba(8,14,42,0.98) 0%, rgba(3,8,24,0.99) 100%);
  --panel-bg-subtle:  rgba(8,14,42,0.35);
  --panel-card:       linear-gradient(155deg, rgba(5,12,36,0.96) 0%, rgba(3,7,22,0.98) 100%);
  --panel-overlay:    linear-gradient(160deg, rgba(8,14,42,0.97) 0%, rgba(3,8,24,0.99) 100%);

  /* Glass */
  --glass:            blur(20px) saturate(180%);

  /* Borders */
  --border:           rgba(255,255,255,0.10);
  --border-card:      rgba(255,255,255,0.08);
  --border-strong:    rgba(255,255,255,0.14);
  --border-mid:       rgba(255,255,255,0.12);
  --border-subtle:    rgba(255,255,255,0.07);
  --border-alert:     rgba(255,255,255,0.13);

  /* Shadows */
  --shadow-header:    0 2px 16px rgba(0,0,0,0.50);
  --shadow-sidebar:   4px 0 24px rgba(0,0,0,0.45);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.40);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.30);
  --shadow-panel:     0 4px 18px rgba(0,0,0,0.55), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-popup:     0 8px 28px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.25);
  --shadow-popup-lg:  0 12px 40px rgba(0,0,0,0.58), 0 2px 8px rgba(0,0,0,0.28);
  --shadow-zoom:      0 4px 16px rgba(0,0,0,0.50);
  --shadow-locate:    0 4px 16px rgba(0,0,0,0.50), 0 1px 4px rgba(0,0,0,0.25);
  --shadow-footer:    0 -4px 20px rgba(0,0,0,0.45);
  --shadow-alert:     0 6px 28px rgba(0,0,0,0.60),
                      inset 0 1px 0 rgba(255,255,255,0.09),
                      inset 0 -1px 0 rgba(255,255,255,0.06);
  --shadow-legend:    0 8px 32px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.30);

  /* Text */
  --text-primary:     rgba(255,255,255,0.92);
  --text-secondary:   rgba(255,255,255,0.55);
  --text-muted:       rgba(255,255,255,0.35);
  --text-heading:     rgba(255,255,255,0.90);
  --text-dimmed:      rgba(255,255,255,0.45);
  --text-footer:      rgba(255,255,255,0.75);
  --text-footer-link: rgba(255,255,255,0.75);

  /* Buttons (resting state) */
  --btn-bg:           rgba(255,255,255,0.07);
  --btn-bg-alt:       rgba(255,255,255,0.06);
  --btn-border:       rgba(255,255,255,0.13);
  --btn-border-alt:   rgba(255,255,255,0.12);
  --btn-color:        rgba(255,255,255,0.92);
  --btn-shadow:       0 1px 4px rgba(0,0,0,0.28);

  /* Station list */
  --statie-bg:        rgba(255,255,255,0.04);
  --statie-border:    rgba(255,255,255,0.09);
  --statie-color:     rgba(255,255,255,0.90);
  --statie-hover-bg:  rgba(255,255,255,0.10);
  --statie-hover-bdr: rgba(255,255,255,0.16);
  --statie-active-bg: rgba(255,193,7,0.88);

  /* Table */
  --table-row-even:   rgba(255,255,255,0.04);
  --table-row-hover:  rgba(255,255,255,0.10);

  /* Sidebar labels */
  --sidebar-title:     rgba(255,255,255,0.90);
  --sidebar-sep:       rgba(255,255,255,0.08);
  --sidebar-group-sep: rgba(255,255,255,0.07);
  --sidebar-label:     rgba(255,193,7,0.70);

  /* Scrollbars */
  --scroll-color:     rgba(255,255,255,0.16) transparent;
  --scroll-thumb:     rgba(255,255,255,0.18);
  --scroll-hover:     rgba(255,255,255,0.28);

  /* Direction toggle */
  --dtoggle-bg:       linear-gradient(180deg, rgba(8,14,42,0.96) 0%, rgba(3,8,24,0.99) 100%);
  --dtoggle-active:   rgba(255,255,255,0.95);
  --dtoggle-inactive: rgba(255,255,255,0.35);
  --dtoggle-track:    rgba(18,24,55,0.85);
  --dtoggle-inset:    inset 0 2px 5px rgba(0,0,0,0.55);

  /* Zoom controls */
  --zoom-bg:          linear-gradient(180deg, rgba(8,14,42,0.96) 0%, rgba(3,8,24,0.99) 100%);
  --zoom-border:      rgba(255,255,255,0.14);
  --zoom-color:       rgba(255,255,255,0.82);
  --zoom-sep:         rgba(255,255,255,0.10);
  --zoom-disabled:    rgba(255,255,255,0.22);

  /* Locate button */
  --locate-bg:        linear-gradient(180deg, rgba(8,14,42,0.96) 0%, rgba(3,8,24,0.99) 100%);
  --locate-border:    rgba(255,255,255,0.15);
  --locate-icon:      rgba(255,255,255,0.88);

  /* Legend */
  --legend-text:      white;
  --legend-sep:       rgba(255,255,255,0.10);
  --legend-arrow:     url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* Popup sub-elements */
  --popup-close:          rgba(255,255,255,0.50);
  --popup-id:             rgba(255,255,255,0.45);
  --popup-empty:          rgba(255,215,0,0.82);
  --popup-sep:            rgba(255,255,255,0.10);
  --popup-veh-id:         rgba(255,255,255,0.45);
  --popup-veh-sub:        rgba(255,255,255,0.55);
  --popup-row-border:     rgba(255,255,255,0.07);
  --popup-row-color:      rgba(255,255,255,0.80);
  --vehicle-popup-arrow:  rgba(3,8,24,0.99);

  /* Alert bar category cards */
  --alert-cat-bg:     linear-gradient(155deg, rgba(5,12,36,0.96) 0%, rgba(3,7,22,0.98) 100%);
  --alert-cat-border: rgba(255,255,255,0.10);
  --alert-cat-hover-border: rgba(255,255,255,0.20);
  --alert-cat-color:  rgba(255,255,255,0.60);
  --alert-cat-active: rgba(255,255,255,0.95);

  /* Spinner */
  --spinner-track:    rgba(255,255,255,0.15);
  --spinner-head:     rgba(255,255,255,0.82);

  /* Theme toggle widget */
  --toggle-track:      rgba(6,11,35,0.72);
  --toggle-track-bdr:  rgba(255,255,255,0.14);
  --toggle-track-shd:  inset 0 2px 5px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.22);
  --toggle-thumb:      rgba(255,255,255,0.96);
  --toggle-thumb-shd:  0 2px 8px rgba(0,0,0,0.38), 0 1px 3px rgba(0,0,0,0.24),
                       inset 0 1px 0 rgba(255,255,255,0.90);
  --toggle-active-c:   #060F2A;
  --toggle-inactive-c: rgba(255,255,255,0.40);
}

/* ── Light ───────────────────────────────────────────────────────────────── */
[data-theme="light"] {
  /* Backgrounds */
  --bg-body:          #F5F7FA;
  --panel-bg:         rgba(255,255,255,0.92);
  --panel-bg-deep:    #FFFFFF;
  --panel-bg-subtle:  #F7F8FB;
  --panel-card:       #FFFFFF;
  --panel-overlay:    rgba(255,255,255,0.92);

  /* Glass */
  --glass:            blur(18px) saturate(140%);

  /* Borders */
  --border:           rgba(0,0,0,0.08);
  --border-card:      rgba(0,0,0,0.07);
  --border-strong:    rgba(0,0,0,0.13);
  --border-mid:       rgba(0,0,0,0.09);
  --border-subtle:    rgba(0,0,0,0.05);
  --border-alert:     rgba(255,193,7,0.25);

  /* Shadows */
  --shadow-header:    0 2px 16px rgba(0,0,0,0.06);
  --shadow-sidebar:   4px 0 20px rgba(0,0,0,0.07);
  --shadow-md:        0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg:        0 8px 32px rgba(0,0,0,0.11), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-panel:     0 4px 18px rgba(0,0,0,0.09), 0 1px 4px rgba(0,0,0,0.04);
  --shadow-popup:     0 8px 28px rgba(0,0,0,0.13), 0 2px 6px rgba(0,0,0,0.06);
  --shadow-popup-lg:  0 12px 36px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-zoom:      0 4px 16px rgba(0,0,0,0.10);
  --shadow-locate:    0 4px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.05);
  --shadow-footer:    0 -4px 12px rgba(0,0,0,0.06);
  --shadow-alert:     0 4px 18px rgba(0,0,0,0.10),
                      inset 0 1px 0 rgba(0,0,0,0.04),
                      inset 0 -1px 0 rgba(0,0,0,0.03);
  --shadow-legend:    0 8px 28px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);

  /* Text */
  --text-primary:     #1D2433;
  --text-secondary:   #5F6B7A;
  --text-muted:       rgba(29,36,51,0.45);
  --text-heading:     #1D2433;
  --text-dimmed:      rgba(29,36,51,0.55);
  --text-footer:      #5F6B7A;
  --text-footer-link: #5F6B7A;

  /* Buttons (resting state) */
  --btn-bg:           rgba(0,0,0,0.04);
  --btn-bg-alt:       rgba(0,0,0,0.03);
  --btn-border:       rgba(0,0,0,0.10);
  --btn-border-alt:   rgba(0,0,0,0.09);
  --btn-color:        #1D2433;
  --btn-shadow:       0 1px 3px rgba(0,0,0,0.07);
  --btn-hover-shadow: 0 3px 10px rgba(0,0,0,0.12);

  /* Station list */
  --statie-bg:        #FAFBFD;
  --statie-border:    rgba(0,0,0,0.07);
  --statie-color:     #1D2433;
  --statie-hover-bg:  #F0F5FF;
  --statie-hover-bdr: rgba(0,0,0,0.12);
  --statie-active-bg: rgba(255,193,7,0.88);

  /* Table */
  --table-row-even:   rgba(0,0,0,0.02);
  --table-row-hover:  rgba(0,0,0,0.05);

  /* Sidebar labels */
  --sidebar-title:     #1D2433;
  --sidebar-sep:       rgba(0,0,0,0.08);
  --sidebar-group-sep: rgba(0,0,0,0.06);
  --sidebar-label:     #5F6B7A;

  /* Scrollbars */
  --scroll-color:     rgba(0,0,0,0.14) transparent;
  --scroll-thumb:     rgba(0,0,0,0.16);
  --scroll-hover:     rgba(0,0,0,0.26);

  /* Direction toggle */
  --dtoggle-bg:       rgba(255,255,255,0.92);
  --dtoggle-active:   #1D2433;
  --dtoggle-inactive: rgba(29,36,51,0.40);
  --dtoggle-track:    rgba(0,0,0,0.08);
  --dtoggle-inset:    inset 0 2px 4px rgba(0,0,0,0.10);

  /* Zoom controls */
  --zoom-bg:          rgba(255,255,255,0.92);
  --zoom-border:      rgba(0,0,0,0.10);
  --zoom-color:       #1D2433;
  --zoom-sep:         rgba(0,0,0,0.08);
  --zoom-disabled:    rgba(29,36,51,0.28);

  /* Locate button */
  --locate-bg:        rgba(255,255,255,0.92);
  --locate-border:    rgba(0,0,0,0.12);
  --locate-icon:      #1D2433;

  /* Legend */
  --legend-text:      #1D2433;
  --legend-sep:       rgba(0,0,0,0.08);
  --legend-arrow:     url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D2433' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");

  /* Popup sub-elements */
  --popup-close:          rgba(29,36,51,0.45);
  --popup-id:             rgba(29,36,51,0.45);
  --popup-empty:          #A07820;
  --popup-sep:            rgba(0,0,0,0.08);
  --popup-veh-id:         rgba(29,36,51,0.45);
  --popup-veh-sub:        rgba(29,36,51,0.55);
  --popup-row-border:     rgba(0,0,0,0.06);
  --popup-row-color:      rgba(29,36,51,0.80);
  --vehicle-popup-arrow:  #FFFFFF;

  /* Alert bar category cards */
  --alert-cat-bg:     rgba(255,255,255,0.70);
  --alert-cat-border: rgba(0,0,0,0.08);
  --alert-cat-hover-border: rgba(0,0,0,0.16);
  --alert-cat-color:  rgba(29,36,51,0.65);
  --alert-cat-active: #1D2433;

  /* Spinner */
  --spinner-track:    rgba(0,0,0,0.10);
  --spinner-head:     rgba(29,36,51,0.70);

  /* Theme toggle widget */
  --toggle-track:      rgba(0,0,0,0.055);
  --toggle-track-bdr:  rgba(0,0,0,0.09);
  --toggle-track-shd:  inset 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
  --toggle-thumb:      #1D2433;
  --toggle-thumb-shd:  0 2px 7px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.12);
  --toggle-active-c:   #FFFFFF;
  --toggle-inactive-c: rgba(29,36,51,0.42);
}

/* ── Body: theme-aware base ──────────────────────────────────────────────── */
body {
  background: var(--bg-body);
  color: var(--text-primary);
}

/* ── Theme transitions (containers only — not map tiles or canvas) ─────────
   Interactive elements (.linie-btn etc.) keep their existing 0.18s transitions.
   ─────────────────────────────────────────────────────────────────────────── */
.main-header,
.main-footer,
.linie-selector,
.linie-left,
.linie-header,
.linie-news,
.linie-tabel table,
.linie-tabel td,
.map-legend.accordion,
.legend-content,
.locate-btn,
.direction-toggle,
.station-popup,
.user-popup,
.veh-popup,
.vehicle-popup,
.near-popup,
.leaflet-control-zoom.leaflet-bar,
.ab-cat-group,
#footer-confetti a,
.cookie-pref-link {
  transition: background 0.28s ease, background-color 0.28s ease,
              color 0.28s ease, border-color 0.28s ease,
              box-shadow 0.28s ease;
}

/* ── Theme toggle widget ─────────────────────────────────────────────────── */

/* Container — pill track */
.theme-toggle {
  position: relative;
  display: none; /* desktop-only; shown in @media block below */
  align-items: center;
  background: var(--toggle-track);
  border: 1px solid var(--toggle-track-bdr);
  border-radius: 100px;
  padding: 3px;
  gap: 0;
  flex-shrink: 0;
  box-shadow: var(--toggle-track-shd);
}

@media (min-width: 1024px) {
  .theme-toggle { display: flex; }
}

/* Animated sliding thumb — sits behind both buttons */
.theme-toggle::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: calc(50% - 3px);
  height: calc(100% - 6px);
  border-radius: 100px;
  background: var(--toggle-thumb);
  box-shadow: var(--toggle-thumb-shd);
  transition: transform 0.26s cubic-bezier(0.34, 1.12, 0.64, 1);
  pointer-events: none;
  will-change: transform;
}

/* Default (dark): thumb under right "Dark" button */
.theme-toggle::before {
  transform: translateX(100%);
}

/* Light mode: thumb under left "Light" button */
[data-theme="light"] .theme-toggle::before {
  transform: translateX(0);
}

/* Buttons */
.theme-toggle__btn {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 13px;
  border-radius: 100px;
  border: none;
  background: transparent;
  font-family: 'Poppins', sans-serif;
  font-size: 0.70rem;
  font-weight: 600;
  color: var(--toggle-inactive-c);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  flex: 1;
  transition: color 0.22s ease;
}

.theme-toggle__btn.active {
  color: var(--toggle-active-c);
}

/* SVG icon */
.theme-toggle__icon {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.30s cubic-bezier(0.34, 1.12, 0.64, 1);
}

/* Sun spins gently when Light is active */
.theme-toggle__btn[data-theme-val="light"].active .theme-toggle__icon {
  transform: rotate(22deg) scale(1.08);
}

/* Moon tilts when Dark is active */
.theme-toggle__btn[data-theme-val="dark"].active .theme-toggle__icon {
  transform: rotate(-15deg) scale(1.08);
}