/* Dark Theme Variables - Applied when body has .dark-mode class */
body.dark-mode {

    --box-bg-color: #000000;
    --box-color: #C2C3CD;

    --box-card-color: #000000;

    --box-body-box-shadow-color: transparent;

    /* Dashboard Analytics Variables */
    --dashboard-bg: #000000;
    --dashboard-text-primary: #C2C3CD;
    --dashboard-text-muted: #8a8d9a;
    --dashboard-border: #1a1a1a;
    --dashboard-surface: #000000;
    
    /* Plotly Chart Variables */
    --plot-paper-bg: rgba(0,0,0,0);
    --plot-bg: rgba(0,0,0,0);
    --plot-grid: rgba(255,255,255,0.08);

    --date-input-bg-color: #111111;
    --date-input-color: #C2C3CD;
    --date-input-border-color: #1f1f1f;

    --filter-bg-color: #000000;
    --filter-button-bg-color: #111111;
    --filter-button-border-color: #1f1f1f;
    --filter-button-hover-bg-color: #151515;
    --filter-button-hover-border-color: #232323;

    --form-group-bg-color: #111111;
    --form-group-color: #C2C3CD;
    --form-group-border-color: #1f1f1f;

    --main-bg-color: #000000;
    --main-color: #C2C3CD;

    --modal-body-bg-color: #000000;

    --modal-footer-bg-color: #000000;
    --modal-footer-border-color: #1a1a1a;

    --modal-header-color: #C2C3CD;
    --modal-header-bg-color: #111111;
    --modal-header-border-color: #1a1a1a;

    --nav-bg-color: #000000;
    --nav-color: #C2C3CD;

    --pagination-control-color: #C2C3CD;
    --pagination-control-hover-color: #fff;
    --pagination-control-bg-color: transparent;

    --slider-bg-color: #1a1a1a;

    --select2-dropdown-color: #555;
    --select2-dropdown-bg-color: #111111;
    --select2-dropdown-border-color: #1f1f1f;

    --select2-selection-bg-color:  #111111;
    --select2-selection-border-color: #1f1f1f;
    --select2-selection-color: #C2C3CD;

    --table-bg-color: transparent;
    --table-td-bg-color: inherit;
    --table-th-bg-color: inherit;
    --table-color: #fff;
    --table-border-color: transparent;
    --table-td-color: inherit;
    --table-th-color: inherit;
    --table-td-border-color: transparent;
    --table-th-border-color: transparent;


}

/* Dark Mode: Dashboard Header with white glow instead of blue */
body.dark-mode .dashboard-header {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    box-shadow: 0 8px 32px rgba(255, 255, 255, 0.15);
}

body.dark-mode .refresh-btn {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.05) 100%);
}

body.dark-mode .refresh-btn:hover {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
}

/* Dark Mode: "Aplicar Filtros" button with white glow */
body.dark-mode .filter-submit-btn {
    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.15);
}

body.dark-mode .filter-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.25);
}

/* Dark Mode: Stat Cards with white glow */
body.dark-mode .stat-card {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(255, 255, 255, 0.12);
}

body.dark-mode .stat-card:hover {
    box-shadow: 0 8px 30px rgba(255, 255, 255, 0.18);
}