/* Ausflugspläne (Phase 13d): Knopf am Ziel, Auswahldialog, Übersicht und
   Detailansicht.

   Die Modalflächen erben Rahmen, Kopfzeile und Schliessknopf von .auth-dialog
   (css/auth.css) - hier steht nur, was darüber hinaus nötig ist. */

/* --- Knopf am Ziel -------------------------------------------------------- */

/* Gleiche Bauart wie das Herz nebenan (css/components.css): einfarbiges
   Zeichen, gedämpft im Ruhezustand, in der Primärfarbe sobald das Ziel in
   einem Plan liegt. Ein "+" ist deutlich dünner als ein "♥" - deshalb hier
   ein höheres Schriftgewicht, damit beide gleich schwer wirken. */
.trip-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  color: var(--color-text-muted);
  transition: color 0.15s ease, transform 0.15s ease;
}

.trip-btn:hover,
.trip-btn:focus-visible {
  color: var(--color-primary);
  transform: scale(1.15);
}

.trip-btn--active {
  color: var(--color-primary);
}

/* Auf der Listenkarte: neben dem Herz, ohne die Überschrift zu verdrängen.
   Etwas grösser als das Herz, weil "+" bei gleicher Schriftgrösse kleiner
   aussieht als ein flächiges Symbol. */
.trip-btn--card {
  font-size: 1.5rem;
  flex-shrink: 0;
}

/* Trägt Planen-Knopf und Herz auf der Listenkarte. */
.place-card__tools {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* In der Werkzeugleiste der Detailansicht gilt die Optik der Nachbarn: weisses
   Zeichen auf dunklem Kreis, wie "✕" und "♥". Die gedämpfte Farbe von oben
   wäre auf dem dunklen Grund kaum lesbar.

   Hintergrund und Übergang stehen hier noch einmal, obwohl .detail-modal__tool
   (css/detail.css) sie bereits setzt: diese Datei wird später geladen, und die
   Grundregel .trip-btn oben ist gleich spezifisch. Ohne die Wiederholung
   gewinnen deren "background: none" und der reine Farb-Übergang, und der
   Kreis unter dem "+" verschwindet. */
.detail-modal__tool.trip-btn {
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.2rem;
  transition: background-color 140ms ease;
}

.detail-modal__tool.trip-btn:hover,
.detail-modal__tool.trip-btn:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .detail-modal__tool.trip-btn {
    transition: none;
  }
}

/* Eingeplant: grüner Kreis statt Farbwechsel am Zeichen - beim Herz trägt
   das Rot allein, ein Häkchen in Grün auf Dunkel wäre dagegen schwach. */
.detail-modal__tool.trip-btn--active,
.detail-modal__tool.trip-btn--active:hover {
  background: var(--color-primary);
  color: #fff;
}

/* --- Auswahldialog -------------------------------------------------------- */

.trip-picker__place {
  margin: 0 0 var(--space-md);
  font-weight: 600;
  color: var(--color-text-muted);
}

.trip-picker__list {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  /* Bei vielen Plänen scrollt die Liste, das Anlegen-Feld darunter bleibt
     ohne Scrollen erreichbar. */
  max-height: 40vh;
  overflow-y: auto;
}

.trip-picker__item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.trip-picker__checkbox {
  /* Fingerkuppengrosses Ziel - der Dialog wird überwiegend am Smartphone
     bedient. */
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.trip-picker__label {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  flex: 1;
  min-width: 0;
}

.trip-picker__name {
  font-weight: 600;
}

.trip-picker__meta,
.trip-card__meta,
.trip-detail__meta,
.trip-place__meta {
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.trip-picker__form {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
}

.trip-picker__form-row {
  display: flex;
  gap: var(--space-sm);
}

.trip-picker__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
}

.trip-picker__create {
  flex-shrink: 0;
}

.trip-picker__error,
.trip-form__error {
  margin: var(--space-sm) 0 0;
  color: var(--color-danger);
  font-size: 0.9rem;
}

.trip-picker__failure,
.trip-detail__failure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

/* --- Formular ------------------------------------------------------------- */

.trip-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-md);
  background: var(--color-background);
  border-radius: var(--radius-md);
}

.trip-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
  min-width: 0;
}

