/* CreateMyQuiz Theme System */

/* Default / Light Mode */
:root, .light {
    --bg-primary: #f5f3ff;
    --bg-gradient-from: #f5f3ff;
    --bg-gradient-via: #f0f9ff;
    --bg-gradient-to: #eef2ff;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #475569;
    --glass-bg: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(203, 213, 225, 0.8);
    --glass-shadow: 0 10px 30px -5px rgba(15, 23, 42, 0.05), 0 4px 6px -4px rgba(15, 23, 42, 0.02);
    --accent-primary-from: #4f46e5;
    --accent-primary-to: #7c3aed;
    --accent-secondary: #0284c7;

    /* Light theme inputs, selects, and navigation */
    --input-bg: #ffffff;
    --input-border: rgba(203, 213, 225, 0.9);
    --text-theme-input: #0f172a;
    --text-theme-placeholder: #64748b;
    --nav-bg: rgba(255, 255, 255, 0.9);
    --nav-link-inactive: #475569;
    --nav-link-hover: #0f172a;
    --nav-link-active: #4f46e5;
    --nav-link-active-bg: rgba(79, 70, 229, 0.1);
}

/* Dark Mode */
.dark {
    --bg-primary: #020617;
    --bg-gradient-from: #020617;
    --bg-gradient-via: #1e1b4b;
    --bg-gradient-to: #0f172a;
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #94a3b8;
    --glass-bg: rgba(15, 23, 42, 0.45);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: rgba(2, 6, 23, 0.4);
    --accent-primary-from: #6366f1;
    --accent-primary-to: #8b5cf6;
    --accent-secondary: #38bdf8;

    /* Dark theme inputs, selects, and navigation */
    --input-bg: rgba(15, 23, 42, 0.6);
    --input-border: rgba(255, 255, 255, 0.1);
    --text-theme-input: #f1f5f9;
    --text-theme-placeholder: #475569;
    --nav-bg: rgba(15, 23, 42, 0.6);
    --nav-link-inactive: #94a3b8;
    --nav-link-hover: #f1f5f9;
    --nav-link-active: #818cf8;
    --nav-link-active-bg: rgba(129, 140, 248, 0.15);
}

/* Solarized Mode */
.solarized {
    --bg-primary: #002b36;
    --bg-gradient-from: #002b36;
    --bg-gradient-via: #073642;
    --bg-gradient-to: #002b36;
    --text-primary: #93a1a1;
    --text-secondary: #586e75;
    --text-muted: #586e75;
    --glass-bg: rgba(7, 54, 66, 0.55);
    --glass-border: rgba(147, 161, 161, 0.15);
    --glass-shadow: rgba(0, 43, 54, 0.5);
    --accent-primary-from: #cb4b16;
    --accent-primary-to: #b58900;
    --accent-secondary: #2aa198;

    /* Solarized theme inputs, selects, and navigation */
    --input-bg: rgba(0, 43, 54, 0.5);
    --input-border: rgba(147, 161, 161, 0.15);
    --text-theme-input: #93a1a1;
    --text-theme-placeholder: #586e75;
    --nav-bg: rgba(7, 54, 66, 0.65);
    --nav-link-inactive: #586e75;
    --nav-link-hover: #93a1a1;
    --nav-link-active: #2aa198;
    --nav-link-active-bg: rgba(42, 161, 152, 0.15);
}

