/**
 * Tom Select Custom Styling
 * Matches Tailwind CSS design system used throughout the app
 */

/* Import Tom Select base CSS from CDN */
@import url('https://cdn.jsdelivr.net/npm/tom-select@2.3.1/dist/css/tom-select.bootstrap5.min.css');

/* Hide original select element - multiple selectors for safety */
select[data-controller*="searchable-select"],
.ts-wrapper + select,
.ts-wrapper select,
.ts-hidden-accessible {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Override with Tailwind-friendly styles */
.ts-wrapper {
  @apply w-full;
  position: relative;
}

/* Ensure wrapper doesn't add extra space */
.ts-wrapper::after {
  content: none !important;
}

/* Main input/control styling - matches ui_input_classes */
.ts-wrapper .ts-control {
  @apply block w-full px-3 py-2 rounded-md bg-white;
  @apply text-base text-gray-900;
  min-height: 42px !important; /* Match standard input height */
  border: 1px solid #d1d5db !important; /* Explicit border - gray-300 */
  border-radius: 0.375rem !important; /* rounded-md = 6px */
  outline: none;
  box-shadow: none !important; /* Remove any default shadows */
}

.ts-wrapper.single .ts-control {
  @apply flex items-center;
}

/* Input field inside the control */
.ts-wrapper .ts-control input {
  @apply text-gray-900 placeholder-gray-400;
  @apply border-0 shadow-none;
  @apply focus:ring-0 focus:outline-none;
  flex: 1;
  background: transparent !important;
}

/* Selected item in single select */
.ts-wrapper.single .ts-control .item {
  @apply text-gray-900;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 1;
}

/* Hide input when item is selected */
.ts-wrapper.single.has-items .ts-control input {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
}

/* Selected items (for multi-select) */
.ts-wrapper .ts-control .item {
  @apply inline-flex items-center px-2 py-1 mr-1 mb-1;
  @apply text-sm font-medium rounded;
  background-color: color-mix(in srgb, var(--brand-primary, #2563eb) 20%, white) !important;
  color: var(--brand-primary, #2563eb) !important;
}

/* Clear button */
.ts-wrapper .ts-control .clear-button {
  @apply text-gray-400 hover:text-gray-600;
  @apply cursor-pointer;
  @apply ml-2;
  font-size: 20px;
  line-height: 1;
}

/* Dropdown container */
.ts-dropdown {
  @apply border border-gray-300 shadow-lg bg-white;
  @apply mt-1;
  border-radius: 0.375rem !important; /* rounded-md = 6px */
  z-index: 1000 !important; /* Below modal/header (usually 9999+) */
  background-color: white !important; /* Ensure solid background */
  display: none; /* Hidden by default */
}

/* Show dropdown when active/open */
.ts-dropdown.ts-dropdown-open {
  display: block !important;
}

/* Dropdown options */
.ts-dropdown .option {
  @apply px-3 py-2 cursor-pointer;
  @apply text-sm text-gray-900;
  @apply transition-colors duration-150;
  background-color: white !important; /* Ensure each option has solid background */
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: color-mix(in srgb, var(--brand-primary, #2563eb) 10%, white) !important;
  color: var(--brand-primary, #2563eb) !important;
}

.ts-dropdown .option.selected {
  background-color: color-mix(in srgb, var(--brand-primary, #2563eb) 20%, white) !important;
  color: var(--brand-primary, #2563eb) !important;
  @apply font-medium;
}

/* Dropdown header (for search input) */
.ts-dropdown .ts-dropdown-content {
  @apply max-h-64 overflow-y-auto;
  background-color: white !important; /* Ensure content area has solid background */
}

/* No results message */
.ts-dropdown .no-results {
  @apply px-3 py-2 text-sm text-gray-500 italic;
}

/* Create option */
.ts-dropdown .create {
  @apply px-3 py-2 text-sm;
  @apply bg-gray-50 border-t border-gray-200;
  @apply cursor-pointer;
  @apply hover:bg-gray-100;
}

/* Optgroup styling */
.ts-dropdown .optgroup-header {
  @apply px-3 py-1.5 text-xs font-semibold text-gray-700 uppercase tracking-wide;
  @apply bg-gray-100 border-b border-gray-200;
}

.ts-dropdown .optgroup .option {
  @apply pl-6;
}

/* Loading state */
.ts-wrapper.loading::after {
  @apply absolute right-3 top-1/2 transform -translate-y-1/2;
  content: "";
  width: 16px;
  height: 16px;
  border: 2px solid #e5e7eb;
  border-top-color: var(--brand-primary, #2563eb);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Disabled state */
.ts-wrapper.disabled .ts-control {
  @apply bg-gray-100 text-gray-500 cursor-not-allowed opacity-70;
}

/* Focus state - match standard input focus outline with brand colors */
.ts-wrapper.focus .ts-control,
.ts-wrapper .ts-control:focus-within {
  border: 1px solid var(--brand-primary, #2563eb) !important;
  outline: none;
  box-shadow: none !important; /* Ensure no shadow on focus */
}

/* Invalid/error state */
.ts-wrapper.invalid .ts-control {
  @apply border-red-500;
}

/* Input inside dropdown for search */
.ts-dropdown-content .ts-control input {
  @apply px-3 py-2 w-full;
  @apply border-b border-gray-200;
  @apply focus:outline-none;
}

/* Adjust positioning to prevent dropdown overflow */
.ts-dropdown.ts-dropdown-up {
  @apply mb-1 mt-0;
}

/* Remove default Bootstrap styles that might conflict */
.ts-wrapper .ts-control,
.ts-dropdown {
  font-family: inherit;
  line-height: inherit;
}