/* reskin-tv.css — §RESKIN-TV (Cloder 2026-07-23)
   ────────────────────────────────────────────────────────────────────────────
   TV-Startseite nach publicore-reskin-preview-tv_2.html. Eigene, disjunkte Ebene
   NEBEN dem Desktop-Reskin (reskin-startseite.css): gescoped auf `body.app-tv`
   (echter TV-Marker, App.IS_TV = Tizen/webOS — NICHT app-desktop, das auf einem
   echten TV gar nicht gesetzt ist). Nutzt die GLOBALE --pc-*-Token-Ebene aus
   reskin-startseite.css (themeabhängig, geräteunabhängig) → Farben stimmen von
   selbst; hier nur Layout/Optik. `!important` + hohe Spezifität, weil die Theme-
   CSS (theme-*.css) für TV eigene Regeln setzt und teils NACH dieser Datei lädt.

   Optische Wahrheit: publicore-reskin-preview-tv_2.html. Fokusring = HOSTERFARBE
   der markierten Kachel (var(--card-glow), pro Kachel inline gesetzt). Kein Deploy
   ohne User-Go (BUG-13).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 1) Sidebar-Nav (250px-Kontext, größere TV-Items) ───────────────────────── */
body.app-tv #sidebar .nav-item {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  text-align: left !important;
  height: 46px !important;
  gap: 14px !important;
  padding: 0 14px !important;
  border-radius: 11px !important;
  color: var(--pc-muted) !important;
  margin-bottom: 3px !important;
}
body.app-tv #sidebar .nav-item .nav-label {
  font-size: 16px !important; font-weight: 500 !important; line-height: 1.2 !important;
}
body.app-tv #sidebar .nav-icon { width: 23px !important; height: 23px !important; color: inherit !important; }
/* Aktiv = getönte Fläche + Akzent-Streifen (kein Puls-Glow), auch wenn zugleich .focused. */
body.app-tv #sidebar .nav-item.active,
body.app-tv #sidebar .nav-item.active.focused {
  background: var(--pc-active) !important;
  border-color: transparent !important;
  color: var(--pc-text) !important;
  box-shadow: inset 4px 0 0 var(--pc-accent) !important;
  animation: none !important;
}
body.app-tv #sidebar .nav-item.active .nav-icon,
body.app-tv #sidebar .nav-item.active.focused .nav-icon { color: var(--pc-text) !important; }
/* D-Pad-Fokus auf ein Nav-Item: Akzent-Umrandung. */
body.app-tv #sidebar .nav-item.focused:not(.active) {
  background: var(--pc-soft) !important;
  box-shadow: inset 0 0 0 2px var(--pc-accent) !important;
  color: var(--pc-text) !important;
}

/* ── 2) Topbar: Suchleiste + Aktionen ───────────────────────────────────────── */
body.app-tv #search-bar {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 11px !important;
  box-shadow: none !important; animation: none !important;
  color: var(--pc-muted) !important;
}
body.app-tv #search-bar.focused {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent), 0 0 18px var(--pc-glow) !important;
}
body.app-tv #header-actions { display: flex !important; align-items: center !important; gap: 16px !important; }

/* ── 3) Connect-Banner (nur ohne verbundenes Konto sichtbar; Logik in App) ───── */
body.app-tv #connect-banner {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 12px !important;
  margin-bottom: 22px !important;
}

/* ── 4) Sektions-Segment „Alle | Live | Videos" ─────────────────────────────── */
body.app-tv #filter-tabs .filter-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; border-color: var(--pc-accent) !important;
}
body.app-tv #filter-tabs .filter-tab.active svg { stroke: #0a0c12 !important; }
body.app-tv #filter-tabs .filter-tab:not(.active) {
  background: transparent !important; color: var(--pc-muted) !important;
}
body.app-tv #filter-tabs .filter-tab.focused {
  box-shadow: inset 0 0 0 2px var(--pc-accent) !important;
}

/* ── 5) Hoster-Chips (dunkle Flächen-Pillen, Logo im hosterfarbenen Quadrat) ──── */
body.app-tv #session-platform-bar .sc-bubble {
  background: var(--pc-surface) !important;
  border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 21px !important;
}
body.app-tv #session-platform-bar .sc-bubble.focused {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent) !important;
}

