/* Default Theme (Dark/Slate) - No overrides needed as they are base styles */

/* White Mode */
body[data-theme="white"] {
    background-image: none !important;
    background-color: #f8fafc !important; /* Slate-50 */
    color: #0f172a !important; /* Slate-900 */
}

body[data-theme="white"] .bg-slate-900,
body[data-theme="white"] .glass-card {
    background-color: #ffffff !important;
    border-color: #e2e8f0 !important; /* Slate-200 */
    color: #0f172a !important;
    backdrop-filter: none !important;
}

body[data-theme="white"] .bg-slate-950 {
    background-color: #f1f5f9 !important; /* Slate-100 */
    border-color: #cbd5e1 !important; /* Slate-300 */
    color: #0f172a !important;
}

body[data-theme="white"] .text-slate-200,
body[data-theme="white"] .text-slate-300,
body[data-theme="white"] .text-slate-400 {
    color: #475569 !important; /* Slate-600 */
}

body[data-theme="white"] .text-white {
    color: #0f172a !important;
}

/* White Theme Accent Text Color Overrides */
body[data-theme="white"] .text-emerald-400,
body[data-theme="white"] .text-indigo-400,
body[data-theme="white"] .text-amber-400 {
    color: #0f172a !important; /* dark text for readability */
}

