/* =================================== */
/*  DARK MODE STYLES                   */
/* =================================== */

/* When the body has the 'dark-mode' class, these styles will apply */
body.dark-mode {
    background-color: #0b1220; /* Darker background */
    color: #e5e7eb; /* Lighter text */
}

body.dark-mode .app-card {
    background-color: #0f172a; /* Dark card background */
    border-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .card-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .widget-title {
    color: #e5e7eb;
}

body.dark-mode .form-control,
body.dark-mode .form-select {
    background-color: #0b1220;
    color: #e5e7eb;
    border-color: #334155;
}

body.dark-mode .form-control::placeholder {
    color: #64748b;
}

body.dark-mode .btn-light {
    background-color: #334155;
    color: #e5e7eb;
    border-color: #475569;
}

body.dark-mode .btn-light:hover {
    background-color: #475569;
}

/* Add any other specific dark mode styles you need */