/*
 * Makes Tom Select comboboxes match the Tailwind text-input styling used across
 * the app's forms. Loaded after tom-select.css; selectors are scoped to
 * .ts-wrapper so they outrank the vendor defaults regardless of link order.
 */

/*
 * Tom Select copies the original <select>'s classes onto its wrapper. The field
 * keeps its Tailwind input classes so it still looks right before JS boots, so
 * strip the box styling back off the wrapper and let .ts-control carry it.
 * These rules are unlayered and therefore outrank Tailwind's utilities layer.
 */
.ts-wrapper {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 0;
  box-shadow: none;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.375rem;
  background: #ffffff;
  background-image: none;
  padding: 0.5rem 0.75rem;
  color: #0f172a; /* slate-900 */
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  font-size: 1rem;
  line-height: 1.5rem;
}

.ts-wrapper .ts-control input,
.ts-wrapper .ts-control input::placeholder {
  color: inherit;
}

.ts-wrapper .ts-control input::placeholder {
  color: #94a3b8; /* slate-400 */
  opacity: 1;
}

.ts-wrapper.focus .ts-control {
  border-color: #6366f1; /* indigo-500 */
  outline: none;
  box-shadow: 0 0 0 1px #6366f1;
}

.ts-wrapper.disabled .ts-control {
  opacity: 0.6;
}

.ts-wrapper .ts-dropdown {
  margin-top: 0.25rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  background: #ffffff;
  color: #0f172a;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.ts-wrapper .ts-dropdown .option {
  padding: 0.5rem 0.75rem;
}

.ts-wrapper .ts-dropdown .active {
  background: #e0e7ff; /* indigo-100 */
  color: #312e81; /* indigo-900 */
}

.ts-wrapper .ts-dropdown .no-results {
  padding: 0.5rem 0.75rem;
  color: #64748b; /* slate-500 */
}

.ts-wrapper .clear-button {
  color: #64748b;
}

@media (min-width: 640px) {
  .ts-wrapper.single .ts-control,
  .ts-wrapper.multi .ts-control,
  .ts-wrapper .ts-dropdown {
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

.dark .ts-wrapper.single .ts-control,
.dark .ts-wrapper.multi .ts-control {
  border-color: #334155; /* slate-700 */
  background: #020617; /* slate-950 */
  color: #f1f5f9; /* slate-100 */
}

.dark .ts-wrapper .ts-control input::placeholder {
  color: #64748b; /* slate-500 */
}

.dark .ts-wrapper .ts-dropdown {
  border-color: #334155;
  background: #020617;
  color: #f1f5f9;
}

.dark .ts-wrapper .ts-dropdown .active {
  background: #312e81; /* indigo-900 */
  color: #e0e7ff; /* indigo-100 */
}

.dark .ts-wrapper .ts-dropdown .no-results {
  color: #94a3b8;
}

.dark .ts-wrapper .clear-button {
  color: #94a3b8;
}

/* Add .ts-compact to a <select> whose siblings use the tighter filter-bar sizing. */
.ts-wrapper.ts-compact.single .ts-control,
.ts-wrapper.ts-compact.multi .ts-control,
.ts-wrapper.ts-compact .ts-dropdown {
  padding: 0.375rem 0.625rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  box-shadow: none;
}

.ts-wrapper.ts-compact .ts-dropdown {
  padding: 0;
}

.ts-wrapper.ts-compact .ts-dropdown .option {
  padding: 0.375rem 0.625rem;
}