/* ===========================================================================
   Dialoge und Bildwähler — von Adminbereich UND Frontend gebraucht
   ===========================================================================

   Hier steht, was beide Bereiche brauchen. Der Anlass: der Knopf „Bilder von
   TMDB" hängt seit der Bildwahl auf den Filmseiten auch im Frontend
   (frontend/templates/utils/bilder_knoepfe.twig), und er öffnet denselben
   Dialog wie „Film bearbeiten" im Adminbereich — static/js/backdrop_dialog.js.
   Dessen Kacheln, Marken und Auswahlkästchen wurden aber ausschliesslich in
   static/css/admin.css beschrieben, und das lädt das Frontend nicht. Der
   Dialog erschien dort als ungestylte Bilderliste: volle Bildbreite, Kästchen
   irgendwo darunter, keine Marken.

   Doppelt pflegen wäre die schlechtere Antwort gewesen — zwei Fassungen
   derselben Kachel laufen auseinander, und beim nächsten Mal fällt es wieder
   im Frontend auf. Deshalb liegt es jetzt einmal hier, und beide skeleton.twig
   binden diese Datei ein.

   Was hier NICHT hingehört: alles, was nur der Adminbereich zeichnet (die
   Übersichtskacheln der Verwaltung, die Zeichen-Tafel, die Statistik). Das
   bleibt in admin.css.
   =========================================================================== */

/* --------------------------------------------------- leere Listen */

.cnl-leer {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--bs-secondary-color);
}

.cnl-leer .bi { font-size: 2.5rem; opacity: .4; display: block; margin-bottom: .5rem; }

/* --------------------------------------------------------------------------
   Hintergrundbilder: Bildwähler (static/js/hintergrund_wahl.js) und die
   Karten, mit denen Profil und Verwaltung die aktuelle Wahl je Seite zeigen.
   -------------------------------------------------------------------------- */

/* eine anklickbare Vorschau. 16:9, weil jedes Backdrop dieses Format hat -
   ein festes Verhältnis hält die Reihe ruhig, auch während die Bilder laden */
.cnl-hg-kachel {
  position: relative;
  flex: 0 0 auto;
  width: 12rem;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: 2px solid transparent;
  border-radius: .4rem;
  overflow: hidden;
  background: var(--bs-secondary-bg);
  cursor: pointer;
}

.cnl-hg-kachel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cnl-hg-kachel:hover      { border-color: var(--bs-primary); }
.cnl-hg-kachel:focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.cnl-hg-kachel.ist-gewaehlt  { border-color: var(--bs-primary); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .3); }

/* Beschriftung nur beim Überfahren: im Ruhezustand soll das Bild wirken,
   beim Suchen will man wissen, wozu es gehört */
.cnl-hg-kachel-text {
  position: absolute;
  inset: auto 0 0 0;
  padding: .2rem .4rem;
  font-size: .75rem;
  text-align: left;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, .75));
  opacity: 0;
  transition: opacity .15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cnl-hg-kachel:hover .cnl-hg-kachel-text { opacity: 1; }

/* waagrecht scrollende Reihe je Film - ein Film mit dreissig Bildern soll
   die Trefferliste nicht über den ganzen Bildschirm ziehen */
.cnl-hg-reihe {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-bottom: .5rem;
}

.cnl-hg-reihe-umbruch { flex-wrap: wrap; overflow-x: visible; }

.cnl-hg-film {
  padding: .75rem 0;
  border-top: 1px solid var(--bs-border-color-translucent);
}

.cnl-hg-film:first-child { border-top: 0; }
.cnl-hg-film-kopf        { margin-bottom: .4rem; }

.cnl-hg-mediathek-eintrag { position: relative; }

.cnl-hg-mediathek-eintrag .cnl-hg-loeschen {
  position: absolute;
  top: .3rem;
  right: .3rem;
  padding: .1rem .35rem;
  line-height: 1;
  background: var(--bs-body-bg);
}

/* Die Karte je Seite in Profil und Verwaltung: Vorschau oben, darunter der
   Name der Seite und die Knöpfe. */
.cnl-hg-karte {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--bs-body-bg);
}

.cnl-hg-karte-bild {
  aspect-ratio: 16 / 9;
  background: var(--bs-secondary-bg);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bs-secondary-color);
  font-size: .8rem;
  text-align: center;
  padding: .5rem;
}

.cnl-hg-karte-text { padding: .75rem; flex: 1 1 auto; }
.cnl-hg-karte-fuss { padding: 0 .75rem .75rem; display: flex; gap: .4rem; flex-wrap: wrap; }

.cnl-hg-quelle {
  font-size: .8rem;
  color: var(--bs-secondary-color);
  margin-top: .35rem;
}

