/* Filter- und Suchpanel (Phase 4). Struktur wird von
   js/filters/filterPanel.js in #filter-panel eingehängt.

   Auf- und Zuklappen läuft über die Klasse .filter-panel--open, die
   js/filters/filterPanel.js setzt - mobil als Bereich oberhalb der Liste,
   auf Desktop (>=1024px) als eigene Spalte rechts (siehe
   css/responsive.css), deren Breite dabei mitgleitet. */

.filter-panel {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

/* --- Kopfzeile ---------------------------------------------------------
   Bleibt beim Blättern durch die Filter oben stehen, damit der
   Schließen-Knopf immer erreichbar ist. Sie trägt beide Zustände: den
   Öffnen-Knopf (sichtbar, solange zu) sowie Titel und Schließen-Knopf
   (sichtbar, solange offen). */

.filter-panel__bar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid transparent;
}

.filter-panel--open .filter-panel__bar {
  border-bottom-color: var(--color-border);
}

/* Zugeklappt besteht die Leiste nur aus der Knopfreihe - Titel und
   Schliessen-Knopf sind ausgeblendet, und ohne sie sass die Reihe linksbündig
   in einem sonst leeren Streifen. Mittig gesetzt wirkt sie als das, was sie
   ist: die Bedienung dieser Leiste.

   flex-wrap gehört dazu: Ein langer Planname kann die drei Knöpfe über die
   Breite eines Telefons hinausschieben. Dann lieber eine zweite Zeile als ein
   angeschnittener Hilfe-Knopf am rechten Rand.

   Ab 1024px bleibt beides wirkungslos, und das ist Absicht: Dort steht die
   Leiste als Spalte (flex-direction: column, css/trips.css), ihre Höhe folgt
   dem Inhalt und die Knöpfe füllen die Breite ohnehin aus. */
.filter-panel:not(.filter-panel--open) .filter-panel__bar {
  flex-wrap: wrap;
  justify-content: center;
}

/* Öffnen: bewusst kräftig. Der frühere Pfeil war als Bedienelement kaum zu
   erkennen - hier steht jetzt ein Trichter (das gängige Filtersinnbild) auf
   getönter Fläche in der Primärfarbe. */
.filter-panel__open-btn {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.filter-panel__open-btn:hover,
.filter-panel__open-btn:focus-visible {
  background: var(--color-primary-dark);
  box-shadow: var(--shadow-card);
}

.filter-panel__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.filter-panel__title {
  flex: 1;
  font-size: 1rem;
  font-weight: 700;
  /* Der Titel gibt nach, nicht die Knöpfe: Auf einem schmalen Telefon stehen
     in der Zeile Plan, Zurücksetzen, Hilfe und Schliessen - dann darf lieber
     "Filter & Suche" abgeschnitten werden als ein Bedienelement. */
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Zurücksetzen: dauerhaft in der Kopfzeile, solange die Leiste offen ist.
   Aufgebaut wie der Hilfe-Knopf daneben (css/help.css), damit die Zeile eine
   Reihe gleichartiger Knöpfe bleibt. */
.filter-panel__reset {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.filter-panel__reset:hover,
.filter-panel__reset:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

.filter-panel__reset-icon {
  font-size: 1rem;
  line-height: 1;
}

/* Zugeklappt gibt es nichts zurückzusetzen, was man sehen könnte - der Knopf
   ist dann auch aus der Tastaturbedienung genommen. */
.filter-panel:not(.filter-panel--open) .filter-panel__reset {
  display: none;
}

/* Ganz schmale Anzeigen: Das Zeichen allein muss reichen. Die Beschriftung
   für Screenreader steckt im title des Knopfes und bleibt unberührt. */
@media (max-width: 420px) {
  .filter-panel__reset-label {
    display: none;
  }
}

.filter-panel__close-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--color-border);
  color: var(--color-text);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 140ms ease;
}

.filter-panel__close-btn:hover,
.filter-panel__close-btn:focus-visible {
  background: var(--color-text-muted);
  color: #fff;
}

/* Im jeweils anderen Zustand nicht nur unsichtbar, sondern auch aus der
   Tastaturbedienung genommen. */
.filter-panel--open .filter-panel__open-btn,
.filter-panel:not(.filter-panel--open) .filter-panel__title,
.filter-panel:not(.filter-panel--open) .filter-panel__close-btn {
  display: none;
}

/* --- Aufgleiten --------------------------------------------------------
   Die Höhe wird über grid-template-rows von 0fr auf 1fr gefahren. Das ist
   der einzige Weg, auf eine INHALTSABHÄNGIGE Höhe zu animieren - mit einer
   festen max-height müsste man eine Höhe raten, und der Filterbereich ist
   je nach Zustand unterschiedlich hoch.

   Genau dafür musste das frühere <details> weichen: dessen Inhalt ist im
   geschlossenen Zustand aus dem Rendering genommen, es gibt nichts zu
   animieren. Das Auf-/Zuklappen kostet damit etwas JavaScript - vertretbar,
   da die Kartenansicht ohnehin nicht ohne läuft. */

.filter-panel__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 180ms ease;
}