/* Oceanic (Abyssal Depth) Premium Mode */
.oceanic {
    --bg-primary: #0D1B2A;
    --bg-gradient-from: #0D1B2A;
    --bg-gradient-via: #1B263B;
    --bg-gradient-to: #0D1B2A;
    --text-primary: #E0E1DD;
    --text-secondary: #415A77;
    --text-muted: #415A77;
    --glass-bg: rgba(27, 38, 59, 0.65);
    --glass-border: rgba(167, 231, 223, 0.2);
    --glass-shadow: rgba(13, 27, 42, 0.5);
    --accent-primary-from: #1E6F78;
    --accent-primary-to: #A7E7DF;
    --accent-secondary: #A7E7DF;

    /* Oceanic theme inputs, selects, and navigation */
    --input-bg: rgba(13, 27, 42, 0.65);
    --input-border: rgba(167, 231, 223, 0.2);
    --text-theme-input: #E0E1DD;
    --text-theme-placeholder: #415A77;
    --nav-bg: rgba(27, 38, 59, 0.75);
    --nav-link-inactive: #415A77;
    --nav-link-hover: #E0E1DD;
    --nav-link-active: #A7E7DF;
    --nav-link-active-bg: rgba(167, 231, 223, 0.15);
}

/* Synthwave Neon (Radwave Night) Premium Mode */
.synthwave {
    --bg-primary: #0B001A;
    --bg-gradient-from: #0B001A;
    --bg-gradient-via: #240046;
    --bg-gradient-to: #0B001A;
    --text-primary: #F1E9FA;
    --text-secondary: #b892e8;
    --text-muted: #7209B7;
    --glass-bg: rgba(36, 0, 70, 0.65);
    --glass-border: rgba(247, 37, 133, 0.3);
    --glass-shadow: rgba(11, 0, 26, 0.6);
    --accent-primary-from: #F72585;
    --accent-primary-to: #4CC9F0;
    --accent-secondary: #4CC9F0;

    /* Synthwave theme inputs, selects, and navigation */
    --input-bg: rgba(11, 0, 26, 0.7);
    --input-border: rgba(114, 9, 183, 0.4);
    --text-theme-input: #F1E9FA;
    --text-theme-placeholder: #7209B7;
    --nav-bg: rgba(36, 0, 70, 0.75);
    --nav-link-inactive: #b892e8;
    --nav-link-hover: #F1E9FA;
    --nav-link-active: #F72585;
    --nav-link-active-bg: rgba(247, 37, 133, 0.15);
}

/* Warm Retro (70s Record Room) Premium Mode */
.warm_retro, .warm-retro {
    --bg-primary: #4A2E1B;
    --bg-gradient-from: #4A2E1B;
    --bg-gradient-via: #613B23;
    --bg-gradient-to: #4A2E1B;
    --text-primary: #FFF8E7;
    --text-secondary: #E1A95F;
    --text-muted: #924431;
    --glass-bg: rgba(74, 46, 27, 0.75);
    --glass-border: rgba(225, 169, 95, 0.3);
    --glass-shadow: rgba(42, 24, 12, 0.6);
    --accent-primary-from: #924431;
    --accent-primary-to: #E1A95F;
    --accent-secondary: #3F8A8C;

    /* Warm Retro theme inputs, selects, and navigation */
    --input-bg: rgba(55, 33, 19, 0.7);
    --input-border: rgba(225, 169, 95, 0.3);
    --text-theme-input: #FFF8E7;
    --text-theme-placeholder: #E1A95F;
    --nav-bg: rgba(74, 46, 27, 0.85);
    --nav-link-inactive: #E1A95F;
    --nav-link-hover: #FFF8E7;
    --nav-link-active: #3F8A8C;
    --nav-link-active-bg: rgba(63, 138, 140, 0.2);
}

