/* filter-typeahead.css
 * Shared typeahead dropdown styling. Loaded globally so the smart "Search by" filter box
 * (filter-typeahead.js) works on every list page — Inventory, Orders, Lots — not just the
 * Inventory pages that load inventory.css. The base .tt-dropdown/.tt-card rules also back the
 * Add-form title typeahead (title-typeahead.js); Add-form-only bits (.tt-notice, .tt-pricing)
 * stay in inventory.css.
 */

/* ── Base dropdown + card (shared by title- and filter-typeahead) ─────────── */

/* Dropdown sits inside a position:relative wrapper (.form-floating on the Add form, .ft-wrap here). */
.tt-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1050;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 .375rem .375rem;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    max-height: 280px;
    overflow-y: auto;
}

.tt-card {
    padding: .55rem .75rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
    outline: none;
}
.tt-card:last-child { border-bottom: none; }
.tt-card:hover,
.tt-card--focus { background: var(--color-hover); }

.tt-card-label {
    font-size: .875rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tt-card-sub {
    font-size: .75rem;
    color: var(--color-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Filter-bar typeahead (filter-typeahead.js) ──────────────────────────── */

/* Relative wrapper anchoring the dropdown to a filter-bar search input. Fixed to the same 200px the
   .filter-bar inputs use, so the input fills it and the absolute dropdown has a stable anchor width. */
.ft-wrap { position: relative; display: inline-block; width: 200px; }
.ft-wrap > .form-control { width: 100%; max-width: 100%; }

/* The input is narrow (200px); give the suggestion list room to stay readable. */
.ft-wrap .tt-dropdown { min-width: 260px; }

/* Card gains a right-aligned preview eye — label/sub truncate in the flexible body. */
.tt-card--filter { display: flex; align-items: center; gap: .5rem; }
.tt-card--filter .tt-card-body { flex: 1 1 auto; min-width: 0; }

.tt-card-eye {
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--color-muted);
    padding: .15rem .3rem;
    border-radius: .25rem;
    cursor: pointer;
    line-height: 1;
}
.tt-card-eye:hover { color: var(--color-text); background: var(--color-hover); }

/* Section header shown in a multi-type dropdown (e.g. Orders' "Items" / "Orders" groups). */
.tt-section-header {
    padding: .35rem .75rem;
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--color-muted);
    background: var(--color-hover);
    border-bottom: 1px solid var(--color-border);
}

/* Always-present free-text escape hatch pinned under the suggestions. */
.tt-freetext {
    padding: .5rem .75rem;
    font-size: .8rem;
    color: var(--color-muted);
    cursor: pointer;
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}
.tt-freetext:hover { background: var(--color-hover); color: var(--color-text); }