/* Vanilla Autocomplete — the shared suggestion dropdown.
 *
 * vNext baseline for every consumer that does not scope its own override
 * (competitions.css:1229+ and stats-v2.css:254+ do, and keep winning on
 * specificity). Items are compact CARDS separated by space rather than table
 * rows separated by hairlines: the same treatment the rest of the app gives a
 * list of choosable things.
 *
 * Tokens only — this file used to hardcode #fff / #6c757d / rgba() and a
 * Bootstrap variable fallback, so it ignored the theme entirely and stayed
 * white-on-white in dark mode. */

.vanilla-ac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1055;
  max-height: 300px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 6px;
  /* Suggestions are not bound to the width of the field that produced them:
     a narrow input squeezes a padded card down to a sliver and wraps every
     label. A floor, not a width — a wide field still gets a full-width menu. */
  min-width: min(260px, 90vw);
  background: var(--qz-surface);
  border: 1px solid var(--qz-line);
  border-radius: var(--qz-r-card, 16px);
  box-shadow: 0 14px 34px -14px color-mix(in srgb, var(--qz-ink) 34%, transparent);
}

/* The constraint, stated before the choices rather than after a failed submit:
 * every consumer of this control requires an exact pick — typing a name that
 * merely looks right selects nothing. Sticky, so it stays true while a long
 * list scrolls under it. */
.vanilla-ac-hint {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px -6px 6px;
  padding: 10px 14px;
  background: var(--qz-warning-bg, var(--qz-accent-soft));
  color: var(--qz-warning-ink, var(--qz-accent-ink));
  border-bottom: 1px solid var(--qz-line);
  font-size: 0.76rem;
  font-weight: var(--qz-fw-strong, 700);
  line-height: 1.3;
}

.vanilla-ac-item {
  padding: 12px 14px;
  border-radius: var(--qz-r-control, 12px);
  background: var(--qz-surface);
  color: var(--qz-text);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.vanilla-ac-item + .vanilla-ac-item {
  margin-top: 4px;
}

.vanilla-ac-item:hover,
.vanilla-ac-item:focus,
.vanilla-ac-item.selected {
  background: var(--qz-accent-soft);
  color: var(--qz-accent-ink);
}

.vanilla-ac-item.vanilla-ac-no-result {
  color: var(--qz-muted);
  cursor: default;
  text-align: center;
  font-style: italic;
}

.vanilla-ac-item.vanilla-ac-no-result:hover {
  background: transparent;
  color: var(--qz-muted);
}

/* Fade-in animation replacing jQuery UI "puff" effect on selected user cards */
.vanilla-ac-fade-in {
  animation: vanillaAcFadeIn .4s ease forwards;
}

@keyframes vanillaAcFadeIn {
  from {
    opacity: 0;
    transform: scale(.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}