/* Select2 ↔ Bootstrap variable bridge
   Load AFTER select2.min.css and AFTER bootstrap.min.css.
   Uses your theme vars with Bootstrap fallbacks.
   Used to ensure we can modify select2's theme via theme_manager - current.css it produces.
*/

:root{
  /* no hard defaults; rely on your builder-set vars and BS fallbacks */
}

/* Ensure selects sized like Bootstrap .form-select (.w-100 handled in markup) */
.select2-container {
  font-size: 1rem;
}

/* ---------- Selection (single + multiple) ---------- */
.select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  background-color: var(--app-select2-bg, var(--bs-form-select-bg, var(--bs-form-control-bg, #fff)));
  color:            var(--app-select2-color, var(--bs-body-color, #212529));
  border: 1px solid var(--app-select2-border-color, var(--bs-form-select-border-color, #ced4da));
  border-radius:    var(--bs-border-radius, .375rem);
  min-height:       calc(2.5rem + 2px);
}

/* Hover/active border + focus ring */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover {
  border-color: var(--bs-form-select-focus-border-color, var(--bs-focus-ring-color, #86b7fe));
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default .select2-selection--single:focus,
.select2-container--default .select2-selection--multiple:focus {
  border-color: var(--bs-form-select-focus-border-color, var(--bs-focus-ring-color, #86b7fe));
  outline: 0;
  box-shadow: 0 0 0 var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color, rgba(13,110,253,.25));
}

/* ---------- Single selection specifics ---------- */
.select2-container .select2-selection--single .select2-selection__rendered {
  color: inherit;
  line-height: calc(2.5rem);
  padding-left: .75rem;
  padding-right: 2.0rem; /* space for arrow/clear */
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--app-select2-placeholder-color,
             color-mix(in srgb, var(--app-select2-color, var(--bs-body-color, #212529)) 60%, transparent));
}

.select2-container .select2-selection--single .select2-selection__arrow {
  height: 100%;
  right: .5rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  border-color: var(--app-select2-color, var(--bs-body-color, #212529)) transparent transparent transparent;
}

/* Clear button */
.select2-container--default .select2-selection__clear {
  color: var(--app-select2-color, var(--bs-body-color, #212529));
  opacity: .7;
}
.select2-container--default .select2-selection__clear:hover {
  opacity: 1;
}

/* ---------- Multiple selection specifics (tags) ---------- */
.select2-container .select2-selection--multiple {
  min-height: calc(2.5rem + 2px);
  padding: .25rem .25rem .25rem .375rem;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--app-select2-tag-bg,
                        color-mix(in srgb, var(--app-select2-bg, var(--bs-body-bg, #fff)) 85%, black));
  color:            var(--app-select2-tag-color,
                        var(--app-select2-color, var(--bs-body-color, #212529)));
  border: 1px solid var(--app-select2-border-color, var(--bs-form-select-border-color, #ced4da));
  border-radius: var(--bs-border-radius, .375rem);
  padding: .125rem .5rem;
  margin-top: .125rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: inherit;
  opacity: .7;
  margin-right: .25rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1;
}

/* ---------- Dropdown panel ---------- */
.select2-container .select2-dropdown {
  background-color: var(--app-select2-dropdown-bg, var(--bs-body-bg, #fff));
  color:            var(--app-select2-dropdown-color, var(--bs-body-color, #212529));
  border: 1px solid var(--app-select2-dropdown-border-color, var(--bs-border-color, #dee2e6));
  border-radius: var(--bs-border-radius, .375rem);
  box-shadow: var(--bs-box-shadow, 0 .5rem 1rem rgba(0,0,0,.15));
  overflow: hidden;
}

/* Search box in dropdown */
.select2-container--default .select2-search--dropdown .select2-search__field {
  background-color: var(--app-select2-bg, var(--bs-body-bg, #fff));
  color: var(--app-select2-color, var(--bs-body-color, #212529));
  border: 1px solid var(--app-select2-border-color, var(--bs-form-select-border-color, #ced4da));
  border-radius: var(--bs-border-radius, .375rem);
}

/* Options */
.select2-container--default .select2-results__option {
  color: var(--app-select2-dropdown-color, var(--bs-body-color, #212529));
}

/* Hover/keyboard highlight */
.select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--app-select2-highlight-bg, var(--bs-primary, #0d6efd));
  color:            var(--app-select2-highlight-color, var(--app-variant-contrast, #fff));
}

/* Selected option in list */
.select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: color-mix(in srgb, var(--app-select2-highlight-bg, var(--bs-primary, #0d6efd)) 18%, transparent);
  color: var(--app-select2-dropdown-color, var(--bs-body-color, #212529));
}

/* ---------- Disabled state ---------- */
.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: var(--bs-form-control-disabled-bg, #e9ecef);
  color: var(--app-select2-color, var(--bs-secondary-color, #6c757d));
  opacity: 1;
}

/* ---------- Width helpers ---------- */
.select2, .select2-container { width: 100% !important; }

/* Tag “chips” inside multi-select */
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--app-select2-tag-bg,
                        var(--app-select2-bg, var(--bs-secondary-bg, #e4e4e4))) !important;
  color:            var(--app-select2-tag-color,
                        var(--app-select2-color, var(--bs-body-color, #212529))) !important;
  border: 1px solid var(--app-select2-border-color, var(--bs-form-select-border-color, #ced4da)) !important;
  border-radius: var(--bs-border-radius, .375rem) !important;
  padding: .125rem .5rem !important;
  margin-top: .125rem !important;
}

/* “×” remove button on the chip */
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: inherit !important;
  opacity: .75;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  opacity: 1;
}


/* Single select box surface */
.select2-container--bootstrap-5 .select2-selection--single {
  background-color: var(--app-select2-bg, var(--bs-form-select-bg)) !important;
  color: var(--app-select2-color, var(--bs-form-select-color)) !important;
  border-color: var(--app-select2-border-color, var(--bs-form-select-border-color)) !important;
}

/* Inner rendered span sometimes reintroduces white */
.select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
  background-color: transparent !important;
  color: inherit !important;
}


/* Hide selects that will be enhanced (legacy `.select2` or explicit `.js-enhance`) */
select.select2,
select.js-enhance { visibility: hidden; }

/* The generated Select2 container: keep hidden until we flip the gate */
.select2-hidden-accessible + .select2-container { visibility: hidden; }

/* After init, reveal the Select2 UI */
html.ui-enhanced .select2-hidden-accessible + .select2-container { visibility: visible; }