/*
 * Admin-area TomSelect visual overrides.
 *
 * TomSelect's own CSS (tom-select.default.min.css) is loaded separately and
 * handles all structural/plugin behaviour. These rules only adjust colours and
 * borders to look consistent with Madmin's form fields.
 */

/* Hide native <select> once TomSelect takes over */
select[data-controller="select"] {
  display: none !important;
}

.ts-wrapper {
  width: 100%;
}

.ts-control {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: #fff;
  font-size: 0.875rem;
  color: #374151;
}

.ts-control:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.ts-dropdown {
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  font-size: 0.875rem;
}

.ts-dropdown .option {
  color: #374151;
}

.ts-dropdown .option:hover,
.ts-dropdown .active {
  background-color: #f3f4f6;
  color: #111827;
}