/* Streaming-style polish: loaded last. Subtle motion, cinematic cards, red accent. */
:root {
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --accent-primary: #e50914;
  --accent-hover: #f6121d;
  --bg-dark: #141414;
  --bg-card: #181818;
  --bg-sidebar: #0a0a0a;
  --bg-header: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), rgba(20, 20, 20, 0.75));
  --text-muted: #b3b3b3;
  --text-dim: #808080;
}

body { background: var(--bg-dark); }

.top-header { border-bottom: none; }
.sidebar { border-right: 1px solid rgba(255, 255, 255, 0.05); }

/* Cards: borderless posters that lift and scale gently on hover */
.media-card {
  position: relative;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
  animation: card-in 0.4s var(--ease-out) both;
  will-change: transform;
}
.media-card:hover {
  transform: scale(1.04);
  z-index: 5;
  border-color: transparent;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6);
}
.media-card .card-body { background: var(--bg-card); }
.card-poster img { transition: transform 0.5s var(--ease-out); }
.media-card:hover .card-poster img { transform: scale(1.04); }
.card-play-overlay { background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1)); }

/* Hero: cinematic bottom fade into the page */
.hero-player-banner { border: none; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.8); }

/* Buttons and interactive controls */
button, .btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease, opacity 0.2s ease; }
button:active { transform: scale(0.97); }

/* Gentle entrance for dialogs and overlays */
@keyframes card-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Grids: reserve room for the hover scale so cards are not clipped by
   overflow:hidden ancestors. Padding and negative margin cancel out. */
.media-grid,
.cw-grid,
.yt-video-grid,
.topic-feed-grid {
  padding: 8px;
  margin: -8px;
}

/* Sidebar: same surface language as the grid area */
/* Standard scrollbar properties override WebKit pseudo-elements in Chromium.
   Set both width and colour so a thin scrollbar never falls back to a white track. */
.sidebar {
  --sidebar-scroll-thumb: #454545;
  --sidebar-scroll-hover: #777;
  color-scheme: dark;
  scrollbar-width: thin;
  scrollbar-color: var(--sidebar-scroll-thumb) transparent;
}
.sidebar:hover,
.sidebar:focus-within { scrollbar-color: var(--sidebar-scroll-hover) transparent; }
.sidebar::-webkit-scrollbar { width: 8px; height: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--sidebar-scroll-thumb);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
  min-height: 40px;
}
.sidebar::-webkit-scrollbar-thumb:hover { background-color: var(--sidebar-scroll-hover); }
.sidebar::-webkit-scrollbar-corner { background: transparent; }
[data-theme="light"] .sidebar {
  --sidebar-scroll-thumb: #929292;
  --sidebar-scroll-hover: #626262;
  color-scheme: light;
}
@media (forced-colors: active) {
  .sidebar { scrollbar-color: auto; }
}
.type-menu li { transition: background-color 0.2s ease, color 0.2s ease; }

/* ==========================================================================
   Simplified sidebar menu
   One flat list: quiet section labels, flat group rows, one clear active state.
   ========================================================================== */

/* Media type: a single compact selector; the pin toggle is hidden to cut noise */
.sidebar-type-sticky { display: none; }
.sidebar-type-header { background: transparent; border-color: var(--border-color); padding: 8px 10px; }
.sidebar-type-heading { font-size: 10px; letter-spacing: 1px; }

/* Section label */
.sidebar-categories-section > .sidebar-section-header h3 {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* Category groups: flat rows instead of boxed cards */
.cat-group {
  background: transparent;
  border: none;
  border-radius: 0;
  border-top: 1px solid var(--border-color);
}
.cat-group-header {
  background: transparent;
  padding: 10px 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  gap: 8px;
}
.cat-group-header:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-main); }
.cat-group-title { flex: 1; justify-content: flex-start; text-align: left; }
.cat-group-badge { background: transparent; padding: 0; font-size: 11px; color: var(--text-dim); }

/* The chevron lives on the right and rotates; it was previously unstyled */
.cat-group-chevron {
  order: 3;
  font-size: 9px;
  color: var(--text-dim);
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
}
.cat-group.open .cat-group-chevron { transform: rotate(0deg); }
.cat-group.open > .cat-group-header { color: var(--text-main); }
.cat-group-items { background: transparent; padding: 0 0 6px 8px; }

/* Items: calm default, one clear active state (soft tint + accent bar) */
.cat-pill { border-radius: var(--radius-sm); position: relative; }
.cat-pill.active {
  background: var(--accent-soft-strong);
  color: var(--text-main);
  font-weight: 600;
}
.cat-pill.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-primary);
}

/* ==========================================================================
   Simplified sidebar, round 2: fewer labels, fewer numbers, fewer borders
   ========================================================================== */

/* The filter field already explains the list, so the section title goes */
.sidebar-categories-section > .sidebar-section-header { display: none; }

