/* ==========================================================================
   AnimeRadar V2.4.271 - Filter von Bibliothek und Kalender wie bei Entdecken

   Entdecken ist die Vorlage. Das Filterfenster selbst braucht hier keine
   Regeln: der gemeinsame Selektor
   :is(#searchFilterCard, #libraryFilterCard, #calendarFilters)
   traegt Kopf, Gruppen, Chips, Zaehler, Auswahlfelder und Schaltflaechen
   fuer alle drei Seiten aus derselben Quelle.

   Hier steht nur, was Entdecken nicht kennt:
     1. Bibliothek - der Filterknopf in der Werkzeugleiste
     2. Kalender  - die verborgenen Spiegel-Auswahlfelder
     3. Anbieterlogo im Chip
   ========================================================================== */

/* ==========================================================================
   1. Bibliothek: Filterknopf der Werkzeugleiste
   ==========================================================================
   V2.4.270 hatte dem Knopf die Klasse .discover-filter-button gegeben. Deren
   Regeln haengen aber saemtlich an #view-search:

     html body #view-search .discover-filter-button { ... }

   In der Bibliothek griff davon nichts. Der Knopf bekam die Standardoptik des
   Browsers - Grund rgb(107, 107, 107), Radius 0 - und sein eingebettetes
   Zeichen hatte weder Breite noch Hoehe. Ein <svg> mit viewBox und ohne Masse
   fuellt die verfuegbare Breite und leitet die Hoehe aus dem
   Seitenverhaeltnis ab: aus dem Knopf wurde ein grauer Block von Spaltenbreite
   mal Spaltenbreite.

   Der Knopf traegt jetzt nur noch .lib-reference-filter-button und wird hier
   bemasst - in der Formensprache seiner eigenen Zeile, nicht in der von
   Entdecken. Er steht neben der Sortierung (38 px) und der roten
   Ruecksetzen-Schaltflaeche (38 px, Radius 8), deshalb dieselbe Hoehe,
   derselbe Radius und dasselbe Zeichenmass wie dort. Die Angleichung an
   Entdecken betrifft das Filterfenster, nicht die Werkzeugleiste. */

html body #view-lists .lib-reference-filter-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
  height: 38px;
  min-height: 0;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--collection-border);
  border-radius: 8px;
  background: var(--collection-field);
  box-shadow: none;
  color: #ece6e9;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  text-transform: none;
  cursor: pointer;
}

html body #view-lists .lib-reference-filter-button:hover {
  border-color: var(--collection-red);
}

html body #view-lists .lib-reference-filter-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Die Zeile war auf vier Bedienelemente ausgelegt: Genre, Status, Sortierung,
   Zuruecksetzen. Genre und Status sind ins Filterfenster gewandert, es sind
   also drei. Ohne diese Zeile blieb die vierte Spalte leer und die drei
   uebrigen standen zu schmal. */
@media (min-width: 960px) {
  html body #view-lists .lib-reference-filter-row {
    grid-template-columns: .95fr 1.1fr 1.2fr;
  }
}

/* ==========================================================================
   2. Kalender: verborgene Spiegel-Auswahlfelder
   ==========================================================================
   Format, Herkunft, Genre, Studio, Anbieter und Synchronfassung werden ueber
   Chips bedient. Die gleichnamigen <select> bleiben im Dokument, weil das
   Programm an ihnen haengt - loadAnimationStudioOptions und
   loadSearchStreamingProviderOptions erkennen an ihrer Anwesenheit, dass die
   jeweilige Liste ueberhaupt gebraucht wird, und die Synchronfassung traegt
   ihren Wert weiterhin in #calendarDub.

   Sie duerfen nur nicht zu sehen sein - und mit ihnen der Stellvertreter
   .ar-select, den createSelectProxyFor direkt dahinter einsetzt. Das
   hidden-Attribut allein genuegt nicht: der Stellvertreter ist ein eigenes
   Element und bliebe sichtbar.

   #calendarSort ist davon nicht betroffen. Es steht in einem <label> und ist
   das einzige sichtbare Auswahlfeld der Lade - so wie Jahr und Status bei
   Entdecken. */
html body #calendarFilters .discover-filter-group > select,
html body #calendarFilters .discover-filter-group > .ar-select {
  display: none !important;
}

/* ==========================================================================
   3. Anbieterlogo im Chip
   ==========================================================================
   Die Anbieterchips des Kalenders zeigen das Senderlogo vor dem Namen.
   Entdecken kennt in seinen Chips kein Bild, deshalb steht das Mass hier. */
html body :is(#searchFilterCard, #libraryFilterCard, #calendarFilters) .discover-filter-chip img {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  margin-right: 7px;
  border-radius: 4px;
  object-fit: cover;
}