/* ==========================================
   🎨 MUSIC LIGHT THEME - COMPLETE BRIGHT INTERFACE
   ========================================== */

/* ---- Global Page Background for Light Mode ---- */
html.light body {
    background-color: #f8f9fa;
}

/* ==========================================
   ---- History Panel (Main Khung Phải) ----
   ========================================== */
html.light .history-panel {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03) !important;
}

html.light .history-header {
    background: #fcfcfc !important;
    border-bottom-color: #eeeeee !important;
}

html.light .btn-bulk {
    border-color: #e2e8f0 !important;
    color: #4b5563 !important;
    background: #ffffff !important;
}
html.light .btn-bulk:hover {
    background: #f8fafc !important;
    border-color: #cbd5e1 !important;
}

html.light .music-group {
    border-bottom-color: #f1f5f9 !important;
}

html.light .track-item:hover {
    background: #f8fafc !important;
}

html.light .track-item.track-playing {
    background: rgba(99, 102, 241, 0.04) !important;
    border-left-color: #6366f1 !important;
}

html.light .track-title { color: #1e293b !important; }
html.light .track-prompt { color: #64748b !important; }
html.light .track-timestamp { color: #94a3b8 !important; }
html.light .credit-value { color: #1e293b !important; }
html.light .credit-label { color: #94a3b8 !important; }

html.light .btn-play-mini {
    border-color: #e2e8f0 !important;
    color: #475569 !important;
    background: #ffffff !important;
}
html.light .btn-play-mini:hover {
    border-color: #94a3b8 !important;
    color: #1e293b !important;
}
html.light .btn-play-live {
    border-color: #6366f1 !important;
    color: #6366f1 !important;
}
html.light .btn-play-live:hover {
    background: rgba(99, 102, 241, 0.05) !important;
}

html.light .track-cover { background: #f1f5f9 !important; }

/* Progress bar */
html.light .progress-bar-bg { background: #e2e8f0 !important; }
html.light .progress-bar-fill { background: #1e293b !important; }
html.light .progress-thumb { background: #ffffff !important; border: 2px solid #1e293b !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }
html.light .track-time-info { color: #64748b !important; }

/* Checkbox */
html.light .custom-checkbox { border-color: #cbd5e1 !important; }
html.light .custom-checkbox:hover { border-color: #94a3b8 !important; }
html.light .custom-checkbox.checked { background: #1e293b !important; border-color: #1e293b !important; }
html.light .custom-checkbox.checked::after { color: #ffffff !important; }

/* Badges */
html.light .badge-processing {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border-color: #e2e8f0 !important;
}
html.light .badge-done {
    background: #1e293b !important;
    color: #ffffff !important;
}
html.light .badge-live {
    background: rgba(99, 102, 241, 0.08) !important;
    color: #6366f1 !important;
    border-color: rgba(99, 102, 241, 0.2) !important;
}
html.light .live-dot { background: #6366f1 !important; }

/* Waveform */
html.light .waveform-bars span { background: #cbd5e1 !important; }
html.light .waveform-bars.idle span { background: #f1f5f9 !important; }
html.light .waveform-bars.playing span { background: #6366f1 !important; }

/* Download button */
html.light .btn-dl-mini { color: #94a3b8 !important; }
html.light .btn-dl-mini:hover { color: #1e293b !important; }

/* Delete button */
html.light .btn-delete-track { color: #94a3b8 !important; }
html.light .btn-delete-track:hover { color: #ef4444 !important; }

/* Empty state */
html.light .history-empty { color: #94a3b8 !important; }
html.light .loading-text { color: #64748b !important; }
html.light .stream-time { color: #64748b !important; }

/* ==========================================
   ---- Settings Panel (Khung Trái) ----
   ========================================== */
html.light .settings-panel {
    background: transparent !important;
}

html.light .settings-panel::before {
    background: #e2e8f0 !important; /* Thay gradient rực rỡ bằng màu viền nhẹ */
    animation: none !important;
}

html.light .settings-panel::after {
    background: #ffffff !important;
}

html.light .simple-card,
html.light .advanced-card {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

html.light .card-label { 
    color: #1e293b !important; 
    font-weight: 700 !important;
}

html.light .input-frame {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
html.light .input-frame:focus-within {
    border-color: #6366f1 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.05) !important;
}

html.light .simple-textarea,
html.light .form-input-clean { 
    color: #1e293b !important; 
}
html.light .simple-textarea::placeholder,
html.light .form-input-clean::placeholder { 
    color: #94a3b8 !important; 
}

/* Vocal segmented */
html.light .vocal-segmented-control { 
    background: #f1f5f9 !important; 
    border: 1px solid #e2e8f0 !important;
}
html.light .vocal-btn { 
    color: #64748b !important; 
}
html.light .vocal-btn.active { 
    background: #ffffff !important; 
    color: #1e293b !important; 
    font-weight: 700 !important; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; 
}

/* Chips */
html.light .outlined-chip { 
    background: #ffffff !important;
    border-color: #e2e8f0 !important; 
    color: #64748b !important; 
}
html.light .outlined-chip:hover { 
    border-color: #6366f1 !important; 
    color: #6366f1 !important; 
    background: rgba(99, 102, 241, 0.02) !important;
}

/* Mode segmented (Header) */
html.light .mode-segmented-control { 
    background: #f1f5f9 !important; 
    border: 1px solid #e2e8f0 !important;
}
html.light .mode-btn { 
    color: #64748b !important; 
}
html.light .mode-btn.active { 
    background: #ffffff !important; 
    color: #1e293b !important; 
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08) !important; 
}

/* Bottom bar */
html.light .bottom-control-bar {
    border-top-color: #eeeeee !important;
}

html.light .btn-generate { 
    background: #1e293b !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(30, 41, 59, 0.2) !important;
}
html.light .btn-generate:hover { 
    background: #0f172a !important; 
    transform: translateY(-1px) !important;
}

html.light .control-item.credit-info { 
    background: #ffffff !important; 
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
}
html.light .credit-info .highlight {
    color: #6366f1 !important;
}

/* Custom Select in settings */
html.light .select-trigger {
    background: #ffffff !important;
    border-color: #e2e8f0 !important;
    color: #1e293b !important;
}
html.light .select-trigger:hover {
    border-color: #94a3b8 !important;
}

/* ==========================================
   ---- Sidebar Panel (Khung Trượt Detail) ----
   ========================================== */
html.light .track-sidebar::before { 
    background: rgba(0,0,0,0.2) !important; 
}

html.light .sidebar-panel {
    background: #ffffff !important;
    border-left: 1px solid #e2e8f0 !important;
    box-shadow: -10px 0 30px rgba(0,0,0,0.05) !important;
}

html.light .sidebar-close {
    background: #f1f5f9 !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
}
html.light .sidebar-close:hover { 
    background: #e2e8f0 !important; 
    color: #1e293b !important; 
}

html.light .sidebar-title { 
    color: #1e293b !important; 
    font-weight: 800 !important;
}

html.light .sidebar-section { 
    border-top-color: #f1f5f9 !important; 
}
html.light .sidebar-label { 
    color: #94a3b8 !important; 
}
html.light .sidebar-value { 
    color: #1e293b !important; 
}
html.light .sidebar-lyrics { 
    color: #475569 !important; 
    background: #f8fafc !important;
    padding: 12px !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
}
html.light .sidebar-lyrics::-webkit-scrollbar-thumb { 
    background: #cbd5e1 !important; 
}

html.light .sidebar-info-row { 
    color: #64748b !important; 
}
html.light .sidebar-info-row span:last-child { 
    color: #1e293b !important; 
    font-weight: 600 !important;
}

html.light .sidebar-play-btn { 
    background: #1e293b !important; 
    color: #ffffff !important; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}
html.light .sidebar-play-btn:hover { 
    background: #0f172a !important; 
    transform: scale(1.05) translateY(-2px) !important;
}
html.light .sidebar-play-btn.disabled { 
    background: #f1f5f9 !important; 
    color: #cbd5e1 !important; 
}

html.light .sidebar-dl-btn { 
    background: #1e293b !important; 
    color: #ffffff !important; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
}
html.light .sidebar-dl-btn:hover { 
    background: #0f172a !important; 
}
html.light .sidebar-dl-btn.disabled { 
    background: #f1f5f9 !important; 
    color: #cbd5e1 !important; 
}

/* Toggle & Switch in light mode */
html.light .toggle-switch {
    background: #e2e8f0;
    border-radius: 20px;
}
html.light .toggle-slider {
    background-color: #cbd5e1;
}
html.light .toggle-slider::before {
    background-color: #ffffff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
html.light input:checked + .toggle-slider {
    background-color: #1e293b;
}
html.light input:checked + .toggle-slider::before {
    background-color: #ffffff;
}

/* Tooltip & Toast in light mode */
html.light .toast {
    background: #ffffff !important;
    color: #1e293b !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1) !important;
    border: 1px solid #e2e8f0 !important;
}
html.light .toast.success i { color: #10b981 !important; }
html.light .toast.error i { color: #ef4444 !important; }