.filter-panel--open .filter-panel__wrap {
  grid-template-rows: 1fr;
}

.filter-panel__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  /* min-height: 0 ist Pflicht, sonst ignoriert das Grid-Kind die 0fr-Zeile
     und die Leiste klappt ohne Bewegung auf. */
  min-height: 0;
  overflow: hidden;
  padding: 0 var(--space-md) var(--space-md);
  opacity: 0;
  visibility: hidden;
  /* visibility erst am Ende umschalten, damit das Ausblenden sichtbar
     bleibt; beim Einblenden sofort. */
  transition: opacity 140ms ease, visibility 0s linear 180ms;
}

.filter-panel--open .filter-panel__body {
  opacity: 1;
  visibility: visible;
  transition: opacity 140ms ease 40ms, visibility 0s;
}

/* Wer Bewegung reduziert haben möchte, bekommt denselben Zustandswechsel
   ohne Übergang. */
@media (prefers-reduced-motion: reduce) {
  .filter-panel__wrap,
  .filter-panel__body,
  .filter-panel__open-btn,
  .filter-panel__close-btn {
    transition: none;
  }
}

.filter-panel__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: none;
  border-top: 1px solid var(--color-border);
  padding: var(--space-sm) 0 0;
  margin: 0;
}

.filter-panel__section-label {
  padding: 0;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--color-text-muted);
}

.filter-panel__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Nur in der nebeneinander laufenden Zeile (z.B. "Alter ab/bis") teilen sich
   die Felder die Breite. Früher stand die Angabe auf .filter-panel__field
   selbst - dort wirkte flex-basis in den senkrechten Abschnitten aber auf die
   HÖHE, wodurch jedes allein stehende Feld (Suche, Merkliste, Umgebung,
   Aufenthaltsdauer, Bewertung) mindestens 160px hoch wurde und zusätzlich
   wuchs. Das war der Leerraum unter genau diesen fünf Feldern. */
.filter-panel__row > .filter-panel__field {
  flex: 1 1 160px;
}

.filter-panel__label {
  font-size: 0.85rem;
  font-weight: 600;
}

.filter-panel__field input,
.filter-panel__field select,
.filter-panel__distance input,
.filter-panel__distance select {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  font: inherit;
  background: var(--color-surface);
  color: var(--color-text);
  width: 100%;
}

.filter-panel__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.filter-panel__categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  max-height: 180px;
  overflow-y: auto;
  padding: var(--space-xs) 0;
}

.filter-panel__category-option,
.filter-panel__checkbox {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: 0.85rem;
  cursor: pointer;
}

.filter-panel__category-swatch {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.filter-panel__checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.filter-panel__distance {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: 220px;
}

.filter-panel__hint {
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

.filter-panel__hint[hidden] {
  display: none;
}

.filter-panel__location-btn[hidden] {
  display: none;
}

.filter-panel__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.filter-panel__count {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-right: auto;
}

@media (min-width: 1024px) {
  .filter-panel {
    border-bottom: none;
  }

  /* Geschlossen bleibt nur eine schmale Spalte übrig (Breite siehe
     css/responsive.css). Der Öffnen-Knopf füllt sie aus und stellt Trichter
     und Beschriftung untereinander - so ist auch auf 56px erkennbar, was
     sich dahinter verbirgt. */
  .filter-panel:not(.filter-panel--open) .filter-panel__bar {
    padding: var(--space-sm) var(--space-xs);
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__open-btn {
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    padding: var(--space-sm) var(--space-xs);
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__icon {
    width: 22px;
    height: 22px;
  }

  .filter-panel:not(.filter-panel--open) .filter-panel__open-label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
  }

  /* In der Spalte trägt die Höhe der Inhalt, nicht die Animation: dort
     gleitet die Spaltenbreite (css/responsive.css), und beides gleichzeitig
     sähe unruhig aus. */
  .filter-panel__wrap,
  .filter-panel--open .filter-panel__wrap {
    grid-template-rows: 1fr;
    transition: none;
  }
}