/* Searchable Select Styles (Select2-like)
 *
 * Theme convention for this app: dark is the default; `html.light`
 * flips to light mode. Any `.dark .foo` selector will NEVER match
 * because the html element never carries `.dark`. Base styles here are
 * written for dark mode and `html.light` rules override for light.
 */

.select2-container {
  @apply relative w-full;
  position: relative;
}

.select2-selection {
  @apply w-full border border-gray-600 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.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
  color: white;
}

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

.select2-selection__placeholder {
  color: rgb(156 163 175); /* gray-400 */
}

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

.select2-selection__clear {
  @apply cursor-pointer;
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  font-size: 1.25rem;
  line-height: 1;
  z-index: 10;
  color: rgb(156 163 175);
}
.select2-selection__clear:hover {
  color: rgb(209 213 219);
}

.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: rgb(55 65 81); /* gray-700 */
  border: 2px solid rgb(75 85 99); /* gray-600 */
  max-height: 400px;
  overflow: hidden;
}

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

.select2-search {
  padding: 0.5rem;
  border-bottom: 1px solid rgb(75 85 99);
  background-color: rgb(55 65 81);
}

.select2-search__field {
  @apply w-full rounded-md border-2 border-gray-600 bg-gray-800 text-white 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: rgb(55 65 81);
}

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

.select2-results__option {
  @apply cursor-pointer;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid rgb(75 85 99);
  transition: all 0.15s ease;
  color: rgb(229 231 235); /* gray-200 */
}

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

.select2-results__option:hover,
.select2-results__option--highlighted {
  background-color: rgb(31 41 55); /* gray-800 */
  border-left: 3px solid #60a5fa;
  padding-left: calc(1rem - 3px);
}

.select2-results__option .grid > div {
  color: rgb(243 244 246); /* gray-100 */
}

.select2-results__option .grid > div:nth-child(2),
.select2-results__option .grid > div:nth-child(3) {
  color: rgb(209 213 219); /* gray-300 */
}

.select2-results__message {
  color: rgb(156 163 175);
  text-align: center;
  padding: 1rem 0;
  cursor: default;
}

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

/* Column headers — dark default */
.select2-results .px-3.py-2.bg-gray-100 {
  position: sticky;
  top: 0;
  background-color: rgb(31 41 55); /* gray-800 */
  color: rgb(209 213 219);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  padding: 0.75rem 1rem;
}

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

/* ---------------------------------------------------------------
 * Light mode overrides — triggered by html.light (see theme_controller.js)
 * --------------------------------------------------------------- */
html.light .select2-selection {
  background-color: white;
  border-color: rgb(209 213 219); /* gray-300 */
  color: rgb(17 24 39); /* gray-900 */
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

html.light .select2-selection__placeholder,
html.light .select2-selection__arrow,
html.light .select2-selection__clear {
  color: rgb(107 114 128); /* gray-500 */
}
html.light .select2-selection__clear:hover {
  color: rgb(75 85 99);
}

html.light .select2-dropdown {
  background-color: white;
  border-color: rgb(209 213 219);
}

html.light .select2-search {
  background-color: white;
  border-bottom-color: rgb(229 231 235);
}

html.light .select2-search__field {
  background-color: white;
  border-color: rgb(209 213 219);
  color: rgb(17 24 39);
}
html.light .select2-search__field::placeholder {
  color: rgb(107 114 128);
}

html.light .select2-results {
  background-color: white;
}

html.light .select2-results__option {
  border-bottom-color: rgb(229 231 235);
  color: rgb(17 24 39);
}

html.light .select2-results__option:hover,
html.light .select2-results__option--highlighted {
  background-color: #eff6ff;
  border-left-color: #3b82f6;
}

html.light .select2-results__option .grid > div {
  color: rgb(17 24 39);
}

html.light .select2-results__option .grid > div:nth-child(2),
html.light .select2-results__option .grid > div:nth-child(3) {
  color: rgb(75 85 99);
}

html.light .select2-results__message {
  color: rgb(107 114 128);
}

html.light .select2-results .px-3.py-2.bg-gray-100 {
  background-color: rgb(249 250 251); /* gray-50 */
  color: rgb(55 65 81); /* gray-700 */
}