/*
 * AnimeRadar v2.4.239 - gezielte Korrekturen in Seasons, Mein Planer,
 * Entdecken und Bibliothek.
 *
 * Kein neues Seitendesign: jede Regel gleicht einen gemeldeten Punkt an die
 * bereits vorhandene Bildsprache an. Vorbild fuer die Listenansichten ist
 * Entdecken, Vorbild fuer die Aufklappfelder ist .ar-select.
 *
 * Gemessene Zielwerte:
 *   Aufklappfeld   Rand rgba(167, 187, 195, .18), Radius 8, Text 12/500,
 *                  Menue #161a1a mit Radius 10 und 6 px Innenabstand,
 *                  Option 40 hoch mit Radius 7
 *   Listenzeile    Flaeche rgba(30, 28, 34, .62), Rand rgba(64, 58, 66, .74),
 *                  Radius 12 (Entdecken)
 */

/* ========================================================================== */
/* 1. Seasons - Aufklappfeld "Archiv" wie die uebrigen Felder der Seite       */
/* ========================================================================== */

/* Bisher kam das Feld aus material-targeted-fixes-v2-4-214.css mit eigener
   Flaeche (rgba(15, 20, 24, .86)), eigenem Rand, Radius 10 und 13/650.
   Uebernommen wird jetzt die Optik von .ar-select. Die Hoehe bleibt bei 46,
   weil das Feld in der Reihe der Season-Schaltflaechen steht und diese 46
   hoch sind - ein 38 hohes Feld wuerde in der Zeile springen. */
html body #view-season .seasons-archive > summary {
  height: 46px !important;
  min-height: 46px !important;
  grid-template-columns: minmax(0, 1fr) 14px !important;
  gap: 10px !important;
  padding: 0 14px !important;
  border: 1px solid rgba(167, 187, 195, .18) !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #f1f3f5 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}

html body #view-season .seasons-archive > summary:hover {
  border-color: rgba(167, 187, 195, .34) !important;
}

html body #view-season .seasons-archive[open] > summary,
html body #view-season .seasons-archive > summary:focus-visible {
  border-color: rgb(189, 41, 56) !important;
}

/* Chevron wie .ar-select-arrow: gleiche Groesse, gleiche Farbe. */
html body #view-season .seasons-archive > summary::after {
  width: 8px !important;
  height: 8px !important;
  border-right: 1.8px solid #f1f3f5 !important;
  border-bottom: 1.8px solid #f1f3f5 !important;
}

/* Die Regel in material-reference-planner-season-v2-4-194.css haengt an
   .season-year-dropdown.seasons-archive[open] und ist damit staerker - die
   Menueregel hier muss dieselbe Tiefe haben. */
html body #view-season .season-year-dropdown.seasons-archive[open] .season-year-menu {
  padding: 6px !important;
  border: 1px solid rgba(167, 187, 195, .18) !important;
  border-radius: 10px !important;
  background: rgb(22, 20, 26) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .46) !important;
}

html body #view-season .season-year-dropdown.seasons-archive .season-year-option {
  min-height: 40px !important;
  border-radius: 7px !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}

/* Ausgewaehlt und Hover kommen aus den Tokens von V2.4.232. */
html body #view-season .season-year-dropdown.seasons-archive .season-year-option:hover,
html body #view-season .season-year-dropdown.seasons-archive .season-year-option:focus-visible,
html body #view-season .season-year-dropdown.seasons-archive .season-year-option.is-active {
  background: var(--ar-selected-row-bg, rgba(255, 64, 78, .16)) !important;
  color: #fff !important;
}

/* ========================================================================== */
/* 2. Seasons - Listenansicht in der transparenten Optik von Entdecken        */
/* ========================================================================== */

/* Die Karten trugen einen deckenden Verlauf (#11171a nach #0c1114). In der
   Listenansicht von Entdecken liegt eine durchscheinende Flaeche auf dem
   Seitenhintergrund. Nur Flaeche, Rand und Schatten aendern sich - Aufbau,
   Bildgroesse und Typografie der Karten bleiben. */