/* ── 6) Kacheln: Hosterfarben-Rahmen, TV-Textgrößen, FOKUSRING = HOSTERFARBE ──── */
/* Titel 2 Zeilen reserviert (Ausrichtung von Creator/Views bleibt stabil). */
body.app-tv .video-card .card-title {
  font-size: 17px !important; line-height: 1.28 !important;
  min-height: calc(1.28em * 2) !important; max-height: calc(1.28em * 2) !important;
}
body.app-tv .video-card .card-creator,
body.app-tv .video-card .card-creator-name { font-size: 14px !important; }
body.app-tv .video-card .card-views,
body.app-tv .video-card .card-viewers-live,
body.app-tv .video-card .card-meta-row,
body.app-tv .video-card .card-uploaded,
body.app-tv .video-card .card-duration { font-size: 13px !important; }
/* Thumbnail-Rahmen in Hosterfarbe (--card-glow ist pro Kachel inline gesetzt). */
body.app-tv .video-card .card-thumbnail {
  border: 1.5px solid var(--card-glow, var(--pc-border)) !important;
  border-radius: 14px !important;
}
/* D-Pad-Fokus: kräftiger Hosterfarben-Ring + Glow (das TV-Kernmerkmal). */
body.app-tv .video-card.focused .card-thumbnail {
  outline: 3px solid var(--card-glow, var(--pc-accent)) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--card-glow, var(--pc-accent)) 15%, transparent),
              0 0 30px color-mix(in srgb, var(--card-glow, var(--pc-accent)) 35%, transparent) !important;
}
body.app-tv .video-card.focused .card-title { color: var(--pc-text) !important; }

/* ── 7) Bottom-Bar (#hint-bar = native D-Pad-Leiste; auf TV BEHALTEN + stylen) ── */
body.app-tv #hint-bar {
  background: var(--pc-surface) !important;
  border-top: 1px solid var(--pc-border) !important;
  color: var(--pc-muted) !important;
}
body.app-tv #content { padding-bottom: 76px !important; }

/* ════════════════════════════════════════════════════════════════════════════
   §RESKIN-TV EINSTELLUNGEN (Phase T2, Cloder 2026-07-24)
   TV-Einstellungen nach nocturne-Designsprache (identisch zur abgenommenen
   Startseite). Optische Wahrheit: PubliCore-Reskin-Spec §4.2/§7.2 + die bereits
   abgenommene reskin-startseite-Sprache. Gescoped body.app-tv, GLOBALE --pc-*.
   D-Pad-Fokusmodell (verifiziert settings.js:1355 getButtons + :1375 getTabButtons):
   NUR `#settings-tabbar .settings-tab` (Tab-Bubbles) und `.platform-btn:not(.settings-tab)`
   + `.platform-accordion-toggle` bekommen `.focused`. Toggles/Inputs/Karten liegen
   NICHT im TV-D-Pad-Strom → dafür keine erfundenen Fokusregeln. Kein Deploy (BUG-13).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 8) Seiten-Titel „Einstellungen" ────────────────────────────────────────── */
body.app-tv #section-settings .section-title {
  color: var(--pc-text) !important;
  font-size: 26px !important; font-weight: 700 !important; letter-spacing: 0.2px !important;
}

/* ── 9) Tab-Bubbles (Schnell-Kopplung | Accounts | Darstellung | Rechtliches) ── */
body.app-tv #settings-tabbar { gap: 10px !important; }
body.app-tv #settings-tabbar .settings-tab {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-muted) !important;
  border-radius: 21px !important;
  font-size: 15px !important;
  box-shadow: none !important; animation: none !important;
}
body.app-tv #settings-tabbar .settings-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; border-color: var(--pc-accent) !important;
}
body.app-tv #settings-tabbar .settings-tab.focused {
  border-color: var(--pc-accent) !important; color: var(--pc-text) !important;
  box-shadow: 0 0 0 2px var(--pc-accent), 0 0 20px var(--pc-glow) !important;
}
body.app-tv #settings-tabbar .settings-tab.active.focused {
  color: #0a0c12 !important;
  box-shadow: 0 0 0 2px var(--pc-accent), 0 0 20px var(--pc-glow) !important;
}

/* ── 10) Gruppen-Panels + Titel ─────────────────────────────────────────────── */
body.app-tv #section-settings .settings-group {
  background: var(--pc-surface) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 16px !important;
  margin-bottom: 18px !important;
}
body.app-tv #section-settings .settings-group-title {
  color: var(--pc-text) !important;
  font-size: 18px !important; font-weight: 600 !important;
  border-bottom: 1px solid var(--pc-border) !important;
}

