/* OneHRIS Design Tokens — shared by employee.css and admin.css */

:root {
    --font-main: 'Plus Jakarta Sans', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --sidebar-width: 300px;
    --bs-primary: #004aad;
    --bs-primary-rgb: 0, 74, 173;

    /* BRAND COLORS */
    --brand-primary: #004aad;
    --brand-primary-dark: #003b8a;
    --brand-primary-light: #e6f0ff;
    --brand-secondary: #fecf5b;

    /* Light Mode Variables */
    --bg-body-light: #eef2f8;
    --glass-bg-light: #ffffff;
    --glass-border-light: rgba(0, 74, 173, 0.10);
    --text-main-light: #0e1c38;

    /* Dark Mode Variables */
    --bg-body-dark: #070f22;
    --glass-bg-dark: #0e1a33;
    --glass-border-dark: rgba(255, 255, 255, 0.07);
    --text-main-dark: #e8eef8;
    --card-glow: 0 1px 3px rgba(0, 0, 0, 0.28);

    /* Dynamic Theme Variables */
    --bg-body-current: var(--bg-body-dark);
    --glass-bg-current: var(--glass-bg-dark);
    --text-main-current: var(--text-main-dark);
}

[data-bs-theme="light"] {
    --bg-body-current: var(--bg-body-light);
    --glass-bg-current: var(--glass-bg-light);
    --text-main-current: var(--text-main-light);
}

/* ========================================
   SELECT2 THEME-AWARE STYLING
   select2-bootstrap-5-theme hardcodes light-mode colors (#212529 text, #fff
   backgrounds) at higher specificity than a plain ".select2-container--bootstrap-5
   .select2-selection__rendered" override, so the dark-theme text ends up the
   same color as the dark background — invisible. These selectors mirror the
   theme's own selector chains so they win by cascade order (loaded after it).
   ======================================== */

.select2-container--bootstrap-5 .select2-selection {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-selection:focus,
.select2-container--bootstrap-5 .select2-selection:focus-visible {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 0.25rem rgba(0, 74, 173, 0.25);
}

.select2-container--bootstrap-5 .select2-dropdown {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-search--dropdown .select2-search__field {
    background-color: var(--bs-body-bg);
    border-color: var(--bs-border-color);
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option {
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted {
    background-color: var(--brand-primary);
    color: #fff;
}

.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
.select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected="true"]:not(.select2-results__option--highlighted) {
    background-color: var(--bs-secondary-bg);
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: var(--bs-body-color);
}

.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered .select2-selection__placeholder {
    color: var(--bs-secondary-color);
}

.select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    color: var(--bs-body-color);
    background-color: var(--bs-secondary-bg);
    border-color: var(--bs-border-color);
}

.select2-container--bootstrap-5 .select2-selection__clear {
    color: var(--bs-body-color);
}