/* Theme Overrides - Ensure themes apply to ALL UI elements */

/* ==================== GLOBAL SCROLLBAR - Theme-Aware ==================== */
/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--secondary-color, #8b5cf6) 40%, transparent) transparent;
}

/* Webkit (Chrome, Safari, Edge, Discord) */
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent);
  border-radius: 100px;
  border: 1px solid transparent;
}

*::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 55%, transparent);
}

*::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 70%, transparent);
}

*::-webkit-scrollbar-corner {
  background: transparent;
}

/* Override all background colors to use theme variables */
/* CRITICAL: Use theme-derived backgrounds so light themes work properly */
body {
  background: var(--bg-primary, #0f0f0f) !important;
  color: var(--text-color, #ffffff) !important;
}

.app-container,
.tab-content {
  background: transparent !important; /* Transparent to show animations */
  color: var(--text-color, #ffffff) !important;
}

.top-nav,
.bottom-nav {
  background: color-mix(in srgb, var(--bg-primary, #0f0f0f) 90%, transparent) !important;
  backdrop-filter: blur(10px) !important;
}

.now-playing-section,
.queue-section,
.session-info-header {
  background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 80%, transparent) !important;
  backdrop-filter: blur(5px) !important;
}

.queue-header,
.session-management-bar {
  background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 85%, transparent) !important;
  backdrop-filter: blur(8px) !important;
}

.session-controls-panel {
  background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 98%, transparent) !important;
  backdrop-filter: blur(20px) !important;
}

.session-limitations-compact {
  background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 90%, transparent) !important;
}

.empty-text {
  color: var(--text-secondary, #a0a0a0) !important;
}

.empty-subtext {
  color: var(--text-tertiary, #707070) !important;
}

/* Card backgrounds - using theme colors */
.session-card,
.playlist-card,
.minigame-card,
.queue-item,
.track-card {
  background: color-mix(in srgb, var(--bg-secondary, #1a1a1a) 90%, transparent) !important;
  backdrop-filter: blur(5px) !important;
}

.session-card:hover,
.playlist-card:hover {
  background: var(--bg-tertiary, #2a2a2a) !important;
}

/* Modal content needs higher opacity for readability */
.modal-content {
  background: color-mix(in srgb, var(--bg-primary, #0f0f0f) 97%, transparent) !important;
  backdrop-filter: blur(10px) !important;
}

/* White Raven theme specific - ensure text is readable on light backgrounds */
.theme-whiteRaven body,
.theme-whiteRaven .app-container,
.theme-whiteRaven .tab-content {
  background: var(--bg-primary, #f8f9fa) !important;
  color: var(--text-color, #1a1a2e) !important;
}

.theme-whiteRaven .top-nav,
.theme-whiteRaven .bottom-nav {
  background: color-mix(in srgb, var(--bg-primary, #f8f9fa) 95%, transparent) !important;
}

.theme-whiteRaven .session-card,
.theme-whiteRaven .playlist-card,
.theme-whiteRaven .queue-item,
.theme-whiteRaven .track-card {
  background: var(--bg-elevated, #ffffff) !important;
  border: 1px solid var(--bg-tertiary, #dee2e6) !important;
}

.theme-whiteRaven .modal-content {
  background: var(--bg-elevated, #ffffff) !important;
}

/* Borders use theme colors */
.top-nav,
.queue-header,
.session-management-bar,
.modal-content,
.form-input,
.btn {
  border-color: var(--primary-color) !important;
}

/* Text colors */
h1, h2, h3, h4, h5, h6,
.now-playing-title,
.session-name,
.playlist-title {
  color: var(--text-color, var(--text-primary, #ffffff)) !important;
}

.now-playing-artist,
.session-meta,
.playlist-meta,
.text-secondary {
  color: var(--text-secondary, #a0a0a0) !important;
}

/* Primary colored elements */
.btn-primary,
.tab-button.active {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-secondary {
  background: var(--bg-tertiary) !important;
  border-color: var(--secondary-color) !important;
  color: var(--text-primary) !important;
}

/* Accents and highlights */
.queue-tab.active,
.nav-link.active {
  color: var(--primary-color) !important;
  border-bottom-color: var(--primary-color) !important;
}

/* Progress bars and sliders */
.xp-fill,
.progress-bar-fill {
  background: linear-gradient(90deg, var(--primary-color), var(--accent-color)) !important;
}

/* CRITICAL FIX: Move theme animations ABOVE content so they're visible */
/* Use high z-index but below modals/nav, with pointer-events: none to avoid blocking clicks */
.theme-stars,
.theme-fireflies,
.theme-flames,
.theme-embers,
.theme-particles,
.theme-cosmic-swirl,
.theme-star-particles,
.theme-ooze-bubbles,
.theme-fire-particles,
.theme-skull-particles,
.theme-sparkles {
  z-index: 2500 !important; /* Above app content but below nav bars (3000) */
  pointer-events: none !important;
  opacity: 0.8 !important; /* Slightly transparent so content is still visible */
}

/* Main content stays at lower z-index with transparent background */
.app-container {
  position: relative;
  z-index: 2;
}

/* Pictures and album art should always be in front of theme animations and fully opaque */
/* CRITICAL: Album art must block theme animations (bubbles, particles) from showing through */
.track-cover,
.album-cover,
.card-cover,
.result-cover,
.now-playing-cover,
.queue-item-cover,
.wheel-album-art,
.mini-player-cover,
.track-image img,
.queue-item img,
[class*="-cover"] img,
.game-card img,
.card-inner img {
  position: relative;
  z-index: 2600 !important; /* Above theme animations (2500) */
  opacity: 1 !important; /* Always fully opaque, never transparent */
  background-color: var(--bg-primary, #0f0f0f) !important; /* Solid background to block bubbles */
}

/* Now Playing cover container must also block theme animations */
.now-playing-cover {
  position: relative;
  z-index: 2600 !important;
  background-color: var(--bg-primary, #0a0a0f) !important;
  isolation: isolate; /* Create new stacking context */
}

.now-playing-cover img,
.now-playing-cover video {
  position: relative;
  z-index: 2601 !important;
  opacity: 1 !important;
  background-color: var(--bg-primary, #0a0a0f) !important;
}

/* Modals are constrained within navigation boundaries (z-index 5000) */
/* Navigation bars remain visible at z-index 3000 */
/* Theme animations at z-index 2500 (visible on top of content) */

/* Audio visualizer container - visible above bottom nav */
.audio-visualizer {
  position: fixed;
  bottom: calc(50px + var(--saib, 0px)); /* Above bottom nav bar */
  left: 0;
  right: 0;
  height: 100px;
  pointer-events: none;
  z-index: 2500; /* Same level as theme animations */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  padding: 0 10px;
}

.audio-visualizer-bar {
  width: 4px;
  background: linear-gradient(to top, var(--primary-color), var(--accent-color, var(--secondary-color)));
  border-radius: 2px 2px 0 0;
  transition: height 0.1s ease;
  min-height: 2px;
}

/* ==================== QUEUE TABS - Use Theme Colors ==================== */
.queue-tab {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent) !important;
  color: var(--primary-color, #a78bfa) !important;
}

.queue-tab:hover {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 20%, transparent) !important;
  border-color: color-mix(in srgb, var(--secondary-color, #8b5cf6) 50%, transparent) !important;
}

.queue-tab.active {
  background: var(--secondary-color, #8b5cf6) !important;
  border-color: var(--secondary-color, #8b5cf6) !important;
  color: #fff !important;
}

/* ==================== VOLUME SLIDER - Use Theme Colors ==================== */
.volume-slider {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 20%, transparent) !important;
}

.volume-slider::-webkit-slider-thumb {
  background: var(--secondary-color, #8b5cf6) !important;
}

.volume-slider::-moz-range-thumb {
  background: var(--secondary-color, #8b5cf6) !important;
}

.volume-value {
  color: var(--primary-color, #a78bfa) !important;
}

/* ==================== PLAY/PAUSE BUTTON - Use Theme Colors ==================== */
.control-btn {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 20%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--secondary-color, #8b5cf6) 40%, transparent) !important;
}

.control-btn:hover {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent) !important;
  border-color: color-mix(in srgb, var(--secondary-color, #8b5cf6) 60%, transparent) !important;
}

.control-btn-play {
  background: var(--secondary-color, #8b5cf6) !important;
  border-color: var(--secondary-color, #8b5cf6) !important;
}

.control-btn-play:hover {
  background: var(--primary-color, #a78bfa) !important;
  border-color: var(--primary-color, #a78bfa) !important;
}

/* ==================== LIVE REACTIONS - Use Theme Colors ==================== */
.live-reactions-label {
  color: var(--text-secondary, var(--text-color, #a78bfa)) !important;
}

.emoji-btn {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 15%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent) !important;
}

.emoji-btn:hover {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent) !important;
  border-color: color-mix(in srgb, var(--secondary-color, #8b5cf6) 50%, transparent) !important;
}

/* ==================== NOW PLAYING - Use Theme Colors ==================== */
.now-playing-label {
  color: var(--text-secondary, var(--primary-color, #a78bfa)) !important;
}

/* ==================== FORM LABELS - Use Theme Colors ==================== */
.form-group label,
.limit-field label,
.session-config-title {
  color: var(--primary-color, #a78bfa) !important;
}

.form-input {
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 10%, transparent) !important;
  border: 1px solid color-mix(in srgb, var(--secondary-color, #8b5cf6) 30%, transparent) !important;
  color: var(--text-color, #fff) !important;
}

.form-input:focus {
  border-color: var(--secondary-color, #8b5cf6) !important;
  background: color-mix(in srgb, var(--secondary-color, #8b5cf6) 15%, transparent) !important;
}

/* ==================== WHITE RAVEN THEME - Comprehensive Text Colors ==================== */
/* Light theme needs dark text everywhere */
.theme-whiteRaven {
  --text-on-light: #1a1a2e;
  --text-on-light-secondary: #4a4a6a;
  --text-on-dark: #ffffff;
}

/* White Raven: All text should be dark on light backgrounds */
.theme-whiteRaven .now-playing-title,
.theme-whiteRaven .now-playing-artist,
.theme-whiteRaven .now-playing-label,
.theme-whiteRaven .now-playing-submitter,
.theme-whiteRaven .queue-item-title,
.theme-whiteRaven .queue-item-artist,
.theme-whiteRaven .queue-item-duration,
.theme-whiteRaven .queue-tab,
.theme-whiteRaven .live-reactions-label,
.theme-whiteRaven .session-name,
.theme-whiteRaven .session-info,
.theme-whiteRaven .time-current,
.theme-whiteRaven .time-duration,
.theme-whiteRaven .volume-value,
.theme-whiteRaven .lyrics-title,
.theme-whiteRaven .lyrics-artist,
.theme-whiteRaven .lyrics-text,
.theme-whiteRaven .lyrics-toggle-btn,
.theme-whiteRaven .form-group label,
.theme-whiteRaven .limit-field label,
.theme-whiteRaven .session-config-title,
.theme-whiteRaven .field-hint,
.theme-whiteRaven p,
.theme-whiteRaven span,
.theme-whiteRaven div {
  color: var(--text-color, #1a1a2e) !important;
}

/* White Raven: Secondary text */
.theme-whiteRaven .now-playing-artist,
.theme-whiteRaven .queue-item-artist,
.theme-whiteRaven .field-hint,
.theme-whiteRaven .empty-subtext,
.theme-whiteRaven .time-duration {
  color: var(--text-secondary, #4a4a6a) !important;
}

/* White Raven: Active tab text should be white (on colored background) */
.theme-whiteRaven .queue-tab.active,
.theme-whiteRaven .lyrics-toggle-btn.active,
.theme-whiteRaven .btn-primary {
  color: #ffffff !important;
}

/* White Raven: Inactive tabs text should be dark */
.theme-whiteRaven .queue-tab:not(.active) {
  color: var(--text-color, #1a1a2e) !important;
  background: color-mix(in srgb, var(--secondary-color, #1a1a2e) 10%, var(--bg-elevated, #ffffff)) !important;
  border-color: color-mix(in srgb, var(--secondary-color, #1a1a2e) 30%, transparent) !important;
}

/* White Raven: Queue items need dark text */
.theme-whiteRaven .queue-item {
  color: var(--text-color, #1a1a2e) !important;
}

/* White Raven: Form inputs - dark text on light background */
.theme-whiteRaven .form-input,
.theme-whiteRaven input,
.theme-whiteRaven select,
.theme-whiteRaven textarea {
  color: var(--text-color, #1a1a2e) !important;
  background: var(--bg-elevated, #ffffff) !important;
  border: 1px solid var(--bg-tertiary, #dee2e6) !important;
}

.theme-whiteRaven .form-input::placeholder,
.theme-whiteRaven input::placeholder {
  color: var(--text-secondary, #6c757d) !important;
}

/* White Raven: Modal content dark text */
.theme-whiteRaven .modal-content,
.theme-whiteRaven .modal-content * {
  color: var(--text-color, #1a1a2e) !important;
}

.theme-whiteRaven .modal-content h1,
.theme-whiteRaven .modal-content h2,
.theme-whiteRaven .modal-content h3 {
  color: var(--text-color, #1a1a2e) !important;
}

/* White Raven: Buttons with white text (on colored backgrounds) */
.theme-whiteRaven .btn-primary,
.theme-whiteRaven .control-btn-play,
.theme-whiteRaven .queue-tab.active,
.theme-whiteRaven .lyrics-toggle-btn.active {
  color: #ffffff !important;
}

/* White Raven: Session management bar */
.theme-whiteRaven .session-management-bar,
.theme-whiteRaven .session-controls-panel,
.theme-whiteRaven .session-limitations-compact {
  background: var(--bg-elevated, #ffffff) !important;
  color: var(--text-color, #1a1a2e) !important;
}

.theme-whiteRaven .session-bar-toggle,
.theme-whiteRaven .toggle-text {
  color: var(--text-color, #1a1a2e) !important;
}

.theme-whiteRaven .control-tile {
  background: var(--bg-secondary, #e9ecef) !important;
  color: var(--text-color, #1a1a2e) !important;
}

.theme-whiteRaven .control-tile.active {
  background: var(--secondary-color, #1a1a2e) !important;
  color: #ffffff !important;
}

/* White Raven: Scrollbars on light background */
.theme-whiteRaven * {
  scrollbar-color: color-mix(in srgb, var(--secondary-color, #1a1a2e) 30%, transparent) transparent;
}

.theme-whiteRaven *::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--secondary-color, #1a1a2e) 25%, transparent);
}

.theme-whiteRaven *::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--secondary-color, #1a1a2e) 45%, transparent);
}

.theme-whiteRaven *::-webkit-scrollbar-thumb:active {
  background: color-mix(in srgb, var(--secondary-color, #1a1a2e) 60%, transparent);
}