/* 
 * Dark Mode Theme 
 * Applied globally using CSS filters
 */

html[data-theme="dark"] {
    filter: invert(1) hue-rotate(180deg);
    background: #000;
}

/* Re-invert elements that shouldn't be inverted */
html[data-theme="dark"] img,
html[data-theme="dark"] video,
html[data-theme="dark"] iframe,
html[data-theme="dark"] .re-invert,
html[data-theme="dark"] [style*="background-image"] {
    filter: invert(1) hue-rotate(180deg);
}

/* El logo es negro, al invertirlo globalmente se hace blanco (ideal para fondo negro).
 * Si lo re-invertimos con la regla de arriba, se volverá negro de nuevo.
 * Así que excluimos el logo de la re-inversión. */
html[data-theme="dark"] img.logo {
    filter: none;
}

/* En dark mode, aseguramos que el fondo del body y html se manejen bien */
html[data-theme="dark"] body {
    background-color: #fff; /* Que se invertirá a #000 */
}

/* Adjust Theme Toggle Button */
.theme-toggle-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-right: 15px;
    transition: transform 0.3s ease;
}

.theme-toggle-btn:hover {
    transform: scale(1.1);
}

html[data-theme="dark"] .theme-icon-light {
    display: none;
}
html[data-theme="dark"] .theme-icon-dark {
    display: block !important;
}
html[data-theme="light"] .theme-icon-light {
    display: block !important;
}
html[data-theme="light"] .theme-icon-dark {
    display: none;
}