html body #view-season .seasons-body.is-list .seasons-card {
  border: 1px solid rgba(64, 58, 66, .74);
  border-radius: 12px;
  background: rgba(30, 28, 34, .62);
  box-shadow: none;
}

html body #view-season .seasons-body.is-list .seasons-card:hover {
  border-color: rgba(255, 64, 78, .38);
  background: rgba(38, 34, 42, .72);
}

/* Das Bild behaelt seine eigene Flaeche, damit der Zuschnitt sichtbar bleibt. */
html body #view-season .seasons-body.is-list .seasons-card-art {
  border-radius: 11px 0 0 11px;
}

/* ========================================================================== */
/* 3. Seasons und Entdecken - Label "Ansicht:" wie in der Bibliothek          */
/* ========================================================================== */

html body #view-season .seasons-view-label,
html body #view-search .discover-view-label {
  flex: 0 0 auto;
  color: #c7cbce;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  white-space: nowrap;
}

/* Die Werkzeugleiste bleibt ausbalanciert: das Label steht direkt vor den
   beiden Schaltflaechen, der Abstand zur Sortierung waechst dadurch nicht. */
html body #view-season .seasons-reference-actions {
  gap: 8px;
}

html body #view-season .seasons-reference-actions > .seasons-view-label {
  margin-left: 4px;
}

html body #view-search .discover-toolbar-end > .discover-view-label {
  margin-left: 4px;
}

@media (max-width: 700px) {
  /* Auf schmalen Schirmen ist in der Zeile kein Platz fuer das Wort. */
  html body #view-season .seasons-view-label,
  html body #view-search .discover-view-label {
    display: none;
  }
}

/* ========================================================================== */
/* 4. Entdecken - Lesezeichen sitzt in der Listenansicht im Eintrag           */
/* ========================================================================== */

/* Gemessen: .search-card-bookmark steht mit top: 8px und right: 8px im
   Kartenraster. In der Listenansicht ist die Zeile nur 92 hoch, der Knopf
   stand dadurch 5 px ueber der Oberkante und weit rechts neben dem Bild.
   In der Zeile sitzt er jetzt senkrecht mittig am rechten Rand - ohne Titel,
   Bild oder Genres zu ueberdecken. */
/* Die Textspalte bekommt rechts Platz fuer den Knopf, damit lange Titel
   nie darunter laufen. */
html body #view-search .search-results.is-list .search-row > div.search-card-copy {
  padding-right: 48px;
}

html body #view-search .search-results.is-list .search-row .search-card-bookmark {
  top: 50% !important;
  right: 14px !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
}

/* ========================================================================== */
/* 5. Mein Planer - Wochentage im dunklen Grundton der Seite                  */
/* ========================================================================== */

/* Die Tagesflaechen trugen einen rotbraunen Verlauf
   (rgba(35, 23, 27, .88) nach rgba(20, 14, 17, .92)). Die uebrigen Flaechen
   der Seite sind neutral dunkel. Lesbarkeit, Hover und der heutige Tag
   bleiben erhalten, nur der Farbstich verschwindet. */
html body #view-planner .release-planner-day,
html body .release-planner-surface .release-planner-day {
  background-image: linear-gradient(180deg, rgba(24, 27, 31, .9), rgba(16, 19, 22, .94)) !important;
  border-color: rgba(255, 255, 255, .08) !important;
}

html body #view-planner .release-planner-day:hover,
html body .release-planner-surface .release-planner-day:hover {
  border-color: rgba(255, 255, 255, .16) !important;
}

html body #view-planner .release-planner-day.is-today,
html body .release-planner-surface .release-planner-day.is-today {
  border-color: rgba(255, 64, 78, .5) !important;
  background-image: linear-gradient(180deg, rgba(34, 24, 28, .92), rgba(18, 20, 24, .94)) !important;
}

