/* Wavswap V1011: theme-correct sidebar and conservative rendering budget.
   Presentation/performance only. No search, filter, pager or player behavior. */

/* The legacy refresh sheet hard-coded the sidebar dark in every theme. Keep
   the real nav DOM, but let it consume the same theme tokens as the page. */
html.be-light-mode body nav-sidebar {
  background: var(--be-background, #fff) !important;
  color: var(--be-text, #111827) !important;
  border-right: 1px solid var(--be-divider-default, #dbe3ec) !important;
  box-shadow: 8px 0 24px rgba(15, 23, 42, .035) !important;
}

html.be-light-mode body nav-sidebar .content {
  background: transparent !important;
}

html.be-light-mode body nav-sidebar .nav-item,
html.be-light-mode body nav-sidebar .sidebar-nav-item,
html.be-light-mode body nav-sidebar .your-music-container a,
html.be-light-mode body nav-sidebar .playlists-container a,
html.be-light-mode body nav-sidebar .new-playlist-button,
html.be-light-mode body nav-sidebar .mat-icon {
  color: var(--be-text, #111827) !important;
}

html.be-light-mode body nav-sidebar .your-music-container .title,
html.be-light-mode body nav-sidebar .playlists-container .header,
html.be-light-mode body nav-sidebar .playlists-container .name {
  color: var(--be-secondary-text, #5f6b7a) !important;
}

html.be-light-mode body nav-sidebar .nav-item:hover,
html.be-light-mode body nav-sidebar .sidebar-nav-item:hover,
html.be-light-mode body nav-sidebar .your-music-container a:hover,
html.be-light-mode body nav-sidebar .playlists-container a:hover,
html.be-light-mode body nav-sidebar .nav-item.active,
html.be-light-mode body nav-sidebar .sidebar-nav-item.active {
  color: var(--be-text, #111827) !important;
  background: var(--be-hover, #f1f5f9) !important;
}

html.be-light-mode body nav-sidebar .separator {
  background: var(--be-divider-default, #dbe3ec) !important;
}

html.be-light-mode body nav-sidebar .upload-button {
  color: #fff !important;
  background: #111827 !important;
  border-color: #111827 !important;
}

/* Keep dark mode intentionally dark, even when a page-level token is missing. */
html.be-dark-mode body nav-sidebar,
html.dark body nav-sidebar,
html body.be-dark-mode nav-sidebar,
html body.dark nav-sidebar {
  background: var(--wav-nav-bg, #0f141c) !important;
  color: #e5e7eb !important;
  border-right: 1px solid #263244 !important;
  box-shadow: none !important;
}

html.be-dark-mode body nav-sidebar .content,
html.dark body nav-sidebar .content,
html body.be-dark-mode nav-sidebar .content,
html body.dark nav-sidebar .content {
  background: transparent !important;
}

html.be-dark-mode body nav-sidebar .nav-item,
html.be-dark-mode body nav-sidebar .sidebar-nav-item,
html.be-dark-mode body nav-sidebar .your-music-container a,
html.be-dark-mode body nav-sidebar .playlists-container a,
html.be-dark-mode body nav-sidebar .new-playlist-button,
html.be-dark-mode body nav-sidebar .mat-icon,
html.dark body nav-sidebar .nav-item,
html.dark body nav-sidebar .sidebar-nav-item,
html.dark body nav-sidebar .your-music-container a,
html.dark body nav-sidebar .playlists-container a,
html.dark body nav-sidebar .new-playlist-button,
html.dark body nav-sidebar .mat-icon {
  color: #d6dde8 !important;
}

html.be-dark-mode body nav-sidebar .separator,
html.dark body nav-sidebar .separator {
  background: #263244 !important;
}

html.be-dark-mode body nav-sidebar .upload-button,
html.dark body nav-sidebar .upload-button {
  color: #0b0f16 !important;
  background: #fff !important;
  border-color: #fff !important;
}

/* Let Chromium/WebKit skip layout and paint for desktop content that is far
   outside the viewport. The last measured size is retained automatically, so
   scrolling and pagination do not jump. Unsupported browsers ignore this. */
@supports (content-visibility: auto) {
  @media (min-width: 921px) {
    html.wavswap-render-optimized-v1011 channel-media-grid,
    html.wavswap-render-optimized-v1011 channel-track-table,
    html.wavswap-render-optimized-v1011 search-page track-table,
    html.wavswap-render-optimized-v1011 album track-table,
    html.wavswap-render-optimized-v1011 album-page track-table,
    html.wavswap-render-optimized-v1011 track-page track-table,
    html.wavswap-render-optimized-v1011 library-page track-table {
      content-visibility: auto !important;
      contain-intrinsic-size: auto 720px !important;
    }

    html.wavswap-render-optimized-v1011 track-table tr.track-list-row {
      content-visibility: auto !important;
      contain-intrinsic-size: auto 74px !important;
    }

    html.wavswap-render-optimized-v1011 media-grid .media-grid-item,
    html.wavswap-render-optimized-v1011 channel-media-grid .media-grid-item {
      content-visibility: auto !important;
      contain-intrinsic-size: auto 230px !important;
    }
  }
}

/* On devices reporting a smaller rendering budget, remove cosmetic work that
   can cause scroll hitching. Dimensions and interaction targets stay intact. */
html.wavswap-lite-render-v1011,
html.wavswap-lite-render-v1011 body,
html.wavswap-lite-render-v1011 web-player .page-content {
  scroll-behavior: auto !important;
}

html.wavswap-lite-render-v1011 track-table tr.track-list-row,
html.wavswap-lite-render-v1011 media-grid .media-grid-item .img-container,
html.wavswap-lite-render-v1011 channel-media-grid .media-grid-item .img-container {
  transition: none !important;
  animation: none !important;
}

html.wavswap-lite-render-v1011 track-table tr.track-list-row:hover,
html.wavswap-lite-render-v1011 media-grid .media-grid-item:hover .img-container,
html.wavswap-lite-render-v1011 channel-media-grid .media-grid-item:hover .img-container {
  transform: none !important;
}

html.wavswap-lite-render-v1011 .wavswap-trending-badge-v995,
html.wavswap-lite-render-v1011 .wavswap-rising-badge-v996,
html.wavswap-lite-render-v1011 [data-wavswap-trending-v995],
html.wavswap-lite-render-v1011 [data-wavswap-rising-v996] {
  animation: none !important;
}

@media (prefers-reduced-motion: reduce), (update: slow) {
  track-table tr.track-list-row,
  media-grid .media-grid-item .img-container,
  channel-media-grid .media-grid-item .img-container {
    transition: none !important;
    animation: none !important;
  }

  track-table tr.track-list-row:hover,
  media-grid .media-grid-item:hover .img-container,
  channel-media-grid .media-grid-item:hover .img-container {
    transform: none !important;
  }
}