/* Select2 + Bootstrap 5 visual integration */

/* Match Bootstrap 5 form-control height (38px) */
.select2-container--default .select2-selection--single {
  height: calc(2.25rem + 2px);   /* ~38px to match .form-control */
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: var(--bs-border-radius, .25rem);
  background-color: var(--bs-body-bg, #fff);
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(2.25rem + 2px);
  padding-left: .75rem;
  padding-right: 2rem;
  color: var(--bs-body-color, #212529);
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(2.25rem + 2px);
  right: .25rem;
}

/* form-control-sm equivalent — match height of .form-select-sm (~31px) */
.form-control-sm + .select2-container--default .select2-selection--single,
.form-select-sm + .select2-container--default .select2-selection--single,
.input-group-sm .select2-container--default .select2-selection--single,
select.form-select-sm + .select2-container--default .select2-selection--single {
  height: calc(1.75rem + 2px);
}
.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__rendered,
.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__rendered,
.input-group-sm .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: calc(1.75rem + 2px);
}
.form-control-sm + .select2-container--default .select2-selection--single .select2-selection__arrow,
.form-select-sm + .select2-container--default .select2-selection--single .select2-selection__arrow,
.input-group-sm .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: calc(1.75rem + 2px);
}

/* Focus ring — match the BS5 :focus look */
.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: #86b7fe;
  box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
  outline: 0;
}

/* Multi-select chips — line them up vertically nicely */
.select2-container--default .select2-selection--multiple {
  min-height: calc(2.25rem + 2px);
  border: 1px solid var(--bs-border-color, #ced4da);
  border-radius: var(--bs-border-radius, .25rem);
  background-color: var(--bs-body-bg, #fff);
  padding: 2px 4px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--bs-primary, #0d6efd);
  border: 1px solid var(--bs-primary, #0d6efd);
  color: #fff;
  border-radius: .25rem;
  padding: 0 .5rem;
  margin: 2px 4px 2px 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: rgba(255, 255, 255, .8);
  margin-right: .35rem;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
  color: #fff;
  background: transparent;
}

/* Dropdown panel — sit nicely on top of modals */
.select2-container--open .select2-dropdown {
  border-color: #86b7fe;
}

/* Disabled state — keep the muted BS look */
.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: var(--bs-secondary-bg, #e9ecef);
  opacity: 1;
}

/* When Select2 is inside a Bootstrap input-group, make sure it doesn't break the round corners */
.input-group > .select2-container--default {
  flex: 1 1 auto;
  width: 1% !important;
}
.input-group > .select2-container--default .select2-selection--single {
  border-radius: 0;
}
.input-group > .select2-container--default:first-child .select2-selection--single {
  border-top-left-radius: var(--bs-border-radius, .25rem);
  border-bottom-left-radius: var(--bs-border-radius, .25rem);
}
.input-group > .select2-container--default:last-child .select2-selection--single {
  border-top-right-radius: var(--bs-border-radius, .25rem);
  border-bottom-right-radius: var(--bs-border-radius, .25rem);
}

/* Ensure dropdowns inside modals appear above the modal backdrop */
.select2-container--open {
  z-index: 1056;  /* > .modal z-index of 1055 */
}