/**
 * Système de thème (Dark / Light / Auto)
 * Overrides complets pour TOUS les composants de l'application
 * 
 * Mapping couleurs Dark → Light :
 *   #0D1321 (Rich Black)     → #f8fafc (slate-50)
 *   #111827 (gray-900)       → #f1f5f9 (slate-100)
 *   #0f172a (slate-900)      → #f8fafc (slate-50)
 *   #1D2D44 (Prussian Blue)  → #ffffff (white)
 *   #1e293b (slate-800)      → #ffffff (white)
 *   #1f2937 (gray-800)       → #ffffff (white)
 *   #374151 (gray-700)       → #e2e8f0 (slate-200)
 *   #4A5568 / #475569        → #cbd5e1 (slate-300)
 *   #4b5563 (gray-600)       → #94a3b8 (slate-400)
 *   #F0EBD8 (Eggshell)       → #0f172a (slate-900)
 *   #f1f5f9 (text light)     → #0f172a (text dark)
 *   #d1d5db (gray-300)       → #475569 (slate-600)
 *   #9ca3af (gray-400)       → #64748b (slate-500)
 */

/* ===== VARIABLES CSS ===== */
:root,
:root[data-theme="dark"] {
    --th-bg-base: #0f172a;
    --th-bg-body: #0D1321;
    --th-bg-elevated: #1e293b;
    --th-bg-card: #334155;
    --th-bg-input: #1D2D44;
    --th-bg-component: #374151;
    --th-bg-hover: #4b5563;
    --th-bg-translucent: rgba(55, 65, 81, 0.5);
    --th-bg-translucent-hover: rgba(55, 65, 81, 0.8);
    --th-text: #f1f5f9;
    --th-text-alt: #F0EBD8;
    --th-text-muted: #9ca3af;
    --th-text-subtle: #6b7280;
    --th-text-strong: #e5e7eb;
    --th-border: #475569;
    --th-border-light: #374151;
    --th-gradient-from: #1f2937;
    --th-gradient-to: #111827;
    --th-shadow: rgba(0, 0, 0, 0.3);
    --th-overlay: rgba(0, 0, 0, 0.6);
    --th-scrollbar-track: #1D2D44;
    --th-scrollbar-thumb: rgba(76, 142, 136, 0.4);
}

:root[data-theme="light"] {
    --th-bg-base: #f8fafc;
    --th-bg-body: #f1f5f9;
    --th-bg-elevated: #ffffff;
    --th-bg-card: #e2e8f0;
    --th-bg-input: #ffffff;
    --th-bg-component: #e2e8f0;
    --th-bg-hover: #cbd5e1;
    --th-bg-translucent: rgba(226, 232, 240, 0.7);
    --th-bg-translucent-hover: rgba(203, 213, 225, 0.8);
    --th-text: #0f172a;
    --th-text-alt: #1e293b;
    --th-text-muted: #64748b;
    --th-text-subtle: #94a3b8;
    --th-text-strong: #334155;
    --th-border: #cbd5e1;
    --th-border-light: #e2e8f0;
    --th-gradient-from: #ffffff;
    --th-gradient-to: #f1f5f9;
    --th-shadow: rgba(0, 0, 0, 0.08);
    --th-overlay: rgba(0, 0, 0, 0.3);
    --th-scrollbar-track: #f1f5f9;
    --th-scrollbar-thumb: #cbd5e1;
}

/* ============================================================
   1. BODY & GLOBAL
   ============================================================ */
:root[data-theme="light"] body {
    background-color: var(--th-bg-body) !important;
    color: var(--th-text) !important;
}

/* ===== THEME-AWARE LOGO ===== */
/* By default (dark theme): show white logo, hide dark logo */
.logo-dark-theme { display: inline-block; }
.logo-light-theme { display: none !important; }

:root[data-theme="light"] .logo-dark-theme { display: none !important; }
:root[data-theme="light"] .logo-light-theme { display: inline-block !important; }

/* ============================================================
   2. TAILWIND GRAY UTILITY OVERRIDES
   ============================================================ */

