/* ============================================================
   ORA HOLISTIC WELLNESS — SELECT2 CUSTOM THEME
   Beautiful, user-friendly dropdown skin built on top of
   Select2 v4.x and aligned with the ORA admin design tokens.
   Loaded AFTER the bundled select2.min.css.
   ============================================================ */

/* ---------- 0. Local fallbacks (in case variables aren't loaded) ---------- */
.select2-container,
.select2-container--default,
.select2-container--open,
.select2-dropdown {
    --s2-primary:           var(--ora-primary, #043627);
    --s2-primary-hover:     var(--ora-primary-600, #0F3D35);
    --s2-primary-soft:      var(--ora-primary-50, #ECF3F1);
    --s2-primary-softer:    var(--ora-primary-100, #D6E4E0);
    --s2-secondary:         var(--ora-secondary, #CFA141);
    --s2-secondary-soft:    var(--ora-secondary-50, #FEF8F1);
    --s2-text:              var(--ora-text, #051E13);
    --s2-text-secondary:    var(--ora-text-secondary, #2B3F35);
    --s2-text-muted:        var(--ora-text-muted, #6B7B73);
    --s2-surface:           var(--ora-surface, #FFFFFF);
    --s2-surface-hover:     var(--ora-surface-hover, #F4F0EC);
    --s2-border:            var(--ora-border, #E6E0DA);
    --s2-border-strong:     var(--ora-border-strong, #CFC6BD);
    --s2-divider:           var(--ora-divider, #EFE9E3);
    --s2-danger:            var(--ora-danger, #EF6F6C);
    --s2-shadow-sm:         var(--ora-shadow-sm, 0 2px 6px rgba(15, 61, 53, 0.06), 0 1px 2px rgba(15, 61, 53, 0.04));
    --s2-shadow-md:         var(--ora-shadow-md, 0 6px 16px rgba(15, 61, 53, 0.08), 0 2px 4px rgba(15, 61, 53, 0.04));
    --s2-shadow-lg:         var(--ora-shadow-lg, 0 16px 32px rgba(15, 61, 53, 0.10), 0 4px 8px rgba(15, 61, 53, 0.05));
    --s2-shadow-focus:      var(--ora-shadow-focus, 0 0 0 4px rgba(4, 54, 39, 0.18));
    --s2-radius:            var(--ora-radius-sm, 8px);
    --s2-radius-lg:         var(--ora-radius-md, 12px);
    --s2-radius-pill:       var(--ora-radius-pill, 999px);
    --s2-transition:        var(--ora-transition, 200ms cubic-bezier(0.4, 0, 0.2, 1));
    --s2-font:              var(--ora-font-sans, "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ---------- 1. Container & sizing ---------- */
.select2-container {
    width: 100% !important;
    font-family: var(--s2-font);
    font-size: 0.92rem;
    line-height: 1.45;
}

.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
    min-height: 42px;
    height: auto;
    padding: 4px 10px;
    background-color: var(--s2-surface);
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    box-shadow: var(--s2-shadow-sm);
    transition: border-color var(--s2-transition),
                box-shadow var(--s2-transition),
                background-color var(--s2-transition);
}

/* Align with .form-control sizing */
.form-group .select2-container .select2-selection--single,
.input-group .select2-container .select2-selection--single {
    min-height: 42px;
}

/* Hover */
.select2-container .select2-selection--single:hover,
.select2-container .select2-selection--multiple:hover {
    border-color: var(--s2-border-strong);
    background-color: #fff;
}

/* Focus / open */
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--s2-primary);
    box-shadow: var(--s2-shadow-focus);
    outline: 0;
}

/* Disabled */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    background-color: #F4F0EC;
    border-color: var(--s2-border);
    cursor: not-allowed;
    opacity: 0.7;
    box-shadow: none;
}

/* Invalid state — pair with .is-invalid on the underlying <select> */
.is-invalid + .select2-container .select2-selection--single,
.is-invalid + .select2-container .select2-selection--multiple,
.select2-container .select2-selection--single.is-invalid,
.select2-container .select2-selection--multiple.is-invalid {
    border-color: var(--s2-danger) !important;
}

.is-invalid + .select2-container--default.select2-container--focus .select2-selection--single,
.is-invalid + .select2-container--default.select2-container--open .select2-selection--single {
    box-shadow: 0 0 0 4px rgba(239, 111, 108, 0.18);
}

/* ---------- 2. Single select — rendered value ---------- */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--s2-text);
    font-weight: 500;
    line-height: 37px;
    padding-left: 4px;
    padding-right: 28px;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--s2-text-muted);
    font-weight: 400;
}

/* Custom chevron arrow */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    right: 10px;
    width: 18px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border: none !important;
    width: 10px;
    height: 10px;
    margin: 0;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -65%) rotate(45deg);
    border-right: 2px solid var(--s2-text-secondary) !important;
    border-bottom: 2px solid var(--s2-text-secondary) !important;
    transition: transform var(--s2-transition), border-color var(--s2-transition);
}

.select2-container--default.select2-container--open
    .select2-selection--single .select2-selection__arrow b {
    transform: translate(-50%, -25%) rotate(-135deg);
    border-color: var(--s2-primary) !important;
}

/* Clear ("x") button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--s2-text-muted);
    font-weight: 600;
    margin-right: 8px;
    transition: color var(--s2-transition);
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--s2-danger);
}

/* ---------- 3. Multiple select ---------- */
.select2-container--default .select2-selection--multiple {
    padding: 4px 8px;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
    margin: 0;
}

/* Selected chip / pill */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background: var(--s2-primary-soft);
    color: var(--s2-primary);
    border: 1px solid var(--s2-primary-softer);
    border-radius: var(--s2-radius-pill);
    padding: 2px 10px 2px 28px;
    margin: 4px 4px 0 0;
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.6;
    position: relative;
    transition: background var(--s2-transition), color var(--s2-transition);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice:hover {
    background: var(--s2-primary-softer);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove {
    color: var(--s2-primary);
    font-weight: 700;
    font-size: 1rem;
    line-height: 1;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0 4px;
    border-radius: 50%;
    transition: background var(--s2-transition), color var(--s2-transition);
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__choice__remove:hover {
    background: var(--s2-danger);
    color: #fff;
}

.select2-container--default
    .select2-selection--multiple
    .select2-selection__placeholder {
    color: var(--s2-text-muted);
    margin-top: 6px;
}

/* Inline search field inside multi-select */
.select2-container--default
    .select2-search--inline .select2-search__field {
    color: var(--s2-text);
    font-family: var(--s2-font);
    font-size: 0.92rem;
    margin-top: 8px;
    margin-left: 2px;
    padding: 0 4px;
    min-height: 24px;
}

.select2-container--default
    .select2-search--inline .select2-search__field::placeholder {
    color: var(--s2-text-muted);
}

/* ---------- 4. Dropdown panel ---------- */
.select2-dropdown {
    background-color: var(--s2-surface);
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius-lg) !important;
    box-shadow: var(--s2-shadow-lg);
    overflow: hidden;
    margin-top: 6px;
    z-index: 9999;
}

/* When opening upwards, flip the gap to the bottom */
.select2-container--open .select2-dropdown--above {
    margin-top: 0;
    margin-bottom: 6px;
}

/* Keep selection corners rounded even when dropdown is open */
.select2-container--default.select2-container--open.select2-container--below
    .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--below
    .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--above
    .select2-selection--single,
.select2-container--default.select2-container--open.select2-container--above
    .select2-selection--multiple {
    border-radius: var(--s2-radius);
}

/* ---------- 5. Search field in dropdown ---------- */
.select2-search--dropdown {
    padding: 10px 10px 6px;
    background: var(--s2-surface);
    border-bottom: 1px solid var(--s2-divider);
    position: relative;
}

.select2-container--default
    .select2-search--dropdown .select2-search__field {
    border: 1px solid var(--s2-border);
    border-radius: var(--s2-radius);
    padding: 8px 12px 8px 34px;
    font-size: 0.9rem;
    font-family: var(--s2-font);
    color: var(--s2-text);
    background-color: #fff;
    transition: border-color var(--s2-transition),
                box-shadow var(--s2-transition);
}

.select2-container--default
    .select2-search--dropdown .select2-search__field:focus {
    outline: 0;
    border-color: var(--s2-primary);
    box-shadow: var(--s2-shadow-focus);
}

/* Inline magnifying-glass icon (pure CSS) */
.select2-search--dropdown::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 22px;
    width: 14px;
    height: 14px;
    border: 2px solid var(--s2-text-muted);
    border-radius: 50%;
    transform: translateY(-60%);
    pointer-events: none;
}

.select2-search--dropdown::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 33px;
    width: 6px;
    height: 2px;
    background: var(--s2-text-muted);
    transform: translateY(0) rotate(45deg);
    border-radius: 2px;
    pointer-events: none;
}

/* ---------- 6. Result options list ---------- */
.select2-container--default .select2-results > .select2-results__options {
    max-height: 280px;
    overflow-y: auto;
    padding: 4px;
    scrollbar-width: thin;
    scrollbar-color: var(--s2-border-strong) transparent;
}

.select2-container--default
    .select2-results > .select2-results__options::-webkit-scrollbar {
    width: 8px;
}

.select2-container--default
    .select2-results > .select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}

.select2-container--default
    .select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background: var(--s2-border-strong);
    border-radius: 999px;
    border: 2px solid var(--s2-surface);
}

.select2-results__option {
    padding: 9px 12px;
    color: var(--s2-text);
    font-size: 0.9rem;
    border-radius: var(--s2-radius);
    transition: background var(--s2-transition), color var(--s2-transition);
}

.select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: var(--s2-primary-soft);
    color: var(--s2-primary);
    font-weight: 500;
}

.select2-container--default
    .select2-results__option[aria-selected=true] {
    background-color: var(--s2-primary);
    color: #fff;
    font-weight: 600;
    position: relative;
    padding-right: 32px;
}

.select2-container--default
    .select2-results__option[aria-selected=true]::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 14px;
    width: 6px;
    height: 11px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translateY(-65%) rotate(45deg);
}

.select2-container--default
    .select2-results__option[aria-selected=true].select2-results__option--highlighted {
    background-color: var(--s2-primary-hover);
    color: #fff;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: var(--s2-text-muted);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Group headings */
.select2-container--default .select2-results__group {
    color: var(--s2-text-secondary);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 10px 12px 6px;
    background: transparent;
    border-bottom: 1px solid var(--s2-divider);
    margin-bottom: 4px;
}

/* Empty / loading messages */
.select2-results__option--no-results,
.select2-results__option--loading,
.select2-results__option.loading-results {
    color: var(--s2-text-muted);
    font-style: italic;
    text-align: center;
    padding: 16px;
}

/* ---------- 7. Size variants ---------- */

/* Small — pair with .select2-sm on the originating select */
.select2-sm + .select2-container .select2-selection--single,
.select2-sm + .select2-container .select2-selection--multiple {
    min-height: 34px;
    padding: 2px 8px;
    font-size: 0.82rem;
}

.select2-sm + .select2-container--default
    .select2-selection--single .select2-selection__rendered {
    line-height: 28px;
}

/* Large — pair with .select2-lg on the originating select */
.select2-lg + .select2-container .select2-selection--single,
.select2-lg + .select2-container .select2-selection--multiple {
    min-height: 50px;
    padding: 6px 14px;
    font-size: 1rem;
}

.select2-lg + .select2-container--default
    .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

/* ---------- 8. Inside .input-group ---------- */
.input-group > .select2-container--default {
    flex: 1 1 auto;
    width: 1% !important;
}

.input-group > .select2-container--default .select2-selection--single,
.input-group > .select2-container--default .select2-selection--multiple {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group
    > .select2-container--default:first-child
    .select2-selection--single,
.input-group
    > .select2-container--default:first-child
    .select2-selection--multiple {
    border-top-left-radius: var(--s2-radius);
    border-bottom-left-radius: var(--s2-radius);
}

/* ---------- 9. Inline / DataTable filters ---------- */
.dataTables_wrapper .select2-container .select2-selection--single,
.users-filters .select2-container .select2-selection--single,
.filters-bar .select2-container .select2-selection--single {
    min-height: 38px;
}

.dataTables_wrapper .select2-container .select2-selection__rendered,
.users-filters .select2-container .select2-selection__rendered {
    line-height: 40px;
}

/* ---------- 10. Modal & high-stack contexts ---------- */
/* Ensure dropdown floats above SweetAlert / Bootstrap modal. */
.select2-container--open {
    z-index: 10600;
}

.modal .select2-dropdown,
.swal2-container .select2-dropdown {
    z-index: 10650;
}

/* ---------- 11. RTL ---------- */
[dir="rtl"] .select2-container--default
    .select2-selection--single .select2-selection__rendered {
    padding-right: 4px;
    padding-left: 28px;
}

[dir="rtl"] .select2-container--default
    .select2-selection--single .select2-selection__arrow {
    right: auto;
    left: 10px;
}

[dir="rtl"] .select2-container--default
    .select2-selection--multiple .select2-selection__choice {
    padding-left: 10px;
    padding-right: 28px;
    margin-left: 4px;
    margin-right: 0;
}

[dir="rtl"] .select2-container--default
    .select2-selection--multiple .select2-selection__choice__remove {
    left: auto;
    right: 8px;
}

[dir="rtl"] .select2-container--default
    .select2-search--dropdown .select2-search__field {
    padding-left: 12px;
    padding-right: 34px;
}

[dir="rtl"] .select2-search--dropdown::before {
    left: auto;
    right: 22px;
}

[dir="rtl"] .select2-search--dropdown::after {
    left: auto;
    right: 33px;
    transform: translateY(0) rotate(-45deg);
}

/* ---------- 12. Dark theme overrides ---------- */
[data-theme="dark"] .select2-container .select2-selection--single,
[data-theme="dark"] .select2-container .select2-selection--multiple,
[data-theme="dark"] .select2-dropdown {
    background-color: var(--ora-surface, #14241F);
    border-color: var(--ora-border, #21342D);
    color: var(--ora-text, #E6F1ED);
}

[data-theme="dark"] .select2-container--default
    .select2-selection--single .select2-selection__rendered {
    color: var(--ora-text, #E6F1ED);
}

[data-theme="dark"] .select2-container--default
    .select2-results__option {
    color: var(--ora-text, #E6F1ED);
}

[data-theme="dark"] .select2-container--default
    .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(76, 184, 169, 0.15);
    color: #fff;
}

[data-theme="dark"] .select2-container--default
    .select2-results__option[aria-selected=true] {
    background-color: var(--ora-primary, #4CB8A9);
    color: #051E13;
}

[data-theme="dark"] .select2-container--default
    .select2-search--dropdown .select2-search__field {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: var(--ora-border, #21342D);
    color: var(--ora-text, #E6F1ED);
}

/* ---------- 13. Tiny entrance animation ---------- */
@keyframes ora-select2-fade-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.select2-container--open .select2-dropdown {
    animation: ora-select2-fade-in 160ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---------- 14. Misc fixes ---------- */
/* Hide the original control while keeping it accessible */
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important;
}

/* Prevent the default Bootstrap .form-control from overriding our height */
.select2-container--default .select2-selection--single .form-control,
.select2-container--default .select2-selection--multiple .form-control {
    height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}