/*
 * Choices.js (https://github.com/Choices-js/Choices) v11.2.3 — base styles.
 *
 * Pairs with the JS module vendored at vendor/javascript/choices.js (pinned
 * in config/importmap.rb as `choices`) and consumed by
 * app/javascript/controllers/searchable_select_controller.js
 * (data-controller="searchable-select"). See GH issue #221.
 *
 * Provenance: hand-authored against the exact class map read out of the
 * vendored v11.2.3 source (its `DEFAULT_CONFIG.classNames` object — grep
 * `choices__` / `is-` in vendor/javascript/choices.js to re-derive it), plus
 * the well-known structure of the library's own stock stylesheet. This
 * environment could not reach npm/jsDelivr to diff byte-for-byte against the
 * published `choices.min.css`, so treat this as functionally equivalent
 * (every selector Choices actually toggles at runtime is covered) rather
 * than a verified byte-identical vendor drop. Two deliberate deviations from
 * the stock theme, so nothing here depends on hand-reconstructed binary
 * data URIs:
 *   - The dropdown affordance on single selects is a plain CSS border
 *     triangle (the stock sheet also does this — no deviation there).
 *   - The multi-select "remove item" (x) and the single-select "clear
 *     selection" buttons are drawn with CSS (a rotated pseudo-element cross)
 *     instead of the stock sheet's embedded SVG background-image, since
 *     that data URI could not be sourced/verified here.
 *
 * Self-hosted (not CDN) to match how the JS is vendored, and so no
 * config/initializers/content_security_policy.rb change is required — it
 * loads from :self, already permitted by style_src.
 *
 * Scoped entirely under `.choices*` / generic `.is-*` state classes that
 * Choices itself applies to the wrapper it injects; verified against every
 * CSS file under app/assets/stylesheets (recursively) that none of those
 * class names are used elsewhere in the app, so this does not clash with
 * Bootstrap 5.3 utility classes or CoPlanner's own theme_foundation styles.
 */

.choices {
  position: relative;
  margin-bottom: 1rem;
  font-size: 1rem;
}

.choices:last-child {
  margin-bottom: 0;
}

.choices[data-type*="select-one"] {
  cursor: pointer;
}

.choices.is-disabled .choices__inner,
.choices.is-disabled .choices__input {
  background-color: #e9ecef;
  cursor: not-allowed;
  user-select: none;
}

/* ---- Outer/inner container (the visible "select box") ---- */

.choices__inner {
  display: block;
  vertical-align: top;
  width: 100%;
  min-height: calc(1.5em + 0.75rem + 2px); /* match Bootstrap .form-select height */
  padding: 0.375rem 2.25rem 0.375rem 0.75rem;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  font-size: 1rem;
  line-height: 1.5;
  overflow: hidden;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: #86b7fe;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.choices.is-open .choices__inner {
  border-radius: 0.375rem 0.375rem 0 0;
}

.choices.is-flipped.is-open .choices__inner {
  border-radius: 0 0 0.375rem 0.375rem;
}

.choices.is-invalid .choices__inner {
  border-color: #dc3545;
}

/* Dropdown caret for single selects (CSS triangle, no image asset needed) */
.choices[data-type*="select-one"]:after {
  content: "";
  height: 0;
  width: 0;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
  border-width: 5px;
  position: absolute;
  right: 0.9rem;
  top: 50%;
  margin-top: -2.5px;
  pointer-events: none;
}

.choices[data-type*="select-one"].is-open:after {
  border-color: transparent transparent #333 transparent;
  margin-top: -7.5px;
}

.choices[data-type*="select-multiple"] .choices__inner,
.choices[data-type*="text"] .choices__inner {
  cursor: text;
}

/* ---- Item list ---- */

.choices__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
}

.choices__list--single {
  display: inline-block;
  width: 100%;
  padding: 0;
}

.choices__list--single .choices__item {
  width: 100%;
}

.choices__list--multiple {
  display: inline;
}

.choices__list--multiple .choices__item {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  border-radius: 1rem;
  padding: 0.15rem 0.6rem;
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0.15rem 0.3rem 0.15rem 0;
  background-color: #0d6efd;
  color: #fff;
  word-break: break-word;
  box-sizing: border-box;
}