/* Nordic Pastels (Fjord Morning) Premium Mode */
.nordic_pastels, .nordic-pastels, .nordic {
    --bg-primary: #F4F7F6;
    --bg-gradient-from: #F4F7F6;
    --bg-gradient-via: #E8F0EC;
    --bg-gradient-to: #E3ECF2;
    --text-primary: #3A4F50;
    --text-secondary: #4F6B6C;
    --text-muted: #5F7A7B;
    --glass-bg: rgba(244, 247, 246, 0.88);
    --glass-border: rgba(198, 215, 227, 0.6);
    --glass-shadow: 0 10px 30px -5px rgba(58, 79, 80, 0.08);
    --accent-primary-from: #3A4F50;
    --accent-primary-to: #5A7879;
    --accent-secondary: #D1E2D3;

    /* Nordic Pastels theme inputs, selects, and navigation */
    --input-bg: #ffffff;
    --input-border: rgba(198, 215, 227, 0.8);
    --text-theme-input: #3A4F50;
    --text-theme-placeholder: #7A9596;
    --nav-bg: rgba(244, 247, 246, 0.92);
    --nav-link-inactive: #4F6B6C;
    --nav-link-hover: #3A4F50;
    --nav-link-active: #3A4F50;
    --nav-link-active-bg: rgba(209, 226, 211, 0.4);
}

/* Common Body & Glass Panel base styles */
body {
    background: linear-gradient(-45deg, var(--bg-gradient-from), var(--bg-gradient-via), var(--bg-gradient-to));
    background-size: 400% 400%;
    animation: gradientMove 18s ease infinite;
    color: var(--text-primary);
    min-height: 100vh;
}

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

body.theme-ready {
    transition: background 0.5s ease, color 0.3s ease;
}

/* Glass panel utility styling */
.bg-theme-glass {
    background-color: var(--glass-bg) !important;
}
.border-theme-border {
    border-color: var(--glass-border) !important;
}
.text-theme-text {
    color: var(--text-primary) !important;
}
.text-theme-muted {
    color: var(--text-muted) !important;
}

/* Inputs & Form Controls */
input[type="text"], input[type="number"], input[type="email"], input[type="password"], select, textarea {
    background-color: var(--input-bg) !important;
    border-color: var(--input-border) !important;
    color: var(--text-theme-input) !important;
}
input[type="text"]::placeholder, input[type="number"]::placeholder, input[type="email"]::placeholder, input[type="password"]::placeholder, textarea::placeholder {
    color: var(--text-theme-placeholder) !important;
}

/* Navigation Theme Rules */
nav {
    background-color: var(--nav-bg) !important;
}
nav a, nav button, nav #mobile-theme-btn, nav #user-menu-btn {
    color: var(--nav-link-inactive) !important;
}
nav a:hover, nav button:hover, nav #mobile-theme-btn:hover, nav #user-menu-btn:hover {
    color: var(--nav-link-hover) !important;
    background-color: rgba(99, 102, 241, 0.08) !important;
}
nav a.active-nav-link {
    color: var(--nav-link-active) !important;
    background-color: var(--nav-link-active-bg) !important;
    font-weight: 600 !important;
}
#mobile-menu-top a.active-nav-link {
    color: var(--nav-link-active) !important;
    background-color: var(--nav-link-active-bg) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   Light Mode & Nordic Pastels Modern High-Contrast Overrides (.light, .nordic_pastels)
   ========================================================================== */

/* Sub-card boxes, inner panels, stats containers */
.light .bg-slate-950\/40,
.light .bg-slate-950\/60,
.light .bg-slate-950\/20,
.light .bg-slate-950\/10,
.light .bg-slate-900\/60,
.light .bg-slate-900\/80,
.light .bg-slate-950,
.light .bg-slate-900,
.nordic_pastels .bg-slate-950\/40,
.nordic_pastels .bg-slate-950\/60,
.nordic_pastels .bg-slate-950\/20,
.nordic_pastels .bg-slate-950\/10,
.nordic_pastels .bg-slate-900\/60,
.nordic_pastels .bg-slate-900\/80,
.nordic_pastels .bg-slate-950,
.nordic_pastels .bg-slate-900,
.nordic-pastels .bg-slate-950\/40,
.nordic-pastels .bg-slate-950\/60,
.nordic-pastels .bg-slate-950\/20,
.nordic-pastels .bg-slate-950\/10,
.nordic-pastels .bg-slate-900\/60,
.nordic-pastels .bg-slate-900\/80,
.nordic-pastels .bg-slate-950,
.nordic-pastels .bg-slate-900,
.nordic .bg-slate-950\/40,
.nordic .bg-slate-950\/60,
.nordic .bg-slate-950\/20,
.nordic .bg-slate-950\/10,
.nordic .bg-slate-900\/60,
.nordic .bg-slate-900\/80,
.nordic .bg-slate-950,
.nordic .bg-slate-900 {
    background-color: rgba(241, 245, 249, 0.85) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
}
.light .bg-slate-800,
.light .bg-slate-800\/60,
.nordic_pastels .bg-slate-800,
.nordic_pastels .bg-slate-800\/60,
.nordic-pastels .bg-slate-800,
.nordic-pastels .bg-slate-800\/60,
.nordic .bg-slate-800,
.nordic .bg-slate-800\/60 {
    background-color: rgba(241, 245, 249, 0.9) !important;
    border-color: rgba(203, 213, 225, 0.8) !important;
    color: #334155 !important;
}