/* White Mode Navbar Overrides */
body[data-theme="white"] nav {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-bottom-color: #e2e8f0 !important;
}
body[data-theme="white"] nav a.text-white { color: #0f172a !important; }
body[data-theme="white"] nav a:hover.text-white { color: #4f46e5 !important; }
body[data-theme="white"] nav .bg-slate-800 {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    box-shadow: none !important;
}
body[data-theme="white"] nav svg.text-white { color: #4f46e5 !important; }
body[data-theme="white"] nav .text-slate-400 { color: #64748b !important; }
body[data-theme="white"] nav a:hover.bg-slate-800 { background-color: #f1f5f9 !important; }

/* Excessively Colourful */
body[data-theme="colorful"] {
    background-image: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3) !important;
    background-size: 400% 400% !important;
    animation: gradientBG 15s ease infinite;
    color: #ffffff !important;
}

@keyframes gradientBG {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

body[data-theme="colorful"] .bg-slate-900,
body[data-theme="colorful"] .bg-slate-950,
body[data-theme="colorful"] .glass-card {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
    color: white !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}

body[data-theme="colorful"] .text-slate-400 { color: #cbd5e1 !important; }

/* Today's Total Card Fix for Colorful Theme */
body[data-theme="colorful"] .bg-emerald-500\/10 {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border: 2px solid rgba(16, 185, 129, 0.4) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="colorful"] .text-emerald-400 {
    color: #34d399 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* Neon Dark */
body[data-theme="neon"] {
    background-image: none !important;
    background-color: #000000 !important;
    color: #0ff !important;
    font-family: 'Courier New', Courier, monospace;
}

body[data-theme="neon"] .bg-slate-900,
body[data-theme="neon"] .bg-slate-950,
body[data-theme="neon"] .glass-card {
    background-color: #111 !important;
    border: 1px solid #0f0 !important;
    box-shadow: 0 0 10px #0f0, inset 0 0 5px #0f0;
}

body[data-theme="neon"] .text-white,
body[data-theme="neon"] h1,
body[data-theme="neon"] h2,
body[data-theme="neon"] h3 {
    text-shadow: 0 0 5px #0ff, 0 0 10px #0ff;
    color: #fff !important;
}

body[data-theme="neon"] button {
    border: 1px solid #f0f !important;
    box-shadow: 0 0 5px #f0f;
    text-shadow: 0 0 2px #f0f;
}

body[data-theme="neon"] .bg-emerald-500\/10 {
    background-color: #111 !important;
    border: 1px solid #0f0 !important;
    box-shadow: 0 0 10px #0f0, inset 0 0 5px #0f0;
}

body[data-theme="neon"] .text-emerald-400 {
    color: #0f0 !important;
    text-shadow: 0 0 5px #0f0;
}

/* Trophy Case Theme Overrides */
body[data-theme="white"] .trophy-card {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
body[data-theme="white"] .trophy-card h3 { color: #d97706 !important; }

body[data-theme="colorful"] .trophy-card {
    background: rgba(0, 0, 0, 0.6) !important;
    border: 1px solid rgba(251, 191, 36, 0.4) !important;
    backdrop-filter: blur(10px);
}

body[data-theme="neon"] .trophy-card {
    background-color: #000 !important;
    border: 1px solid #f59e0b !important;
    box-shadow: 0 0 15px rgba(245, 158, 11, 0.4), inset 0 0 10px rgba(245, 158, 11, 0.2);
}
body[data-theme="neon"] .trophy-card h3 {
    color: #f59e0b !important;
    text-shadow: 0 0 5px #f59e0b;
}

/* Lush Theme - Comprehensive overrides */

/* Beach Theme */
body[data-theme="beach"] {
    background-image: url('images/bg_beach.png') !important;
    background-color: #f0f5ff !important; /* fallback light blue */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #0f172a; /* removed !important to allow local overrides */
}

/* Beach Theme Text Color Overrides */
body[data-theme="beach"] .text-slate-100:not(.theme-preview):not(.theme-preview *),
body[data-theme="beach"] .text-slate-200:not(.theme-preview):not(.theme-preview *),
body[data-theme="beach"] .text-slate-300:not(.theme-preview):not(.theme-preview *),
body[data-theme="beach"] .text-white:not(.theme-preview):not(.theme-preview *) {
    color: #0f172a !important;
}

body[data-theme="beach"] .text-slate-400:not(.theme-preview):not(.theme-preview *),
body[data-theme="beach"] .text-slate-500:not(.theme-preview):not(.theme-preview *),
body[data-theme="beach"] .text-indigo-200\/70:not(.theme-preview):not(.theme-preview *) {
    color: #334155 !important;
}

body[data-theme="beach"] .text-emerald-400:not(.theme-preview):not(.theme-preview *) {
    color: #065f46 !important; /* Darker emerald for light backgrounds */
}

body[data-theme="beach"] .bg-slate-800:not(.theme-preview),
body[data-theme="beach"] .bg-slate-900:not(.theme-preview),
body[data-theme="beach"] .bg-slate-950:not(.theme-preview),
body[data-theme="beach"] .card:not(.theme-preview),
body[data-theme="beach"] section:not(.theme-preview),
body[data-theme="beach"] #notifDropdown {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    color: #0f172a !important;
}

body[data-theme="beach"] .bg-emerald-500\/5:not(.theme-preview) {
    background-color: rgba(16, 185, 129, 0.1) !important;
}

/* Ensure theme previews in Settings keep their original contrast */
body[data-theme="beach"] .theme-preview.text-emerald-400 span,
body[data-theme="beach"] .theme-preview.text-emerald-400 { color: #34d399 !important; }
body[data-theme="beach"] .theme-preview.text-slate-300 span,
body[data-theme="beach"] .theme-preview.text-slate-300 { color: #cbd5e1 !important; }
body[data-theme="beach"] .theme-preview.text-fuchsia-400 span,
body[data-theme="beach"] .theme-preview.text-fuchsia-400 { color: #e879f9 !important; }
body[data-theme="beach"] .theme-preview.text-slate-900 span,
body[data-theme="beach"] .theme-preview.text-slate-900 { color: #0f172a !important; }


body[data-theme="beach"] nav {
    background-color: rgba(255, 255, 255, 0.8) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body[data-theme="beach"] nav a.text-white {
    color: #0f172a !important;
}
body[data-theme="lush"] {
    background-image: url('images/bg-lush.png') !important;
    background-color: #022c22 !important; /* fallback */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: #f8fafc !important; /* light text */
}

/* Emerald-900/950 for dark cards and massive containers */
body[data-theme="lush"] .bg-slate-900,
body[data-theme="lush"] .bg-slate-900\/20,
body[data-theme="lush"] .bg-slate-900\/30,
body[data-theme="lush"] .bg-slate-900\/50,
body[data-theme="lush"] .bg-slate-900\/80,
body[data-theme="lush"] .bg-slate-900\/90,
body[data-theme="lush"] .bg-slate-900\/95,
body[data-theme="lush"] .bg-slate-950,
body[data-theme="lush"] .bg-slate-950\/50,
body[data-theme="lush"] .bg-slate-950\/80,
body[data-theme="lush"] .bg-slate-950\/90,
body[data-theme="lush"] .card,
body[data-theme="lush"] .glass-card {
    background-color: rgba(6, 78, 59, 0.95) !important; 
    border-color: rgba(16, 185, 129, 0.3) !important; 
    backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
    color: #ffffff !important;
}

/* Emerald-800 for inputs, dropdowns, secondary cards */
body[data-theme="lush"] .bg-slate-800,
body[data-theme="lush"] .bg-slate-800\/20,
body[data-theme="lush"] .bg-slate-800\/30,
body[data-theme="lush"] .bg-slate-800\/50,
body[data-theme="lush"] .bg-slate-800\/80,
body[data-theme="lush"] .bg-slate-700,
body[data-theme="lush"] .bg-slate-700\/50,
body[data-theme="lush"] .bg-slate-600 {
    background-color: rgba(4, 120, 87, 0.90) !important;
    border-color: rgba(16, 185, 129, 0.4) !important;
}

/* Borders */
body[data-theme="lush"] .border-slate-800,
body[data-theme="lush"] .border-slate-800\/50,
body[data-theme="lush"] .border-slate-700,
body[data-theme="lush"] .border-slate-700\/50,
body[data-theme="lush"] .border-slate-600,
body[data-theme="lush"] .border-slate-500\/20,
body[data-theme="lush"] .border-slate-200 {
    border-color: rgba(16, 185, 129, 0.3) !important; 
}

/* Text Colors */
body[data-theme="lush"] .text-slate-500,
body[data-theme="lush"] .text-slate-400,
body[data-theme="lush"] .text-slate-300,
body[data-theme="lush"] .text-slate-200,
body[data-theme="lush"] .text-indigo-100,
body[data-theme="lush"] .text-indigo-200,
body[data-theme="lush"] .text-indigo-200\/70,
body[data-theme="lush"] .text-indigo-300 {
    color: #a7f3d0 !important; /* Emerald-200 */
}

/* Brand Colors (Indigo to Emerald) */
body[data-theme="lush"] .text-indigo-400,
body[data-theme="lush"] .text-indigo-400\/70,
body[data-theme="lush"] .text-indigo-500,
body[data-theme="lush"] .text-indigo-600 {
    color: #34d399 !important; /* Emerald-400 */
}

body[data-theme="lush"] .bg-indigo-500,
body[data-theme="lush"] .bg-indigo-500\/10,
body[data-theme="lush"] .bg-indigo-500\/20,
body[data-theme="lush"] .bg-indigo-500\/50,
body[data-theme="lush"] .bg-indigo-600,
body[data-theme="lush"] .bg-indigo-600\/80,
body[data-theme="lush"] .bg-indigo-900\/10,
body[data-theme="lush"] .bg-indigo-900\/20,
body[data-theme="lush"] .bg-indigo-900\/30,
body[data-theme="lush"] .bg-indigo-900\/50,
body[data-theme="lush"] .bg-gradient-to-br.from-indigo-600 {
    background-color: rgba(6, 78, 59, 0.8) !important; /* Emerald-900ish */
    background-image: none !important;
}

/* Navbar */
body[data-theme="lush"] nav {
    background-color: rgba(6, 78, 59, 0.9) !important;
    border-bottom: 1px solid rgba(16, 185, 129, 0.4) !important;
}

body[data-theme="lush"] nav .bg-slate-800 {
    background-color: rgba(4, 120, 87, 0.90) !important;
}

/* Lush: User/Login button in navbar - make it pop with bright emerald */
body[data-theme="lush"] nav a.bg-indigo-600 {
    background-color: #10b981 !important; /* Emerald-500 */
    color: #ffffff !important;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.5) !important;
}

body[data-theme="lush"] nav a.bg-indigo-600:hover {
    background-color: #059669 !important; /* Emerald-600 */
}

/* ClassJobs Theme - Magenta & Emerald Neon */
body[data-theme="classjobs"] {
    background: radial-gradient(circle at top right, rgba(217, 70, 239, 0.05), transparent 40%),
                radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.05), transparent 40%),
                #020617 !important;
    color: #f8fafc !important;
}

body[data-theme="classjobs"] .bg-slate-900,
body[data-theme="classjobs"] .bg-slate-950,
body[data-theme="classjobs"] .card {
    background-color: rgba(15, 23, 42, 0.8) !important;
    border-color: rgba(217, 70, 239, 0.2) !important;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4), 0 0 10px rgba(217, 70, 239, 0.05) !important;
}

body[data-theme="classjobs"] .text-indigo-400,
body[data-theme="classjobs"] .text-indigo-500 {
    color: #d946ef !important; /* Magenta */
}

body[data-theme="classjobs"] .bg-indigo-600,
body[data-theme="classjobs"] .bg-indigo-500 {
    background: linear-gradient(135deg, #d946ef, #a21caf) !important;
    box-shadow: 0 4px 15px rgba(217, 70, 239, 0.3) !important;
}

body[data-theme="classjobs"] .text-emerald-400 {
    color: #10b981 !important; /* Emerald */
    text-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

body[data-theme="classjobs"] .bg-emerald-500,
body[data-theme="classjobs"] .bg-emerald-600 {
    background: linear-gradient(135deg, #10b981, #059669) !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
}

body[data-theme="classjobs"] .glass-panel {
    background: rgba(15, 23, 42, 0.7) !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
}

body[data-theme="classjobs"] nav {
    background: rgba(2, 6, 23, 0.8) !important;
    border-bottom: 1px solid rgba(217, 70, 239, 0.1) !important;
}

body[data-theme="classjobs"] .trophy-card {
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)) !important;
    border: 1px solid rgba(217, 70, 239, 0.2) !important;
}

/* Custom Background Readability Fixes */
body.has-custom-bg[data-theme="classjobs"] .bg-slate-800,
body.has-custom-bg[data-theme="classjobs"] .bg-slate-900,
body.has-custom-bg[data-theme="classjobs"] .bg-slate-950,
body.has-custom-bg[data-theme="classjobs"] .card,
body.has-custom-bg[data-theme="classjobs"] .comment-item {
    background-color: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(16px) !important;
}

body.has-custom-bg[data-theme="beach"] .bg-slate-800,
body.has-custom-bg[data-theme="beach"] .bg-slate-900,
body.has-custom-bg[data-theme="beach"] .bg-slate-950,
body.has-custom-bg[data-theme="beach"] .card,
body.has-custom-bg[data-theme="beach"] .comment-item {
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(16px) !important;
}