/* ============================================================ Smart Item combobox — the shared free-entry field that doubles as a search box, used by the Record-Order item rows (where a pick LINKS a sale to stock) and the Add-Items grid (where a pick AUTOFILLS the row). Results reuse the .ep-card / .ep-results look. Loaded globally from _Layout rather than a page stylesheet: two pages on different controllers mount the widget, and the dropdown is portaled into , so its rules cannot live behind a per-page @section Styles. ============================================================ */ .order-item-field, .smart-item-field { position: relative; } .oif-input-wrap { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .oif-input { flex: 1; min-width: 8rem; } /* Shared badge pill */ .oif-badge { display: inline-flex; align-items: center; gap: .2rem; padding: .05rem .4rem; border-radius: 99px; font-size: .68rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .oif-stock { background: var(--color-success-muted); color: var(--color-success); } .oif-sold, .oif-sold-ctx { background: var(--ep-count-bg); color: var(--ep-muted); } .oif-badge-new { background: var(--color-warning-muted); color: var(--color-warning); } .oif-badges { display: inline-flex; align-items: center; gap: .25rem; flex-shrink: 0; margin-right: .15rem; } /* Linked state (State B) — compact single-line pill in place of the input */ .oif-linked-pill { display: flex; align-items: center; gap: .4rem; padding: .3rem .5rem; border: 1px solid var(--ep-chip-border); border-radius: var(--ep-radius-sm); background: var(--ep-bg-selected); font-size: .82rem; } .oif-linked-pill[hidden] { display: none; } .oif-pill-icon { color: var(--ep-accent); flex-shrink: 0; } .oif-pill-title { font-weight: 600; color: var(--ep-text); } .oif-pill-meta { color: var(--ep-muted); font-size: .76rem; } .oif-pill-preview, .oif-unlink { display: inline-flex; align-items: center; border: none; background: none; cursor: pointer; padding: .1rem .2rem; border-radius: .2rem; color: var(--ep-muted); line-height: 1; transition: color .1s; } .oif-unlink { margin-left: auto; } .oif-pill-preview:hover { color: var(--ep-accent); } .oif-unlink:hover { color: var(--color-danger); } /* Near-match caution (State D) */ .oif-caution { margin-top: .35rem; padding: .35rem .55rem; border-radius: var(--ep-radius-sm); background: var(--color-warning-muted); color: var(--color-warning); line-height: 1.5; } .oif-caution[hidden] { display: none; } .oif-caution strong { color: var(--ep-text); } /* "From sold history" micro-note */ .oif-note { margin-top: .25rem; line-height: 1.4; } .oif-note[hidden] { display: none; } /* Dropdown results — reuses .ep-results; these are the field-specific bits */ .oif-card { cursor: pointer; } .oif-card.oif-active { background: var(--ep-bg-hover); } /* Open state: reparented into and absolutely positioned from the input's page coords (set inline by JS), so it escapes the scrolling items table's overflow clip while still scrolling with the page. */ .oif-results.oif-portaled { position: absolute; right: auto; z-index: 1055; } .oif-footer { display: flex; align-items: center; padding: .5rem .65rem; font-size: .82rem; font-weight: 500; color: var(--ep-accent); cursor: pointer; border-top: 1px solid var(--ep-border); } .oif-footer.oif-active, .oif-footer:hover { background: var(--ep-bg-hover); } .oif-footer-typed { font-weight: 600; } /* Admin-only "catalog isn't built yet" nudge (Phase 9e), shown above the record-as-new footer when the catalog has no rows. Quiet and non-interactive except for its Build link — not a selectable option. */ .oif-catalog-empty { padding: .45rem .65rem; color: var(--ep-muted); border-top: 1px solid var(--ep-border); } /* ── Catalog bucket (IGDB reference catalog) ───────────────────────────── */ .oif-catalog { background: var(--ep-count-bg); color: var(--ep-muted); } /* Box art in the icon slot. The is hotlinked from the IGDB CDN and removes itself on error, uncovering the icon underneath — a blocked or missing thumbnail must not leave a hole in the row. */ .oif-thumb-wrap { position: relative; } .oif-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: .2rem; background: var(--ep-count-bg); } /* ── Canonical-title nudge ─────────────────────────────────────────────── */ /* Informational, not a warning: "this may be misspelled" is a softer claim than the amber "you already own one" caution, and the two can never be on screen together. */ .oif-nudge { margin-top: .35rem; padding: .35rem .55rem; border-radius: var(--ep-radius-sm); background: var(--ep-bg-selected); color: var(--ep-muted); line-height: 1.5; } .oif-nudge[hidden] { display: none; } .oif-nudge strong { color: var(--ep-text); } /* ── Catalog game preview panel ────────────────────────────────────────── */ .cg-preview { display: flex; gap: .75rem; align-items: flex-start; } .cg-preview-cover { width: 88px; flex-shrink: 0; border-radius: var(--ep-radius-sm); background: var(--ep-count-bg); } .cg-preview-cover-empty { display: flex; align-items: center; justify-content: center; height: 124px; color: var(--ep-muted); font-size: 1.4rem; } .cg-preview-meta { min-width: 0; } .cg-preview-label { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--ep-muted); margin-bottom: .2rem; } .cg-chips { display: flex; flex-wrap: wrap; gap: .25rem; } .cg-chip { padding: .05rem .4rem; border-radius: 99px; background: var(--ep-count-bg); color: var(--ep-text); font-size: .68rem; font-weight: 600; white-space: nowrap; } .cg-preview-summary { margin: .6rem 0 0; font-size: .78rem; line-height: 1.5; color: var(--ep-muted); } /* ── Platform chooser on an autofill host ──────────────────────────────── */ /* A catalog game with several real platforms cannot autofill the console, so the pick offers one chip per platform instead of silently guessing (or replacing the free-text console field). */ .oif-platforms { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin-top: .3rem; } .oif-platforms[hidden] { display: none; } .oif-platform-label { font-size: .68rem; color: var(--ep-muted); margin-right: .1rem; } .oif-platform-chip { padding: .05rem .4rem; border: 1px solid var(--ep-chip-border); border-radius: 99px; background: var(--ep-bg); color: var(--ep-text); font-size: .68rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .1s, border-color .1s; } .oif-platform-chip:hover { background: var(--ep-bg-hover); } .oif-platform-chip.is-chosen { background: var(--ep-bg-selected); border-color: var(--ep-accent); } /* ── Variant chooser (groupVariants hosts) ─────────────────────────────── */ /* Drops under the input after a collapsed game row is picked; lists the game's console/condition variants as chips so the user says which copy (or asks for a different one). */ .oif-chooser { margin-top: .35rem; padding: .45rem .55rem; border: 1px solid var(--ep-chip-border); border-radius: var(--ep-radius-sm); background: var(--ep-bg); } .oif-chooser[hidden] { display: none; } .oif-chooser-head { font-size: .8rem; color: var(--ep-muted); margin-bottom: .4rem; } .oif-chooser-head strong { color: var(--ep-text); } .oif-chooser-chips { display: flex; flex-wrap: wrap; gap: .35rem; } .oif-variant-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .5rem; border: 1px solid var(--ep-chip-border); border-radius: 99px; background: var(--ep-bg); color: var(--ep-text); font-size: .72rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background .1s, border-color .1s; } .oif-variant-chip:hover { background: var(--ep-bg-hover); border-color: var(--ep-accent); } .oif-variant-new { border-style: dashed; color: var(--ep-muted); } .oif-variant-new:hover { color: var(--ep-text); }