/* TV Shows Theme Compatibility System */
/* Ensures all TV Shows elements work with the existing core theme selector */

/* Use existing core theme variables - No need to redefine them */

/* Theme-aware elements using core theme variables */
.text-secondary {
    color: var(--primary) !important;
}

.bg-primary {
    background-color: var(--primary) !important;
}

.bg-primary-dark {
    background-color: var(--primary-600) !important;
}

.border-primary\/50 {
    border-color: rgba(var(--primary), 0.5) !important;
}

.hover\:border-primary\/50:hover {
    border-color: rgba(var(--primary), 0.5) !important;
}

.hover\:shadow-primary\/20:hover {
    box-shadow: 0 0 40px rgba(var(--primary), 0.2) !important;
}

.bg-secondary\/20 {
    background-color: rgba(var(--primary), 0.2) !important;
}

.bg-secondary\/30 {
    background-color: rgba(var(--primary), 0.3) !important;
}

.bg-secondary\/80 {
    background-color: rgba(var(--primary), 0.8) !important;
}

.border-secondary\/30 {
    border-color: rgba(var(--primary), 0.3) !important;
}

.hover\:border-secondary:hover {
    border-color: var(--primary) !important;
}

.text-primary {
    color: var(--primary) !important;
}

.text-accent {
    color: var(--secondary) !important;
}

.bg-accent {
    background-color: var(--secondary) !important;
}

.border-accent {
    border-color: var(--secondary) !important;
}

/* TV Shows specific theme elements */
.episode-card:hover,
.episodes-grid .episode-card:hover {
    border-color: rgba(var(--primary), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--primary), 0.2) !important;
}

.source-item.active,
.sources-horizontal .source-item.active {
    background-color: rgba(var(--primary), 0.2) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 20px rgba(var(--primary), 0.2) !important;
}

.source-item.active .source-btn,
.sources-horizontal .source-item.active .source-btn {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.episode-card.active,
.episodes-grid .episode-card.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(var(--primary), 0.3) !important;
}

/* High specificity overrides for any remaining hardcoded colors */
.content-hub .episode-card:hover,
.episodes-section .episode-card:hover,
div .episode-card:hover {
    border-color: rgba(var(--primary), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--primary), 0.2) !important;
}

.content-hub .episode-card.active,
.episodes-section .episode-card.active,
div .episode-card.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(var(--primary), 0.3) !important;
}

.content-hub .source-item.active,
.sources-section .source-item.active,
div .source-item.active {
    background-color: rgba(var(--primary), 0.2) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 20px rgba(var(--primary), 0.2) !important;
}