/* -- Backgrounds -- */
:root[data-theme="light"] .bg-gray-900 { background-color: var(--th-bg-base) !important; }
:root[data-theme="light"] .bg-gray-800 { background-color: var(--th-bg-elevated) !important; }
:root[data-theme="light"] .bg-gray-800\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
:root[data-theme="light"] .bg-gray-700 { background-color: var(--th-bg-card) !important; }
:root[data-theme="light"] .bg-gray-600 { background-color: #cbd5e1 !important; }
:root[data-theme="light"] .bg-gray-500 { background-color: #94a3b8 !important; }

/* -- Hover backgrounds -- */
:root[data-theme="light"] .hover\:bg-gray-700:hover { background-color: #e2e8f0 !important; }
:root[data-theme="light"] .hover\:bg-gray-600:hover { background-color: #cbd5e1 !important; }
:root[data-theme="light"] .hover\:bg-gray-500:hover { background-color: #94a3b8 !important; }
:root[data-theme="light"] .hover\:bg-gray-200:hover { background-color: #e2e8f0 !important; }

/* -- Disabled -- */
:root[data-theme="light"] .disabled\:bg-gray-600:disabled { background-color: #cbd5e1 !important; }

/* -- Text -- */
:root[data-theme="light"] .text-white { color: var(--th-text) !important; }
:root[data-theme="light"] .text-gray-100 { color: #1e293b !important; }
:root[data-theme="light"] .text-gray-200 { color: #1e293b !important; }
:root[data-theme="light"] .text-gray-300 { color: #475569 !important; }
:root[data-theme="light"] .text-gray-400 { color: #64748b !important; }
:root[data-theme="light"] .text-gray-500 { color: #64748b !important; }
:root[data-theme="light"] .text-gray-600 { color: #334155 !important; }

/* -- Hover text -- */
:root[data-theme="light"] .hover\:text-gray-200:hover { color: #0f172a !important; }
:root[data-theme="light"] .hover\:text-gray-300:hover { color: #1e293b !important; }
:root[data-theme="light"] .hover\:text-white:hover { color: #0f172a !important; }
:root[data-theme="light"] .hover\:text-gray-100:hover { color: #0f172a !important; }

/* -- Borders -- */
:root[data-theme="light"] .border-gray-700 { border-color: var(--th-border) !important; }
:root[data-theme="light"] .border-gray-600 { border-color: var(--th-border) !important; }

/* -- Divide -- */
:root[data-theme="light"] .divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--th-border) !important; }

/* -- Gradients -- */
:root[data-theme="light"] .from-gray-800 { --tw-gradient-from: #ffffff !important; }
:root[data-theme="light"] .to-gray-700 { --tw-gradient-to: #f1f5f9 !important; }

/* -- Headers & titres -- */
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] .font-bold {
    color: var(--th-text) !important;
}

/* -- Placeholder -- */
:root[data-theme="light"] .placeholder-gray-500::placeholder { color: #94a3b8 !important; }

/* -- Black overlays -- */
:root[data-theme="light"] .bg-black.bg-opacity-75,
:root[data-theme="light"] .bg-black\/75 {
    background-color: var(--th-overlay) !important;
}
:root[data-theme="light"] .bg-black.bg-opacity-50,
:root[data-theme="light"] .bg-black\/50 {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

/* ============================================================
   3. CUSTOM.CSS COMPONENTS — Body & Layout
   ============================================================ */

/* Body background override (custom.css sets #0D1321) */
:root[data-theme="light"] body {
    background-color: var(--th-bg-body) !important;
    color: var(--th-text) !important;
}

/* .header, .footer, .sidebar, .modal-bg (custom.css sets #1D2D44) */
:root[data-theme="light"] .header,
:root[data-theme="light"] .footer,
:root[data-theme="light"] .sidebar,
:root[data-theme="light"] .modal-bg {
    background-color: var(--th-bg-elevated) !important;
}

/* ============================================================
   4. FORM INPUTS & SELECTS
   ============================================================ */
:root[data-theme="light"] .form-input {
    background-color: var(--th-bg-input) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

:root[data-theme="light"] .form-input:focus {
    border-color: #DD922E !important;
}

:root[data-theme="light"] .form-select {
    background-color: var(--th-bg-input) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E") !important;
}

:root[data-theme="light"] .form-select option {
    background: var(--th-bg-input) !important;
    color: var(--th-text) !important;
}

/* Practice mode disabled inputs */
:root[data-theme="light"] .mode-practice #bpm-input,
:root[data-theme="light"] .mode-practice #tonality-select {
    background-color: var(--th-bg-card) !important;
}

/* ============================================================
   5. BUTTONS
   ============================================================ */

/* .btn:disabled */
:root[data-theme="light"] .btn:disabled {
    background-color: #cbd5e1 !important;
    color: #64748b !important;
}

/* .btn-secondary */
:root[data-theme="light"] .btn-secondary {
    border-color: #4C8E88 !important;
    color: #334155 !important;
}
:root[data-theme="light"] .btn-secondary:hover {
    color: #ffffff !important;
}

/* .btn-icon */
:root[data-theme="light"] .btn-icon {
    background-color: var(--th-bg-card) !important;
    color: var(--th-text-muted) !important;
}
:root[data-theme="light"] .btn-icon:hover {
    background-color: #4C8E88 !important;
    color: #ffffff !important;
}
:root[data-theme="light"] .btn-icon:disabled {
    background-color: var(--th-bg-card) !important;
}

/* ============================================================
   6. MODE BUTTONS (Sidebar drawer)
   ============================================================ */
:root[data-theme="light"] .mode-btn {
    background-color: var(--th-bg-card) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
:root[data-theme="light"] .mode-btn:hover {
    border-color: #4C8E88 !important;
    background-color: var(--th-bg-hover) !important;
}
/* .mode-btn.active keeps its orange style */

.mode-current-tag {
    color: #5eead4; /* teal-300 — lisible sur fond gris foncé (thème sombre) */
}
.mode-btn.active .mode-current-tag {
    color: #713f12; /* amber-900 — lisible sur fond orange (bouton actif) */
}
:root[data-theme="light"] .mode-current-tag {
    color: #0d9488; /* teal-600 — lisible sur fond clair */
}
:root[data-theme="light"] .mode-btn.active .mode-current-tag {
    color: #713f12; /* amber-900 — lisible sur fond orange */
}

:root[data-theme="light"] .btn-mode-group .btn-mode-item {
    background-color: var(--th-bg-card) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}
:root[data-theme="light"] .btn-mode-group .btn-mode-item:hover {
    background-color: var(--th-bg-hover) !important;
}

/* ============================================================
   7. SIDEBAR / DRAWERS
   ============================================================ */
:root[data-theme="light"] #learning-mode-drawer {
    background-color: var(--th-bg-elevated) !important;
    box-shadow: 4px 0 15px var(--th-shadow) !important;
}

:root[data-theme="light"] #settings-sidebar {
    background-color: var(--th-bg-elevated) !important;
    box-shadow: 4px 0 15px var(--th-shadow) !important;
}

/* ============================================================
   8. MODE TOGGLE (Simple/Avancé)
   ============================================================ */
:root[data-theme="light"] .mode-toggle-container {
    background: var(--th-bg-translucent) !important;
}
:root[data-theme="light"] .mode-toggle-label {
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .mode-toggle {
    background: var(--th-bg-hover) !important;
}
/* .mode-toggle.active keeps its teal color */

/* ============================================================
   9. APP LOADER
   ============================================================ */
:root[data-theme="light"] #app-loader {
    background-color: var(--th-bg-base) !important;
}
:root[data-theme="light"] #app-loader p {
    color: var(--th-text-muted) !important;
}

/* ============================================================
   10. PROGRESS TRACKER MODAL
   ============================================================ */
:root[data-theme="light"] #progress-tracker .bg-gray-800 {
    background-color: var(--th-bg-elevated) !important;
    box-shadow: 0 25px 50px -12px var(--th-shadow) !important;
}

/* ============================================================
   11. COACH MARK
   ============================================================ */
:root[data-theme="light"] #coach-mark {
    background-color: var(--th-bg-elevated) !important;
}

/* ============================================================
   12. TAB BUTTONS (Dashboard)
   ============================================================ */
:root[data-theme="light"] .tab-btn {
    color: var(--th-text-muted) !important;
}
:root[data-theme="light"] .tab-btn:hover {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .tab-btn.active {
    color: #DD922E !important;
}

/* ============================================================
   13. VOICE ROLLER
   ============================================================ */
:root[data-theme="light"] .voice-roller-wrapper {
    background: linear-gradient(180deg,
        rgba(226, 232, 240, 0.9) 0%,
        rgba(226, 232, 240, 0.6) 20%,
        rgba(226, 232, 240, 0.3) 50%,
        rgba(226, 232, 240, 0.6) 80%,
        rgba(226, 232, 240, 0.9) 100%) !important;
}
:root[data-theme="light"] .voice-roller-wrapper::before {
    background: linear-gradient(to bottom, var(--th-bg-card), transparent) !important;
}
:root[data-theme="light"] .voice-roller-wrapper::after {
    background: linear-gradient(to top, var(--th-bg-card), transparent) !important;
}
:root[data-theme="light"] .voice-roller-item {
    color: var(--th-text-strong) !important;
}

/* ============================================================
   14. CHORD PADS
   ============================================================ */
:root[data-theme="light"] .chord-pad {
    background-color: var(--th-bg-card) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* ============================================================
   15. ACTIONS MENU (contextual)
   ============================================================ */
:root[data-theme="light"] .actions-menu {
    background-color: var(--th-bg-elevated) !important;
    border-color: var(--th-border) !important;
    box-shadow: 0 4px 12px var(--th-shadow) !important;
}
:root[data-theme="light"] .actions-menu-item {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .actions-menu-item:hover {
    background-color: #4C8E88 !important;
    color: #ffffff !important;
}

/* ============================================================
   16. CUSTOM SLIDER (range input)
   ============================================================ */
:root[data-theme="light"] .custom-slider {
    background: var(--th-bg-card) !important;
}

/* ============================================================
   17. PRACTICE STEPS
   ============================================================ */
:root[data-theme="light"] .step-active {
    background-color: var(--th-bg-elevated) !important;
}
:root[data-theme="light"] .step-upcoming {
    background-color: var(--th-bg-base) !important;
}

/* ============================================================
   18. SIMPLE MODE HEADER
   ============================================================ */
:root[data-theme="light"] #simple-mode-header {
    background: linear-gradient(135deg, var(--th-bg-elevated) 0%, var(--th-bg-body) 100%) !important;
    border-bottom-color: var(--th-border) !important;
}

/* Toggle steps button */
:root[data-theme="light"] .toggle-steps-btn {
    background: var(--th-bg-translucent) !important;
    border-color: var(--th-border-light) !important;
}
:root[data-theme="light"] .toggle-steps-btn:hover {
    background: var(--th-bg-translucent-hover) !important;
}

/* Simple step cards */
:root[data-theme="light"] .simple-step {
    background: var(--th-bg-translucent) !important;
}
:root[data-theme="light"] .simple-step:hover {
    background: var(--th-bg-translucent-hover) !important;
    border-color: rgba(76, 142, 136, 0.3) !important;
}
:root[data-theme="light"] .simple-step.active {
    background: rgba(76, 142, 136, 0.1) !important;
}

/* Step icon */
:root[data-theme="light"] .step-icon {
    background: var(--th-bg-card) !important;
}

/* Step title & status */
:root[data-theme="light"] .step-title {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .step-status {
    color: var(--th-text-muted) !important;
}

/* Step connectors */
:root[data-theme="light"] .step-connector {
    background: var(--th-bg-card) !important;
}

/* Step action buttons */
:root[data-theme="light"] .step-action-btn.secondary {
    background: var(--th-bg-card) !important;
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .step-action-btn.secondary:hover {
    background: var(--th-bg-hover) !important;
}

/* ============================================================
   19. SIMPLE VISUALIZATION
   ============================================================ */
:root[data-theme="light"] #simple-visualization {
    background: linear-gradient(180deg, var(--th-bg-body) 0%, var(--th-bg-base) 100%) !important;
}

/* Simple tracks */
:root[data-theme="light"] .simple-track {
    background: var(--th-bg-translucent) !important;
    border-color: var(--th-border-light) !important;
}
:root[data-theme="light"] .simple-track:hover {
    background: var(--th-bg-translucent-hover) !important;
}
:root[data-theme="light"] .simple-track.focused {
    background: rgba(76, 142, 136, 0.08) !important;
}

/* Track info */
:root[data-theme="light"] .track-name {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .track-status {
    color: var(--th-text-muted) !important;
}

/* Track waveform */
:root[data-theme="light"] .track-waveform {
    background: rgba(226, 232, 240, 0.6) !important;
}

/* Track volume btn */
:root[data-theme="light"] .track-volume-btn {
    background: var(--th-bg-translucent) !important;
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .track-volume-btn:hover {
    background: rgba(76, 142, 136, 0.3) !important;
    color: var(--th-text) !important;
}

/* Empty state */
:root[data-theme="light"] .empty-state-title {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .empty-state-desc {
    color: var(--th-text-muted) !important;
}

/* ============================================================
   20. SIMPLE PLAYBACK CONTROLS
   ============================================================ */
:root[data-theme="light"] #simple-playback-controls {
    background: linear-gradient(180deg, var(--th-bg-elevated) 0%, var(--th-bg-body) 100%) !important;
    border-top-color: var(--th-border-light) !important;
}

/* Progress bar */
:root[data-theme="light"] .progress-bar {
    background: var(--th-bg-card) !important;
}
:root[data-theme="light"] .progress-time {
    color: var(--th-text-muted) !important;
}

/* Playback buttons */
:root[data-theme="light"] .playback-btn.small {
    background: var(--th-bg-card) !important;
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .playback-btn.small:hover {
    background: var(--th-bg-hover) !important;
    color: var(--th-text) !important;
}
:root[data-theme="light"] .playback-btn.play:disabled {
    background: var(--th-bg-hover) !important;
}

/* Action buttons (save/share) */
:root[data-theme="light"] .action-btn.share {
    background: var(--th-bg-card) !important;
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .action-btn.share:hover {
    background: var(--th-bg-hover) !important;
    color: var(--th-text) !important;
}

/* ============================================================
   21. SIMPLE FOOTER
   ============================================================ */
:root[data-theme="light"] #simple-footer {
    background: var(--th-bg-body) !important;
    color: var(--th-text-muted) !important;
    border-top-color: var(--th-border-light) !important;
}

/* ============================================================
   22. SIMPLE ASSISTANT (sticky wizard card)
   ============================================================ */

/* Card background & shadow */
:root[data-theme="light"] .simple-assistant {
    background: linear-gradient(135deg, var(--th-bg-elevated) 0%, var(--th-bg-base) 100%) !important;
    border-color: rgba(76, 142, 136, 0.25) !important;
    box-shadow: 0 4px 20px var(--th-shadow) !important;
}

/* Top progress line (step label + collapse btn) */
:root[data-theme="light"] .assistant-progress {
    color: var(--th-text-muted) !important;
}
:root[data-theme="light"] .assistant-collapse-btn {
    color: var(--th-text-muted) !important;
}
:root[data-theme="light"] .assistant-collapse-btn:hover {
    color: var(--th-text) !important;
}

/* Step rail pills */
:root[data-theme="light"] .assistant-rail-step {
    background: var(--th-bg-translucent) !important;
    color: var(--th-text-muted) !important;
    border-color: var(--th-border-light) !important;
}
:root[data-theme="light"] .assistant-rail-step.active {
    color: var(--th-text-strong) !important;
    background: rgba(76, 142, 136, 0.15) !important;
    border-color: rgba(76, 142, 136, 0.5) !important;
}
:root[data-theme="light"] .assistant-rail-step.completed {
    color: var(--th-text-strong) !important;
    background: rgba(34, 197, 94, 0.1) !important;
    border-color: rgba(34, 197, 94, 0.45) !important;
}

/* Step / title / description */
:root[data-theme="light"] .assistant-step {
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .assistant-title {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .assistant-desc {
    color: var(--th-text-muted) !important;
}

/* Tonality selector */
:root[data-theme="light"] .assistant-tonality-selector {
    background: var(--th-bg-translucent) !important;
}
:root[data-theme="light"] .assistant-tonality-selector .tonality-label {
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .assistant-tonality-selector .tonality-select {
    background: var(--th-bg-input) !important;
    color: var(--th-text) !important;
    border-color: var(--th-border) !important;
}

/* Secondary action buttons */
:root[data-theme="light"] .assistant-btn.secondary {
    background: var(--th-bg-card) !important;
    color: var(--th-text-strong) !important;
}
:root[data-theme="light"] .assistant-btn.secondary:hover {
    background: var(--th-bg-hover) !important;
    color: var(--th-text) !important;
}

/* ============================================================
   23. SCROLLBARS
   ============================================================ */
:root[data-theme="light"] #grid-container::-webkit-scrollbar-track {
    background: var(--th-scrollbar-track) !important;
}
:root[data-theme="light"] #grid-container::-webkit-scrollbar-thumb {
    background-color: var(--th-scrollbar-thumb) !important;
    border-color: var(--th-scrollbar-track) !important;
}
:root[data-theme="light"] #grid-container::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8 !important;
}

/* Generic scrollbar */
:root[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--th-bg-base) !important;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: var(--th-scrollbar-thumb) !important;
}
:root[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* ============================================================
   23. LYRICS
   ============================================================ */
:root[data-theme="light"] #lyrics-display-container {
    background: linear-gradient(180deg, rgba(248, 250, 252, 0.95) 0%, rgba(241, 245, 249, 0.95) 100%) !important;
    border-top-color: rgba(76, 142, 136, 0.3) !important;
}
:root[data-theme="light"] #lyrics-textarea {
    background-color: rgba(241, 245, 249, 0.8) !important;
    color: var(--th-text) !important;
    border-color: rgba(76, 142, 136, 0.3) !important;
}

/* ============================================================
   24. STATUS OVERLAY
   ============================================================ */
:root[data-theme="light"] .status-overlay-text {
    color: var(--th-text) !important;
}

/* ============================================================
   25. SHEPHERD (tour guide) — keep dark for contrast
   ============================================================ */
/* Shepherd keeps its dark theme — no override needed */

/* ============================================================
   26. CHECKBOX
   ============================================================ */
:root[data-theme="light"] .custom-checkbox-container label {
    color: var(--th-text) !important;
}

/* ============================================================
   27. PROFILE ROLE BADGES
   ============================================================ */
:root[data-theme="light"] #profile-role-display.role-default {
    background-color: var(--th-bg-card) !important;
    color: var(--th-text) !important;
}

/* ============================================================
   28. FORM LINKS
   ============================================================ */
:root[data-theme="light"] .form-link {
    color: var(--th-text) !important;
}
:root[data-theme="light"] .form-link:hover {
    color: #DD922E !important;
}

/* ============================================================
   29. CHORDS VOLUME SLIDER
   ============================================================ */
:root[data-theme="light"] .chords-volume-slider {
    background: var(--th-bg-card) !important;
}

/* ============================================================
   30. PROGRESS TRACKER STEPS
   ============================================================ */
:root[data-theme="light"] .progress-step.pending .progress-step-icon {
    background-color: var(--th-bg-card) !important;
    border-color: var(--th-border) !important;
}

/* Active step text: #E5E7EB is near-white → invisible on light modal */
:root[data-theme="light"] .progress-step-text-active {
    color: #0f172a !important;
}

/* Pending step text: darken slightly for light background */
:root[data-theme="light"] .progress-step-text-pending {
    color: #94a3b8 !important;
}

/* ============================================================
   31. LOADER
   ============================================================ */
:root[data-theme="light"] #loader {
    border-color: var(--th-bg-card) !important;
    border-top-color: #4C8E88 !important;
}

/* ============================================================
   32. SOUND WAVE LOADER
   ============================================================ */
:root[data-theme="light"] .sound-wave-loader .bar {
    background-color: var(--th-text-muted) !important;
}

/* ============================================================
   33. THEME PILL TOGGLE
   ============================================================ */
.theme-pill {
    position: relative;
    display: flex;
    align-items: center;
    background: #374151;
    border-radius: 9999px;
    padding: 3px;
    cursor: pointer;
    gap: 0;
    width: 108px;
    height: 36px;
}

:root[data-theme="light"] .theme-pill {
    background: #e2e8f0;
}

.theme-pill-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: #4C8E88;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

:root[data-theme="light"] .theme-pill-knob {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* Knob positions for 3 states */
.theme-pill[data-active="dark"] .theme-pill-knob {
    transform: translateX(0);
}
.theme-pill[data-active="light"] .theme-pill-knob {
    transform: translateX(36px);
}
.theme-pill[data-active="auto"] .theme-pill-knob {
    transform: translateX(72px);
}

.theme-pill-option {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 9999px;
    color: #9ca3af;
    font-size: 0.8rem;
    transition: color 0.3s ease;
    padding: 0;
}

.theme-pill-option:hover {
    color: #e5e7eb;
}

:root[data-theme="light"] .theme-pill-option {
    color: #94a3b8;
}

:root[data-theme="light"] .theme-pill-option:hover {
    color: #334155;
}

/* Active option: white icon on the teal knob */
.theme-pill-option.active {
    color: #ffffff !important;
}

/* ============================================================
   TRANSITION DOUCE (non-canvas)
   ============================================================ */
* {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

canvas, img, video, audio, svg {
    transition: none !important;
}