/* ══════════════════════════════════════════════════ Item ID Lookup — Frontend v4 Dropdown is body-appended + position:fixed so it CANNOT be clipped by any theme container. ══════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap'); /* ── Variables scoped to our wrap ── */ .iil-wrap { --bg: #0d1117; --surf: #161b22; --surf2: #1c2230; --border: #30363d; --accent: #3ecf8e; --orange: #f97316; --text: #e6edf3; --muted: #6e7681; --err: #f85149; --ok: #3ecf8e; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'JetBrains Mono', monospace; --r: 8px; } .iil-wrap { font-family: var(--sans); background: var(--bg); border: 1px solid var(--border); border-radius: 14px; padding: 28px 28px 36px; max-width: 980px; margin: 24px auto; position: relative; /* CRITICAL: never set overflow:hidden here — portal drop is outside anyway */ box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.55); } /* decorative corner marks */ .iil-wrap::before, .iil-wrap::after { content: ''; position: absolute; width: 18px; height: 18px; border-color: var(--accent); border-style: solid; opacity: .4; } .iil-wrap::before { top: 10px; left: 10px; border-width: 2px 0 0 2px; border-radius: 3px 0 0 0; } .iil-wrap::after { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-radius: 0 0 3px 0; } /* ── Search Row ── */ .iil-search-row { display: flex; gap: 10px; } .iil-input-shell { flex: 1; display: flex; align-items: center; gap: 10px; padding: 0 14px; background: var(--surf); border: 2px solid var(--border); border-radius: var(--r); transition: border-color .2s, box-shadow .2s; } .iil-input-shell:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(62,207,142,.11); } .iil-scan-svg { width: 20px; height: 20px; color: var(--muted); flex-shrink: 0; } #iil-input { flex: 1; background: transparent; border: none; outline: none; color: var(--text); font-family: var(--mono); font-size: 15px; padding: 14px 0; letter-spacing: .02em; } #iil-input::placeholder { color: var(--muted); font-size: 13px; font-family: var(--sans); } #iil-clear-btn { display: none; background: none; border: none; color: var(--muted); cursor: pointer; font-size: 15px; padding: 3px 6px; border-radius: 4px; line-height: 1; transition: color .15s, background .15s; } #iil-clear-btn:hover { color: var(--text); background: rgba(255,255,255,.07); } #iil-go-btn { flex-shrink: 0; background: var(--accent); color: #0a1a10; border: none; border-radius: var(--r); padding: 0 26px; font-family: var(--sans); font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: .02em; transition: background .15s, transform .1s; min-height: 52px; } #iil-go-btn:hover { background: #2fb97a; } #iil-go-btn:active { transform: scale(.97); } /* ── Status line ── */ .iil-status { margin-top: 10px; font-family: var(--mono); font-size: 12px; min-height: 16px; letter-spacing: .02em; color: var(--muted); transition: color .15s; } .iil-s-ok { color: var(--ok) !important; } .iil-s-err { color: var(--err) !important; } .iil-s-wait { color: var(--muted); } .iil-s-muted { color: var(--muted); } /* ════════════════════════════════════════════════ DROPDOWN — PORTAL STYLES Lives in as #iil-dropdown Position is controlled 100% by JavaScript (getBoundingClientRect + fixed positioning) z-index is max possible value ════════════════════════════════════════════════ */ #iil-dropdown { position: absolute; /* JS overrides to fixed coords */ display: none; z-index: 2147483647; /* maximum possible — above everything */ background: #1a2235; border: 1px solid #2d3f5c; border-top: none; border-radius: 0 0 10px 10px; box-shadow: 0 20px 48px rgba(0,0,0,.75), 0 1px 0 rgba(255,255,255,.05) inset; overflow: hidden; max-height: 380px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: #2d3f5c transparent; } #iil-dropdown.is-open { display: block; animation: iil-drop-appear .13s ease; } @keyframes iil-drop-appear { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } /* ── Suggestion item ── */ .iil-di { padding: 11px 16px 9px; cursor: pointer; border-bottom: 1px solid rgba(255,255,255,.05); transition: background .1s; outline: none; } .iil-di:last-child { border-bottom: none; } .iil-di:hover, .iil-di.iil-di--on { background: rgba(62,207,142,.08); } .iil-di.iil-di--on { box-shadow: inset 3px 0 0 #3ecf8e; } .iil-di-name { font-family: 'DM Sans', sans-serif; font-size: 14px; font-weight: 600; color: #e6edf3; margin-bottom: 5px; line-height: 1.35; } /* Highlighted match text */ .iil-di-name mark { background: rgba(62,207,142,.25); color: #3ecf8e; border-radius: 2px; padding: 0 2px; font-style: normal; } .iil-di-badges { display: flex; flex-wrap: wrap; gap: 5px; } .iil-badge { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 3px 8px; border-radius: 20px; background: rgba(255,255,255,.06); color: #6e7681; letter-spacing: .04em; line-height: 1.2; } .iil-badge b { color: #8b949e; font-weight: 600; margin-right: 3px; } .iil-badge--new { background: rgba(62,207,142,.12); color: #3ecf8e; } .iil-badge--new b { color: #3ecf8e; } /* ── Result Card ── */ .iil-result { margin-top: 24px; } .iil-result-grid { display: grid; grid-template-columns: 190px 1fr 190px; gap: 20px; background: var(--surf); border: 1px solid var(--border); border-radius: 12px; padding: 26px 22px; animation: iil-result-in .2s ease; } @keyframes iil-result-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* QR columns */ .iil-qr-col { display: flex; flex-direction: column; align-items: center; gap: 12px; } .iil-qr-title { font-family: var(--mono); font-size: 10px; letter-spacing: .13em; text-transform: uppercase; text-align: center; margin: 0; } .iil-qr-left .iil-qr-title { color: var(--accent); } .iil-qr-right .iil-qr-title { color: var(--orange); } .iil-qr-box { width: 148px; height: 148px; background: #fff; border-radius: 8px; padding: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .iil-qr-box canvas, .iil-qr-box img { max-width: 100%; display: block; } .iil-qr-val { font-family: var(--mono); font-size: 11px; color: var(--text); text-align: center; word-break: break-all; line-height: 1.5; margin: 0; } /* Frontend product image */ .iil-prod-image-wrap { width: 190px; height: 190px; margin: 0 auto 18px; background: #fff; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; align-items: center; justify-content: center; box-shadow: 0 12px 28px rgba(0,0,0,.28); } .iil-prod-image-wrap[hidden] { display: none !important; } .iil-prod-image { width: 100%; height: 100%; object-fit: contain; display: block; } /* Detail column */ .iil-detail-col { display: flex; flex-direction: column; justify-content: center; } .iil-prod-name { font-family: var(--sans); font-size: 19px; font-weight: 700; color: var(--text); line-height: 1.3; margin: 0 0 18px; padding-bottom: 16px; border-bottom: 1px solid var(--border); text-align: center; } .iil-dl { display: grid; grid-template-columns: auto 1fr; margin: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .iil-dl dt, .iil-dl dd { margin: 0; padding: 10px 13px; background: var(--surf2); border-bottom: 1px solid var(--border); } .iil-dl dt:nth-last-child(2), .iil-dl dd:last-child { border-bottom: none; } .iil-dl dt { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-right: 1px solid var(--border); white-space: nowrap; display: flex; align-items: center; } .iil-dl dd { font-family: var(--mono); font-size: 14px; font-weight: 600; color: var(--text); word-break: break-all; display: flex; align-items: center; } /* ── Responsive ── */ @media (max-width: 680px) { .iil-result-grid { grid-template-columns: 1fr; } .iil-prod-image-wrap { width: 170px; height: 170px; } .iil-qr-right { order: 3; } .iil-detail-col { order: 2; } .iil-qr-left { order: 1; } .iil-qr-col { flex-direction: row; justify-content: center; } } /* Advanced camera barcode / QR scanner */ .iil-camera-btn { border: 0; border-radius: 12px; padding: 12px 16px; font-weight: 700; cursor: pointer; background: #111827; color: #fff; white-space: nowrap; } .iil-camera-btn:hover { filter: brightness(.95); } .iil-scan-modal[hidden] { display: none !important; } .iil-scan-modal { position: fixed; inset: 0; z-index: 2147483645; background: rgba(15, 23, 42, .72); display: flex; align-items: center; justify-content: center; padding: 18px; } .iil-scan-box { width: min(520px, 96vw); background: #fff; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.28); } .iil-scan-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid #e5e7eb; } #iil-scan-close { border: 0; background: #f3f4f6; border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 18px; } .iil-reader { width: 100%; min-height: 320px; background: #0f172a; } .iil-reader video { object-fit: cover !important; } .iil-scan-help { margin: 0; padding: 12px 16px 16px; color: #475569; font-size: 14px; } @media (max-width: 640px) { .iil-search-row { gap: 8px; } .iil-camera-btn { width: 100%; } .iil-scan-box { width: 100%; } .iil-reader { min-height: 280px; } } /* Warehouse mode: product thumbnail in search dropdown */ .iil-di { display: flex; align-items: center; gap: 12px; } .iil-di-img { width: 46px; height: 46px; flex: 0 0 46px; object-fit: contain; background: #fff; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; overflow: hidden; } .iil-di-img--empty { display: inline-flex; align-items: center; justify-content: center; font-size: 9px; line-height: 1.1; color: #8b949e; background: rgba(255,255,255,.04); text-align: center; } .iil-di-main { min-width: 0; flex: 1; } .iil-badge--loc { background: rgba(251,191,36,.16); color: #fbbf24; } .iil-badge--loc b { color: #fbbf24; } /* Warehouse mode: highlight location and box/pallet details */ #iil-d-location { background: rgba(251,191,36,.15); color: #fbbf24; font-size: 18px; letter-spacing: .04em; } #iil-d-boxes-line, #iil-d-boxes-pallet { background: rgba(62,207,142,.10); color: #3ecf8e; font-size: 16px; } /* ── Warehouse Bulk Search ── */ .iil-bulk-panel { margin-top: 14px; } .iil-bulk-toggle, .iil-bulk-actions button { border: 1px solid var(--border); background: var(--surf2); color: var(--text); border-radius: 10px; padding: 10px 14px; font-weight: 700; cursor: pointer; } .iil-bulk-toggle:hover, .iil-bulk-actions button:hover { border-color: var(--accent); } .iil-bulk-box { margin-top: 12px; padding: 14px; border: 1px solid var(--border); border-radius: 12px; background: rgba(255,255,255,.03); } .iil-bulk-box label { display: block; color: var(--text); font-weight: 700; margin-bottom: 8px; } #iil-bulk-input { width: 100%; box-sizing: border-box; resize: vertical; min-height: 110px; border-radius: 10px; border: 1px solid var(--border); background: #0b1018; color: var(--text); padding: 12px; font-family: var(--mono); } .iil-bulk-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; } .iil-selected-count { font-family: var(--mono); color: var(--accent); font-weight: 700; } .iil-bulk-results { margin-top: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surf); padding: 14px; } .iil-bulk-summary { color: var(--text); margin-bottom: 10px; font-family: var(--mono); } .iil-bulk-toolbar { padding: 8px 10px; background: rgba(62,207,142,.08); border: 1px solid rgba(62,207,142,.25); border-radius: 10px; color: var(--text); margin-bottom: 10px; font-weight: 700; } .iil-bulk-list { display: grid; gap: 10px; max-height: 560px; overflow-y: auto; padding-right: 4px; } .iil-bulk-card { display: grid; grid-template-columns: 36px 1fr; align-items: stretch; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.025); } .iil-bulk-check { display: grid; place-items: center; border-right: 1px solid var(--border); background: rgba(255,255,255,.03); } .iil-bulk-check input, #iil-select-all-results { transform: scale(1.25); } .iil-bulk-open { display: grid; grid-template-columns: 70px 1fr; gap: 12px; align-items: center; width: 100%; border: 0; background: transparent; color: inherit; text-align: left; padding: 10px; cursor: pointer; } .iil-bulk-open:hover { background: rgba(62,207,142,.07); } .iil-bulk-img { width: 62px; height: 62px; border: 1px solid var(--border); border-radius: 8px; display: grid; place-items: center; overflow: hidden; color: var(--muted); font-size: 11px; text-align: center; background: #fff; } .iil-bulk-img img { width: 100%; height: 100%; object-fit: contain; } .iil-bulk-info strong { color: var(--text); font-size: 15px; line-height: 1.35; } .iil-bulk-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; } .iil-bulk-meta span { font-family: var(--mono); font-size: 11px; border-radius: 999px; padding: 4px 8px; background: rgba(255,255,255,.07); color: var(--muted); } .iil-bulk-meta .iil-bulk-loc { background: rgba(249,115,22,.18); color: #ffb280; border: 1px solid rgba(249,115,22,.35); font-weight: 700; } .iil-missing { margin-top: 12px; color: var(--text); border-top: 1px solid var(--border); padding-top: 10px; } .iil-missing summary { cursor: pointer; font-weight: 700; color: var(--err); } .iil-missing div { margin-top: 8px; font-family: var(--mono); color: var(--muted); } @media (max-width: 640px) { .iil-bulk-open { grid-template-columns: 56px 1fr; gap: 9px; } .iil-bulk-img { width: 52px; height: 52px; } .iil-bulk-card { grid-template-columns: 32px 1fr; } } /* v2.0.8 — matched word highlight + mobile copy buttons */ .iil-match, #iil-dropdown mark, .iil-bulk-results mark { background: #fde68a; color: #111827; border-radius: 4px; padding: 0 3px; box-decoration-break: clone; -webkit-box-decoration-break: clone; } .iil-copy-value { flex: 1 1 auto; min-width: 0; } .iil-copy-btn { flex: 0 0 auto; margin-left: 10px; min-width: 64px; min-height: 38px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surf2); color: var(--text); font-size: 13px; font-weight: 800; line-height: 1; cursor: pointer; touch-action: manipulation; } .iil-copy-btn:hover { border-color: var(--accent); } .iil-copy-btn.is-copied { background: rgba(62,207,142,.16); border-color: var(--accent); color: var(--accent); } @media (max-width: 640px) { .iil-dl dd { align-items: stretch; gap: 8px; } .iil-copy-btn { min-width: 78px; min-height: 44px; padding: 10px 12px; font-size: 14px; } } /* v2.0.9 — selected products sticky panel */ #iil-dropdown .iil-add-select-btn, .iil-bulk-add { flex: 0 0 auto; min-width: 62px; min-height: 38px; border: 1px solid rgba(62,207,142,.45); border-radius: 10px; background: rgba(62,207,142,.12); color: var(--accent, #3ecf8e); font-weight: 900; cursor: pointer; touch-action: manipulation; } #iil-dropdown .iil-add-select-btn:hover, .iil-bulk-add:hover, #iil-dropdown .iil-add-select-btn.is-added, .iil-bulk-add.is-added { background: rgba(62,207,142,.24); border-color: var(--accent, #3ecf8e); } .iil-bulk-card { grid-template-columns: 36px 1fr 74px; } .iil-bulk-add { align-self: center; margin: 8px; } .iil-selected-panel { position: fixed; top: 92px; right: 18px; width: min(360px, calc(100vw - 36px)); max-height: calc(100vh - 120px); z-index: 2147483600; display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--border, #30363d); border-radius: 16px; background: #161b22; color: #e6edf3; box-shadow: 0 20px 60px rgba(0,0,0,.45); font-family: var(--sans, system-ui, sans-serif); } .iil-selected-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .iil-selected-head strong { display: block; font-size: 16px; } #iil-selected-panel-count { display: block; margin-top: 2px; color: #3ecf8e; font-family: var(--mono, monospace); font-size: 12px; font-weight: 800; } .iil-selected-collapse, .iil-selected-actions button, .iil-selected-remove { border: 1px solid var(--border, #30363d); border-radius: 10px; background: #1c2230; color: #e6edf3; font-weight: 800; cursor: pointer; touch-action: manipulation; } .iil-selected-collapse { min-height: 38px; padding: 8px 11px; } .iil-selected-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .iil-selected-actions button { min-height: 42px; padding: 8px 10px; font-size: 12px; } .iil-selected-actions button:hover, .iil-selected-collapse:hover { border-color: #3ecf8e; } .iil-selected-actions button.is-copied { background: rgba(62,207,142,.16); border-color: #3ecf8e; color: #3ecf8e; } .iil-selected-list { overflow: auto; display: grid; gap: 9px; padding-right: 2px; } .iil-selected-empty { margin: 8px 0; color: #8b949e; font-size: 13px; } .iil-selected-item { position: relative; padding: 10px 42px 10px 10px; border: 1px solid var(--border, #30363d); border-radius: 12px; background: rgba(255,255,255,.035); } .iil-selected-item strong { display: block; margin-bottom: 7px; font-size: 13px; line-height: 1.35; } .iil-selected-meta { display: flex; flex-wrap: wrap; gap: 5px; } .iil-selected-meta span { padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.07); color: #c9d1d9; font-family: var(--mono, monospace); font-size: 10.5px; } .iil-selected-meta .iil-selected-loc { background: rgba(251,191,36,.16); color: #fbbf24; font-weight: 900; } .iil-selected-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; font-size: 20px; line-height: 1; } .iil-selected-panel.is-collapsed .iil-selected-actions, .iil-selected-panel.is-collapsed .iil-selected-list { display: none; } @media (max-width: 900px) { .iil-selected-panel { top: auto; right: 10px; left: 10px; bottom: 10px; width: auto; max-height: 52vh; border-radius: 18px; } .iil-selected-panel:not(.is-collapsed) { padding-bottom: calc(14px + env(safe-area-inset-bottom)); } .iil-selected-panel.is-collapsed { max-height: 64px; } .iil-selected-actions button, #iil-dropdown .iil-add-select-btn, .iil-bulk-add { min-height: 46px; } .iil-bulk-card { grid-template-columns: 34px 1fr; } .iil-bulk-add { grid-column: 2; margin: 0 10px 10px; width: calc(100% - 20px); } } @media (max-width: 520px) { .iil-selected-actions { grid-template-columns: 1fr; } #iil-dropdown .iil-add-select-btn { min-width: 58px; padding: 0 8px; } }