/*
 * 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: #3b82f6; /* blue-500 */
  outline: none;
  box-shadow: 0 0 0 1px #3b82f6;
}

.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: #fef3c7; /* amber-100 */
  color: #1a2236; /* ink */
}

.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: #101a2e; /* stage */
  color: #f1f5f9; /* slate-100 */
}

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

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

.dark .ts-wrapper .ts-dropdown .active {
  background: rgb(255 201 74 / 0.15); /* spotlight/15 */
  color: #ffc94a; /* spotlight */
}

.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;
}

/*
 * An invalid <select> carries .field-error from ApplicationFormBuilder, and Tom Select
 * copies it onto the wrapper. The Tailwind border utilities land on the wrapper, whose
 * box styling is stripped above, so the highlight has to be restated on .ts-control.
 */
.ts-wrapper.field-error.single .ts-control,
.ts-wrapper.field-error.multi .ts-control {
  border-color: #f43f5e; /* rose-500 */
  box-shadow: 0 0 0 1px #f43f5e;
}

.ts-wrapper.field-error.focus .ts-control {
  border-color: #f43f5e;
  box-shadow: 0 0 0 1px #f43f5e;
}

.dark .ts-wrapper.field-error.single .ts-control,
.dark .ts-wrapper.field-error.multi .ts-control,
.dark .ts-wrapper.field-error.focus .ts-control {
  border-color: #fb7185; /* rose-400 */
  box-shadow: 0 0 0 1px #fb7185;
}