/* ==========================================================================
   EWB Radar -- responsive.css
   Responsive Breakpoints (max-width 1060 / 750 / 600px Portrait): kompaktere
   Controls, Token-Anpassungen, größere Portrait-Buttons.
   MUSS nach allen Komponenten-Partials geladen werden -- überschreibt deren
   Basisregeln bei gleicher Spezifität, sonst greifen die Overrides nicht.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Responsive
   -----------------------------------------------------------------------

   Breakpoint-Strategie:

   >= 1200px   Normalzustand
   < 1200px   Controls kompakter, Tokens wechseln
   < 1060px   Controls kompakter, Tokens wechseln
   < 750px    "Zeitraum:"-Label weg

   Portrait-Sonderfall (max-width: 600px) AND (orientation: portrait):
     Controls-Bar füllt die ganze Breite, Buttons größer,
     Status-Pill größer, Zoom-Buttons größer.
     Schrauben:
       --portrait-btn-size   Button-Größe in der Controls-Bar
       --portrait-icon-size  Icon-/Emoji-Größe darin
       --portrait-status-h   Höhe der Status-Pill
       --portrait-zoom-size  Leaflet +/- Buttons
   -------------------------------------------------------------------------- */


/* <= 1060px: Controls-Bar kompakter, alle Tokens passen sich an */
@media (max-width: 1060px) {
  :root {
    --controls-bottom: calc(8px + var(--safe-bottom));
    --controls-height: 48px;
    --controls-gap:    24px;
    /* Toggles auf 40px */
    --toggle-height:               40px;
    /* Side-Panel auf 44px Höhe, damit es bündig mit der Controls-Bar abschließt */
    --side-panel-collapsed-height: 44px;
  }

  #controls {
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-xl);
  }

  #time-label {
    display: none;
  }

  /* Die Lage beider Pillen hängt an diesen zwei Tokens (status.css). */
  :root {
    --status-top: 12px;
    --status-h:   36px;
  }

  .radar-status,
  .lightning-flag {
    padding: 0 var(--space-4);
    font-size: 11px;
  }

  #theme-toggle {
    right: 8px;
    width: 40px;
    height: 40px;
  }
}

/* <= 375px: die Bar passt in ihrer Mindestbreite nicht mehr zwischen die Ränder.
   Gerechnet mit border-box (style.css, Base Reset): die Mindestbreite von 360px
   aus controls.css enthält Polster und Rahmen bereits, dazu kommen die 8px
   Rand links und rechts aus dem Hochformat-Block -- ab 376px geht das auf,
   darunter steht die rechte Kante samt Play-Knopf außerhalb des Bildschirms.

   Zwei Schritte, bewusst grob (Zwischenlösung, siehe #428): die Mindestbreite
   gibt den Rändern nach, und die beiden Pfeile treten ab. Der Schieber trägt
   die Navigation in diesem Bereich allein -- er ist das genauere Werkzeug von
   beiden, und ohne die Pfeile bleibt ihm Platz. */
@media (max-width: 375px) {
  #controls {
    min-width: 0;
  }

  /* ⚠️ !important, und das ist keine Bequemlichkeit: die gemeinsame
     Button-Basis in buttons.css trifft dieselben Knöpfe auch über
     `#controls button:not(#play-btn)`. Darin stecken ZWEI IDs (`#controls`
     und die in `:not()`, die mitzählt) plus ein Element -- (2,0,1). Der
     stärkste Treffer einer Selektorliste gilt, eine Media Query erhöht das
     Gewicht nicht, und jeder Selektor, der hier ohne !important gewinnen
     würde, müsste eine dritte ID erfinden. Dieselbe Begründung trägt
     embed.css für seine Ausblendungen. */
  #controls #prev-btn,
  #controls #next-btn {
    display: none !important;
  }
}

/* <= 750px: "Zeitraum:"-Label fliegt raus */
@media (max-width: 750px) {
  #controls label[for="window-select"] {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Portrait-Modus auf Smartphones
   Greift ab max-width 600px UND Hochformat.
   Querformat bleibt unverändert (sieht schon gut aus).

   Schrauben (alle hier oben im Block):
     --portrait-btn-size   Größe aller Buttons in der Bar       Standard: 48px
     --portrait-play-size  Play-Button (etwas größer)             Standard: 52px
     --portrait-icon-size  Emoji/Icon-Schriftgröße               Standard: 1.35rem
     --portrait-status-h   Höhe der Status-Pill oben             Standard: 44px
     --portrait-zoom-size  Leaflet +/- Buttonfläche             Standard: 44px
   -------------------------------------------------------------------------- */
@media (max-width: 600px) and (orientation: portrait) {

  /* Tokens für diesen Breakpoint -- hier drehen */
  :root {
    --portrait-btn-size:  32px;
    --portrait-play-size: 36px;
    --portrait-icon-size: 1.35rem;
    --portrait-status-h:  44px;
    --status-h:           var(--portrait-status-h);
    --controls-gap:       20px;
    --portrait-zoom-size: 32px;
  }

  /* Controls-Bar: volle Breite, kein transform-center mehr */
  #controls {
    left: 8px;
    right: 8px;
    bottom: var(--controls-bottom);
    transform: none;          /* zentrierendes translateX(-50%) deaktivieren */
    width: auto;
    justify-content: space-between;
    border-radius: var(--radius-xl);
    padding: var(--space-2) var(--space-3);
    gap: var(--space-2);
  }

  /* Slider füllt den restlichen Platz zwischen den festen Elementen */
  #time-slider {
    width: auto;
    flex: 1 1 0;
    min-width: 0;
  }

  /* Alle Control-Buttons größer */
  #prev-btn,
  #next-btn,
  #radar-stations-btn,
  #poi-btn,
  #ruler-btn {
    width: var(--portrait-btn-size);
    height: var(--portrait-btn-size);
    font-size: var(--portrait-icon-size);
  }

  #play-btn {
    width: var(--portrait-play-size);
    height: var(--portrait-play-size);
    font-size: var(--portrait-icon-size);
  }

  /* Status-Pill und Blitzflag oben größer + besser lesbar */
  .radar-status,
  .lightning-flag {
    font-size: var(--text-xs);
    padding: 0 var(--space-4);
  }

  /* Leaflet Zoom-Buttons größer */
  .leaflet-control-zoom a {
    width:       var(--portrait-zoom-size) !important;
    height:      var(--portrait-zoom-size) !important;
    line-height: var(--portrait-zoom-size) !important;
    font-size:   1.4rem                   !important;
  }
}