/* Custom Tom Select Styling to match form inputs */
.ts-control {
  @apply block w-full rounded-md border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500 text-xs sm:text-sm bg-white;
  min-height: 2.5rem; /* 40px on desktop */
}

@media (max-width: 640px) {
  .ts-control {
    min-height: 2.5rem; /* 40px on mobile to match form inputs */
  }
}

.ts-control.focus,
.ts-control:focus-within {
  @apply border-blue-500 ring-1 ring-blue-500 outline-none;
}

.ts-control.multi {
  @apply px-1.5 py-0.5 sm:px-2 sm:py-1;
}

.ts-control.multi .ts-input {
  @apply border-none shadow-none p-0 m-0 bg-transparent;
}

.ts-control.multi .ts-input input {
  @apply border-none shadow-none outline-none bg-transparent text-sm;
}

.ts-dropdown {
  @apply rounded-md shadow-lg ring-1 ring-black ring-opacity-5 bg-white border border-gray-300;
}

.ts-dropdown-content {
  @apply max-h-60 overflow-auto;
}

.ts-dropdown .option {
  @apply cursor-pointer hover:bg-blue-50;
}

.ts-dropdown .option.active {
  @apply bg-blue-100;
}

.ts-dropdown .option.selected {
  @apply bg-blue-600 text-white;
}

.ts-control .item {
  @apply inline-flex items-center px-2 py-0.5 bg-blue-100 text-blue-800 text-xs rounded mr-1 mb-1;
}

.ts-control .item .remove {
  @apply hidden;
}