/* Preservar el color amarillo brillante en componentes específicos */
html[data-theme="dark"] .nav-auth-login-btn:hover,
html[data-theme="dark"] .nav-auth-username,
html[data-theme="dark"] .nav-auth-mobile-login-btn,
html[data-theme="dark"] .nav-auth-mobile-login-btn:hover,
html[data-theme="dark"] .nav-auth-mobile-login-btn:active,
html[data-theme="dark"] .nav-auth-mobile-profile-link,
html[data-theme="dark"] .ranking-login-btn:hover,
html[data-theme="dark"] .ranking-user-avatar,
html[data-theme="dark"] .cult-auth-header-bar,
html[data-theme="dark"] .cult-auth-close,
html[data-theme="dark"] .cult-auth-btn--email:hover,
html[data-theme="dark"] .cult-auth-btn--primary,
html[data-theme="dark"] .cult-auth-btn--primary:hover:not(:disabled),
html[data-theme="dark"] .cult-auth-back,
html[data-theme="dark"] .cult-auth-input:focus,
html[data-theme="dark"] .cult-auth-pw-toggle:hover,
html[data-theme="dark"] .cult-auth-otp-box:focus,
html[data-theme="dark"] .cult-auth-otp-box:not(:placeholder-shown),
html[data-theme="dark"] .error-404-label,
html[data-theme="dark"] .ranking-stat-value,
html[data-theme="dark"] .ranking-search-toggle:hover,
html[data-theme="dark"] .ranking-search-result-item:hover,
html[data-theme="dark"] .ranking-filter-wrapper:focus-within,
html[data-theme="dark"] .ranking-search-result-badge.in-ranking,
html[data-theme="dark"] .ranking-load-more-btn:hover,
html[data-theme="dark"] .vote-btn.voted,
html[data-theme="dark"] .grid-card-rank,
html[data-theme="dark"] .ranking-toast,
html[data-theme="dark"] .blog-page-hero,
html[data-theme="dark"] .blog-meta-cat,
html[data-theme="dark"] .pagination-section .page-numbers:hover,
html[data-theme="dark"] .pagination-section .page-numbers.current,
html[data-theme="dark"] .blog-page-card.is-lead-post .blog-meta-cat,
html[data-theme="dark"] .blog-cat-btn:hover,
html[data-theme="dark"] .blog-cat-btn.active,
html[data-theme="dark"] .blog-search-toggle:hover,
html[data-theme="dark"] .concerts-page-hero,
html[data-theme="dark"] .concerts-filter-btn:hover,
html[data-theme="dark"] .concerts-filter-btn.active,
html[data-theme="dark"] .ticket-card.tkt-dark .ticket-link,
html[data-theme="dark"] .ticket-card.tkt-slate .ticket-link,
html[data-theme="dark"] .home-v2-radar-card.is-highlight,
html[data-theme="dark"] .home-v2-card-meta .meta-cat,
html[data-theme="dark"] .home-v2-radar-highlight,
html[data-theme="dark"] .home-v2-playlist-card:hover .home-v2-playlist-action .icon-idle,
html[data-theme="dark"] .home-v2-mobile-view-all,
html[data-theme="dark"] .scrolling-banner,
html[data-theme="dark"] .interview-meta-cat,
html[data-theme="dark"] .interview-card:nth-child(1) .interview-meta-cat,
html[data-theme="dark"] .legal-updated,
html[data-theme="dark"] .legal-section h2::before,
html[data-theme="dark"] .legal-section a,
html[data-theme="dark"] .login input[type="text"]:focus,
html[data-theme="dark"] .login input[type="password"]:focus,
html[data-theme="dark"] .login .button-primary:hover,
html[data-theme="dark"] .login .message,
html[data-theme="dark"] .login #login_error,
html[data-theme="dark"] .login #nav a:hover,
html[data-theme="dark"] .login #backtoblog a:hover,
html[data-theme="dark"] .profile-action-btn,
html[data-theme="dark"] .profile-action-btn:hover,
html[data-theme="dark"] .profile-avatar,
html[data-theme="dark"] .profile-stat-value,
html[data-theme="dark"] .profile-edit-card-header,
html[data-theme="dark"] .profile-input:focus,
html[data-theme="dark"] .profile-pw-toggle:hover,
html[data-theme="dark"] .profile-save-btn,
html[data-theme="dark"] .profile-save-btn:hover:not(:disabled),
html[data-theme="dark"] .radar-entry-card.is-highlight,
html[data-theme="dark"] .radar-entry-media-placeholder,
html[data-theme="dark"] .cult-rating-star.is-active,
html[data-theme="dark"] .radar-entry-highlight,
html[data-theme="dark"] .radar-archive-pagination .page-numbers.current,
html[data-theme="dark"] .radar-archive-pagination .page-numbers:hover,
html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .filter-btn:hover,
html[data-theme="dark"] .filter-btn.active,
html[data-theme="dark"] .cult-post-placeholder,
html[data-theme="dark"] .pagination-wrapper .page-numbers:hover,
html[data-theme="dark"] .pagination-wrapper .page-numbers.current,
html[data-theme="dark"] .back-home-btn,
html[data-theme="dark"] .hero .scrolling-banner,
html[data-theme="dark"] .cult-scrolling-banner,
html[data-theme="dark"] .cult-icon,
html[data-theme="dark"] .cult-badge {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* =========================================================
   USER REQUESTED OVERRIDES FOR DARK MODE
   Botones, etiquetas, radar y heros amarillos
   ========================================================= */

/* Botones genéricos y CTAs */
html[data-theme="dark"] .cta-btn,
html[data-theme="dark"] .contact-cta-btn--solid,
html[data-theme="dark"] .blog-red-cta,
html[data-theme="dark"] .radar-entry-cta {
    background-color: #FFD700 !important;
    color: #000 !important;
    border-color: #000 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

html[data-theme="dark"] .blog-red-cta:hover {
    background-color: #e6c200 !important;
}

/* Heros de las secciones (Blog, Concerts, That's Cult, Interviews) */
html[data-theme="dark"] .blog-page-hero:not(.has-image),
html[data-theme="dark"] .concerts-page-hero:not(.has-image),
html[data-theme="dark"] .page-hero:not(.has-image),
html[data-theme="dark"] .interviews-hero,
html[data-theme="dark"] .legal-hero {
    background-color: #FFD700 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Etiquetas y badges (Radar, Blog, etc) */
html[data-theme="dark"] .radar-entry-highlight,
html[data-theme="dark"] .home-v2-radar-highlight,
html[data-theme="dark"] .blog-meta-cat {
    background-color: #FFD700 !important;
    color: #000 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Fondo de las estrellitas en Radar */
html[data-theme="dark"] .radar-entry-grade {
    background-color: #FFD700 !important;
    border-color: #000 !important;
    filter: invert(1) hue-rotate(180deg) !important;
}
html[data-theme="dark"] .radar-entry-grade .cult-rating-star.is-active {
    color: #000 !important; /* Estrellas activas negras sobre fondo amarillo */
}
html[data-theme="dark"] .radar-entry-grade .cult-rating-star {
    color: #fff !important; /* Estrellas inactivas blancas */
}

/* =========================================================
   ABOUT PAGE PHOTOS - Preserve B&W effect
   ========================================================= */
html[data-theme="dark"] .team-member img,
html[data-theme="dark"] .member-header img,
html[data-theme="dark"] .collaborator-photo,
html[data-theme="dark"] .star-svg {
    filter: invert(1) hue-rotate(180deg) grayscale(100%) !important;
}

html[data-theme="dark"] .team-member:hover img,
html[data-theme="dark"] .team-member:focus-within img,
html[data-theme="dark"] .team-member.open .member-header img,
html[data-theme="dark"] .collaborator-card:hover .collaborator-photo {
    filter: invert(1) hue-rotate(180deg) grayscale(0%) !important;
}

html[data-theme="dark"] .collaborator-card:hover .star-svg {
    filter: invert(1) hue-rotate(180deg) grayscale(0%) drop-shadow(0 0 6px rgba(255, 215, 0, 0.6)) !important;
}