/* ==========================================================================
   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;

  /* Dauer eines Puls-Durchlaufs der aktiven Feature-Buttons. Als Token, weil
     die Ausnahme von der Bewegungsdämpfung (buttons.css) dieselbe Dauer
     wieder setzen muss -- zwei Zahlen liefen hier auseinander. */
  --pulse-duration: 2.4s;

  /* 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);

  /* Links in Fließtext (Warn-Tooltip): Blau, damit sie als Link erkannt werden;
     auf --color-surface in beiden Themes mit dem Kontrast für Fließtext. */
  --color-link:         #58a6ff;

  /* 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);

  /* Das Kreuz eines schwebenden Feldes (floating_panel.css): seine Scheibe ist
     in Ruhe in einem leichten Rot mit wenig Sättigung gefüllt, überfahren und
     gedrückt im Warnrot; die zwei Striche tragen die Farbe des Seitengrunds,
     dunkel im dunklen und hell im hellen Theme. Alle drei hängen an den Farben
     des Themes und wechseln mit ihm. */
  --color-close:        color-mix(in srgb, var(--color-error) 50%, var(--color-text-muted));
  --color-close-active: var(--color-error);
  --color-close-mark:   var(--color-bg);

  /* 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);
  /* Dieselbe Farbe ohne Durchlass -- für Flächen, die frei über der Karte
     stehen und keinen Container hinter sich haben (Overflow-Menü). */
  --glass-bg-solid: rgb(22, 27, 34);
  --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 unter 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-link:         #0969da;

  --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-solid: rgb(255, 255, 255);
  --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;

}

/* An der Bedienung lässt sich nichts markieren, nichts nachschlagen und nichts
   aufheben.

   ⚠️ VERBIETEN statt einzeln erlauben, USER-Entscheid: eine Liste der zu
   schützenden Stellen wird lang, und man vergisst darin etwas. Genau so ist die
   Lücke entstanden -- fünf von neunzehn Stylesheets setzten das punktuell, die
   Zoom-Knöpfe standen in keinem davon.

   ⚠️ AM UNIVERSALSELEKTOR, NICHT AN `body`, und dafür gibt es zwei Gründe, die
   beide am Gerät gemessen sind:
     - `-webkit-user-drag` vererbt sich GAR NICHT. An `body` bliebe es ohne
       Wirkung auf die Knöpfe darin.
     - `user-select` vererbt sich zwar, verliert aber gegen die eigene Vorgabe
       des Browsers für Formularelemente: ein geerbter Wert greift nur, wo das
       Element selbst keine Regel hat. Deshalb blieb am Griff des Reglers die
       Lupe stehen, während der Rest der Seite längst still war.

   Drei Schreibweisen fürs Markieren, weil eine nicht reicht: die präfixlose Form
   kennt iOS-Safari erst ab 16.4, und `-webkit-touch-callout` ist die einzige,
   die das Lupen- und Kopieren-Menü beim langen Drücken nimmt. Leaflet schützt
   nur seine Kacheln, Marker und eigenen Sprechblasen -- seine Bedienelemente
   nicht, und die Zoom-Knöpfe sind dort `<a>`, also von Haus aus ziehbar. */
* {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}

/* Die EINZIGE Rückausnahme: wo TEXT eingegeben wird, muss er sich auch markieren
   lassen. Ohne sie wäre die Ortssuche auf dem Telefon kaum zu korrigieren --
   kein Doppeltippen, kein Markieren zum Überschreiben.

   ⚠️ NACH TYP, nicht pauschal nach Elementnamen. Ein `input` ohne Typangabe traf
   auch die REGLER (`type="range"`: Deckkraft und Zeit) und gab ihnen das
   Kopieren-Menü zurück -- der USER hat es auf iOS 18.7.8 sofort gefunden, beim
   langen Druck auf den Deckkraft-Regler. Aufgezählt wird deshalb, was Text
   aufnimmt; alles andere bleibt verboten. Ein vergessener Typ ist damit
   höchstens nicht markierbar, statt eine Lücke zu sein.

   ⚠️ `-webkit-touch-callout` gehört mit zurückgesetzt, nicht nur `user-select`:
   sonst verliert das Feld auf iOS sein Einfügen-Menü, und das fiele erst am
   Gerät auf. */
input:not([type]),
input[type="text"], input[type="search"], input[type="email"],
input[type="url"], input[type="tel"], input[type="number"],
input[type="password"],
textarea, [contenteditable="true"] {
  user-select: text;
  -webkit-user-select: text;
  -webkit-touch-callout: default;
  /* Markierten Text aus einem Feld herausziehen bleibt erlaubt. */
  -webkit-user-drag: auto;
}

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);
}

/* ⚠️ Trifft ALLES. Eine Endlos-Animation steht dadurch nicht still, sondern
   bleibt im schwächsten Bild ihrer Kurve stehen -- wo das eine Aussage
   verfälscht oder stört, steht die Ausnahme bei der Regel selbst: der Puls
   der aktiven Feature-Buttons (buttons.css), die Blitz-Pille und das Licht
   der Radar-Status-Pille (status.css), das schwebende Feld
   (floating_panel.css) und das Radarbild (leaflet_overrides.css). */
@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%;
}