/* Table Headers & Rows */
.light thead.bg-slate-950\/40,
.light thead,
.nordic_pastels thead.bg-slate-950\/40,
.nordic_pastels thead,
.nordic-pastels thead.bg-slate-950\/40,
.nordic-pastels thead,
.nordic thead.bg-slate-950\/40,
.nordic thead {
    background-color: rgba(241, 245, 249, 0.95) !important;
    color: #475569 !important;
    border-bottom-color: rgba(203, 213, 225, 0.8) !important;
}
.light tr.hover\:bg-white\/5:hover,
.light tr:hover,
.nordic_pastels tr.hover\:bg-white\/5:hover,
.nordic_pastels tr:hover,
.nordic-pastels tr.hover\:bg-white\/5:hover,
.nordic-pastels tr:hover,
.nordic tr.hover\:bg-white\/5:hover,
.nordic tr:hover {
    background-color: rgba(241, 245, 249, 0.75) !important;
}
.light td, .light th,
.nordic_pastels td, .nordic_pastels th,
.nordic-pastels td, .nordic-pastels th,
.nordic td, .nordic th {
    border-color: rgba(226, 232, 240, 0.9) !important;
}

/* Dropdown Menus & Popups (Theme Menu, User Menu, Notifications, Mobile Nav) */
.light #theme-menu,
.light #user-menu-dropdown,
.light #notifications-menu,
.light #mobile-theme-menu,
.light #mobile-menu-top,
.nordic_pastels #theme-menu,
.nordic_pastels #user-menu-dropdown,
.nordic_pastels #notifications-menu,
.nordic_pastels #mobile-theme-menu,
.nordic_pastels #mobile-menu-top,
.nordic-pastels #theme-menu,
.nordic-pastels #user-menu-dropdown,
.nordic-pastels #notifications-menu,
.nordic-pastels #mobile-theme-menu,
.nordic-pastels #mobile-menu-top,
.nordic #theme-menu,
.nordic #user-menu-dropdown,
.nordic #notifications-menu,
.nordic #mobile-theme-menu,
.nordic #mobile-menu-top {
    background-color: #ffffff !important;
    border-color: rgba(203, 213, 225, 0.9) !important;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.12), 0 8px 10px -6px rgba(15, 23, 42, 0.04) !important;
}
.light #theme-menu button,
.light #user-menu-dropdown a,
.light #notifications-menu a,
.light #mobile-theme-menu button,
.light #mobile-menu-top a,
.nordic_pastels #theme-menu button,
.nordic_pastels #user-menu-dropdown a,
.nordic_pastels #notifications-menu a,
.nordic_pastels #mobile-theme-menu button,
.nordic_pastels #mobile-menu-top a,
.nordic-pastels #theme-menu button,
.nordic-pastels #user-menu-dropdown a,
.nordic-pastels #notifications-menu a,
.nordic-pastels #mobile-theme-menu button,
.nordic-pastels #mobile-menu-top a,
.nordic #theme-menu button,
.nordic #user-menu-dropdown a,
.nordic #notifications-menu a,
.nordic #mobile-theme-menu button,
.nordic #mobile-menu-top a {
    color: #334155 !important;
}
.light #theme-menu button:hover,
.light #user-menu-dropdown a:hover,
.light #notifications-menu a:hover,
.light #mobile-theme-menu button:hover,
.light #mobile-menu-top a:hover,
.nordic_pastels #theme-menu button:hover,
.nordic_pastels #user-menu-dropdown a:hover,
.nordic_pastels #notifications-menu a:hover,
.nordic_pastels #mobile-theme-menu button:hover,
.nordic_pastels #mobile-menu-top a:hover,
.nordic-pastels #theme-menu button:hover,
.nordic-pastels #user-menu-dropdown a:hover,
.nordic-pastels #notifications-menu a:hover,
.nordic-pastels #mobile-theme-menu button:hover,
.nordic-pastels #mobile-menu-top a:hover,
.nordic #theme-menu button:hover,
.nordic #user-menu-dropdown a:hover,
.nordic #notifications-menu a:hover,
.nordic #mobile-theme-menu button:hover,
.nordic #mobile-menu-top a:hover {
    background-color: rgba(241, 245, 249, 1) !important;
    color: #0f172a !important;
}
.light #user-menu-dropdown div,
.light #notifications-menu div,
.nordic_pastels #user-menu-dropdown div,
.nordic_pastels #notifications-menu div,
.nordic-pastels #user-menu-dropdown div,
.nordic-pastels #notifications-menu div,
.nordic #user-menu-dropdown div,
.nordic #notifications-menu div {
    color: #475569 !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
}
.light #user-menu-dropdown span.text-white,
.nordic_pastels #user-menu-dropdown span.text-white,
.nordic-pastels #user-menu-dropdown span.text-white,
.nordic #user-menu-dropdown span.text-white {
    color: #0f172a !important;
}

