:root {
    /* Light mode variables */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: #212529;
    --text-secondary: #6c757d;
    --border-color: #dee2e6;
    --card-bg: #ffffff;
    --input-bg: #ffffff;
    --input-border: #ced4da;
    --table-bg: #ffffff;
    --table-border: #dee2e6;
    --table-hover: #f8f9fa;
    --btn-primary-bg: #0d6efd;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-color: #ffffff;
    --alert-bg: #f8f9fa;
    --alert-border: #dee2e6;
    --modal-bg: #ffffff;
    --modal-border: #dee2e6;
    --dropdown-bg: #ffffff;
    --dropdown-border: #dee2e6;
    --nav-bg: #ffffff;
    --nav-border: #dee2e6;
    --nav-text: #212529;
    --nav-hover: #f8f9fa;
}

[data-theme="dark"] {
    /* Dark mode variables */
    --bg-primary: #1a1d20;
    --bg-secondary: #2c3034;
    --text-primary: #e9ecef;
    --text-secondary: #adb5bd;
    --border-color: #495057;
    --card-bg: #2c3034;
    --input-bg: #2c3034;
    --input-border: #495057;
    --table-bg: #2c3034;
    --table-border: #495057;
    --table-hover: #343a40;
    --btn-primary-bg: #0d6efd;
    --btn-primary-color: #ffffff;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-color: #ffffff;
    --alert-bg: #2c3034;
    --alert-border: #495057;
    --modal-bg: #2c3034;
    --modal-border: #495057;
    --dropdown-bg: #2c3034;
    --dropdown-border: #495057;
    --nav-bg: #2c3034;
    --nav-border: #495057;
    --nav-text: #e9ecef;
    --nav-hover: #343a40;
}

/* Apply variables to elements */
body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.form-control {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.form-control:focus {
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.table {
    background-color: var(--table-bg);
    color: var(--text-primary);
}

.table td, .table th {
    border-color: var(--table-border);
}

.table-hover tbody tr:hover {
    background-color: var(--table-hover);
}

.modal-content {
    background-color: var(--modal-bg);
    border-color: var(--modal-border);
}

.dropdown-menu {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.dropdown-item {
    color: var(--text-primary);
}

.dropdown-item:hover {
    background-color: var(--nav-hover);
    color: var(--text-primary);
}

.navbar {
    background-color: var(--nav-bg);
    border-color: var(--nav-border);
}

.navbar-brand, .nav-link {
    color: var(--nav-text);
}

.nav-link:hover {
    color: var(--nav-text);
    background-color: var(--nav-hover);
}

.alert {
    background-color: var(--alert-bg);
    border-color: var(--alert-border);
    color: var(--text-primary);
}

/* Dark mode toggle button */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    padding: 0.5rem;
    font-size: 1rem;
}

.theme-toggle:hover {
    color: var(--text-secondary);
}

/* Select2 dark mode support */
.select2-container--default .select2-selection--single {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--text-primary);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--text-primary);
}

.select2-dropdown {
    background-color: var(--dropdown-bg);
    border-color: var(--dropdown-border);
}

.select2-container--default .select2-results__option {
    color: var(--text-primary);
}

.select2-container--default .select2-results__option[aria-selected=true] {
    background-color: var(--nav-hover);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--btn-primary-bg);
    color: var(--btn-primary-color);
} 
[data-theme="dark"] body,
[data-theme="dark"] .main-content,
[data-theme="dark"] .sidebar,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .dashboard-card-body,
[data-theme="dark"] .dashboard-card-header,
[data-theme="dark"] .display-5,
[data-theme="dark"] .fw-bold,
[data-theme="dark"] .text-center,
[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary,
[data-theme="dark"] h1, 
[data-theme="dark"] h2, 
[data-theme="dark"] h3, 
[data-theme="dark"] h4, 
[data-theme="dark"] h5, 
[data-theme="dark"] h6,
[data-theme="dark"] label,
[data-theme="dark"] .form-label,
[data-theme="dark"] .form-control,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .navbar,
[data-theme="dark"] .nav-link,
[data-theme="dark"] .sidebar .nav-link,
[data-theme="dark"] .sidebar-heading,
[data-theme="dark"] .footer,
[data-theme="dark"] .badge,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    color: var(--text-primary) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] .text-secondary {
    color: var(--text-secondary) !important;
}

[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light,
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .dashboard-card,
[data-theme="dark"] .dashboard-card-body,
[data-theme="dark"] .dashboard-card-header,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .accordion-button,
[data-theme="dark"] .footer,
[data-theme="dark"] .table,
[data-theme="dark"] .table th,
[data-theme="dark"] .table td {
    background-color: var(--card-bg) !important;
    border-color: var(--border-color) !important;
}
[data-theme="dark"] .navbar,
[data-theme="dark"] .navbar-light,
[data-theme="dark"] .navbar.navbar-light,
[data-theme="dark"] .navbar.navbar-expand-lg {
    background-color: var(--nav-bg) !important;
    border-color: var(--nav-border) !important;
    color: var(--nav-text) !important;
}

[data-theme="dark"] .navbar .navbar-brand,
[data-theme="dark"] .navbar .nav-link {
    color: var(--nav-text) !important;
}

[data-theme="dark"] .navbar .nav-link:hover,
[data-theme="dark"] .navbar .nav-link.active {
    color: var(--nav-text) !important;
    background: var(--nav-hover) !important;
}
[data-theme="dark"] ::placeholder, 
[data-theme="dark"] input::placeholder, 
[data-theme="dark"] textarea::placeholder {
    color: var(--text-secondary) !important;
    opacity: 1 !important; /* Ensures full opacity for visibility */
}

/* For cross-browser compatibility */
[data-theme="dark"] input::-webkit-input-placeholder,
[data-theme="dark"] textarea::-webkit-input-placeholder {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] input::-moz-placeholder,
[data-theme="dark"] textarea::-moz-placeholder {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] input:-ms-input-placeholder,
[data-theme="dark"] textarea:-ms-input-placeholder {
    color: var(--text-secondary) !important;
}
[data-theme="dark"] input::-ms-input-placeholder,
[data-theme="dark"] textarea::-ms-input-placeholder {
    color: var(--text-secondary) !important;
}