/* ========================================================================== */
/* 6. Mein Planer - "Demnaechst faellig" ueber die volle Breite               */
/* ========================================================================== */

/* Die rechte Wiederholung derselben Liste ist entfernt. Ohne sie bleibt nur
   eine Spalte, die genauso breit ist wie der Wochenplaner darunter. */
html body #view-planner .planner-reference-layout {
  grid-template-columns: minmax(0, 1fr);
}

/* ========================================================================== */
/* 7. Bibliothek - Listenansicht in der Bildsprache von Entdecken             */
/* ========================================================================== */

/* Vorher: eine geschlossene Tabelle mit deckendem Rahmen (#1b0d10) und
   rotbrauner Kopfzeile (#2a181c) aus dem alten Design. Jetzt dieselbe
   Sprache wie die Listenansicht von Entdecken: durchscheinende Zeilen als
   eigene Karten, ruhiger Rand, Radius 12, Hover mit roter Kante. Die
   Spalten der Bibliothek und alle Daten bleiben unveraendert. */
html body #view-lists .library-list .library-list-shell {
  border: 0 !important;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
}

html body #view-lists .library-list .library-list-head {
  padding: 0 14px 8px;
  border: 0 !important;
  background: transparent !important;
  color: #9aa0a6 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body #view-lists .library-list .library-list-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

html body #view-lists .library-list .library-list-row {
  align-items: center;
  padding: 12px 14px;
  border: 1px solid rgba(64, 58, 66, .74) !important;
  border-radius: 12px;
  background: rgba(30, 28, 34, .62) !important;
  transition: border-color .16s ease, background .16s ease;
}

html body #view-lists .library-list .library-list-row:hover {
  border-color: rgba(255, 64, 78, .38) !important;
  background: rgba(38, 34, 42, .72) !important;
}

html body #view-lists .library-list .library-list-thumb {
  overflow: hidden;
  border-radius: 8px;
}

html body #view-lists .library-list .library-list-title {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 700;
}

html body #view-lists .library-list .library-list-sub {
  color: #a9b0b6;
  font-size: 12.5px;
}

/* Die Marken der Zeile folgen den ruhigen Chips aus Entdecken. */
html body #view-lists .library-list .library-list-row .tag {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #d4d8dc !important;
  font-size: 11.5px !important;
}

html body #view-lists .library-list .library-list-row .tag-live {
  border-color: rgba(255, 64, 78, .45) !important;
  background: rgba(229, 32, 46, .14) !important;
  color: #ffd2d6 !important;
}

html body #view-lists .library-list .library-list-row .list-name-badge {
  border: 1px solid rgba(255, 255, 255, .12) !important;
  background: rgba(255, 255, 255, .05) !important;
  color: #d4d8dc !important;
}

html body #view-lists .library-list .library-list-cell strong {
  color: #fff;
}

html body #view-lists .library-list .library-list-cell small {
  color: #9aa0a6;
}

html body #view-lists .library-list .progress-track {
  background: rgba(255, 255, 255, .1);
}

@media (max-width: 760px) {
  /* Mobil stapelt die Zeile bereits; nur Flaeche und Rand werden angeglichen. */
  html body #view-lists .library-list .library-list-head {
    display: none;
  }

  html body #view-lists .library-list .library-list-row {
    padding: 12px;
  }
}

/* ========================================================================== */
/* 8. Startseite - Giveaway-Bild und -Titel fuehren zur Giveaway-Seite        */
/* ========================================================================== */

/* Bild und Titel sind jetzt Verweise. Sie sollen aussehen wie vorher, nur
   mit Zeigerhand und Hover - keine Unterstreichung, keine zweite Farbe. */
html body #view-home .home-giveaway-link {
  color: inherit;
  font: inherit;
  text-decoration: none;
}

html body #view-home .home-giveaway-link:hover,
html body #view-home .home-giveaway-link:focus-visible {
  color: #ff6d78;
}

html body #view-home a.home-giveaway-media {
  display: block;
  text-decoration: none;
}