/* ── 11) Optionszeilen (Pillen) ─────────────────────────────────────────────── */
body.app-tv #section-settings .settings-info,
body.app-tv #section-settings .settings-info-pill {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  border-radius: 12px !important;
}
body.app-tv #section-settings .settings-info-title,
body.app-tv #section-settings .profile-name-label { color: var(--pc-text) !important; font-size: 16px !important; }
body.app-tv #section-settings .settings-info-desc { color: var(--pc-muted) !important; font-size: 14px !important; }
body.app-tv #section-settings .settings-info-icon { font-size: 22px !important; }

/* ── 12) Toggle-Schalter — AN-Zustand in Akzentfarbe (statt neon-pink) ───────── */
/* (Toggles sind auf TV nicht im D-Pad-Strom; nur die Optik ans Theme angleichen.) */
body.app-tv .pc-switch input:checked + .pc-switch-track {
  background: var(--pc-accent) !important; border-color: var(--pc-accent) !important;
}
body.app-tv .pc-switch input:focus + .pc-switch-track {
  box-shadow: 0 0 0 2px var(--pc-accent) !important;
}

/* ── 13) Buttons (Verknüpfen/Trennen/Design-Dropdown/Accordion) ─────────────── */
body.app-tv #section-settings .platform-btn {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 11px !important;
  font-size: 15px !important;
  box-shadow: none !important; animation: none !important;
}
/* Primär (Verknüpfen / Speichern) = Akzent-Füllung, dunkle Schrift. */
body.app-tv #section-settings .platform-btn.link {
  background: var(--pc-accent) !important; border-color: var(--pc-accent) !important; color: #0a0c12 !important;
}
/* Sekundär/Destruktiv (Trennen / Zurücksetzen) = Live-Rot-Kontur. */
body.app-tv #section-settings .platform-btn.unlink {
  background: transparent !important; border-color: var(--pc-live) !important; color: var(--pc-live) !important;
}
/* D-Pad-Fokus auf jeden Settings-Button/Accordion = Akzent-Ring (TV-Kernmerkmal). */
body.app-tv #section-settings .platform-btn:not(.settings-tab).focused,
body.app-tv #section-settings .platform-accordion-toggle.focused,
body.app-tv #section-settings .pc-dd-trigger.focused {
  border-color: var(--pc-accent) !important;
  color: var(--pc-text) !important;
  box-shadow: 0 0 0 2px var(--pc-accent), 0 0 18px var(--pc-glow) !important;
}
/* Fokus auf primärem Button: dunkle Schrift beibehalten, nur Ring dazu. */
body.app-tv #section-settings .platform-btn.link.focused { color: #0a0c12 !important; }
/* Fokus auf destruktivem Button: Rot-Ring statt Akzent. */
body.app-tv #section-settings .platform-btn.unlink.focused {
  border-color: var(--pc-live) !important; color: var(--pc-live) !important;
  box-shadow: 0 0 0 2px var(--pc-live), 0 0 18px color-mix(in srgb, var(--pc-live) 40%, transparent) !important;
}

/* ── 14) Design-Dropdown-Feld + Farbwähler-Zeilen ──────────────────────────── */
body.app-tv #section-settings .pc-dd-trigger {
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; color: var(--pc-text) !important;
}
body.app-tv #section-settings .pc-dd-caret { color: var(--pc-muted) !important; }
body.app-tv #section-settings .ct-pick { color: var(--pc-muted) !important; }
body.app-tv #section-settings .ct-name-input {
  background: var(--pc-surface) !important; border: 1px solid var(--pc-border) !important; color: var(--pc-text) !important;
}

/* ── 15) Theme-Popup (Design-Auswahl mit Theme-Karten) ──────────────────────── */
body.app-tv #theme-popup-box {
  background: var(--pc-surface) !important; border: 1px solid var(--pc-border) !important; border-radius: 18px !important;
}
body.app-tv #theme-popup .theme-popup-title { color: var(--pc-text) !important; }
body.app-tv #theme-popup .theme-popup-tabs .settings-tab {
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; color: var(--pc-muted) !important;
}
body.app-tv #theme-popup .theme-popup-tabs .settings-tab.active {
  background: var(--pc-accent) !important; color: #0a0c12 !important; border-color: var(--pc-accent) !important;
}
body.app-tv #theme-popup .theme-card {
  background: var(--pc-surface2) !important; border: 1.5px solid var(--pc-border) !important;
  color: var(--pc-text) !important; border-radius: 12px !important;
}
/* Aktives (aktuelles) Theme = Akzent-Kontur (JS setzt ' active' auf die Karte). */
body.app-tv #theme-popup .theme-card.active {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 1px var(--pc-accent) !important;
}
/* D-Pad-Fokus im Theme-Grid = Akzent-Ring + Glow. */
body.app-tv #theme-popup .theme-card.focused {
  border-color: var(--pc-accent) !important;
  box-shadow: 0 0 0 3px var(--pc-accent), 0 0 22px var(--pc-glow) !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   §RESKIN-TV PLAYER (Phase T3, Cloder 2026-07-24)
   TV-Player-Chrome nach nocturne. Auf echtem TV läuft der D-Pad-Player
   (#player-controls + .player-ctl + #player-info) — NICHT #player-desktop
   (das ist App.IS_DESKTOP-exklusiv, player-desktop.js:7). D-Pad-Fokus auf
   .player-ctl verifiziert (player.js:149 bar.querySelectorAll('.player-ctl')),
   .sub-choice-btn (player.js:3127/3148). Gescoped body.app-tv, globale --pc-*.
   Kein Deploy (BUG-13).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── 16) Info-Leiste unten (Name → Titel → Zuschauer/Kategorie) ─────────────── */
