/* HotwireCombobox — theme overrides on top of the gem's own stylesheet.
 *
 * The gem's stylesheet IS loaded: `combobox_style_tag` in layouts/_head.html.erb
 * links it BEFORE the Tailwind bundle that pulls this file in, so rules here win
 * at equal specificity, and CSS-variable overrides on `.hw-combobox` beat the
 * gem's `:root` defaults regardless of source order.
 *
 * WHICH ELEMENT OWNS THE FIELD CHROME — the one thing to understand here.
 * The gem draws its field box on `.hw-combobox__main__wrapper` and leaves the
 * inner `<input>` borderless. But every combobox rendered through Simple Form
 * (`as: :hotwire_combobox` / `as: :searchable_association`) gets the wrapper's
 * `b.use :input, class: "... border border-gray-300 rounded-md shadow-sm px-3
 * py-2 ..."` (config/initializers/simple_form_tailwind.rb) forwarded onto that
 * inner input — and the gem *replaces* its own `hw-combobox__input` class with
 * whatever `class:` we hand it (Component::Markup::Input#input_attrs). So the
 * input already carries the app's full field chrome, and leaving the gem's
 * wrapper border on as well paints TWO boxes (#2910 regression).
 *
 * Hence chrome ownership is PER MODE:
 *   single-select — the INPUT owns it (Simple Form's classes, or the fallback
 *                   rule below for a bare `combobox_tag`); the gem's wrapper is
 *                   flattened to nothing.
 *   multiselect   — the WRAPPER owns it, because the chips live in the wrapper
 *                   alongside a small flex-item input; bordering that input
 *                   renders it as a tiny box floating beside the chips.
 *
 * Chips and their single remover glyph are gem-provided — do NOT re-declare them
 * here, a duplicate `::after` is what caused the DOUBLE ✕ (#2910).
 */

.hw-combobox {
  /* text-sm, to match the app's Simple Form fields. The input inherits this
     (its font-size is `inherit`), as do chips. */
  --hw-font-size: 0.875rem;

  /* Fit the container instead of the gem's fixed 10rem / 30rem. The 30rem
     multiselect default overflowed the w-80 filters popover (#2910). */
  --hw-combobox-width: 100%;
  --hw-combobox-width--multiple: 100%;

  /* Empty-state height parity: the gem sizes the multiselect input on a tall
     2.125rem line so chips have vertical room, which made an EMPTY multiselect
     ~10px taller than the sibling text inputs. Matching the single-select line
     (1.5rem) gives the empty box the same ~38px height; chips still set their own
     (taller) row height once selected. */
  --hw-line-height--multiple: 1.5rem;

  width: 100%;
  /* A fixed-width flex child can prop a <fieldset> past its container via the UA
     `min-inline-size: min-content` default — zero it so the popover contains us. */
  min-inline-size: 0;
}

/* SINGLE-SELECT — flatten the gem's wrapper so the bordered input is the only
   box. Targeted at the wrapper rather than via `--hw-border-width--slim: 0`
   (the old approach) because that variable also draws the listbox border, the
   chip border and the blank-option divider. */
.hw-combobox:not(.hw-combobox--multiple) {
  /* Line the handle up with the input's px-3, as the app did before #2910. */
  --hw-handle-offset-right: 0.75rem;
}

.hw-combobox:not(.hw-combobox--multiple) .hw-combobox__main__wrapper {
  background-color: transparent;
  border: 0;
  padding: 0;
  /* …including the gem's blue focus / red invalid rings, which would otherwise
     halo the flattened wrapper. The input carries the app's focus tint. */
  box-shadow: none;
}

/* Fallback chrome for a single-select rendered WITHOUT Simple Form (a bare
   `combobox_tag` / `f.combobox`), where the gem's `hw-combobox__input` class
   survives. Simple Form's own inputs never match this rule — their class list
   replaced `hw-combobox__input` — so the two can't compound into a double
   border. Mirrors the `:tailwind` wrapper's input classes. */
.hw-combobox:not(.hw-combobox--multiple) .hw-combobox__input {
  @apply w-full appearance-none border border-gray-300 rounded-md shadow-sm
    px-3 py-2 text-sm outline-none focus:border-gondola;
}

/* MULTISELECT — the wrapper is the field (it holds the chips), so give it the
   app's focus tint instead of the gem's blue ring. Border colour, radius and
   padding already match the app (the gem defaults to #D1D5DB / 0.375rem). */
.hw-combobox--multiple .hw-combobox__main__wrapper:focus-within {
  box-shadow: none;
  border-color: var(--color-gondola);
}

/* Dropdown listbox — theme only (gem provides position/border/width). */
.hw-combobox__listbox {
  @apply mt-1 max-h-80 rounded-lg shadow-md z-50;
}

/* Options — theme the hover/selected tints and padding to the app's scale. */
.hw-combobox [role="option"] {
  @apply px-3 py-2 cursor-pointer;
}

.hw-combobox [role="option"][aria-selected="true"] {
  @apply bg-gray-100;
}

.hw-combobox [role="option"]:hover:not([aria-selected="true"]) {
  @apply bg-gray-50;
}

@media (max-width: 640px) {
  .hw-combobox__listbox {
    @apply max-h-64;
  }
}

/* Mobile dialog input — match the field chrome. */
.hw-combobox__dialog__input {
  @apply appearance-none border border-gray-300 rounded-md
    px-3 py-2 text-sm outline-none focus:border-gondola;
}

.hw-combobox__dialog {
  @apply max-w-md;
}

/* Loading / empty / pagination affordances (gem ships no styling for these). */
.hw-combobox__loading {
  @apply flex items-center justify-center p-2 text-gray-500 text-sm;
}

.hw-combobox__loading::after {
  content: "Loading...";
}

.hw-combobox__empty {
  @apply px-3 py-2 text-gray-500 text-sm;
}

.hw_combobox__pagination__wrapper {
  @apply p-2 text-center border-t border-gray-200 text-sm text-gondola;
}