/* ==========================================================================
   EWB Radar – right_controls.css
   Theme-Toggle (unten-rechts) und #right-controls (vertikale Button-Kette).
   Ausgelagert aus style.css (Modularisierung, Issue #94).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Theme-Toggle – unten-rechts, analog zur Legende links-unten.

   Normalfall: sitzt auf --controls-bottom (gleiche Höhe wie Legende).
   Bei horizontaler Kollision mit der Controls-Bar springt er nach oben –
   JS (updateThemeToggleBottom in theme.js) setzt --theme-toggle-bottom
   dynamisch via style.setProperty() auf #map-shell.
   -------------------------------------------------------------------------- */
#theme-toggle {
  position: absolute;
  right: 16px;
  bottom: var(--theme-toggle-bottom, var(--controls-bottom));
  z-index: 20003;
  touch-action: none;  /* #140: kein Pinch-Zoom der Karte über dem Toggle. */

  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);

  font-size: 1.15rem;
  line-height: 1;
  color: var(--color-text-muted);

  transition:
    background var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    bottom var(--transition-fast);
}

#theme-toggle:hover {
  background: var(--color-accent-dim);
  border-color: rgba(57, 208, 216, 0.35);
  color: var(--color-accent);
  transform: scale(1.08);
  box-shadow: 0 0 14px var(--color-accent-glow);
}

#theme-toggle:active {
  transform: scale(0.95);
}


/* --------------------------------------------------------------------------
   #right-controls – vertikale Button-Kette rechts auf der Karte.

   z-index: 20003 – höher als side-panel (10001) und legend (10001).
   Der hohe Stack-Level liegt am Container selbst; die Geocoder-Kinder
   (Input z-index:1, Dropdown z-index:2) profitieren automatisch davon.

   Glassmorphism und Schatten identisch zu #theme-toggle.
   Button-Basis-Styles und active/pulse-States sind oben gemeinsam
   mit #prev-btn / #next-btn definiert.

   Responsive Overrides (< 1200px, < 1060px) liegen in side_panel.css,
   da sie auf denselben bottom-Formeln wie das Side-Panel aufbauen.
   -------------------------------------------------------------------------- */
#right-controls {
  position: absolute;
  right: 16px;
  top: calc(50% - var(--side-panel-height) / 2 - var(--space-2) - 40px);
  /* 20003 = über side-panel (10001) und legend (10001) –
     trägt alle Geocoder-Kinder automatisch nach vorn. */
  z-index: 20003;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}

/* Jeder Button in #right-controls bekommt den vollen Glas-Style.
   Überschreibt den --glass-bg-2 aus der Basis-Regel oben. */
#right-controls button {
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);
}