/* ==========================================================================
   Just Simple Hosting - Complete Light Mode Overrides
   ========================================================================== */


html.light-mode,
html.light-mode body,
body.light-mode {
    --color-slate-950: #f8fafc !important;
    --color-slate-900: #f1f5f9 !important;
    --color-slate-800: #e2e8f0 !important;
    --color-white: #0f172a !important;
    background-color: #f8fafc !important; /* slate-50 */
    color: #334155 !important;           /* slate-700 */
}


body.light-mode nav,
body.light-mode nav.fixed,
body.light-mode header {
    background-color: inherit !important;
    border-color: inherit !important;
}


body.light-mode .glass,
body.light-mode .mega-menu,
body.light-mode .modal,
body.light-mode .card {
    background-color: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode aside#mobile-sidebar {
    background-color: #ffffff !important;
    border-left-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode #mobile-overlay {
    background-color: rgba(0, 0, 0, 0.3) !important;
}


body.light-mode #preloader {
    background-color: #f8fafc !important;
}


body.light-mode .border-white\/5,
body.light-mode .border-white\/10,
body.light-mode .border-slate-800,
body.light-mode .border-slate-700 {
    border-color: rgba(0, 0, 0, 0.08) !important;
}

body.light-mode input,
body.light-mode select,
body.light-mode textarea {
    background-color: #ffffff !important;
    border-color: rgba(0, 0, 0, 0.15) !important;
    color: #0f172a !important;
}


/* 7. Tailwind Utility Layer Overrides  */
@layer utilities {
    html.light-mode .bg-white.text-black,
    body.light-mode .bg-white.text-black {
        background-color: #0f172a !important;
        color: #ffffff !important;
        transition: background-color 0.15s ease, color 0.15s ease !important;
    }

    html.light-mode .bg-white.text-black:hover,
    body.light-mode .bg-white.text-black:hover {
        background-color: #f97316 !important;
        color: #ffffff !important;
    }

    html.light-mode .bg-white\/5,
    body.light-mode .bg-white\/5 {
        background-color: rgba(0, 0, 0, 0.03) !important;
    }

    html.light-mode .bg-white\/5.hover\:bg-white:hover,
    body.light-mode .bg-white\/5.hover\:bg-white:hover {
        background-color: #0f172a !important;
        color: #ffffff !important;
    }

    html.light-mode .text-white:not([class*="bg-orange-"], [class*="bg-blue-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-red-"], [class*="bg-purple-"]),
    body.light-mode .text-white:not([class*="bg-orange-"], [class*="bg-blue-"], [class*="bg-green-"], [class*="bg-indigo-"], [class*="bg-red-"], [class*="bg-purple-"]) {
        color: #0f172a !important;
    }

    html.light-mode nav a.text-white:hover,
    html.light-mode nav button.text-white:hover,
    body.light-mode nav a.text-white:hover,
    body.light-mode nav button.text-white:hover {
        color: #f97316 !important;
    }

    html.light-mode nav a:hover,
    html.light-mode nav button:hover,
    body.light-mode nav a:hover,
    body.light-mode nav button:hover {
        color: #f97316 !important;
    }    

    html.light-mode .text-slate-100,
    body.light-mode .text-slate-100,
    html.light-mode .text-slate-200,
    body.light-mode .text-slate-200,
    html.light-mode .text-slate-300,
    body.light-mode .text-slate-300,
    html.light-mode .text-slate-400,
    body.light-mode .text-slate-400,
    html.light-mode .text-slate-500,
    body.light-mode .text-slate-500 {
        color: #475569 !important;
    }

    /* 8. Cookie Banner Light Mode Enhancements */
    html.light-mode #cookie-banner .glass,
    body.light-mode #cookie-banner .glass {
        background-color: rgba(255, 255, 255, 0.95) !important;
        border-color: rgba(249, 115, 22, 0.25) !important;
        box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.08) !important;
    }

    html.light-mode #cookie-banner h3,
    body.light-mode #cookie-banner h3,
    html.light-mode #cookie-banner p,
    body.light-mode #cookie-banner span,
    html.light-mode #cookie-banner label {
        color: #0f172a !important;
    }

    html.light-mode #cookie-banner .text-slate-400,
    body.light-mode #cookie-banner .text-slate-400,
    html.light-mode #cookie-banner .text-slate-500,
    body.light-mode #cookie-banner .text-slate-500 {
        color: #475569 !important;
    }

    html.light-mode #cookie-banner .bg-white\/5,
    body.light-mode #cookie-banner .bg-white\/5 {
        background-color: rgba(0, 0, 0, 0.03) !important;
        border-color: rgba(0, 0, 0, 0.06) !important;
    }

    html.light-mode #cookie-banner button.bg-slate-800,
    body.light-mode #cookie-banner button.bg-slate-800 {
        background-color: #e2e8f0 !important;
        color: #0f172a !important;
    }

    html.light-mode #cookie-banner button.bg-slate-800:hover,
    body.light-mode #cookie-banner button.bg-slate-800:hover {
        background-color: #cbd5e1 !important;
    }

    html.light-mode #cookie-banner button.bg-slate-900\/60,
    body.light-mode #cookie-banner button.bg-slate-900\/60 {
        background-color: rgba(0, 0, 0, 0.04) !important;
        color: #334155 !important;
    }

    html.light-mode #cookie-banner button.bg-slate-900\/60:hover,
    body.light-mode #cookie-banner button.bg-slate-900\/60:hover {
        background-color: rgba(0, 0, 0, 0.08) !important;
        color: #0f172a !important;
    }
html.light-mode a.bg-slate-950.text-white:hover,
    body.light-mode a.bg-slate-950.text-white:hover {
        background-color: #0f172a !important;
        color: #ffffff !important;
    }    
}