/* ==========================================================================
   Side-Panel – side-panel.css
   Position: rechts-mitte (>= 1200px) oder rechts-unten (< 1200px)

   Struktur:
     #side-panel
       ├── .side-panel__header   ← immer sichtbar: Label links, Button rechts
       └── .side-panel__body     ← collapsed: ausgeblendet (enthält nur Select)

   Der Button liegt im __header AUSSERHALB von __body, damit er im
   eingeklappten Zustand weiterhin sichtbar bleibt.

   Toggle-Konsistenz (alle Buttons rechts = gleiche visuelle Sprache):
     Ausgeklappt : Button transparent im Panel-Kontext, Hover mit Glow
     Eingeklappt : 44×44 abgerundetes Glas-Quadrat, 1:1 wie .dbz-legend--collapsed
                  Hover/Active identisch zu .dbz-legend:hover / :active
   ========================================================================== */

/* --------------------------------------------------------------------------
   Basis-Container
   -------------------------------------------------------------------------- */
.side-panel {
  position: absolute;
  top: 50%;
  right: 16px;
  transform: translateY(-50%);
  z-index: 10001; /* über .leaflet-control-container (10000) */

  /* Inhalt stapelt vertikal: Header oben, Select unten */
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-3);

  padding: var(--space-3);
  border-radius: var(--radius-2xl);

  /* Glassmorphism – gleiche Sprache wie Controls, Legend, Theme-Toggle */
  background: var(--glass-bg);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    var(--shadow-lg),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);

  /* Breite folgt dem längsten Produktnamen */
  width: max-content;

  /* overflow: visible damit scale(1.08) beim Button-Hover keine Scrollbars erzeugt */
  overflow: visible;

  /* Nur Farb-/Schatten-Transitions, kein transform
     (würde translateY(-50%) überschreiben) */
  transition:
    background   var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

/* Nur ein Produkt verfügbar → Panel komplett verbergen */
.side-panel:has(.side-panel__select option:only-child) {
  display: none;
}

/* --------------------------------------------------------------------------
   Header-Zeile: Label links, Einklapp-Button rechts, vertikal zentriert
   -------------------------------------------------------------------------- */
.side-panel__header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

/* --------------------------------------------------------------------------
   Body: enthält das Select-Feld
   Wird beim Einklappen per display:none ausgeblendet.
   -------------------------------------------------------------------------- */
.side-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

/* --------------------------------------------------------------------------
   Label "PRODUKT"
   -------------------------------------------------------------------------- */
.side-panel__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Einklapp-Button
   Ausgeklappt : transparent, kein Rahmen – sitzt im Panel-Glas-Kontext.
   Eingeklappt : eigenständiges Glas-Quadrat (siehe .side-panel--collapsed).
   Hover/Active : 1:1 analog .dbz-legend (scale, Glow, accent-dim).
   -------------------------------------------------------------------------- */
.side-panel__hide-btn {
  /* 44×44 px Touch-Target, abgerundetes Quadrat wie .dbz-legend */
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-lg);

  /* Im ausgeklappten Zustand unsichtbarer Platzhalter-Rahmen */
  border: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  display: flex;
  align-items: center;
  justify-content: center;

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

  /* transform in transition für animiertes scale() */
  transition:
    background   var(--transition-fast),
    border-color var(--transition-fast),
    color        var(--transition-fast),
    box-shadow   var(--transition-fast),
    transform    var(--transition-fast);
}

/* Hover ausgeklappt: identisch zu .dbz-legend:hover */
@media (hover: hover) {
  .side-panel__hide-btn: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);
  }
}

/* Active: identisch zu .dbz-legend:active */
.side-panel__hide-btn:active {
  transform: scale(0.95);
}

.side-panel__hide-btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Select-Feld
   -------------------------------------------------------------------------- */
.side-panel__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  min-height: 44px;
  padding: var(--space-2) var(--space-5) var(--space-2) var(--space-3);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-border);

  /* Eigener Dropdown-Pfeil via CSS-Gradient */
  background-color: var(--glass-bg-2);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% + 1px),
    calc(100% - 9px)  calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;

  color: var(--color-text);
  font-size: var(--text-sm);
  font-weight: 500;
  outline: none;

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