body.app-tv #player-info {
  background: var(--pc-surface) !important;
  border-top: 1px solid var(--pc-border) !important;
}
body.app-tv #player-info-name { color: var(--pc-text) !important; }
body.app-tv #player-info-title { color: var(--pc-muted) !important; }
body.app-tv .pi-viewers { color: var(--pc-live) !important; }   /* Live-Zahl bleibt rot */
body.app-tv .pi-game { color: var(--pc-muted) !important; }

/* ── 17) Steuer-Buttons (Zurück / Profil / Folgen) + D-Pad-Fokus ────────────── */
body.app-tv .player-ctl {
  background: var(--pc-surface) !important;   /* deckend: universell (kein color-mix) + auf 4 m über Video gut lesbar */
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
  border-radius: 12px !important;
}
/* D-Pad-Fokus = statischer Akzent-Ring + Glow (kein breathe-sys-Puls, wie im
   restlichen TV-Reskin). */
body.app-tv .player-ctl:hover,
body.app-tv .player-ctl.focused {
  border-color: var(--pc-accent) !important;
  color: var(--pc-text) !important;
  box-shadow: 0 0 0 2px var(--pc-accent), 0 0 20px var(--pc-glow) !important;
  animation: none !important;
}
/* „Gefolgt"-Zustand behält die semantische Grün-Rückmeldung (verknüpft = grün). */
body.app-tv .player-ctl-follow.following {
  border-color: rgba(34,197,94,0.6) !important; color: var(--linked, #4ade80) !important;
}
body.app-tv .player-ctl-follow.following.focused {
  border-color: var(--linked, #4ade80) !important; color: #dcfce7 !important;
  box-shadow: 0 0 0 2px var(--linked, #4ade80), 0 0 20px rgba(34,197,94,0.35) !important;
}

/* ── 18) Fehler-Box + Aktions-Button ────────────────────────────────────────── */
body.app-tv #player-error {
  background: var(--pc-surface) !important;
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}
body.app-tv #player-error .pd-err-action {
  background: var(--pc-accent) !important; border-color: var(--pc-accent) !important; color: #0a0c12 !important;
}

/* ── 19) Player-Dialoge (Folgen-QR / Abo-Auswahl / Playlist) ─────────────────── */
body.app-tv #follow-modal-box,
body.app-tv #sub-choice-box,
body.app-tv #playlist-picker-box {
  background: var(--pc-surface) !important;
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}
body.app-tv #follow-modal-title,
body.app-tv #sub-choice-title,
body.app-tv #playlist-picker-title { color: var(--pc-text) !important; }
body.app-tv #follow-modal-desc,
body.app-tv #follow-modal-hint,
body.app-tv #sub-choice-desc { color: var(--pc-muted) !important; }
/* Abo-Auswahl-Optionen: Pillen mit Akzent-Fokusring. */
body.app-tv .sub-choice-btn {
  background: var(--pc-surface2) !important;
  border: 1px solid var(--pc-border) !important;
  color: var(--pc-text) !important;
}
body.app-tv .sub-choice-btn:hover,
body.app-tv .sub-choice-btn.focused {
  border-color: var(--pc-accent) !important; color: var(--pc-text) !important;
  box-shadow: 0 0 0 2px var(--pc-accent), 0 0 18px var(--pc-glow) !important;
  animation: none !important;
}
body.app-tv #playlist-picker-newname {
  background: var(--pc-surface2) !important; border: 1px solid var(--pc-border) !important; color: var(--pc-text) !important;
}