/* ============================================================
   vue-ui-select — Bootstrap Theme
   Inspired by Bootstrap 5 form-select styling.
   Requires Bootstrap CSS as peer dependency.
   ============================================================ */

.ui-select--bootstrap {
  position: relative;
  width: 100%;
  font-family: inherit;
}

.ui-select--bootstrap .ui-select-match {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 0.375rem 2rem 0.375rem 0.75rem;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  font-size: 1rem;
  line-height: 1.5;
}

.ui-select--bootstrap:focus {
  outline: none;
}

.ui-select--bootstrap.ui-select--open .ui-select-match {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.ui-select--bootstrap.ui-select--disabled .ui-select-match {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.65;
}

.ui-select--bootstrap .ui-select-match__content { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select--bootstrap .ui-select-match__placeholder { color: #6c757d; }

.ui-select--bootstrap .ui-select-match__clear {
  position: absolute; right: 1.75rem; top: 50%; transform: translateY(-50%);
  border: none; background: none; color: #6c757d; cursor: pointer; padding: 0; font-size: 1.125rem;
}
.ui-select--bootstrap .ui-select-match__clear:hover { color: #212529; }

.ui-select--bootstrap .ui-select-match__caret {
  position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #6c757d;
}
.ui-select--bootstrap.ui-select--open .ui-select-match__caret { transform: translateY(-50%) rotate(180deg); }
.ui-select--bootstrap.ui-select--loading .ui-select-match__caret { display: none; }

.ui-select--bootstrap .ui-select-match__tags { display: flex; flex-wrap: wrap; gap: 0.25rem; flex: 1; align-items: center; }
.ui-select--bootstrap .ui-select-match__tag {
  display: inline-flex; align-items: center; gap: 0.25rem;
  padding: 0.125rem 0.5rem; background-color: #0d6efd; color: #fff; border-radius: 0.25rem; font-size: 0.875rem;
}
.ui-select--bootstrap .ui-select-match__tag-remove {
  border: none; background: none; color: #fff; cursor: pointer; padding: 0; font-size: 0.875rem; opacity: 0.7;
}
.ui-select--bootstrap .ui-select-match__tag-remove:hover { opacity: 1; }

.ui-select--bootstrap .ui-select-match__search-input {
  flex: 1; min-width: 4rem; border: none; outline: none; background: transparent; font-size: 1rem; padding: 0;
}

.ui-select--bootstrap .ui-select__dropdown,
.ui-select__dropdown--bootstrap {
  position: absolute; left: 0; right: 0; z-index: 1050; margin-top: 0.125rem;
  background-color: #fff; border: 1px solid rgba(0,0,0,0.15); border-radius: 0.375rem;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.175);
}

.ui-select--bootstrap[data-position="up"] .ui-select__dropdown,
.ui-select__dropdown--bootstrap[data-position="up"] {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0.125rem;
}

.ui-select--bootstrap[data-position="up"] .ui-select__dropdown,
.ui-select__dropdown--bootstrap.ui-select__dropdown--up {
  display: flex; flex-direction: column-reverse;
}
.ui-select--bootstrap[data-position="up"] .ui-select__search,
.ui-select__dropdown--bootstrap.ui-select__dropdown--up .ui-select__search {
  border-bottom: none; border-top: 1px solid #dee2e6;
}

.ui-select--bootstrap .ui-select__search,
.ui-select__dropdown--bootstrap .ui-select__search { padding: 0.5rem; border-bottom: 1px solid #dee2e6; }
.ui-select--bootstrap .ui-select__input,
.ui-select__dropdown--bootstrap .ui-select__input { width: 100%; padding: 0.375rem 0.75rem; border: 1px solid #ced4da; border-radius: 0.25rem; font-size: 1rem; outline: none; }
.ui-select--bootstrap .ui-select__input:focus,
.ui-select__dropdown--bootstrap .ui-select__input:focus { border-color: #86b7fe; box-shadow: 0 0 0 0.25rem rgba(13,110,253,0.25); }

.ui-select--bootstrap .ui-select-choices,
.ui-select__dropdown--bootstrap .ui-select-choices { max-height: 15rem; overflow-y: auto; padding: 0.25rem 0; }

.ui-select--bootstrap .ui-select-choices__row,
.ui-select__dropdown--bootstrap .ui-select-choices__row { padding: 0.375rem 0.75rem; cursor: pointer; }
.ui-select--bootstrap .ui-select-choices__row--active,
.ui-select__dropdown--bootstrap .ui-select-choices__row--active { background-color: #0d6efd; color: #fff; }
.ui-select--bootstrap .ui-select-choices__row--selected,
.ui-select__dropdown--bootstrap .ui-select-choices__row--selected { background-color: #e9ecef; }
.ui-select--bootstrap .ui-select-choices__row--disabled,
.ui-select__dropdown--bootstrap .ui-select-choices__row--disabled { color: #adb5bd; cursor: not-allowed; }
.ui-select--bootstrap .ui-select-choices__row:hover:not(.ui-select-choices__row--disabled):not(.ui-select-choices__row--active),
.ui-select__dropdown--bootstrap .ui-select-choices__row:hover:not(.ui-select-choices__row--disabled):not(.ui-select-choices__row--active) { background-color: #f8f9fa; }

.ui-select--bootstrap .ui-select-choices__group-header,
.ui-select__dropdown--bootstrap .ui-select-choices__group-header { padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600; color: #6c757d; background-color: #f8f9fa; }

.ui-select--bootstrap .ui-select-no-choice,
.ui-select__dropdown--bootstrap .ui-select-no-choice { padding: 0.75rem; text-align: center; color: #6c757d; }

.ui-select--bootstrap .ui-select__spinner { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); }
.ui-select--bootstrap .ui-select__spinner-icon {
  display: inline-block; width: 1rem; height: 1rem;
  border: 2px solid #ced4da; border-top-color: #0d6efd; border-radius: 50%;
  animation: ui-select-spin 0.6s linear infinite;
}

.ui-select--bootstrap mark { background-color: #fff3cd; padding: 0; }

.ui-select--bootstrap .ui-select-choices__checkbox,
.ui-select__dropdown--bootstrap .ui-select-choices__checkbox {
  pointer-events: none; margin-right: 0.5rem; vertical-align: middle;
  width: 1rem; height: 1rem; accent-color: #0d6efd; flex-shrink: 0;
}
[data-show-checkboxes] > .ui-select-choices__row,
.ui-select--bootstrap [data-show-checkboxes] > .ui-select-choices__row,
.ui-select__dropdown--bootstrap [data-show-checkboxes] > .ui-select-choices__row { display: flex; align-items: center; }

/* ---- Validator integration ---- */
.ui-select--bootstrap.v-invalid.v-touched .ui-select-match {
  border-color: #dc3545;
}
.ui-select--bootstrap.v-invalid.v-touched.ui-select--open .ui-select-match,
.ui-select--bootstrap.v-invalid.v-touched:focus-within .ui-select-match {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Same treatment for native form controls when used alongside <ui-select>
 * with the same validator. Scoped to (v-invalid AND v-touched). */
input.v-invalid.v-touched,
textarea.v-invalid.v-touched,
select.v-invalid.v-touched {
  border-color: #dc3545;
}
input.v-invalid.v-touched:focus,
textarea.v-invalid.v-touched:focus,
select.v-invalid.v-touched:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
  outline: none;
}

/* Multi-select has no caret, so the clear-all control takes the caret's slot. */
.ui-select--bootstrap.ui-select--multiple .ui-select-match__clear {
  right: 0.5rem;
}

/* ---- Keyboard focus ----
   The rule above removes the outline so a pointer click does not draw one. A
   keyboard user still has to be able to see where focus is, and a closed select
   showed nothing at all. :focus-visible matches keyboard focus only. */
.ui-select--bootstrap:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}