/* ============================================================
   vue-ui-select — Selectize Theme
   Self-contained styles inspired by Selectize jQuery plugin.
   ============================================================ */

.ui-select--selectize { position: relative; width: 100%; font-family: inherit; font-size: 13px; }
.ui-select--selectize:focus { outline: none; }

.ui-select--selectize .ui-select-match {
  display: flex; align-items: center; min-height: 36px;
  padding: 4px 30px 4px 10px; background: #fff; border: 1px solid #d0d0d0;
  border-radius: 3px; cursor: pointer; box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
}
.ui-select--selectize.ui-select--open .ui-select-match { border-color: #b8b8b8; box-shadow: inset 0 1px 2px rgba(0,0,0,0.15); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ui-select--selectize.ui-select--disabled .ui-select-match { background: #fafafa; opacity: 0.5; cursor: not-allowed; }

.ui-select--selectize .ui-select-match__content { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-select--selectize .ui-select-match__placeholder { color: #aaa; }

.ui-select--selectize .ui-select-match__clear { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); border: none; background: none; color: #aaa; cursor: pointer; font-size: 14px; padding: 0; }
.ui-select--selectize .ui-select-match__clear:hover { color: #333; }
.ui-select--selectize .ui-select-match__caret { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #aaa; }
.ui-select--selectize.ui-select--open .ui-select-match__caret { transform: translateY(-50%) rotate(180deg); }
.ui-select--selectize.ui-select--loading .ui-select-match__caret { display: none; }

.ui-select--selectize .ui-select-match__tags { display: flex; flex-wrap: wrap; gap: 3px; flex: 1; align-items: center; }
.ui-select--selectize .ui-select-match__tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; background: linear-gradient(to bottom, #f1f1f1, #e1e1e1); border: 1px solid #d0d0d0;
  border-radius: 3px; font-size: 12px; color: #333; box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.ui-select--selectize .ui-select-match__tag-remove { border: none; background: none; color: #aaa; cursor: pointer; font-size: 13px; padding: 0; }
.ui-select--selectize .ui-select-match__tag-remove:hover { color: #333; }
.ui-select--selectize .ui-select-match__search-input { flex: 1; min-width: 4rem; border: none; outline: none; background: transparent; font-size: 13px; padding: 2px 0; }

.ui-select--selectize .ui-select__dropdown,
.ui-select__dropdown--selectize {
  position: absolute; left: 0; right: 0; z-index: 9999; margin-top: -1px;
  background: #fff; border: 1px solid #d0d0d0; border-top: none;
  border-radius: 0 0 3px 3px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.ui-select--selectize[data-position="up"] .ui-select__dropdown,
.ui-select__dropdown--selectize[data-position="up"] {
  top: auto; bottom: 100%; margin-top: 0; margin-bottom: -1px;
  border-top: 1px solid #d0d0d0; border-bottom: none;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -1px 3px rgba(0,0,0,0.1);
}

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

.ui-select--selectize .ui-select__search,
.ui-select__dropdown--selectize .ui-select__search { padding: 6px; border-bottom: 1px solid #eee; }
.ui-select--selectize .ui-select__input,
.ui-select__dropdown--selectize .ui-select__input { width: 100%; padding: 5px 8px; border: 1px solid #d0d0d0; border-radius: 3px; font-size: 13px; outline: none; }
.ui-select--selectize .ui-select__input:focus,
.ui-select__dropdown--selectize .ui-select__input:focus { border-color: #b8b8b8; }

.ui-select--selectize .ui-select-choices,
.ui-select__dropdown--selectize .ui-select-choices { max-height: 200px; overflow-y: auto; }

.ui-select--selectize .ui-select-choices__row,
.ui-select__dropdown--selectize .ui-select-choices__row { padding: 5px 10px; cursor: pointer; }
.ui-select--selectize .ui-select-choices__row--active,
.ui-select__dropdown--selectize .ui-select-choices__row--active { background: #f5fafd; color: #495c68; }
.ui-select--selectize .ui-select-choices__row--selected,
.ui-select__dropdown--selectize .ui-select-choices__row--selected { background: #e8e8e8; }
.ui-select--selectize .ui-select-choices__row--disabled,
.ui-select__dropdown--selectize .ui-select-choices__row--disabled { color: #bbb; cursor: not-allowed; }

.ui-select--selectize .ui-select-choices__group-header,
.ui-select__dropdown--selectize .ui-select-choices__group-header { padding: 5px 10px; font-size: 11px; font-weight: bold; color: #999; text-transform: uppercase; background: #f9f9f9; border-bottom: 1px solid #eee; }

.ui-select--selectize .ui-select-no-choice,
.ui-select__dropdown--selectize .ui-select-no-choice { padding: 10px; text-align: center; color: #aaa; }

.ui-select--selectize .ui-select__spinner { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.ui-select--selectize .ui-select__spinner-icon { display: inline-block; width: 14px; height: 14px; border: 2px solid #d0d0d0; border-top-color: #5897fb; border-radius: 50%; animation: ui-select-spin 0.6s linear infinite; }
.ui-select--selectize mark { background-color: #ffe184; padding: 0; }

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

/* ---- Validator integration ---- */
.ui-select--selectize.v-invalid.v-touched .ui-select-match {
  border-color: #c0392b;
}
.ui-select--selectize.v-invalid.v-touched.ui-select--open .ui-select-match,
.ui-select--selectize.v-invalid.v-touched:focus-within .ui-select-match {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
}

/* 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: #c0392b;
}
input.v-invalid.v-touched:focus,
textarea.v-invalid.v-touched:focus,
select.v-invalid.v-touched:focus {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.2);
  outline: none;
}

/* Multi-select has no caret, so the clear-all control takes the caret's slot. */
.ui-select--selectize.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--selectize:focus-visible {
  outline: 2px solid #7a7a7a;
  outline-offset: 2px;
}