/* ==========================================================================
   geocoder.css – Suchfeld neben #search-location-btn.
   Gehört zu: frontend/js/geocoder.js

   Layout-Konzept:
   .geocoder-wrap hat Größe 0×0 und nimmt KEINEN Platz in der Flex-Spalte
   von #right-controls ein. Input und Dropdown sind position:absolute relativ
   zum Wrap selbst (der wiederum absolut in #right-controls sitzt).

   --geocoder-top wird per JS (_buildUI) auf den vertikalen Offset des
   #search-location-btn gesetzt und bei window:resize aktualisiert.

   Breiten-Strategie:
   .geocoder-wrap--open trägt die clamp()-Breite. Input und Dropdown
   erben via width:100% – so sind beide immer pixelgenau gleich breit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper
   position:absolute → komplett raus aus dem Flex-Flow von #right-controls,
   kein Verschieben der anderen Buttons beim Aufklappen.
   Containing Block: #right-controls (position:absolute).
   right: 52px = Button-Breite (44px) + Gap (8px) → links der Lupe.
   top via --geocoder-top, per JS auf #right-controls gesetzt.
   overflow:visible damit Input und Dropdown herausragen dürfen.
   pointer-events nur wenn offen.
   -------------------------------------------------------------------------- */
.geocoder-wrap {
  position: absolute;
  top: var(--geocoder-top, 0px);
  right: 52px;
  width: 0;
  height: 0;
  overflow: visible;
  pointer-events: none;
  z-index: 1;
}

/* Im offenen Zustand trägt der Wrapper die Zielbreite –
   Input und Dropdown erben via width:100% exakt dieselbe Breite.
   clamp(280px, calc(100vw - 84px), 720px):
     - 280px            = untere Grenze (sicher auf 375px+ Geräten)
     - 100vw - 84px     = Viewport minus right:16 minus Button+Gap (52px) minus 16px Puffer
     - 720px            = obere Grenze auf Desktop */
.geocoder-wrap--open {
  pointer-events: auto;
  width: clamp(280px, calc(100vw - 84px), 720px);
}

/* --------------------------------------------------------------------------
   Input-Feld
   Absolut relativ zum Wrap.
   right:0 / top:0 – Wrap sitzt bereits an der richtigen Position.
   Breite animiert von 0 → 100% (= Wrapper-Breite) beim Aufklappen.
   text-overflow:ellipsis für lange gewählte Labels (z.B.
   "Niederdornberg-Deppendorf, Bielefeld, ...").
   -------------------------------------------------------------------------- */
.geocoder-input {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 0;
  height: 40px;

  padding: 0;
  border-radius: var(--radius-xl);
  border: 1px solid transparent;

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

  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  opacity: 0;
  pointer-events: none;

  transition:
    width        200ms ease,
    opacity      200ms ease,
    padding      200ms ease,
    border-color 150ms ease,
    box-shadow   150ms ease;
}

.geocoder-wrap--open .geocoder-input {
  /* 100% = Wrapper-Breite (clamp(280px, calc(100vw - 84px), 720px)) */
  width: 100%;
  padding: 0 var(--space-3);
  opacity: 1;
  pointer-events: auto;
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

.geocoder-input::placeholder {
  color: var(--color-text-faint);
}

.geocoder-input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--color-accent) 55%, transparent);
  box-shadow:
    var(--shadow-md),
    0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* --------------------------------------------------------------------------
   Dropdown-Liste
   Absolut relativ zum Wrap.
   right:0 – bündig mit der linken Input-Kante.
   top:48px – direkt unterhalb des Inputs (40px Höhe + 8px Gap).
   width:100% = exakt so breit wie der Wrapper (= Input-Breite).
   Vollständig opaker Hintergrund – kein Karten-Durchscheinen.

   overflow-y:hidden als Default: bei dropdown_limit <= max_search_results
   (d.h. alle Treffer passen sichtbar rein) niemals eine Scrollbar zeigen.
   Scroll-Modus wird nur per JS aktiviert wenn max_search_results > dropdown_limit
   (JS setzt dann data-scrollable="true" am Element, s.u.).
   -------------------------------------------------------------------------- */
.geocoder-dropdown {
  position: absolute;
  right: 0;
  top: 48px;
  z-index: 1;
  width: 100%;

  list-style: none;
  margin: 0;
  padding: var(--space-1) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  box-shadow: var(--shadow-lg);

  /* Kein Scroll per Default – verhindert Scrollbar auch bei Zoom oder
     Sub-Pixel-Rendering-Abweichungen wenn alle Treffer sichtbar passen. */
  overflow-y: hidden;
}

/* Scroll-Modus: aktiv wenn max_search_results > dropdown_limit.
   JS setzt data-scrollable="true" am Dropdown einmalig in _buildUI().

   max-height dynamisch: dropdown_limit (6) Einträge × (line-height 1.5em
   + padding-block 2×0.5em) + 2×space-1 für das ul-Padding oben/unten.
   em bezieht sich auf font-size dieses Elements (= var(--text-sm)) –
   skaliert automatisch mit der fluiden Schriftgröße, kein fixer px-Wert.

   scrollbar-color / scrollbar-width: W3C-Standard (Scrollbars Styling L1),
   unterstützt in Firefox 64+, Chrome 121+, Edge 121+ – kein Vendor-Prefix.
   Thumb-Farbe via --color-border: passt zu den Item-Trennlinien und
   wechselt automatisch mit dem Theme (Light/Dark).
   Track transparent: Dropdown-Hintergrund bleibt sichtbar. */
.geocoder-dropdown[data-scrollable="true"] {
  max-height: calc(6 * 2.5em + 2 * var(--space-1));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}

/* --------------------------------------------------------------------------
   Dropdown-Einträge
   -------------------------------------------------------------------------- */
.geocoder-item {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    background 120ms ease,
    color      120ms ease;
}

/* Hover und Tastatur-Fokus: dezentes Akzent-Highlight. */
.geocoder-item--active,
.geocoder-item:hover {
  background: var(--color-accent-dim);
  color: var(--color-accent);
}

/* Trennlinie zwischen Einträgen. */
.geocoder-item:not(:last-child) {
  border-bottom: 1px solid var(--color-border);
}

/* "Keine Treffer"-Zeile. */
.geocoder-item--empty {
  color: var(--color-text-faint);
  cursor: default;
  font-style: italic;
}