.content-hub .source-item.active .source-btn,
.sources-section .source-item.active .source-btn,
div .source-item.active .source-btn {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

.season-button.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.source-button.active {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
}

.play-button {
    background: linear-gradient(135deg, var(--primary), var(--primary-600)) !important;
}

.progress-bar {
    background-color: var(--primary) !important;
}

/* Video player theme integration */
.video-controls .control-button:hover {
    color: var(--primary) !important;
}

.video-controls .progress-filled {
    background-color: var(--primary) !important;
}

/* Responsive theme adjustments */
@media (max-width: 768px) {
    .episode-card:hover {
        box-shadow: 0 2px 10px rgba(var(--primary), 0.15) !important;
    }
}

/* Header Theme Button Overrides - Force theme colors for specific header elements only */
html[data-color="red"] #color-switcher .fas,
html[data-color="red"] #bg-customizer .fas,
html[data-color="red"] header .text-primary,
html[data-color="red"] nav .text-primary,
html[data-color="red"] .search-form .text-primary {
    color: rgb(239, 68, 68) !important;
}

html[data-color="blue"] #color-switcher .fas,
html[data-color="blue"] #bg-customizer .fas,
html[data-color="blue"] header .text-primary,
html[data-color="blue"] nav .text-primary,
html[data-color="blue"] .search-form .text-primary {
    color: rgb(59, 130, 246) !important;
}

html[data-color="green"] #color-switcher .fas,
html[data-color="green"] #bg-customizer .fas,
html[data-color="green"] header .text-primary,
html[data-color="green"] nav .text-primary,
html[data-color="green"] .search-form .text-primary {
    color: rgb(34, 197, 94) !important;
}

html[data-color="purple"] #color-switcher .fas,
html[data-color="purple"] #bg-customizer .fas,
html[data-color="purple"] header .text-primary,
html[data-color="purple"] nav .text-primary,
html[data-color="purple"] .search-form .text-primary {
    color: rgb(168, 85, 247) !important;
}

html[data-color="pink"] #color-switcher .fas,
html[data-color="pink"] #bg-customizer .fas,
html[data-color="pink"] header .text-primary,
html[data-color="pink"] nav .text-primary,
html[data-color="pink"] .search-form .text-primary {
    color: rgb(236, 72, 153) !important;
}

html[data-color="orange"] #color-switcher .fas,
html[data-color="orange"] #bg-customizer .fas,
html[data-color="orange"] header .text-primary,
html[data-color="orange"] nav .text-primary,
html[data-color="orange"] .search-form .text-primary {
    color: rgb(249, 115, 22) !important;
}

html[data-color="yellow"] #color-switcher .fas,
html[data-color="yellow"] #bg-customizer .fas,
html[data-color="yellow"] header .text-primary,
html[data-color="yellow"] nav .text-primary,
html[data-color="yellow"] .search-form .text-primary {
    color: rgb(234, 179, 8) !important;
}

html[data-color="indigo"] #color-switcher .fas,
html[data-color="indigo"] #bg-customizer .fas,
html[data-color="indigo"] header .text-primary,
html[data-color="indigo"] nav .text-primary,
html[data-color="indigo"] .search-form .text-primary {
    color: rgb(99, 102, 241) !important;
}

html[data-color="teal"] #color-switcher .fas,
html[data-color="teal"] #bg-customizer .fas,
html[data-color="teal"] header .text-primary,
html[data-color="teal"] nav .text-primary,
html[data-color="teal"] .search-form .text-primary {
    color: rgb(20, 184, 166) !important;
}

html[data-color="cyan"] #color-switcher .fas,
html[data-color="cyan"] #bg-customizer .fas,
html[data-color="cyan"] header .text-primary,
html[data-color="cyan"] nav .text-primary,
html[data-color="cyan"] .search-form .text-primary {
    color: rgb(6, 182, 212) !important;
}

/* Header Search Icon Override */
html[data-color] header .group-focus-within\:text-primary:focus-within,
html[data-color] nav .group-focus-within\:text-primary:focus-within {
    color: var(--primary) !important;
}

/* Theme-aware text classes - Specific to content areas only, not color picker */
html[data-color] .content-hub .text-primary,
html[data-color] .episodes-section .text-primary,
html[data-color] .sources-section .text-primary,
html[data-color] main .text-primary,
html[data-color] .video-player .text-primary {
    color: var(--primary) !important;
}
html[data-color] .content-hub .text-secondary,
html[data-color] .episodes-section .text-secondary,
html[data-color] .sources-section .text-secondary,
html[data-color] main .text-secondary,
html[data-color] .video-player .text-secondary {
    color: var(--secondary) !important;
}
html[data-color] .content-hub .text-accent,
html[data-color] .episodes-section .text-accent,
html[data-color] .sources-section .text-accent,
html[data-color] main .text-accent,
html[data-color] .video-player .text-accent {
    color: var(--accent) !important;
}

/* Override hardcoded red colors to use theme */
html[data-color] .text-red-500 {
    color: var(--primary) !important;
}
html[data-color] .bg-red-500 {
    background-color: var(--primary) !important;
}
html[data-color] .border-red-500 {
    border-color: var(--primary) !important;
}

/* Font Awesome Circle Icons - Theme Override */
html[data-color] .fas.fa-circle,
html[data-color] .fa-circle,
html[data-color] .source-status.online .fas.fa-circle,
html[data-color] .source-status .fas.fa-circle {
    color: var(--primary) !important;
}

/* Maximum specificity overrides - these should override any other styles */
html body .episode-card:hover,
html body .episodes-grid .episode-card:hover,
html body .content-hub .episode-card:hover {
    border-color: rgba(var(--theme-primary-rgb, 229, 9, 20), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
}

html body .episode-card.active,
html body .episodes-grid .episode-card.active,
html body .content-hub .episode-card.active {
    border-color: var(--primary-brand) !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.3) !important;
}

html body .source-item.active,
html body .sources-horizontal .source-item.active,
html body .sources-section .source-item.active {
    background-color: rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
    border-color: var(--primary-brand) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
}

html body .source-item.active .source-btn,
html body .sources-horizontal .source-item.active .source-btn,
html body .sources-section .source-item.active .source-btn {
    background-color: var(--primary-brand) !important;
    border-color: var(--primary-brand) !important;
    color: white !important;
}

/* Nuclear option - override everything with attribute selectors */
.episode-card[class*="episode-card"]:hover {
    border-color: rgba(var(--theme-primary-rgb, 229, 9, 20), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
}

.episode-card[class*="episode-card"].active {
    border-color: var(--primary-brand) !important;
    box-shadow: 0 0 15px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.3) !important;
}

.source-item[class*="source-item"].active {
    background-color: rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
    border-color: var(--primary-brand) !important;
    box-shadow: 0 0 20px rgba(var(--theme-primary-rgb, 229, 9, 20), 0.2) !important;
}

.source-item[class*="source-item"].active .source-btn {
    background-color: var(--primary-brand) !important;
    border-color: var(--primary-brand) !important;
    color: white !important;
}

/* Use local variables to ensure they update with core themes */
.episode-card:hover {
    border-color: rgba(var(--primary), 0.5) !important;
    box-shadow: 0 4px 20px rgba(var(--primary), 0.2) !important;
}

.episode-card.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px rgba(var(--primary), 0.3) !important;
}

.source-item.active {
    background-color: rgba(var(--tvshow-primary-rgb), 0.2) !important;
    border-color: var(--tvshow-primary) !important;
    box-shadow: 0 0 20px rgba(var(--tvshow-primary-rgb), 0.2) !important;
}

.source-item.active .source-btn {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}

/* Use direct theme variables - no transparency for now to ensure they work */
.episode-card:hover {
    border-color: var(--primary) !important;
    box-shadow: 0 4px 20px var(--primary-200) !important;
}

.episode-card.active {
    border-color: var(--primary) !important;
    box-shadow: 0 0 15px var(--primary-300) !important;
}

.source-item.active {
    background-color: var(--primary-100) !important;
    border-color: var(--primary) !important;
    box-shadow: 0 0 20px var(--primary-200) !important;
}

.source-item.active .source-btn {
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    color: white !important;
}