/* ============================================================
   Autocomplete della destinazione.
   Questo foglio era l'unico del progetto con ZERO token: dentro c'erano colori
   Tailwind (#0f172a, #64748b, rgba(15,23,42,…)) che non appartengono a nessuna
   palette di TripsBack, e un'ombra fuori scala. Usava il prefisso .tb-* senza
   essere nel design system: l'unico posto in cui il prefisso mentiva.
   ============================================================ */

.tb-ac-host { position: relative; }

.tb-ac-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: var(--tb-z-dropdown);
    min-width: 280px;
    max-width: 360px;
    max-height: 340px;
    overflow-y: auto;
    padding: 6px;
    background: var(--tb-bg);
    border: 1px solid var(--tb-line);
    border-radius: var(--tb-r-card);
    box-shadow: var(--tb-shadow);
}

.tb-ac-item {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    /* 44px pieni: e' un bersaglio, e lo si preme col pollice in stazione. */
    min-height: var(--tb-touch);
    padding: 9px 10px;
    border: 0;
    border-radius: var(--tb-r-btn);
    background: transparent;
    color: var(--tb-ink);
    text-align: left;
    cursor: pointer;
    transition: background-color var(--tb-dur-fast) var(--tb-ease);
}
.tb-ac-item:hover,
.tb-ac-item.is-active { background: var(--tb-panel); }
.tb-ac-item.is-active { outline: 2px solid var(--tb-blue); outline-offset: -2px; }

.tb-ac-icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    background: var(--tb-panel);
    color: var(--tb-ink-soft);
}
/* Un <svg> senza width intrinseca dentro un flex e' un flex item con
   min-width:auto: collassa a zero e l'icona sparisce. */
.tb-ac-icon svg { width: 16px; height: 16px; flex: none; }
.tb-ac-item.is-active .tb-ac-icon { background: var(--tb-blue-soft); color: var(--tb-blue-deep); }

.tb-ac-text  { min-width: 0; display: grid; }
.tb-ac-label { font: var(--tb-t-meta); font-weight: 600; color: var(--tb-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tb-ac-sub   { font: var(--tb-t-caption); color: var(--tb-ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- I tre stati che non c'erano ---------------------------------------
   Prima: mentre cercava non lo diceva; se non trovava niente CHIUDEVA la tendina,
   quindi chi sbagliava a scrivere vedeva la stessa identica cosa di chi non aveva
   ancora scritto; e gli errori erano silenziosi per scelta esplicita nel codice
   ("abort/errore: silenzioso"). */
.tb-ac-state {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 12px;
    font: var(--tb-t-meta);
    color: var(--tb-ink-soft);
}
.tb-ac-state.is-error { color: var(--tb-danger-ink); }

/* L'anello gira solo mentre stiamo davvero aspettando. */
.tb-ac-state.is-loading::before {
    content: '';
    flex: none;
    width: 15px; height: 15px;
    border: 2px solid var(--tb-line);
    border-top-color: var(--tb-blue);
    border-radius: 50%;
    animation: tb-spin 620ms linear infinite;
}
/* La regola globale in fondo a executive.css spegne ogni animation con !important:
   senza questo, chi ha il movimento ridotto vedrebbe un anello fermo con un lato
   blu, che sembra un errore di rendering. Fermo e monocromo e' solo un pallino. */
@media (prefers-reduced-motion: reduce) {
    .tb-ac-state.is-loading::before { border-top-color: var(--tb-line); }
}

.tb-ac-retry {
    margin-left: auto;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--tb-blue-deep);
    font: var(--tb-t-caption);
    font-weight: 600;
    cursor: pointer;
}
.tb-ac-retry:hover { background: var(--tb-blue-soft); }

/* Tendina a tutta larghezza sul telefono: 280px di minimo dentro un segmento
   stretto escono dal viewport, e con body overflow-x:hidden non si vedrebbero
   nemmeno — si perderebbero in silenzio. */
@media (max-width: 560px) {
    .tb-ac-dropdown { min-width: 0; max-width: none; width: 100%; }
}