/* Action Badges & Buttons Contrast Overrides */
/* Indigo (Assign / Pro features) */
.light .text-indigo-200,
.light .text-indigo-300,
.nordic_pastels .text-indigo-200,
.nordic_pastels .text-indigo-300,
.nordic-pastels .text-indigo-200,
.nordic-pastels .text-indigo-300,
.nordic .text-indigo-200,
.nordic .text-indigo-300 {
    color: #3730a3 !important; /* Indigo 800 */
}
.light .bg-indigo-500\/20,
.nordic_pastels .bg-indigo-500\/20,
.nordic-pastels .bg-indigo-500\/20,
.nordic .bg-indigo-500\/20 {
    background-color: rgba(224, 231, 255, 0.9) !important;
    border-color: rgba(199, 210, 254, 0.9) !important;
}

/* Blue (Link / Preview) */
.light .text-blue-200,
.light .text-blue-300,
.nordic_pastels .text-blue-200,
.nordic_pastels .text-blue-300,
.nordic-pastels .text-blue-200,
.nordic-pastels .text-blue-300,
.nordic .text-blue-200,
.nordic .text-blue-300 {
    color: #1e40af !important; /* Blue 800 */
}
.light .bg-blue-500\/20,
.nordic_pastels .bg-blue-500\/20,
.nordic-pastels .bg-blue-500\/20,
.nordic .bg-blue-500\/20 {
    background-color: rgba(219, 234, 254, 0.9) !important;
    border-color: rgba(191, 219, 254, 0.9) !important;
}

