/* ==========================================================================
   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.
   Ausgelagert aus style.css (Modularisierung, Issue #94).
   ========================================================================== */

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

  .radar-status {
    top: 12px;
    height: 36px;
    padding: 0 var(--space-4);
    font-size: 11px;
  }

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

/* <= 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;
    --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 oben größer + besser lesbar */
  .radar-status {
    height: var(--portrait-status-h);
    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;
  }
}