/* dark-mode.css – only loads when dark mode is active */
body.dark-mode {
    /* Backgrounds */
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Cards & modals */
.dark-mode .card,
.dark-mode .modal-content,
.dark-mode .navbar,
.dark-mode .table {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #333 !important;
}

/* Inputs, dropdowns, Syncfusion components */
.dark-mode .form-control,
.dark-mode .e-ddl.e-control,
.dark-mode .e-input-group,
.dark-mode .e-numeric.e-control,
.dark-mode .e-datepicker.e-control {
    background-color: #2d2d2d !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

/* Syncfusion grids (most important) */
.dark-mode .e-grid .e-gridheader,
.dark-mode .e-grid .e-gridcontent,
.dark-mode .e-grid .e-rowcell,
.dark-mode .e-grid .e-headercell {
    background-color: #1e1e1e !important;
    color: #e0e0e0 !important;
    border-color: #444 !important;
}

    .dark-mode .e-grid .e-rowcell:hover,
    .dark-mode .e-grid .e-row:hover {
        background-color: #333 !important;
    }

/* Buttons – keep Bootstrap colors but darken outline */
.dark-mode .btn-outline-secondary,
.dark-mode .btn-outline-primary {
    color: #ccc !important;
    border-color: #555 !important;
}

    .dark-mode .btn-outline-secondary:hover,
    .dark-mode .btn-outline-primary:hover {
        background-color: #444 !important;
        color: white !important;
    }

/* SfDropDownList – 100% perfect dark mode (white text, exactly like ComboBox) */
body.dark-mode .e-dropdownlist,
body.dark-mode .e-ddl.e-popup,
body.dark-mode .e-list-item,
body.dark-mode .e-list-item.e-hover,
body.dark-mode .e-list-item.e-active,
body.dark-mode .e-input-group.e-control-wrapper.e-input.e-ddl,
body.dark-mode .e-input-filter {
    background-color: #1e1e1e !important;
    color: #ffffff !important; /* pure white text */
    border-color: #444 !important;
}

    /* Hover & selected row */
    body.dark-mode .e-list-item.e-hover,
    body.dark-mode .e-list-item.e-active {
        background-color: #2d5fb8 !important; /* same blue highlight Syncfusion uses in dark theme */
        color: #ffffff !important;
    }

/* Arrow icon */
body.dark-mode .e-ddl-icon {
    color: #ffffff !important;
}