/* ===== DARK / LIGHT THEME VARIABLES ===== */

/* Default: Dark Theme */
:root,
[data-theme="dark"] {
    --spotify-green: #1DB954;
    --spotify-dark: #121212;
    --sidebar-bg: #000000;
    --card-bg: #181818;
    --card-hover: #282828;
    --text-primary: #FFFFFF;
    --text-secondary: #B3B3B3;
    --text-muted: #535353;
    --border: #282828;
    --player-bg: #181818;
    --main-bg: #121212;
    --main-gradient: linear-gradient(180deg, #1a3a2a 0%, #121212 40%);
    --input-bg: #2a2a2a;
    --topbar-bg: rgba(0,0,0,0.4);
    --hero-bg: linear-gradient(180deg, rgba(29,185,84,0.4) 0%, transparent 100%);
    --track-hover: rgba(255,255,255,0.07);
    --modal-bg: #282828;
    --modal-input-bg: #3e3e3e;
    --scrollbar-thumb: #555;
}

/* Light Theme */
[data-theme="light"] {
    --spotify-green: #1DB954;
    --spotify-dark: #FFFFFF;
    --sidebar-bg: #F8F8F8;
    --card-bg: #FFFFFF;
    --card-hover: #F0F0F0;
    --text-primary: #000000;
    --text-secondary: #4a4a4a;
    --text-muted: #999999;
    --border: #E0E0E0;
    --player-bg: #F8F8F8;
    --main-bg: #FFFFFF;
    --main-gradient: linear-gradient(180deg, #d4f0e0 0%, #FFFFFF 40%);
    --input-bg: #F0F0F0;
    --topbar-bg: rgba(255,255,255,0.85);
    --hero-bg: linear-gradient(180deg, rgba(29,185,84,0.2) 0%, transparent 100%);
    --track-hover: rgba(0,0,0,0.04);
    --modal-bg: #FFFFFF;
    --modal-input-bg: #F0F0F0;
    --scrollbar-thumb: #CCCCCC;
}

/* Light theme overrides */
[data-theme="light"] body { background: var(--main-bg); color: var(--text-primary); }
[data-theme="light"] .sidebar { border-right: 1px solid var(--border); }
[data-theme="light"] .sidebar-section { background: var(--sidebar-bg); }
[data-theme="light"] .main-content { background: var(--main-bg); }
[data-theme="light"] .player { background: var(--player-bg); border-top: 1px solid var(--border); }
[data-theme="light"] .nav-link { color: var(--text-secondary); }
[data-theme="light"] .nav-link:hover, [data-theme="light"] .nav-link.active { color: var(--text-primary); background: rgba(0,0,0,0.06); }
[data-theme="light"] .music-card { background: var(--card-bg); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
[data-theme="light"] .music-card:hover { background: var(--card-hover); }
[data-theme="light"] .track-item:hover { background: var(--track-hover); }
[data-theme="light"] .track-item.playing { background: rgba(29,185,84,0.08); }
[data-theme="light"] .modal-box { background: var(--modal-bg); box-shadow: 0 24px 64px rgba(0,0,0,0.2); }
[data-theme="light"] .modal-body .form-group input { background: var(--modal-input-bg); border-color: var(--border); color: var(--text-primary); }
[data-theme="light"] .playlist-pick-item:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .user-dropdown-menu { background: #FFFFFF; box-shadow: 0 8px 32px rgba(0,0,0,0.15); }
[data-theme="light"] .user-dropdown-menu a:hover { background: rgba(0,0,0,0.06); }
[data-theme="light"] .user-avatar-btn { background: #F0F0F0; color: #000; }
[data-theme="light"] .user-avatar-btn:hover { background: #E0E0E0; }
[data-theme="light"] .nav-btn { background: rgba(0,0,0,0.1); color: #000; }
[data-theme="light"] .nav-btn:hover { background: rgba(0,0,0,0.15); }
[data-theme="light"] .main-header { background: rgba(255,255,255,0.85); }
[data-theme="light"] .search-bar { background: #F0F0F0; border: 1px solid var(--border); }
[data-theme="light"] .search-bar i, [data-theme="light"] .search-bar input { color: #000; }
[data-theme="light"] .search-bar input::placeholder { color: #999; }
[data-theme="light"] .placeholder { background: linear-gradient(135deg, #e0e0e0, #c0c0c0); }
[data-theme="light"] .placeholder-thumb { background: #e0e0e0; color: #999; }
[data-theme="light"] .track-thumb-placeholder { background: #e0e0e0; color: #999; }
[data-theme="light"] .player-thumb-placeholder { background: #e0e0e0; color: #999; }
[data-theme="light"] .progress-bar { background: #D0D0D0; }
[data-theme="light"] .volume-bar { background: #D0D0D0; }
[data-theme="light"] .ctrl-btn { color: #4a4a4a; }
[data-theme="light"] .ctrl-btn:hover { color: #000; }
[data-theme="light"] .play-pause-btn { background: #000; }
[data-theme="light"] .play-pause-btn:hover { background: #222; }
[data-theme="light"] .recent-quick-item { background: #F0F0F0; }
[data-theme="light"] .recent-quick-item:hover { background: #E5E5E5; }
[data-theme="light"] .toast { background: #333; color: #fff; }
[data-theme="light"] .welcome-banner { background: linear-gradient(135deg, #d4f0e0, #a8e6c4); }
[data-theme="light"] .welcome-text h1, [data-theme="light"] .welcome-text p { color: #000; }
[data-theme="light"] .btn-banner-outline { color: #000; border-color: rgba(0,0,0,0.3); }
[data-theme="light"] .btn-banner-outline:hover { border-color: #000; }
[data-theme="light"] .section-title { color: var(--text-primary); }
[data-theme="light"] .card-title { color: var(--text-primary); }
[data-theme="light"] .library-header span { color: var(--text-secondary); }
[data-theme="light"] .playlist-item:hover { background: rgba(0,0,0,0.05); }
[data-theme="light"] .playlist-item-info .name { color: var(--text-primary); }
[data-theme="light"] #visualizerCanvas { opacity: 0.4 !important; }

/* Theme toggle button */
.theme-toggle-btn {
    background: none; border: none; color: var(--text-secondary);
    font-size: 16px; cursor: pointer; padding: 6px 8px; border-radius: 50%;
    transition: color 0.2s, background 0.2s; display: flex; align-items: center; justify-content: center;
}
.theme-toggle-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.1); }
[data-theme="light"] .theme-toggle-btn:hover { background: rgba(0,0,0,0.08); }

/* PWA mode adjustments */
.pwa-mode .main-header { padding-top: env(safe-area-inset-top, 16px); }
.pwa-mode .player { padding-bottom: env(safe-area-inset-bottom, 0); height: calc(90px + env(safe-area-inset-bottom, 0)); }

/* Smooth theme transition */
*, *::before, *::after {
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease;
}
/* But NOT for animations or transforms */
.play-btn, .music-card, .eq-bar, #playerThumb, .progress-fill, .volume-fill {
    transition: none;
}
.play-btn { transition: opacity 0.3s, transform 0.3s, background 0.2s; }
.music-card { transition: background 0.3s; }

/* Lyrics panel */
.lyrics-panel {
    position: fixed; right: 0; top: 0; width: 320px; height: calc(100vh - 90px);
    background: var(--card-bg); border-left: 1px solid var(--border);
    z-index: 50; transform: translateX(100%); transition: transform 0.3s ease;
    display: flex; flex-direction: column; overflow: hidden;
}
.lyrics-panel.open { transform: translateX(0); }
.lyrics-header { padding: 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.lyrics-header h3 { font-size: 16px; font-weight: 700; }
.lyrics-close { background: none; border: none; color: var(--text-muted); font-size: 18px; cursor: pointer; }
.lyrics-close:hover { color: var(--text-primary); }
.lyrics-body { flex: 1; overflow-y: auto; padding: 24px 20px; }
.lyrics-text { font-size: 20px; font-weight: 700; line-height: 1.8; color: var(--text-primary); white-space: pre-wrap; }
.lyrics-text.empty { font-size: 15px; color: var(--text-muted); font-weight: 400; text-align: center; padding-top: 40px; }
.lyrics-song-info { margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.lyrics-song-info h4 { font-size: 16px; font-weight: 700; }
.lyrics-song-info p { font-size: 13px; color: var(--text-secondary); }