/*
 * Override non vendored per TomSelect (v. app/assets/stylesheets/tom-select.css)
 * per farlo combaciare con l'input daisyUI (`input input-bordered`) e col
 * tema `megiston`. Minimale: si lascia il resto al foglio di default.
 */
.ts-wrapper .ts-control {
  border-color: var(--color-base-300);
  border-radius: var(--radius-field);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  padding: 0.5rem 0.75rem;
  min-height: 2.5rem;
}

.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--color-primary) 30%, transparent);
}

.ts-wrapper.ts-invalid .ts-control {
  border-color: var(--color-error);
}

.ts-wrapper .ts-control > input {
  color: var(--color-base-content);
}

/* Valore selezionato come chip (anche in modalità single, dove il default
   vendored non applica alcuno sfondo/padding: vedi tom-select.css righe
   40-51, scoping a `.multi`). */
.ts-wrapper .ts-control > .item {
  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-base-content);
  border-radius: var(--radius-selector, var(--radius-field));
  padding: 0.125rem 0.5rem;
  margin-right: 0.375rem;
  /* Le etichette di collegamento portano codice + nome e possono essere
     lunghe: senza troncamento il chip andava a capo su piu' righe, facendo
     crescere il controllo e spostando in basso il bottone accanto. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Il chip non deve poter allargare il controllo oltre la colonna che lo
   contiene: senza questo, un'etichetta lunga spinge il layout in orizzontale. */
.ts-wrapper.single .ts-control {
  flex-wrap: nowrap;
  overflow: hidden;
}

.ts-dropdown {
  border-color: var(--color-base-300);
  border-radius: var(--radius-field);
  background-color: var(--color-base-100);
  color: var(--color-base-content);
  box-shadow: 0 4px 16px color-mix(in oklab, var(--color-neutral) 20%, transparent);
}

.ts-dropdown .option,
.ts-dropdown .optgroup-header,
.ts-dropdown .no-results,
.ts-dropdown .create {
  color: var(--color-base-content);
}

.ts-dropdown .active {
  background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
  color: var(--color-base-content);
}