/* -------------------------------------------------------------------------
   Choices.js — design-system theme

   The vendored choices.min.css ships hard-coded light colours (#f9f9f9
   control, #fff dropdown, #333 caret, #f2f2f2 highlight, gray headings) that
   ignore the platform tokens and break in dark mode. This sheet re-themes the
   widget onto the same Bootstrap and VL design tokens as native form controls
   and the .vl-autocomplete dropdown.

   IMPORTANT: load this AFTER choices.min.css. Selectors are scoped under
   .choices so they match or exceed the library's own specificity; ties are
   then resolved by load order in this sheet's favour.
   ------------------------------------------------------------------------- */

/* The visible control: mirror .form-select. */
.choices .choices__inner {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  color: var(--bs-body-color);
}
/* Bootstrap-style focus ring; keep the control rounded while open so the
   dropdown floats below rather than docking to a squared edge. */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: var(--vl-azure);
  box-shadow: 0 0 0 0.25rem rgba(var(--vl-azure-rgb), 0.25);
  border-radius: var(--bs-border-radius);
}
.choices .choices__list,
.choices .choices__input { color: var(--bs-body-color); }
.choices .choices__list--single .choices__item { color: var(--bs-body-color); }
.choices .choices__placeholder { color: var(--bs-secondary-color); opacity: 1; }

/* Caret colour follows the text colour. */
.choices[data-type*="select-one"]::after { border-top-color: var(--bs-body-color); }
.choices[data-type*="select-one"].is-open::after { border-bottom-color: var(--bs-body-color); }

/* Dropdown panel: a floating, themed surface mirroring .vl-autocomplete. */
.choices .choices__list--dropdown,
.choices .choices__list[aria-expanded] {
  background-color: var(--bs-body-bg);
  border: 1px solid var(--vl-azure);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.18);
  margin-top: 0.3rem;
  overflow: hidden;
}
/* The library colours the open-dropdown border at higher specificity; match it. */
.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] { border-color: var(--vl-azure); }

/* In-dropdown search field. */
.choices[data-type*="select-one"] .choices__input {
  background-color: var(--bs-body-bg);
  color: var(--bs-body-color);
  border-bottom: 1px solid var(--bs-border-color);
}

/* Items + the highlighted (hover / keyboard) state, echoing .vl-autocomplete-item. */
.choices .choices__list--dropdown .choices__item,
.choices .choices__list[aria-expanded] .choices__item { color: var(--bs-body-color); }
.choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: var(--vl-surface-2);
  color: var(--vl-azure);
}

/* optgroup headings. */
.choices .choices__heading {
  color: var(--bs-secondary-color);
  border-bottom-color: var(--bs-border-color-translucent);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.72rem;
}

/* Multi-select tags: brand slate instead of the library's teal. */
.choices .choices__list--multiple .choices__item {
  background-color: var(--vl-slate);
  border-color: var(--vl-slate-700);
}
.choices .choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--vl-slate-700);
  border-color: var(--vl-slate-700);
}

/* Disabled. */
.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: var(--vl-surface-2);
}