/* Custom Choices.js styling to match application design */

/* Main select input - white background */
.choices__inner {
  background-color: white !important;
  border-color: rgb(209 213 219) !important; /* gray-300 */
}

/* Focused state */
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
  border-color: rgb(99 102 241) !important; /* indigo-500 */
}

/* Dropdown list - white background */
.choices__list--dropdown {
  background-color: white !important;
  border-color: rgb(209 213 219) !important; /* gray-300 */
}

/* Individual items in dropdown */
.choices__item--choice {
  background-color: white !important;
}

/* Highlighted/hovered item */
.choices__item--choice.is-highlighted {
  background-color: rgb(238 242 255) !important; /* indigo-50 */
  color: rgb(55 48 163) !important; /* indigo-900 */
}

/* Selected item background */
.choices__item--selectable.is-selected {
  background-color: rgb(238 242 255) !important; /* indigo-50 */
}

/* Placeholder text */
.choices__placeholder {
  opacity: 0.5;
}

/* Disabled state */
.choices.is-disabled .choices__inner {
  background-color: rgb(243 244 246) !important; /* gray-100 */
  cursor: not-allowed;
}

/* Remove the default gray background from the input */
.choices__input {
  background-color: white !important;
}