/* TomSelect doesn't ship dark mode support; we use the dd palette via CSS
   variables (defined in application.tailwind.css) so this file stays aligned
   with the rest of the brand. !important is required to win against
   TomSelect's own stylesheet which has equal specificity but loads later. */

.ts-control {
  border: none !important;
}

.dark .ts-wrapper .ts-control,
.dark .ts-wrapper.single .ts-control {
  background-color: rgb(var(--dd-deep)) !important;
  color: white !important;
  border-color: rgb(var(--dd-mid) / 0.4) !important;
}

.dark .ts-wrapper .ts-control input {
  color: white !important;
}

.dark .ts-wrapper .ts-control input::placeholder {
  color: rgb(var(--dd-light)) !important;
}

.dark .ts-dropdown {
  background-color: rgb(var(--dd-deep)) !important;
  border-color: rgb(var(--dd-mid) / 0.4) !important;
  color: white !important;
}

.dark .ts-dropdown .option {
  color: white !important;
  background-color: rgb(var(--dd-deep)) !important;
}

.dark .ts-dropdown .option:hover,
.dark .ts-dropdown .option.active {
  background-color: rgb(var(--dd-mid) / 0.3) !important;
  color: white !important;
}

.dark .ts-dropdown .option.selected {
  background-color: rgb(var(--dd-mid)) !important;
  color: white !important;
}

.dark .ts-dropdown .optgroup-header {
  background-color: rgb(var(--dd-deep)) !important;
  color: rgb(var(--dd-light)) !important;
}

.dark .ts-wrapper .ts-control .item,
.dark .ts-wrapper.multi .ts-control > div {
  background-color: rgb(var(--dd-mid) / 0.3) !important;
  color: white !important;
  border-color: rgb(var(--dd-mid)) !important;
}