.choices__list--multiple .choices__item.is-highlighted {
  background-color: #0b5ed7;
}

.choices.is-disabled .choices__list--multiple .choices__item {
  background-color: #adb5bd;
}

/* ---- Dropdown ---- */

.choices__list--dropdown,
.choices__list[aria-expanded] {
  visibility: hidden;
  z-index: 1056; /* above Bootstrap modals (1055), consistent with in-app dropdowns */
  position: absolute;
  width: 100%;
  background-color: #fff;
  border: 1px solid #ced4da;
  top: 100%;
  margin-top: -1px;
  border-bottom-left-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
  overflow: hidden;
  word-break: break-word;
  will-change: visibility;
}

.choices__list--dropdown.is-active,
.choices__list[aria-expanded].is-active {
  visibility: visible;
}

.choices.is-open .choices__list--dropdown,
.choices.is-open .choices__list[aria-expanded] {
  border-color: #86b7fe;
}

.choices.is-flipped .choices__list--dropdown,
.choices.is-flipped .choices__list[aria-expanded] {
  top: auto;
  bottom: 100%;
  margin-top: 0;
  margin-bottom: -1px;
  border-radius: 0.375rem 0.375rem 0 0;
}

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list {
  position: relative;
  max-height: 300px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  will-change: scroll-position;
}

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
  position: relative;
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
}

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
  background-color: #f2f4f6;
}

.choices__list--dropdown .choices__item.is-selected,
.choices__list[aria-expanded] .choices__item.is-selected {
  font-weight: 600;
  color: #0d6efd;
}

.choices__item {
  cursor: default;
}

.choices__item--selectable {
  cursor: pointer;
}

.choices__item--disabled {
  cursor: not-allowed;
  user-select: none;
  opacity: 0.5;
}

.choices__group .choices__heading {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid #f2f2f2;
  color: #6c757d;
  text-transform: uppercase;
}

.choices__notice,
.choices__list--dropdown .choices__item.has-no-results,
.choices__list--dropdown .choices__item.has-no-choices,
.choices__list[aria-expanded] .choices__item.has-no-results,
.choices__list[aria-expanded] .choices__item.has-no-choices {
  color: #6c757d;
  cursor: default;
}

.choices__description {
  display: block;
  font-size: 0.8125rem;
  color: #6c757d;
}

/* ---- Search input / placeholder ---- */

.choices__input {
  display: inline-block;
  vertical-align: baseline;
  background-color: #fff;
  font-size: 0.9375rem;
  border: 0;
  border-radius: 0;
  max-width: 100%;
  padding: 0.375rem 0.75rem;
  margin: 0;
}

.choices__input:focus {
  outline: 0;
}

.choices[data-type*="select-one"] .choices__input {
  display: block;
  width: 100%;
  border-bottom: 1px solid #dee2e6;
}

.choices__placeholder {
  opacity: 0.65;
}

/* ---- Remove/clear buttons (CSS-drawn cross, no external icon asset) ---- */

.choices__button {
  display: inline-block;
  position: relative;
  border: 0;
  background-color: transparent;
  cursor: pointer;
  padding: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  opacity: 0.6;
}

.choices__button:hover,
.choices__button:focus-visible {
  opacity: 1;
  outline: 0;
}

.choices__button::before,
.choices__button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.7rem;
  height: 2px;
  background-color: currentColor;
  transform-origin: center;
}

.choices__button::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.choices__button::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.choices__list--multiple .choices__button {
  margin-left: 0.35rem;
  color: #fff;
  width: 0.75rem;
  height: 0.75rem;
}

.choices__list--multiple .choices__button::before,
.choices__list--multiple .choices__button::after {
  width: 0.55rem;
}

.choices[data-type*="select-one"] .choices__button {
  position: absolute;
  top: 50%;
  right: 1.75rem;
  transform: translateY(-50%);
  color: #6c757d;
}

.choices[data-type*="select-one"] .choices__item[data-value=""] .choices__button {
  display: none;
}

.choices [hidden] {
  display: none !important;
}