/* Group counts are noise; keep them only on the quick links (Favorieten etc.) */
.cat-group-badge { display: none; }
.cat-pill .cat-group-badge { display: inline; }

/* Media type: no box, no label, just the current selection */
.sidebar-type-heading { display: none; }
.sidebar-type-header { border: none; padding: 6px 8px; }
.sidebar-type-header:hover { background: rgba(255, 255, 255, 0.05); border-color: transparent; }
.sidebar-type-active { font-size: 14px; font-weight: 600; color: var(--text-main); border: none; background: none; padding: 0; }

/* Filter field: borderless and quiet */
.cat-search-input { background: rgba(255, 255, 255, 0.05); border-color: transparent; }

/* Dividers between groups are lighter and the TOP badge is muted */
.cat-group { border-top-color: rgba(255, 255, 255, 0.04); }
.sidebar { gap: 12px; }
/* The header always names the current media type, expanded or collapsed */
.sidebar-type-active[hidden] { display: inline; }

/* ==========================================================================
   One menu-item pattern for every sidebar menu
   Media types, quick links, category groups and categories share the same
   height, padding, type size, icon size, hover and active state.
   ========================================================================== */
.sidebar {
  --menu-item-h: 38px;
  --menu-item-px: 12px;
  --menu-item-gap: 10px;
}

.type-menu { gap: 2px; margin-bottom: 4px; }

.type-menu li,
.cat-pill,
.cat-group-header {
  min-height: var(--menu-item-h);
  padding: 0 var(--menu-item-px);
  gap: var(--menu-item-gap);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-muted);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  box-shadow: none;
  position: relative;
  align-items: center;
}
.cat-group-header { display: flex; }

.type-menu li svg,
.cat-pill > svg,
.cat-pill > .lucide {
  width: 16px;
  height: 16px;
  color: var(--text-dim);
  transform: none;
}

.type-menu li:hover,
.cat-pill:hover,
.cat-group-header:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-main);
}
.type-menu li:hover svg { color: var(--text-main); transform: none; }

.type-menu li.active,
.cat-pill.active {
  background: var(--accent-soft-strong);
  color: var(--text-main);
  font-weight: 600;
  border: none;
  box-shadow: none;
}
.type-menu li.active svg { color: var(--accent-primary); }
.type-menu li.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 2px;
  background: var(--accent-primary);
}

/* Counts: one quiet style everywhere */
.cat-group-badge,
.cat-count-badge {
  background: transparent;
  color: var(--text-dim);
  font-size: 11px;
  font-weight: 500;
  padding: 0;
}

/* Emoji prefixes in category names clash with the icon set */
.cat-emoji { display: none; }

/* Promo block duplicating the TuneIn categories (they stay available in the
   regular "TuneIn Online Radio" group below) */
.cat-tunein-quick-group { display: none; }

/* Subtle "new" and "top" badges: no coloured pills */
.cat-tunein-new-badge { display: none; }

/* ==========================================================================
   Header and mobile navigation in the same language as the sidebar
   ========================================================================== */

/* Header actions: identical ghost icon buttons. Colour only appears on hover. */
.header-actions { gap: 4px; }
.theme-toggle-btn {
  width: 36px;
  height: 36px;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  transition: background-color 0.2s ease, color 0.2s ease;
}
.theme-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text-main);
  transform: none;
  border-color: transparent;
}
.theme-toggle-btn svg { width: 18px; height: 18px; }
[data-theme="light"] .theme-toggle-btn:hover { background: rgba(20, 20, 20, 0.07); }

/* Instellingen is also in the sidebar and the profile menu; drop the third copy */
.header-settings-btn { display: none; }

/* Mobile bottom navigation: flat bar, active = accent icon + label, nothing else */
.mobile-bottom-nav {
  background: var(--bg-dark) !important;
  box-shadow: none !important;
  border-top: 1px solid var(--border-color) !important;
}
.mobile-nav-item { color: var(--text-dim); font-weight: 500; }
.mobile-nav-item span { font-size: 10px; }
.mobile-nav-item.active { color: var(--text-main) !important; font-weight: 600 !important; }
.mobile-nav-item.active svg {
  stroke: var(--accent-primary) !important;
  transform: none;
  filter: none !important;
}

/* Still broadcast images; the short-lived capture video is never displayed. */
.channel-snapshot-source { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.card-poster .channel-preview-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.card-poster .channel-preview-button { position:absolute; top:10px; left:10px; z-index:5; border:1px solid #ffffff38; border-radius:999px; padding:7px 11px; background:#101014d9; color:#fff; font-family:inherit; font-size:11px; font-weight:600; line-height:1.2; cursor:pointer; backdrop-filter:blur(10px); }
.card-poster .channel-preview-button:hover, .card-poster .channel-preview-button:focus-visible { background:#e50914; outline:2px solid #fff; outline-offset:2px; }