.trip-form__label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.trip-form__input {
  padding: var(--space-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font: inherit;
  /* Ohne das sprengen date- und number-Felder in Safari ihren Container. */
  max-width: 100%;
  box-sizing: border-box;
}

.trip-form__textarea {
  resize: vertical;
}

.trip-form__row {
  display: flex;
  gap: var(--space-sm);
}

.trip-form__actions {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

/* --- Übersicht ------------------------------------------------------------ */

.trip-overview__head {
  margin-bottom: var(--space-md);
}

.trip-list,
.trip-place-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.trip-card,
.trip-place {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.trip-card__text,
.trip-place__text {
  min-width: 0;
}

.trip-card__name,
.trip-place__name {
  margin: 0 0 var(--space-xs);
}

.trip-card__actions,
.trip-place__actions,
.trip-detail__head-actions {
  display: flex;
  gap: var(--space-sm);
  flex-shrink: 0;
}

/* --- Detailansicht -------------------------------------------------------- */

.trip-detail__back {
  margin-bottom: var(--space-md);
}

.trip-detail__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.trip-detail__name {
  margin: 0;
}

.trip-detail__meta,
.trip-detail__note {
  margin: var(--space-xs) 0 0;
}

.trip-detail__note {
  white-space: pre-wrap;
}

/* Hinweis auf Ziele, die inzwischen nicht mehr veröffentlicht sind. Ohne ihn
   verschwänden sie kommentarlos aus dem Plan. */
.trip-detail__warning {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-background);
  border-left: 3px solid var(--color-danger);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

.trip-detail__edit,
.trip-place-list {
  margin-top: var(--space-md);
}

.trip-detail__section {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.trip-detail__section summary {
  cursor: pointer;
  font-weight: 600;
}

.trip-detail__favorites {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.trip-detail__favorite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
}

/* --- Filter nach Ausflugsplan --------------------------------------------- */

/* Optik des Filter-Knopfes nebenan, nur zurückhaltender: der Filter ist die
   Hauptsache, der Plan eine zusätzliche Einschränkung. Erst wenn ein Plan
   aktiv ist, tritt der Knopf farblich hervor - dann muss erkennbar sein,
   dass die Karte gerade nur einen Ausschnitt zeigt. */
.trip-filter__btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  flex-shrink: 0;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  max-width: 220px;
}

.trip-filter__btn[hidden] {
  display: none;
}

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

.trip-filter__btn--open {
  border-color: var(--color-primary);
}

.trip-filter__btn--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.trip-filter__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Ein langer Planname darf den Knopf nicht in die Breite ziehen. */
.trip-filter__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Eigener Block unter der Kopfzeile, im Fluss statt als Aufklappmenü am
   Knopf: die zugeklappte Filterspalte schneidet ihren Inhalt ab
   (overflow: hidden, css/responsive.css), ein absolut positioniertes Menü
   wäre dort unsichtbar. Deshalb lässt der Knopf die Spalte mit aufgehen und
   der Bereich erscheint darin. */
.trip-filter__menu {
  padding: var(--space-sm) var(--space-md) var(--space-md);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.trip-filter__menu[hidden] {
  display: none;
}

.trip-filter__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.trip-filter__option {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-xs);
  border-radius: var(--radius-sm);
}

.trip-filter__option:hover {
  background: var(--color-background);
}

.trip-filter__option input {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.trip-filter__option-label {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  justify-content: space-between;
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

.trip-filter__option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trip-filter__option-count {
  flex-shrink: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted);
}

@media (min-width: 1024px) {
  /* In der Spaltenansicht steht der Plan-Knopf UNTER dem Filter-Knopf, nicht
     daneben: geschlossen ist die Spalte nur 56px breit, nebeneinander wäre
     dort für keines von beiden Platz. Auf schmalen Anzeigen bleibt es bei
     der Zeile aus der Grundregel oben. */
  .filter-panel:not(.filter-panel--open) .filter-panel__bar {
    flex-direction: column;
  }

  /* Wie der Filter-Knopf darüber: Sinnbild und Wort untereinander, damit auf
     56px erkennbar bleibt, worum es geht. */
  .filter-panel:not(.filter-panel--open) .trip-filter__btn {
    flex-direction: column;
    gap: var(--space-xs);
    width: 100%;
    max-width: none;
    padding: var(--space-sm) var(--space-xs);
  }

  .filter-panel:not(.filter-panel--open) .trip-filter__label {
    font-size: 0.7rem;
    letter-spacing: 0.03em;
    max-width: 100%;
  }

  /* Bei offener Filterspalte teilt sich die Kopfzeile den Platz mit Titel
     und Schliessen-Knopf - der Plan-Knopf rutscht dann in die zweite Zeile,
     statt alles zusammenzuquetschen. */
  .filter-panel--open .filter-panel__bar {
    flex-wrap: wrap;
  }

  .filter-panel--open .trip-filter__btn {
    order: 3;
    width: 100%;
    max-width: none;
  }
}

/* --- Schmale Anzeigen ----------------------------------------------------- */

@media (max-width: 600px) {
  /* Nebeneinander bliebe für Name und Knöpfe je die halbe Breite - zu wenig
     für beides. */
  .trip-card,
  .trip-place {
    flex-direction: column;
    align-items: stretch;
  }

  .trip-card__actions,
  .trip-place__actions {
    justify-content: flex-end;
  }

  .trip-form__row {
    flex-direction: column;
  }
}