/*
 * Tema slate/emerald para Tom Select — matchea el resto de los inputs de
 * la app (border slate-300, focus emerald-500, bg blanco, font-size 14).
 * Cargado después de tom_select.base.css por orden alfabético: theme > base.
 */

.ts-wrapper {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #0f172a; /* slate-900 */
}

/*
 * El <select> lleva clases de input (border, rounded, h-[38px], px-3) que
 * Tom Select copia al wrapper, duplicando el borde con el de `.ts-control`.
 * Neutralizamos el wrapper: el borde, relleno y alto los pone únicamente
 * `.ts-control`. `!important` para ganarle a las utilidades de Tailwind sin
 * depender del orden de carga.
 */
.ts-wrapper.single,
.ts-wrapper.multi {
  border: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.multi .ts-control {
  background: #ffffff;
  border: 1px solid #cbd5e1; /* slate-300 */
  border-radius: 0.375rem;
  box-shadow: none;
  padding: 0.5rem 0.75rem;
  min-height: 2.375rem;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ts-wrapper.focus .ts-control {
  border-color: #10b981; /* emerald-500 */
  box-shadow: 0 0 0 1px #10b981;
  outline: none;
}

.ts-wrapper .ts-control > input {
  color: #0f172a;
  font-size: 0.875rem;
  margin: 0;
  padding: 0;
}

.ts-wrapper .ts-control > input::placeholder,
.ts-wrapper .ts-control > .placeholder {
  color: #94a3b8; /* slate-400 */
  font-size: 0.875rem;
}

.ts-wrapper.disabled .ts-control,
.ts-wrapper.input-active.disabled .ts-control {
  background: #f1f5f9; /* slate-100 */
  color: #94a3b8;
  cursor: not-allowed;
}

/* Caret */
.ts-wrapper.single .ts-control:after {
  border-color: #64748b transparent transparent transparent; /* slate-500 */
  margin-top: -2px;
}
.ts-wrapper.single.dropdown-active .ts-control:after {
  border-color: transparent transparent #64748b transparent;
  margin-top: -6px;
}

/* Dropdown */
.ts-dropdown {
  background: #ffffff;
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #0f172a;
  padding: 0.25rem;
}

.ts-dropdown .option {
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
  background: #ecfdf5; /* emerald-50 */
  color: #047857; /* emerald-700 */
}

.ts-dropdown .selected {
  background: #d1fae5; /* emerald-100 */
  color: #065f46; /* emerald-800 */
  font-weight: 500;
}

.ts-dropdown .optgroup-header {
  color: #475569; /* slate-600 */
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.5rem 0.75rem 0.25rem;
  background: transparent;
}

.ts-dropdown .ts-no-results,
.ts-dropdown .no-results {
  color: #94a3b8;
  padding: 0.75rem;
  font-style: italic;
  text-align: center;
}

/* Search input adentro del dropdown (plugin dropdown_input) */
.ts-dropdown .dropdown-input {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 0.375rem;
  padding: 0.375rem 0.5rem;
  margin: 0.25rem;
  font-size: 0.8125rem;
  color: #0f172a;
  width: calc(100% - 0.5rem);
  box-sizing: border-box;
  outline: none;
}

.ts-dropdown .dropdown-input:focus {
  border-color: #10b981;
  box-shadow: 0 0 0 1px #10b981;
}

.ts-dropdown .dropdown-input-wrap {
  background: transparent;
  padding: 0;
  border: none;
}

/* Multi: chips de items seleccionados */
.ts-wrapper.multi .ts-control > div {
  background: #ecfdf5;
  border: 1px solid #a7f3d0; /* emerald-200 */
  color: #065f46;
  border-radius: 0.25rem;
  padding: 0.125rem 0.5rem;
  font-size: 0.8125rem;
  margin: 0.125rem 0.25rem 0.125rem 0;
}

.ts-wrapper.multi .ts-control > div.active {
  background: #a7f3d0;
  color: #064e3b;
}

.ts-wrapper.multi .ts-control > div .remove {
  border-left-color: #6ee7b7;
  color: #047857;
  padding: 0 0.375rem;
}
.ts-wrapper.multi .ts-control > div .remove:hover {
  background: #6ee7b7;
  color: #064e3b;
}

/* Compatibilidad: cuando un select está hidden por su wrapper, ocultar
 * también el ts-wrapper hijo (Tom Select renderiza fuera del select y el
 * wrapper original por defecto sigue visible). */
[hidden] .ts-wrapper {
  display: none !important;
}