/* Tom Select overrides to match app theme and support dark mode via CSS variables */

/* Ensure full width like .form-control */
.ts-wrapper {
  width: 100%;
}

/* Control (input) */
.ts-wrapper .ts-control {
  background: var(--base-bg-low);
  border: 1px solid var(--base-border-tertiary);
  border-radius: 6px;
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  color: var(--base-text-secondary);
  min-height: 34px;
}

.ts-wrapper.single.input-active .ts-control,
.ts-wrapper.multi.input-active .ts-control {
  background: var(--base-bg-low);
}

.ts-wrapper .ts-control input {
  color: var(--base-text-secondary);
}

.ts-wrapper .ts-control input::placeholder {
  color: var(--base-text-tertiary);
}

/* Selected items (multi) */
.ts-wrapper.multi .ts-control .item {
  padding: 0 4px;
  background: var(--base-bg-high);
  border: 1px solid var(--base-border-secondary);
  color: var(--base-text-secondary);
}

/* Dropdown */
.ts-dropdown,
.ts-dropdown .dropdown-content {
  background: var(--base-bg-low);
  border: 1px solid var(--base-border-tertiary);
  color: var(--base-text-secondary);
}

.ts-dropdown .option {
  color: var(--base-text-secondary);
}

.ts-dropdown .option.active,
.ts-dropdown .create {
  background: var(--base-bg-selected);
  color: #ffffff;
}

/* Remove button plugin */
.ts-wrapper .remove,
.ts-wrapper .remove-single {
  color: var(--base-text-tertiary);
}