/* assets/css/themes.css - Multi-theme system */

/* 1. DEFAULT THEME (Modern Dark) */
body.theme-default {
    --bg-color: #0f0f0f;
    --text-color: #0a774b;
    --card-bg: #e8eff1;
    --card-border: #333333;
    --accent-color: #ffc107;
    --accent-text: #000000;
    --hero-overlay: rgba(0,0,0,0.7);
    --admin-bg: #f8f9fa;
    --admin-sidebar: #1a1a1a;
    --admin-nav-link: #adb5bd;
}

/* 2. CHRISTMAS THEME */
body.theme-christmas {
    --bg-color: #0a2e12;
    --text-color: #ffffff;
    --card-bg: #144d21;
    --card-border: #d4af37;
    --accent-color: #c41e3a;
    --accent-text: #ffffff;
    --hero-overlay: rgba(10, 46, 18, 0.8);
    --admin-bg: #fdf5e6;
    --admin-sidebar: #0a2e12;
    --admin-nav-link: #d4af37;
}

/* 3. STANDARD THEME (Professional) */
body.theme-standard {
    --bg-color: #f4f7f6;
    --text-color: #333333;
    --card-bg: #ffffff;
    --card-border: #dee2e6;
    --accent-color: #0056b3;
    --accent-text: #ffffff;
    --hero-overlay: rgba(0, 86, 179, 0.8);
    --admin-bg: #e9ecef;
    --admin-sidebar: #343a40;
    --admin-nav-link: #cfd8dc;
}

/* 4. FUTURISTIC THEME (Cyberpunk) */
body.theme-futuristic {
    --bg-color: #0d0221;
    --text-color: #00f2ff;
    --card-bg: #190e4f;
    --card-border: #ff00ff;
    --accent-color: #ff00ff;
    --accent-text: #ffffff;
    --hero-overlay: rgba(13, 2, 33, 0.8);
    --admin-bg: #0d0221;
    --admin-sidebar: #190e4f;
    --admin-nav-link: #00f2ff;
}

/* 5. MIDNIGHT GOLD (Luxury) */
body.theme-midnight {
    --bg-color: #121212;
    --text-color: #e0e0e0;
    --card-bg: #1e1e1e;
    --card-border: #c5a059;
    --accent-color: #c5a059;
    --accent-text: #121212;
    --hero-overlay: rgba(0,0,0,0.85);
    --admin-bg: #1a1a1a;
    --admin-sidebar: #121212;
    --admin-nav-link: #c5a059;
}

/* 6. OCEAN BREEZE (Fresh) */
body.theme-ocean {
    --bg-color: #e0f2f1;
    --text-color: #004d40;
    --card-bg: #ffffff;
    --card-border: #b2dfdb;
    --accent-color: #009688;
    --accent-text: #ffffff;
    --hero-overlay: rgba(0, 77, 64, 0.7);
    --admin-bg: #f1f8e9;
    --admin-sidebar: #004d40;
    --admin-nav-link: #80cbc4;
}

/* 7. SAKURA (Elegant Soft) */
body.theme-sakura {
    --bg-color: #fff5f8;
    --text-color: #5d4037;
    --card-bg: #ffffff;
    --card-border: #f8bbd0;
    --accent-color: #ec407a;
    --accent-text: #ffffff;
    --hero-overlay: rgba(236, 64, 122, 0.6);
    --admin-bg: #fffcfd;
    --admin-sidebar: #ad1457;
    --admin-nav-link: #f8bbd0;
}

/* Global Variable Application */
body[class*="theme-"] {
    background-color: var(--bg-color) !important;
    color: var(--text-color) !important;
    transition: background-color 0.3s, color 0.3s;
}

body[class*="theme-"] .card {
    background-color: var(--card-bg) !important;
    border-color: var(--card-border) !important;
    color: var(--text-color) !important;
}

body[class*="theme-"] h1, 
body[class*="theme-"] h2, 
body[class*="theme-"] h3, 
body[class*="theme-"] h4, 
body[class*="theme-"] h5, 
body[class*="theme-"] h6 {
    color: var(--text-color) !important;
}

body[class*="theme-"] .sidebar h5,
body[class*="theme-"] .sidebar small {
    color: #fff !important;
}

body[class*="theme-"] .btn-warning, 
body[class*="theme-"] .btn-primary,
body[class*="theme-"] .badge.bg-warning,
body[class*="theme-"] .timer-box,
body[class*="theme-"] .rank-badge {
    background-color: var(--accent-color) !important;
    color: var(--accent-text) !important;
    border-color: var(--accent-color) !important;
}

body[class*="theme-"] .btn-outline-dark,
body[class*="theme-"] .btn-outline-light {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

body[class*="theme-"] .btn-outline-dark:hover,
body[class*="theme-"] .btn-outline-light:hover {
    background-color: var(--accent-color) !important;
    color: var(--accent-text) !important;
}

body[class*="theme-"] .hero {
    background-blend-mode: overlay;
    background-color: var(--hero-overlay) !important;
}

/* Admin Sidebar adjustments */
body[class*="theme-"] .sidebar {
    background-color: var(--admin-sidebar) !important;
}

body[class*="theme-"] .nav-link {
    color: var(--admin-nav-link) !important;
}

body[class*="theme-"] .nav-link.active,
body[class*="theme-"] .nav-link:hover {
    background-color: rgba(248, 4, 4, 0.1) !important;
    color: #fff !important;
}

body[class*="theme-"] .main-content {
    background-color: var(--admin-bg) !important;
}

body[class*="theme-"] .mobile-header {
    background-color: var(--admin-sidebar) !important;
}