/**
 * =====================================================
 * TRUYENAUDIOFULL - THEME CSS
 * Dark Mode (Default) & Light Mode
 * =====================================================
 */

/* ==================== DARK THEME (DEFAULT) ==================== */
:root,
[data-theme="dark"] {
    /* Background */
    --bg-body: #0a0a0f;
    --bg-secondary: #12121a;
    --bg-card: #1a1a24;
    --bg-card-hover: #22222e;
    --bg-white: #1a1a24;
    
    /* Text */
    --text-dark: #ffffff;
    --text-body: #e5e5e5;
    --text-muted: #a1a1aa;
    
    /* Borders */
    --border-color: #2a2a35;
    --border-light: #333340;
    
    /* Brand */
    --brand-color: #f75d71;
    --brand-hover: #e04559;
    --brand-light: rgba(247, 93, 113, 0.15);
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
    
    /* Player */
    --player-bg: #1a1a24;
    --player-border: #2a2a35;
}

/* ==================== LIGHT THEME ==================== */
[data-theme="light"] {
    /* Background */
    --bg-body: #f7f8fa;
    --bg-secondary: #ffffff;
    --bg-card: #ffffff;
    --bg-card-hover: #f4f6f9;
    --bg-white: #ffffff;
    
    /* Text */
    --text-dark: #1a1a1a;
    --text-body: #374151;
    --text-muted: #6b7280;
    
    /* Borders */
    --border-color: #e5e7eb;
    --border-light: #f3f4f6;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    
    /* Player */
    --player-bg: #ffffff;
    --player-border: #e5e7eb;
}

/* ==================== THEME TRANSITION ==================== */
body,
.site-header,
.main-nav,
.sidebar-widget,
.episodes-section,
.audio-player,
.site-footer {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ==================== THEME TOGGLE BUTTON ==================== */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: transparent;
    border: 1px solid var(--border-color);
    border-radius: 50%;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s ease;
    margin: 0 8px;
}

.theme-toggle:hover {
    background-color: var(--brand-light);
    border-color: var(--brand-color);
    color: var(--brand-color);
    transform: scale(1.1);
}

.theme-toggle:hover {
    background-color: var(--brand-light);
    border-color: var(--brand-color);
    color: var(--brand-color);
}

/* ==================== DARK MODE SPECIFIC STYLES ==================== */
[data-theme="dark"] .hero-title {
    color: #ffffff;
}

[data-theme="dark"] .hero-meta {
    opacity: 1;
}

[data-theme="dark"] .hero-meta span {
    color: #c8c8d0;
}

[data-theme="dark"] .hero-meta svg {
    opacity: 0.7;
}

[data-theme="dark"] .search-input {
    background-color: #1a1a24;
    border-color: #2a2a38;
    color: #e0e0e0;
}

[data-theme="dark"] .search-input::placeholder {
    color: #888890;
}

[data-theme="dark"] .search-input:focus {
    background-color: #1e1e28;
    border-color: var(--brand-color);
    color: #ffffff;
}

[data-theme="dark"] .filter-bar,
[data-theme="dark"] .sidebar-widget,
[data-theme="dark"] .episodes-section,
[data-theme="dark"] .footer-seo {
    background-color: #1e1e28;
    border-color: #2a2a38;
}

[data-theme="dark"] .episode-item {
    background-color: #1a1a24;
}

[data-theme="dark"] .episode-item:hover {
    background-color: rgba(247, 93, 113, 0.1);
}

[data-theme="dark"] .header-btn {
    background-color: #1e1e28;
    color: #d0d0d8;
    border: 1px solid #2a2a38;
}

[data-theme="dark"] .header-btn:hover {
    background-color: rgba(247, 93, 113, 0.2);
    color: #ffffff;
    border-color: var(--brand-color);
}

[data-theme="dark"] .header-btn.primary {
    background-color: var(--brand-color);
    color: #ffffff;
    border-color: var(--brand-color);
}

[data-theme="dark"] .nav-link {
    color: #c0c0c8;
}

[data-theme="dark"] .nav-link:hover {
    background-color: rgba(247, 93, 113, 0.15);
    color: #ffffff;
}

[data-theme="dark"] .nav-link.active {
    background-color: var(--brand-color);
    color: #ffffff;
}

