/* ==========================================================================
   EWB Radar – style.css  ·  Basis-Stylesheet
   Enthält NUR: Design-Tokens (:root Dark + [data-theme="light"]), Base-Reset
   (inkl. prefers-reduced-motion), Utility (.hidden) und die Karten-Shell
   (#map-shell, #map). Komponenten-Styles liegen in eigenen Partials (status,
   controls, buttons, right_controls, leaflet_overrides, ruler, distance_labels,
   overflow, tooltips, responsive) – in index.html NACH style.css eingebunden.

   Art direction: dunkel, präzise · Palette: Deep Navy/Slate + Cyan-Teal
   Typography: Inter (body)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Design Tokens  –  Dark Mode (Standard)
   -------------------------------------------------------------------------- */
:root {
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.8125rem, 0.76rem + 0.25vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1rem);

  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.25rem;  --space-6: 1.5rem;

  /* Surfaces – Dark */
  --color-bg:           #0d1117;
  --color-surface:      #161b22;
  --color-surface-2:    #1c2128;
  --color-surface-3:    #21262d;
  --color-border:       rgba(240, 246, 252, 0.10);
  --color-border-hover: rgba(240, 246, 252, 0.18);

  /* Text – Dark */
  --color-text:         #e6edf3;
  --color-text-muted:   #8b949e;
  --color-text-faint:   #484f58;

  /* Akzent – Cyan-Teal */
  --color-accent:       #39d0d8;
  --color-accent-dim:   rgba(57, 208, 216, 0.15);
  --color-accent-glow:  rgba(57, 208, 216, 0.35);

  /* Statusfarben – OK (Grün), Warnung (Gelb), Fehler (Rot)
      Dunkle Varianten für Dark Mode, werden in Light Mode überschrieben. */
  --color-ok-dark:    #3fb950;
  --color-warn-dark:  #d29922;
  --color-error-dark: #f85149;
  --color-ok:         var(--color-ok-dark);
  --color-warn:       var(--color-warn-dark);
  --color-error:      var(--color-error-dark);

  /* Radius */
  --radius-sm:   0.375rem;
  --radius-md:   0.625rem;
  --radius-lg:   0.875rem;
  --radius-xl:   1.25rem;
  --radius-2xl:  1.75rem;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40), 0 1px 2px rgba(0,0,0,0.30);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.50), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.60), 0 4px 12px rgba(0,0,0,0.40);

  /* Glasmorphism-Surfaces (Controls, Side-Panel, Status) */
  --glass-bg:     rgba(22, 27, 34, 0.82);
  --glass-bg-2:   rgba(33, 38, 45, 0.60);
  --glass-bg-2h:  rgba(33, 38, 45, 0.85);

  /* Übergänge */
  --transition-fast:   120ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Slider-Segment-Farben:
     --slider-color-past     = Standardfarbe des Tracks (Analysis-Frames).
     --slider-color-new      = Grünes Segment für neu geladene Frames nach Auto-Refresh.
     --slider-color-nc-near  = Gelb – Nowcast-Frames 0–60min (= --color-warn).
     --slider-color-nc-far   = Orange – Nowcast-Frames 61–120min
                               (OKLCH-Mittelwert zwischen --color-warn #d29922 und #f07800).
     --new-start-pct         = Trennpunkt in % – wird per JS via style.setProperty gesetzt;
                               Fallback 100% = kein grünes Segment sichtbar. */
  --slider-color-past-dark: rgba(57, 208, 216, 0.20);
  --slider-color-past:    var(--slider-color-past-dark);
  --slider-color-new:     var(--color-ok);
  --slider-color-nc-near: var(--color-warn);
  --slider-color-nc-far:  var(--color-error);

  /* Controls-Höhe: wird in Breakpoints wiederverwendet.
     Alle abhängigen Elemente (side-panel, legend, toggle) nutzen diese Tokens.
     --safe-bottom hebt alles bei Geräten mit Browser-Navigationsleiste an. */
  --safe-bottom:      env(safe-area-inset-bottom, 0px);
  --controls-bottom:  calc(28px + var(--safe-bottom));
  --controls-height:  52px;
  --controls-gap:     24px;

  /* Side-Panel-Höhe – immer gleich, da Produkte ein einzelnes Dropdown sind:
     padding-top(12) + header(44) + gap(8) + select(44) + padding-bottom(12) + border(2) = 122px */
  --side-panel-height: 122px;

  /* Toggle-Höhe und collapsed-Panel-Höhe – für bottom-Formeln in side-panel.css.
     Werden bei <= 1060px auf 40px überschrieben (Button schrumpft). */
  --toggle-height:               44px;
  --side-panel-collapsed-height: 44px;

  /* --theme-toggle-bottom: per JS (updateThemeToggleBottom in theme.js) gesetzt.
     Analog zu --legend-bottom: Fallback = ganz unten-rechts auf Controls-Höhe.
     JS springt den Toggle nach oben wenn er horizontal mit #controls kollidiert. */

  --panel-bottom: calc(
    var(--controls-bottom)
    + var(--controls-height)
    + var(--controls-gap)
    + var(--toggle-height)
    + var(--space-3)
  );

  --right-controls-bottom: calc(
    var(--panel-bottom)
    + var(--side-panel-height)
    + var(--space-4)
  );

  --right-controls-collapsed: calc(
    var(--panel-bottom)
    + var(--side-panel-collapsed-height)
    + var(--space-3)
  );

}

/* --------------------------------------------------------------------------
   Design Tokens  –  Light Mode
   -------------------------------------------------------------------------- */
[data-theme="light"] {
  --color-bg:           #f0f4f8;
  --color-surface:      #ffffff;
  --color-surface-2:    #e8edf2;
  --color-surface-3:    #d9e0e8;
  --color-border:       rgba(0, 0, 0, 0.10);
  --color-border-hover: rgba(0, 0, 0, 0.18);

  --color-text:         #1c2128;
  --color-text-muted:   #57606a;
  --color-text-faint:   #8c959f;

  --color-accent:       #0969da;
  --color-accent-dim:   rgba(9, 105, 218, 0.12);
  --color-accent-glow:  rgba(9, 105, 218, 0.30);

  --color-ok:           color-mix(in srgb, var(--color-ok-dark) 80%, black);
  --color-warn:         color-mix(in srgb, var(--color-warn-dark) 96%, black);
  --color-error:        color-mix(in srgb, var(--color-error-dark) 88%, black);

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 36px rgba(0,0,0,0.14), 0 4px 12px rgba(0,0,0,0.10);

  --glass-bg:     rgba(255, 255, 255, 0.88);
  --glass-bg-2:   rgba(240, 244, 248, 0.70);
  --glass-bg-2h:  rgba(240, 244, 248, 0.95);

  /* Im Light Mode soll die Cyan-Teal-Farbe dezent bleiben, daher wird die Transparenz des Past-Segments erhöht. */
  --slider-color-past: color-mix(in srgb, var(--color-accent) 18%, transparent);
}

/* --------------------------------------------------------------------------
   Base Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text);
  background: var(--color-bg);
  overflow: hidden;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

select {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */

/* Elemente per JS ausgeblendet (show_radar_button / show_poi_button = false) */
.hidden { display: none !important; }


/* --------------------------------------------------------------------------
   Karten-Shell
   -------------------------------------------------------------------------- */
#map-shell {
  position: relative;
  width: 100%;
  /* dvh = dynamic viewport height: schrumpft wenn Browser-UI (Firefox-Leiste) sichtbar ist */
  height: 100dvh;
  overflow: hidden;
  background: var(--color-bg);
}

#map {
  width: 100%;
  height: 100%;
}