/* Base TomSelect styling */
.ts-wrapper {
  @apply w-full;
}

.ts-wrapper.single .ts-control {
  @apply px-4 py-2.5 border border-gray-300 rounded-lg bg-white flex items-center gap-2 cursor-pointer;
  min-height: 44px;
}

.ts-wrapper.single.input-active .ts-control {
  @apply border-se-green ring-2 ring-se-green ring-opacity-30;
}

.ts-control {
  @apply shadow-none;
}

/* Dropdown styling */
.ts-dropdown {
  @apply mt-1 border border-gray-200 rounded-lg shadow-lg bg-white overflow-hidden z-50;
}

.ts-dropdown .option {
  @apply px-4 py-2.5 cursor-pointer hover:bg-gray-50 text-gray-700;
}

.ts-dropdown .active {
  @apply bg-gray-50;
}

.ts-dropdown .option.active {
  @apply bg-se-light text-se-dark;
}

/* Selected item (chip) styling */
.ts-wrapper.single .ts-control .item {
  @apply inline-flex items-center bg-se-light text-se-dark rounded-md px-3 py-1 text-sm font-medium;
  max-width: calc(100% - 40px);
}

.ts-wrapper.single .ts-control .item::before {
  content: '';
}

/* Input inside TomSelect */
.ts-wrapper.single .ts-control input {
  @apply flex-1 border-none outline-none bg-transparent text-gray-700 placeholder-gray-400;
  min-width: 60px;
}

.ts-wrapper.single .ts-control input::placeholder {
  @apply text-gray-400;
}

/* Clear button styling */
.ts-wrapper .clear-button {
  @apply ml-auto text-gray-400 hover:text-red-500 transition-colors p-1;
}

.ts-wrapper.single .ts-control .clear-button {
  @apply absolute right-3 top-1/2 transform -translate-y-1/2;
}

/* Focus state */
.ts-wrapper.focus .ts-control {
  @apply border-se-green shadow-none;
}

/* Remove default TomSelect decorations */
.ts-wrapper.single .ts-control,
.ts-wrapper.single.input-active .ts-control {
  background-image: none;
  box-shadow: none;
}

/* Caret/arrow */
.ts-wrapper.single .ts-control::after {
  content: '';
  display: block;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #9CA3AF;
}

.ts-wrapper.single.dropdown-active .ts-control::after {
  transform: translateY(-50%) rotate(180deg);
}

/* When has value, hide the caret and show clear button */
.ts-wrapper.single.has-items .ts-control::after {
  display: none;
}