/* Der TMDB-Dialog (static/js/backdrop_dialog.js) benutzt dieselben Kacheln,
   legt aber Auswahlkästchen und eine Marke darauf. */
.cnl-hg-kachel .cnl-bd-haken {
  position: absolute;
  top: .35rem;
  left: .35rem;
  margin: 0;
  cursor: pointer;
}

.cnl-hg-kachel .cnl-bd-marke {
  position: absolute;
  top: .3rem;
  right: .3rem;
  font-size: .7rem;
}

/* schon vorhandene Bilder sind nicht wählbar - das soll man sehen, ohne es
   erst durch einen wirkungslosen Klick herauszufinden */
.cnl-hg-kachel.ist-vorhanden        { cursor: default; opacity: .55; }
.cnl-hg-kachel.ist-vorhanden:hover  { border-color: transparent; }

/* die Kachel ist im TMDB-Dialog ein <label> - ohne das säße die Beschriftung
   unter dem Bild statt darauf */
label.cnl-hg-kachel { display: block; }

/* Der Plakat-Dialog (static/js/poster_dialog.js) benutzt dieselben Kacheln,
   nur hochkant: 2:3 statt 16:9. object-fit bleibt cover - die Plakate bei TMDB
   haben durchweg dieses Verhältnis, beschnitten wird also nichts.

   Schmaler als die Backdrop-Kachel, dafür stehen mehr davon nebeneinander: bei
   einem Film mit dreissig Plakaten geht es ums Vergleichen, und dafür ist eine
   Übersicht mehr wert als vier grosse Bilder. */
.cnl-pl-reihe .cnl-hg-kachel {
  width: 9rem;
  aspect-ratio: 2 / 3;
}

/* Während ein Plakat geholt wird, liegt ein Schleier mit Spinner darauf und
   der ganze Dialog nimmt keine Klicks mehr an - sonst wählte man in den ein
   bis zwei Sekunden ein zweites, und welches am Ende läge, entschiede die
   Reihenfolge der Antworten. */
.cnl-pl-laedt {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: rgba(0, 0, 0, .55);
}

.modal.cnl-laedt .cnl-hg-kachel { pointer-events: none; }

/* ---------------------------------------------------------------------------
   sweetalert2
   ---------------------------------------------------------------------------
   Die Bibliothek bringt eigene Farben mit, die neben Bootstrap fremd wirken -
   vor allem im dunklen Thema, wo sie weiss bleibt. background und color setzt
   api.js je Dialog auf die Bootstrap-Variablen; hier steht, was sich nicht als
   Option mitgeben lässt. */

.cnl-swal {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}

.cnl-swal .swal2-title      { font-size: 1.25rem; }
.cnl-swal .swal2-html-container { color: var(--bs-body-color); }
.cnl-swal .swal2-actions    { gap: 0; }

/* die Vorschau im Ersetzen-Dialog: das Bild kann hochkant oder breit sein und
   darf den Dialog in keiner Richtung sprengen */
.cnl-swal-vorschau {
  max-width: 100%;
  max-height: 220px;
  object-fit: contain;
  border-radius: var(--bs-border-radius-sm);
  background-color: var(--bs-tertiary-bg);
}


/* ---------------------------------------------------------------------------
   Etikettenwahl im Melde-Dialog (static/js/bugmelder.js)
   ---------------------------------------------------------------------------
   Steht hier und nicht in admin.css: den Dialog gibt es in beiden Bereichen,
   und diese Datei binden beide skeleton.twig ein.

   Ein Abzeichen in der Farbe des Etiketts, das zugleich ein Kästchen ist. Die
   Markierung folgt dem Zustand des Kästchens selbst (:has) - es gibt keinen
   zweiten Ort, an dem steht, was gewählt ist. Dieselbe Bauart wie die
   Plakatwahl im Adminbereich (.cnl-plakatwahl in admin.css). */

.cnl-etiketten-wahl {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}

.cnl-etikett-wahl {
  position: relative;
  cursor: pointer;
  border-radius: 2rem;
  padding: .25rem .7rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  /* ungewählt bleibt es blass: die Farbe des Etiketts ist die Auskunft
     „das ist gewählt", nicht bloss Schmuck */
  background: transparent;
}

/* Das Kästchen bleibt bedienbar, ist aber nicht zu sehen - das Abzeichen ist
   die Auswahl. display:none nähme es dem Tabulator, deshalb nur unsichtbar. */
.cnl-etikett-wahl input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.cnl-etikett-wahl:hover { border-color: var(--bs-secondary-color); }

.cnl-etikett-wahl:has(input:checked) {
  background: var(--cnl-et-bg, var(--bs-secondary));
  color: var(--cnl-et-fg, #fff);
  border-color: transparent;
}

.cnl-etikett-wahl:has(input:focus-visible) {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
}