/* --------------------------------------------------------------------------
   Product picker popup — the listbox that replaced the native <datalist>
   --------------------------------------------------------------------------

   Paired with static/app/js/product_combobox.js. See that file's header for
   why a native datalist could not be kept: its <option> renders as plain text,
   so the pink "Pre-order" pill had nowhere to go on the screen where an
   operator is actually choosing a hamper.

   Staff-only, so it may use the styles.css token vocabulary (unlike
   preorder-pill.css, which loads into four shells that do not share tokens).
   -------------------------------------------------------------------------- */

/* The popup is parented to <body> and fixed-positioned by the JS — see that
   file's header. It is NOT absolutely positioned next to the input, because the
   recipient table clips it three times over: the <td> is overflow:hidden, the
   scroll frame is overflow:auto, and the card is overflow:hidden again. A
   clipping ancestor clips regardless of z-index, so escaping the subtree is the
   only fix. `top`/`left`/`min-width`/`max-height` are all set inline at open
   time and on every scroll and resize. */
.product-combobox {
  position: fixed;
  /* Above the table's sticky header, the shell header, and the order page's
     floating scrollbar; below nothing, because this is a menu the operator
     opened and it must win. */
  z-index: 2000;
  top: 0;
  left: 0;
  max-width: 420px;
  width: max-content;
  overflow-y: auto;
  /* Momentum scrolling inside the list on a trackpad should not chain out to
     the page behind it once the list hits its end. */
  overscroll-behavior: contain;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  box-shadow: 0 10px 28px rgba(13, 59, 102, 0.16);
}

.product-combobox[hidden] {
  display: none;
}

.product-combobox-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  color: var(--text-body);
  cursor: pointer;
  /* The row is a pointer target on a touch screen too — 44px is the repo's
     --hwb-tap floor and the same reasoning applies here. */
  min-height: 34px;
}

/* One highlight class for both hover and keyboard, so arrowing and pointing
   look identical. The JS tracks the active option by id (aria-activedescendant)
   rather than moving focus, which is why this cannot be :focus. */
.product-combobox-option:hover,
.product-combobox-option.is-active {
  background: var(--surface-inset);
}

/* The name, and beneath it the SKU + range on the rows where the name is shared
   by two products. A column so the truncation rules below still apply to each
   line on its own; `min-width: 0` on the flex child is what lets an ellipsis
   happen at all inside a flex row. */
.product-combobox-label {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.product-combobox-name {
  /* A long hamper name truncates rather than wrapping to three lines and
     pushing the price out of alignment down the list. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Only rendered for a name two products share — see option() in the JS. It has
   to be readable enough to choose by and quiet enough that the 3,000 rows
   without it still scan as a plain list of names. */
.product-combobox-meta {
  font-size: 0.6875rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The zero-result row. Not an option — it carries role=presentation and is never
   pushed to the JS's option list — so it is deliberately not hoverable and does
   not take the .is-active highlight. */
.product-combobox-empty {
  padding: 8px;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.product-combobox-price {
  flex: 0 0 auto;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* The pill sits between name and price and must never be the thing that
   shrinks. Size restated defensively: the popup now lives at <body> level so it
   no longer inherits .tgp-excel-table's 10px density override, but pinning it
   here means the menu reads the same wherever a future caller mounts it. */
.product-combobox-option .preorder-pill {
  flex: 0 0 auto;
  padding: 2px 8px;
  font-size: 0.6875rem;
}

@media (prefers-reduced-motion: no-preference) {
  .product-combobox-option {
    transition: background 90ms ease;
  }
}
