/* Hotwire Combobox Custom Styling - Only override colors, preserve positioning */

.hw-combobox {
  position: relative !important;
}

.hw-combobox__listbox {
  background: white;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  color: #111827;
  /* Explicitly preserve essential positioning from hotwire_combobox defaults */
  position: absolute !important;
  top: calc(100% + 0.2rem) !important;
  left: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
  /* Add Flowbite-inspired container styling */
  border-radius: 0.5rem !important; /* rounded-lg */
  padding: 0.25rem !important; /* p-1 for inner padding */
}

.hw-combobox__option {
  color: inherit;
  /* Apply Flowbite-inspired styling for better UX */
  border-radius: 0.375rem !important; /* rounded-md */
  padding: 0.5rem 1rem !important; /* px-4 py-2 */
  margin: 0.125rem !important; /* my-0.5 for spacing between items */
  transition: all 0.15s ease-in-out !important;
}

/* Dialog styles for mobile - only override colors */
.hw-combobox__dialog {
  background: white;
}

.hw-combobox__dialog__input {
  background: white;
  color: #111827;
}

/* Dark mode support using Tailwind's dark: classes */
.dark .hw-combobox__listbox {
  background: #374151 !important;
  border-color: #6b7280 !important;
  color: #f9fafb !important;
  /* Ensure positioning is preserved in dark mode */
  position: absolute !important;
  top: calc(100% + 0.2rem) !important;
  left: 0 !important;
  z-index: 10 !important;
  width: 100% !important;
}

.dark .hw-combobox__option {
  color: #f9fafb !important;
}

.dark .hw-combobox__option:hover,
.dark .hw-combobox__option--selected,
.dark .hw-combobox__option--navigated {
  background-color: #374151 !important;
  color: #ffffff !important;
}

.dark .hw-combobox__dialog {
  background: #374151 !important;
  border-color: #6b7280 !important;
}

.dark .hw-combobox__dialog__input {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #f9fafb !important;
}

.dark .hw-combobox__dialog__input::placeholder {
  color: #9ca3af !important;
}

/* Also support prefers-color-scheme for fallback */
@media (prefers-color-scheme: dark) {
  .hw-combobox__listbox {
    background: #374151 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
    /* Ensure positioning is preserved in media query */
    position: absolute !important;
    top: calc(100% + 0.2rem) !important;
    left: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
  }
  
  .hw-combobox__option {
    color: #f9fafb !important;
  }
  
  .hw-combobox__option:hover,
  .hw-combobox__option--selected,
  .hw-combobox__option--navigated {
    background-color: #374151 !important;
    color: #ffffff !important;
  }
  
  .hw-combobox__dialog {
    background: #374151 !important;
    border-color: #6b7280 !important;
  }
  
  .hw-combobox__dialog__input {
    background: #4b5563 !important;
    border-color: #6b7280 !important;
    color: #f9fafb !important;
  }

  .hw-combobox__dialog__input::placeholder {
    color: #9ca3af !important;
  }

  /* Target the listbox more specifically */
  ul.hw-combobox__listbox {
    background: #374151 !important;
    border: 1px solid #6b7280 !important;
    /* Ensure positioning is preserved for specific selector */
    position: absolute !important;
    top: calc(100% + 0.2rem) !important;
    left: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
  }

  li.hw-combobox__option {
    color: #f9fafb !important;
  }

  li.hw-combobox__option:hover,
  li.hw-combobox__option--selected,
  li.hw-combobox__option--navigated {
    background-color: #374151 !important;
    color: #ffffff !important;
  }
}