.side-panel__select:hover {
  border-color: var(--color-border-hover);
  background-color: var(--glass-bg-2h);
}

.side-panel__select:focus {
  border-color: rgba(57, 208, 216, 0.60);
  box-shadow: 0 0 0 3px rgba(57, 208, 216, 0.12);
}

.side-panel__select:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Eingeklappter Zustand
   Panel-Hintergrund/-Rahmen entfallen. __header schrumpft auf 44×44 px
   (wie .dbz-legend--collapsed { width: 44px; height: 44px }), der Button
   füllt ihn vollständig und trägt den vollen Glas-Style.
   -------------------------------------------------------------------------- */
.side-panel--collapsed {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  gap: 0;
}

/* Select-Bereich ausblenden */
.side-panel--collapsed .side-panel__body {
  display: none;
}

/* Header auf exakt 44×44 fixieren – 1:1 wie .dbz-legend--collapsed */
.side-panel--collapsed .side-panel__header {
  width: 44px;
  height: 44px;
  padding: 0;
  gap: 0;
  justify-content: center;
}

/* Label ausblenden – nur Button bleibt */
.side-panel--collapsed .side-panel__label {
  display: none;
}

/* Button: voller Glas-Style, 1:1 wie .dbz-legend (ausgeklappt) */
.side-panel--collapsed .side-panel__hide-btn {
  background: var(--glass-bg);
  border-color: var(--color-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-md);
  color: var(--color-text-muted);
}

/* Hover eingeklappt: identisch zu .dbz-legend:hover */
@media (hover: hover) {
  .side-panel--collapsed .side-panel__hide-btn: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);
  }
}

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

   >= 1200px: Side-Panel ist top:50% vertikal zentriert.
   right-controls klebt direkt über der Panel-Oberkante:
     top = 50% (Viewport-Mitte)
         - side-panel-height/2 (zur Panel-Oberkante)
         - controls-gap/2 (halber Abstand, damit 1x controls-gap zwischen 
            Panel und Controls entsteht)

   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.
   -------------------------------------------------------------------------- */

@media (min-width: 1200px) {
  #right-controls {
    top: auto;
    bottom: calc(50% + var(--side-panel-height) / 2 + var(--controls-gap) / 2);
  }

  .side-panel--collapsed ~ #right-controls {
    bottom: calc(50% + var(--side-panel-collapsed-height) / 2 + var(--controls-gap) / 2);
  }
}

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

   <= 1200px: Panel verlässt die Mitte-Achse, ankert über Theme-Toggle
   + Controls-Gap. #right-controls klebt immer direkt darüber.

   Panel-Formel (alle Magic-Numbers in Tokens – DRY):
     bottom = controls-bottom + toggle-height + controls-gap

   right-controls ausgeklappt:
     bottom = [Panel-bottom] + side-panel-height + controls-gap

   right-controls eingeklappt (~-Geschwister-Selektor):
     bottom = [Panel-bottom] + side-panel-collapsed-height + controls-gap

   <= 1060px: --toggle-height und --side-panel-collapsed-height werden
   in style.css per :root-Override auf 40px gesetzt. Die Formeln hier
   gelten unveraendert – kein doppelter bottom-Block noetig.
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .side-panel {
    top: auto;
    right: 12px;
    bottom: calc(
      var(--panel-bottom)
    );
    transform: none;
  }

  /* right-controls über ausgeklapptem Panel:
     --controls-gap statt --space-2 für konsistenten Abstand zur Icon-Baseline */
  #right-controls {
    top: auto;
    right: 12px;
    bottom: calc(
      var(--right-controls-bottom)
    );
  }

  /* right-controls über eingeklapptem Panel – gleiche Gap-Logik */
  .side-panel--collapsed ~ #right-controls {
    top: auto;
    bottom: calc(
      var(--right-controls-collapsed)
    );
  }
}

/* <= 1060px: Button-Größe anpassen, right enger.
   Keine bottom-Formeln hier – Tokens in style.css erledigen das. */
@media (max-width: 1060px) {
  #side-panel {
    right: 8px;
  }
    /* right-controls über ausgeklapptem Panel:
     --controls-gap statt --space-2 für konsistenten Abstand zur Icon-Baseline */
  #right-controls {
    right: 8px;
  }
}