/* Light Theme Variables - Applied when body has .light-mode class */
body.light-mode {
    --main-bg-color: #f8f9fa;
    --main-color: #000;

    --nav-bg-color: #ffffff;
    --nav-color: #000;

    --box-bg-color: #ffffff;
    --box-color: #000;

    /* Dashboard Analytics Variables (Light Theme) */
    --dashboard-bg: #f8f9fa;
    --dashboard-text-primary: #1a1a1a;
    --dashboard-text-muted: #6c757d;
    --dashboard-border: #e5e7eb;
    --dashboard-surface: #ffffff;
    
    /* Plotly Chart Variables (Light Theme) */
    --plot-paper-bg: rgba(255,255,255,0);
    --plot-bg: rgba(255,255,255,0);
    --plot-grid: rgba(0,0,0,0.08);
    
    /* Subtle theme for header and buttons (Light Theme) */
    --card-blue-start: #f8f9fa;
    --card-blue-end: #e9ecef;

    --filter-bg-color: #fff;
    --filter-button-bg-color: #008d4c;
    --filter-button-border-color: #398439;
    --filter-button-hover-bg-color: #449d44;
    --filter-button-hover-border-color: #398439;

    --slider-bg-color: var(--success-color);

    --form-group-bg-color: #fff;
    --form-group-color: #555;
    --form-group-border-color: #d2d6de;
}

/* Light Mode: Clean elegant styling matching dark mode aesthetic */
body.light-mode .dashboard-header {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-mode .refresh-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    color: #1a1a1a;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

body.light-mode .refresh-btn:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.03) 100%);
}

/* Light Mode: Stat Cards with subtle shadow */
body.light-mode .stat-card {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

body.light-mode .stat-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

/* Light Mode: Chart containers */
body.light-mode .chart-container,
body.light-mode .table-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Light Mode: Filter submit button */
body.light-mode .filter-submit-btn {
    background: linear-gradient(135deg, #1a1a1a 0%, #000000 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

body.light-mode .filter-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

/* Light Mode: Section headers */
body.light-mode .section-header {
    color: #1a1a1a;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
}

/* Light Mode: Filter fields */
body.light-mode .filter-field {
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

body.light-mode .filter-field:hover {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .filters-container {
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}