/* Hotwire Combobox Theme Override - Uses Tailwind theme colors */

/* Override CSS variables at root level */
@layer base {
  :root {
    /* Override default colors with theme variables */
    --hw-active-bg-color: var(--color-surface);
    --hw-border-color: var(--color-muted);
    --hw-component-bg-color: var(--color-background);
    --hw-group-color: var(--color-muted);
    --hw-group-bg-color: var(--color-background);
    --hw-invalid-color: var(--color-error);
    --hw-dialog-label-color: var(--color-foreground);
    --hw-focus-color: var(--color-primary);
    --hw-option-bg-color: var(--color-background);
  }

  /* Main wrapper - ensure no white backgrounds */
  .hw-combobox {
    background-color: var(--color-background) !important;
  }

  /* Main wrapper that contains everything */
  .hw-combobox__main__wrapper {
    background-color: var(--color-background) !important;
  }

  /* Main wrapper input focus state */
  .hw-combobox__main__wrapper input:focus {
    @apply ring-primary border-primary;
  }

  /* Style the listbox dropdown */
  .hw-combobox__listbox {
    background-color: var(--color-background) !important;
    @apply border border-muted rounded-lg shadow-lg;
  }

  /* Style options */
  .hw-combobox__option {
    @apply text-body;
    background-color: var(--color-background) !important;
  }

  .hw-combobox__option[aria-selected="true"] {
    @apply bg-surface text-foreground;
  }

  .hw-combobox__option:hover {
    @apply bg-surface;
  }

  /* Style the label */
  .hw-combobox__label {
    @apply block text-sm font-medium text-foreground mb-1;
  }

  /* The hidden input wrapper */
  .hw-combobox__hidden__input {
    background-color: var(--color-background) !important;
  }

  /* Dialog (mobile) styles */
  .hw-combobox__dialog {
    background-color: var(--color-background) !important;
  }

  .hw-combobox__dialog__wrapper {
    background-color: var(--color-background) !important;
  }

  .hw-combobox__dialog__input {
    background-color: var(--color-background) !important;
    @apply text-body border-muted;
  }

  .hw-combobox__dialog__label {
    @apply text-foreground;
  }

  .hw-combobox__dialog__listbox {
    background-color: var(--color-background) !important;
  }
}