/* Light Mode System */

/* 1. Global Variables & Base Overrides */
/* Only apply when body has .light-mode class */
body.light-mode {
    --bg-color: #F8F9FA;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F0F2F5;
    --text-main: #1A1A1A;
    --text-muted: #555555;
    --accent: #00CC76;
    /* Slightly darker green for visibility on white */
    --accent-glow: rgba(0, 204, 118, 0.3);
    --border-color: rgba(0, 0, 0, 0.1);
}

/* 2. Text Utilities */
body.light-mode .text-gradient {
    background: linear-gradient(to right, #1A1A1A, #555555);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 3. Navbar Overrides */
/* Keeps navbar dark with white text even in light mode */
body.light-mode .navbar {
    background: rgba(5, 5, 5, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .logo,
body.light-mode .nav-links a:not(.btn),
body.light-mode .dropdown-toggle,
body.light-mode #themeToggleBtn,
body.light-mode #themeToggleBtn svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}

body.light-mode #themeToggleBtn {
    border: #fff solid 1px !important;
}

body.light-mode .nav-links a:hover,
body.light-mode .dropdown-toggle:hover {
    color: var(--accent) !important;
}

/* Ensure Get Quote button text stays readable on hover in light mode */
body.light-mode .nav-links .btn-primary:hover {
    color: #000 !important;
}


body.light-mode #themeToggleBtn {
    background: transparent !important;
}

/* Mobile Menu Background */
@media (max-width: 768px) {
    body.light-mode .nav-links {
        background: rgba(5, 5, 5, 0.98);
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* 4. Form Elements - Comprehensive Coverage */
/* Base input styles */
body.light-mode input:not([type="checkbox"]):not([type="radio"]),
body.light-mode select,
body.light-mode textarea {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E0E0E0 !important;
}

/* Form group inputs */
body.light-mode .form-group input:not([type="checkbox"]):not([type="radio"]),
body.light-mode .form-group select,
body.light-mode .form-group textarea {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E0E0E0 !important;
}

/* Form control class */
body.light-mode .form-control,
body.light-mode input.form-control,
body.light-mode select.form-control,
body.light-mode textarea.form-control {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E0E0E0 !important;
}

/* Tool-specific input fields */
body.light-mode .tool-container input:not([type="checkbox"]):not([type="radio"]),
body.light-mode .tool-container select,
body.light-mode .tool-container textarea {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E0E0E0 !important;
}

/* Focus states */
body.light-mode input:focus,
body.light-mode select:focus,
body.light-mode textarea:focus,
body.light-mode .form-control:focus,
body.light-mode .form-group input:focus {
    border-color: var(--accent) !important;
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
}

/* 5. UI Components */

/* Modal & Cookie Banner */
/* Keep these dark for contrast or switch to light? Usually better to switch to light for consistency */
body.light-mode .modal {
    background: #fff;
    backdrop-filter: blur(8px);
}

body.light-mode .modal-content,
body.light-mode .cookie-banner {
    background: #FFFFFF !important;
    border: 2px solid var(--accent) !important;
    color: #1A1A1A;
    box-shadow: 0 0 40px rgba(0, 204, 118, 0.3), 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Preview Modal specific override */
body.light-mode #previewModal {
    background: #fff !important;
}

/* Email Modal override */
body.light-mode #emailModal {
    background: #fff !important;
}

/* Analysis Modal override */
body.light-mode #analysisModal {
    background: #fff !important;
}

/* AI Advisor Modal override */
body.light-mode #aiAdvisorModal {
    background: #fff !important;
}

body.light-mode .cookie-content p {
    color: #555555;
}

/* Footer - Keep dark background even in light mode */
body.light-mode footer {
    border-top-color: rgba(255, 255, 255, 0.1);
    background: rgba(5, 5, 5, 0.95) !important;
}

body.light-mode footer .footer-content p,
body.light-mode footer .footer-logo {
    color: #ffffff !important;
}

/* Cards & Sections */
body.light-mode .section.bg-darker {
    background-color: #F0F2F5;
    /* Light grey alternative to "darker" */
}

body.light-mode .card,
body.light-mode .service-card,
body.light-mode .curriculum-item,
body.light-mode .instructor-card,
body.light-mode .meta-item {
    background: #FFFFFF;
    border-color: #E0E0E0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    /* Soft shadow for depth in light mode */
}

body.light-mode .card:hover,
body.light-mode .service-card:hover {
    background: #FFFFFF;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--accent);
}

body.light-mode .step-number {
    color: rgba(0, 0, 0, 0.05);
}

body.light-mode .step:hover .step-number {
    color: rgba(0, 204, 118, 0.1);
}

/* Breadcrumbs */
body.light-mode .breadcrumb-nav {
    background: #FFFFFF;
    border-bottom-color: #E0E0E0;
}

/* 6. Blog & Article Pages */
body.light-mode .article-content h2 {
    color: #1A1A1A;
}

body.light-mode .article-content p,
body.light-mode .article-content ul,
body.light-mode .article-content li {
    color: #555555 !important;
    /* Override inline styles or specific internal CSS */
}

body.light-mode .back-link {
    color: #555555;
}

body.light-mode .back-link:hover {
    color: var(--accent);
}

body.light-mode .blog-meta {
    color: var(--accent);
    /* Ensure visibility */
}

/* Blog article specific overrides */
body.light-mode .article-content h3 {
    color: var(--accent) !important;
}

body.light-mode .lead {
    color: #555555 !important;
}

body.light-mode .highlight-box,
body.light-mode .tips-box {
    background: rgba(0, 204, 118, 0.1) !important;
    border-color: var(--accent) !important;
}

body.light-mode .highlight-box p,
body.light-mode .tips-box p,
body.light-mode .tips-box li {
    color: #1A1A1A !important;
}

body.light-mode .warning-box {
    background: rgba(255, 68, 68, 0.1) !important;
    border-color: #ff4444 !important;
}

body.light-mode .warning-box p {
    color: #1A1A1A !important;
}

body.light-mode .example-box {
    background: rgba(100, 100, 255, 0.1) !important;
    border-color: #6464ff !important;
}

body.light-mode .example-box p {
    color: #1A1A1A !important;
}

body.light-mode .framework-card {
    background: #FFFFFF !important;
    border-color: #E0E0E0 !important;
}

body.light-mode .framework-card h4,
body.light-mode .framework-card h5 {
    color: var(--accent) !important;
}

body.light-mode .framework-card p,
body.light-mode .framework-card li {
    color: #555555 !important;
}

body.light-mode .pros-cons h5 {
    color: #1A1A1A !important;
}

body.light-mode .tips-box h4 {
    color: var(--accent) !important;
}

body.light-mode pre {
    background: #333 !important;
    border-color: #444 !important;
}

body.light-mode code {
    color: #e0e0e0 !important;
}

/* 7. Dashboard Decay Projection */
body.light-mode .decay-projection {
    background: #FFFFFF !important;
}

body.light-mode .decay-projection * {
    background: #FFFFFF !important;
}

body.light-mode .decay-projection canvas {
    background: #FFFFFF !important;
}

body.light-mode .decay-stat-item {
    background: #FFFFFF !important;
    border: 1px solid #E0E0E0;
}

body.light-mode .time-frame-btn {
    background: #FFFFFF !important;
    color: #1A1A1A !important;
    border-color: #E0E0E0 !important;
}

body.light-mode .time-frame-btn:hover {
    background: #F0F2F5 !important;
}

body.light-mode .time-frame-btn.active {
    background: var(--accent) !important;
    color: #000 !important;
}


/* Date Picker Fixes for Light Mode */
body.light-mode .flatpickr-calendar {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

body.light-mode .flatpickr-months {
    background: #f5f5f5;
}

body.light-mode .flatpickr-month {
    color: #1a1a1a;
}

body.light-mode .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #ffffff;
    color: #1a1a1a;
}

body.light-mode .flatpickr-current-month input.cur-year {
    color: #1a1a1a;
    background: #ffffff;
}

body.light-mode .flatpickr-weekdays {
    background: #f5f5f5;
}

body.light-mode span.flatpickr-weekday {
    color: #666666;
}

body.light-mode .flatpickr-day {
    color: #1a1a1a;
}

body.light-mode .flatpickr-day:hover {
    background: #e8f5e9;
    border-color: #4caf50;
}

body.light-mode .flatpickr-day.selected,
body.light-mode .flatpickr-day.selected:hover {
    background: #4caf50;
    border-color: #4caf50;
    color: #ffffff;
}

body.light-mode .flatpickr-day.today {
    border-color: #4caf50;
    color: #4caf50;
}

body.light-mode .flatpickr-day.today:hover {
    background: #e8f5e9;
}

body.light-mode .flatpickr-day.disabled,
body.light-mode .flatpickr-day.disabled:hover {
    color: #cccccc;
}

body.light-mode .flatpickr-time {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
}

body.light-mode .flatpickr-time input {
    color: #1a1a1a;
    background: #ffffff;
}

body.light-mode .flatpickr-time .flatpickr-time-separator,
body.light-mode .flatpickr-time .flatpickr-am-pm {
    color: #1a1a1a;
}

body.light-mode .numInputWrapper:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .flatpickr-prev-month,
body.light-mode .flatpickr-next-month {
    color: #666666;
}

body.light-mode .flatpickr-prev-month:hover,
body.light-mode .flatpickr-next-month:hover {
    color: #1a1a1a;
}

body.light-mode .flatpickr-prev-month svg,
body.light-mode .flatpickr-next-month svg {
    fill: #666666;
}

body.light-mode .flatpickr-prev-month:hover svg,
body.light-mode .flatpickr-next-month:hover svg {
    fill: #1a1a1a;
}

/* Date input field in light mode */
body.light-mode input[type="text"]#startDate,
body.light-mode input[type="text"]#endDate {
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #d0d0d0;
}

body.light-mode input[type="text"]#startDate:focus,
body.light-mode input[type="text"]#endDate:focus {
    border-color: #4caf50;
    background: #ffffff;
}

body.light-mode input[type="text"]#startDate::placeholder,
body.light-mode input[type="text"]#endDate::placeholder {
    color: #999999;
}