/* Tom Select, themed to match DaisyUI inputs.
   Required Tom Select fields are hidden, so the browser cannot focus them on
   submit and silently blocks it. Every form that uses them needs `novalidate`
   so Django validates and renders the errors. */

.ts-wrapper { width: 100%; }

/* the box you see before you click it. Change the border colour here. */
.ts-control {
  min-height: 2.5rem;
  border: 1px solid var(--color-base-content);   /* dark, follows light and dark theme */
  border-radius: var(--radius-field, 0.5rem);
  background: var(--color-base-100, #fff);
  color: inherit;
  box-shadow: none;
  padding: 0.35rem 0.75rem;
}

/* when focused: DaisyUI's primary (blue) ring */
.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary, #4f46e5);
  outline: 2px solid var(--color-primary, #4f46e5);
  outline-offset: 2px;
  box-shadow: none;
}

/* smaller inside item rows, to line up with input-sm */
[data-row] .ts-control {
  min-height: 2rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.875rem;
}

/* the open list of options */
.ts-dropdown {
  border: 1px solid var(--color-base-300, #d1d5db);
  border-radius: var(--radius-field, 0.5rem);
  background: var(--color-base-100, #fff);
  color: inherit;
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.12);
}

.ts-dropdown .active {
  background: var(--color-base-200, #f3f4f6);
  color: inherit;
}

/* the original select is hidden once Tom Select wraps it */
select:has(+ .ts-wrapper),
select.tomselected { display: none !important; }