/* Searchable Select Styles (Select2-like) */
.select2-container {
  @apply relative w-full;
  position: relative;
}

.select2-selection {
  @apply w-full border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-sm cursor-pointer;
  @apply focus-within:border-indigo-500 focus-within:ring-1 focus-within:ring-indigo-500;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  position: relative;
  display: flex;
  align-items: center;
  min-height: 38px;
  border-radius: 0.375rem;
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

.dark .select2-selection {
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
}

.select2-selection__rendered {
  @apply block truncate flex-1 text-sm;
  line-height: 1.5;
  font-size: 0.875rem;
}

.select2-selection__placeholder {
  @apply text-gray-500 dark:text-gray-400;
}

.select2-selection__arrow {
  @apply pointer-events-none;
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.select2-selection__clear {
  @apply cursor-pointer;
  @apply text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
  z-index: 10;
}

.select2-dropdown {
  @apply absolute mt-1 w-full rounded-md shadow-lg;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 9999;
  background-color: white;
  max-height: 400px;
  overflow: hidden;
  border: 2px solid #d1d5db;
}

.dark .select2-dropdown {
  background-color: rgb(55 65 81); /* gray-700 */
  border-color: rgb(75 85 99); /* gray-600 */
}

.select2-dropdown--hidden {
  @apply hidden;
  display: none !important;
}

.select2-search {
  @apply p-2 border-b border-gray-200 dark:border-gray-600;
  background-color: white;
}

.dark .select2-search {
  background-color: rgb(55 65 81); /* gray-700 */
}

.select2-search__field {
  @apply w-full rounded-md border-2 border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800;
  @apply text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400;
  @apply focus:border-blue-500 focus:ring-2 focus:ring-blue-500 sm:text-sm;
  padding: 0.5rem 0.75rem;
  outline: none;
}

.select2-results {
  @apply max-h-60 overflow-y-auto;
  background-color: white;
}

.dark .select2-results {
  background-color: rgb(55 65 81); /* gray-700 */
}

.select2-results__options {
  @apply py-1;
}

.select2-results__option {
  @apply cursor-pointer;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb;
  transition: all 0.15s ease;
}

.dark .select2-results__option {
  border-bottom-color: rgb(75 85 99);
}

.select2-results__option:last-child {
  border-bottom: none;
}

.select2-results__option:hover {
  background-color: #eff6ff;
  border-left: 3px solid #3b82f6;
  padding-left: calc(1rem - 3px);
}

.dark .select2-results__option:hover {
  background-color: rgb(55 65 81);
  border-left-color: #60a5fa;
}

.select2-results__option--highlighted {
  background-color: #eff6ff;
  border-left: 3px solid #3b82f6;
  padding-left: calc(1rem - 3px);
}

.dark .select2-results__option--highlighted {
  background-color: rgb(55 65 81);
  border-left-color: #60a5fa;
}

/* Grid columns styling for light/dark mode */
.select2-results__option .grid > div {
  @apply text-gray-900 dark:text-gray-100;
}

.select2-results__option .grid > div:nth-child(2),
.select2-results__option .grid > div:nth-child(3) {
  @apply text-gray-600 dark:text-gray-300;
}

.select2-results__message {
  @apply text-gray-500 dark:text-gray-400 text-center py-4;
  @apply cursor-default hover:bg-transparent dark:hover:bg-transparent;
}

/* Container open state */
.select2-container--open .select2-selection {
  @apply border-indigo-500 ring-1 ring-indigo-500;
}

/* Column headers styling */
.select2-results .px-3.py-2.bg-gray-100 {
  @apply sticky top-0;
  background-color: #f9fafb;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: #374151;
  padding: 0.75rem 1rem;
}

.dark .select2-results .px-3.py-2.bg-gray-100 {
  background-color: rgb(31 41 55);
  color: rgb(209 213 219);
}

/* Column headers grid items */
.select2-results .px-3.py-2.bg-gray-100 .grid > div {
  font-weight: 600;
}