/* Tom Select overrides — map to project design tokens */

.ts-wrapper {
  --ts-color-bg: var(--color-bg-primary);
  --ts-color-border: var(--color-border-default);
  --ts-color-text: var(--color-text-primary);
  --ts-radius: var(--radius-default);
  width: 100%;
  border: none;
  padding: 0;
  background: none;
  box-shadow: none;
}

/* filters.css sets min-width: 150px on .date-inputs .form-select;
   Tom Select copies classes to the wrapper, so we need equal specificity to override. */
.date-inputs .ts-wrapper {
  min-width: 320px;
}

.ts-wrapper .ts-control {
  padding: var(--input-padding-y) var(--input-padding-x);
  font-size: var(--input-font-size);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--input-bg);
  border: var(--input-border-width) solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  box-shadow: none;
  transition:
    border-color var(--transition-default),
    box-shadow var(--transition-default);
}

.ts-wrapper:not(.focus) .ts-control:hover {
  border-color: var(--color-border-dark);
}

.ts-wrapper.focus .ts-control {
  border-color: var(--input-border-color-focus);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

.ts-wrapper .ts-dropdown {
  border-color: var(--color-border-default);
  border-radius: var(--radius-default);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
}

.ts-wrapper .ts-dropdown .option.active {
  background-color: var(--color-primary-500);
  color: var(--color-text-inverse);
}

.ts-wrapper .ts-dropdown .option:hover {
  background-color: var(--color-bg-hover);
  color: var(--color-text-primary);
}