[data-theme="dark"] .nav-link svg {
    opacity: 0.7;
}

[data-theme="dark"] .nav-link:hover svg,
[data-theme="dark"] .nav-link.active svg {
    opacity: 1;
}

[data-theme="dark"] .tag,
[data-theme="dark"] .categories-list a,
[data-theme="dark"] .tags-list a {
    background-color: #12121a;
    color: #e5e5e5;
    border-color: #2a2a35;
}

[data-theme="dark"] .tag:hover,
[data-theme="dark"] .categories-list a:hover,
[data-theme="dark"] .tags-list a:hover {
    background-color: var(--brand-color);
    color: white;
}

[data-theme="dark"] .audio-player {
    background-color: #1a1a24;
    border-color: #2a2a35;
}

[data-theme="dark"] .player-btn {
    background-color: #12121a;
    color: #e5e5e5;
}

[data-theme="dark"] .filter-btn {
    background-color: #1e1e28;
    color: #c0c0c8;
    border: 1px solid #2a2a38;
}

[data-theme="dark"] .filter-btn:hover {
    background-color: rgba(247, 93, 113, 0.2);
    color: #ffffff;
}

[data-theme="dark"] .filter-btn.active {
    background-color: var(--brand-color);
    color: #ffffff;
}

[data-theme="dark"] .player-time,
[data-theme="dark"] .player-title {
    color: #b0b0b8;
}

[data-theme="dark"] .footer-links a,
[data-theme="dark"] .ranking-meta,
[data-theme="dark"] .breadcrumb a {
    color: #b8b8c0;
}

[data-theme="dark"] .footer-links a:hover,
[data-theme="dark"] .breadcrumb a:hover {
    color: var(--brand-color);
}

/* ==================== LIGHT MODE SPECIFIC STYLES ==================== */
[data-theme="light"] .search-input {
    background-color: #f4f6f9;
    border-color: #e5e7eb;
    color: #374151;
}

[data-theme="light"] .filter-bar,
[data-theme="light"] .sidebar-widget,
[data-theme="light"] .episodes-section,
[data-theme="light"] .footer-seo {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .filter-btn {
    background-color: #f4f6f9;
    color: #374151;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .filter-btn:hover {
    background-color: #fecdd3;
    color: var(--brand-color);
    border-color: var(--brand-color);
}

[data-theme="light"] .filter-btn.active {
    background-color: var(--brand-color);
    color: white;
}

[data-theme="light"] .episode-item {
    background-color: #f4f6f9;
}

[data-theme="light"] .episode-item:hover {
    background-color: #fecdd3;
}

[data-theme="light"] .header-btn {
    background-color: #f4f6f9;
    color: #374151;
    border: 1px solid #e5e7eb;
}

[data-theme="light"] .header-btn:hover {
    background-color: #fecdd3;
    color: var(--brand-color);
    border-color: var(--brand-color);
}

[data-theme="light"] .header-btn.primary {
    background-color: var(--brand-color);
    color: white;
    border-color: var(--brand-color);
}

[data-theme="light"] .nav-link {
    color: #374151;
}

[data-theme="light"] .nav-link:hover {
    background-color: #fecdd3;
    color: var(--brand-color);
}

[data-theme="light"] .nav-link.active {
    background-color: var(--brand-color);
    color: white;
}

[data-theme="light"] .tag,
[data-theme="light"] .categories-list a,
[data-theme="light"] .tags-list a {
    background-color: #f4f6f9;
    color: #374151;
    border-color: #e5e7eb;
}

[data-theme="light"] .tag:hover,
[data-theme="light"] .categories-list a:hover,
[data-theme="light"] .tags-list a:hover {
    background-color: var(--brand-color);
    color: white;
}

[data-theme="light"] .audio-player {
    background-color: #ffffff;
    border-color: #e5e7eb;
}

[data-theme="light"] .player-btn {
    background-color: #f4f6f9;
    color: #374151;
}

[data-theme="light"] .player-time,
[data-theme="light"] .player-title {
    color: #6b7280;
}

[data-theme="light"] .footer-links a,
[data-theme="light"] .ranking-meta,
[data-theme="light"] .breadcrumb a {
    color: #6b7280;
}

[data-theme="light"] .footer-links a:hover,
[data-theme="light"] .breadcrumb a:hover {
    color: var(--brand-color);
}