/* Emerald (PDF / Pass / Success) */
.light .text-emerald-200,
.light .text-emerald-300,
.nordic_pastels .text-emerald-200,
.nordic_pastels .text-emerald-300,
.nordic-pastels .text-emerald-200,
.nordic-pastels .text-emerald-300,
.nordic .text-emerald-200,
.nordic .text-emerald-300 {
    color: #065f46 !important; /* Emerald 800 */
}
.light .bg-emerald-500\/20,
.nordic_pastels .bg-emerald-500\/20,
.nordic-pastels .bg-emerald-500\/20,
.nordic .bg-emerald-500\/20 {
    background-color: rgba(209, 250, 229, 0.9) !important;
    border-color: rgba(167, 243, 208, 0.9) !important;
}

/* Amber (Free plan / Warnings) */
.light .text-amber-200,
.light .text-amber-300,
.nordic_pastels .text-amber-200,
.nordic_pastels .text-amber-300,
.nordic-pastels .text-amber-200,
.nordic-pastels .text-amber-300,
.nordic .text-amber-200,
.nordic .text-amber-300 {
    color: #92400e !important; /* Amber 800 */
}
.light .bg-amber-500\/20,
.nordic_pastels .bg-amber-500\/20,
.nordic-pastels .bg-amber-500\/20,
.nordic .bg-amber-500\/20 {
    background-color: rgba(254, 243, 199, 0.9) !important;
    border-color: rgba(253, 230, 138, 0.9) !important;
}

/* Red (Delete / Logout) */
.light .text-red-200,
.light .text-red-300,
.light .text-red-400,
.nordic_pastels .text-red-200,
.nordic_pastels .text-red-300,
.nordic_pastels .text-red-400,
.nordic-pastels .text-red-200,
.nordic-pastels .text-red-300,
.nordic-pastels .text-red-400,
.nordic .text-red-200,
.nordic .text-red-300,
.nordic .text-red-400 {
    color: #991b1b !important; /* Red 800 */
}
.light .bg-red-500\/20,
.nordic_pastels .bg-red-500\/20,
.nordic-pastels .bg-red-500\/20,
.nordic .bg-red-500\/20 {
    background-color: rgba(254, 226, 226, 0.9) !important;
    border-color: rgba(254, 202, 202, 0.9) !important;
}

/* Slate Text Overrides in Light & Nordic Pastels Mode */
.light .text-slate-100,
.light .text-slate-200,
.light .text-slate-300,
.nordic_pastels .text-slate-100,
.nordic_pastels .text-slate-200,
.nordic_pastels .text-slate-300,
.nordic-pastels .text-slate-100,
.nordic-pastels .text-slate-200,
.nordic-pastels .text-slate-300,
.nordic .text-slate-100,
.nordic .text-slate-200,
.nordic .text-slate-300 {
    color: #3A4F50 !important;
}
.light .text-slate-400,
.light .text-slate-500,
.nordic_pastels .text-slate-400,
.nordic_pastels .text-slate-500,
.nordic-pastels .text-slate-400,
.nordic-pastels .text-slate-500,
.nordic .text-slate-400,
.nordic .text-slate-500 {
    color: #4F6B6C !important;
}

/* Footer styling in light & nordic pastels mode */
.light footer.bg-slate-950\/20,
.light footer,
.nordic_pastels footer.bg-slate-950\/20,
.nordic_pastels footer,
.nordic-pastels footer.bg-slate-950\/20,
.nordic-pastels footer,
.nordic footer.bg-slate-950\/20,
.nordic footer {
    background-color: rgba(241, 245, 249, 0.6) !important;
    border-color: rgba(226, 232, 240, 0.8) !important;
    color: #475569 !important;
}

/* Light & Nordic Pastels mode community cards */
.light .community-card,
.nordic_pastels .community-card,
.nordic-pastels .community-card,
.nordic .community-card {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(58, 79, 80, 0.15) !important;
    backdrop-filter: blur(20px);
}
.light .community-card:hover,
.nordic_pastels .community-card:hover,
.nordic-pastels .community-card:hover,
.nordic .community-card:hover {
    border-color: rgba(58, 79, 80, 0.3) !important;
    box-shadow: 0 10px 25px -5px rgba(58, 79, 80, 0.1);
}