/* KAYCO Item Master v6 — extras (Data quality, header menu, compare, lists, sheets, scanner, quiet item buttons, barcode). Layout here; type/colour via shop.css utilities. */
.im-toaster { bottom:calc(var(--tabbar-h, 0px) + var(--buybar-h, 0px) + var(--tray-h, 0px) + max(12px, env(safe-area-inset-bottom))); }
#main { padding-bottom:var(--tray-h, 0px); }
.im-x-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.im-x-bc { display:block; width:230px; max-width:100%; height:auto; margin-top:14px; }
.im-x-input { height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--line); background:#fff; font-size:15px; font-weight:500; color:var(--ink-900); outline:none; }
.im-x-input:focus { border-color:var(--plum); box-shadow:0 0 0 4px rgba(122,56,114,.12); }
.im-x-input::placeholder { color:var(--ink-400); font-family:'Plus Jakarta Sans Variable', ui-sans-serif, system-ui, sans-serif; letter-spacing:0; }
.im-x-ib:focus-visible, .im-x-tile:focus-visible, .im-x-mi:focus-visible, .im-x-code:focus-visible, .im-x-chip:focus-visible, .im-x-sw:focus-visible { outline:2px solid var(--plum); outline-offset:2px; }

/* quiet icon buttons: 30px look, 44px hit area */
.im-x-ib { position:relative; display:inline-flex; flex:none; align-items:center; justify-content:center; width:30px; height:30px; border-radius:99px; background:rgba(255,255,255,.94); color:var(--ink-600); box-shadow:0 1px 2px rgba(27,24,31,.08), inset 0 0 0 1px var(--line); }
.im-x-ib::after { content:""; position:absolute; inset:-6px; }
.im-x-ib:hover { color:var(--plum); background:#fff; }
.im-x-ib.is-on { background:var(--plum); color:#fff; box-shadow:none; }
.im-x-acts { position:absolute; top:12px; right:12px; z-index:2; display:flex; flex-direction:column; gap:10px; }
.im-tr .im-x-ib { width:28px; height:28px; background:#fff; }
.im-tr .im-x-ib.is-on { background:var(--plum); }
@media (hover:hover) and (min-width:768px) { .im-card .im-x-acts { opacity:0; transition:opacity .15s; } .im-card:hover .im-x-acts, .im-card:focus-within .im-x-acts, .im-card .im-x-acts:has(.is-on) { opacity:1; } }
.im-x-fill { fill:currentColor; }
.im-x-on { background:var(--plum-50) !important; color:var(--plum) !important; box-shadow:inset 0 0 0 1.5px var(--plum) !important; }
.im-x-scan { display:inline-flex; align-items:center; justify-content:center; flex:none; width:36px; height:36px; margin-right:-8px; border-radius:99px; color:var(--ink-600); }
.im-x-scan:hover { background:var(--plum-50); color:var(--plum); }

/* codes, gap chips, chips, segmented control, selects */
.im-x-code { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 5px; margin:0 -5px; border-radius:7px; font-size:12.5px; color:var(--ink-700); white-space:nowrap; cursor:copy; }
.im-x-code:hover { background:var(--plum-50); color:var(--plum); }
.im-x-code-l { font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-400); }
.im-x-code.is-none { cursor:default; background:none; color:var(--ink-400); }   /* v13o-p: AA contrast for the "—" */
.im-x-gap { display:inline-flex; align-items:center; height:20px; padding:0 7px; border-radius:6px; background:#FDF1EE; color:#A93F2A; font-size:11px; font-weight:700; white-space:nowrap; }
.im-x-gap.is-q { background:var(--mist); color:var(--ink-600); }
.im-x-chip { display:inline-flex; align-items:center; gap:6px; height:36px; padding:0 12px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-size:13px; font-weight:600; color:var(--ink-700); white-space:nowrap; }
.im-x-chip:hover { background:var(--mist); }
.im-x-chip strong { color:var(--ink-500); }
.im-x-chip.is-on, .im-x-chip.is-on strong { background:var(--ink-900); color:#fff; box-shadow:none; }
.im-x-seg { display:inline-flex; max-width:100%; padding:3px; border-radius:99px; background:var(--mist); overflow-x:auto; scrollbar-width:none; }
.im-x-seg button { height:30px; padding:0 11px; border-radius:99px; font-size:13px; font-weight:600; color:var(--ink-600); white-space:nowrap; }
.im-x-seg button.is-on { background:#fff; color:var(--ink-900); box-shadow:0 1px 3px rgba(27,24,31,.12); }
.im-x-seg button:disabled { opacity:.4; }
.im-x-search { display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:99px; background:var(--mist); color:var(--ink-400); flex:1 1 220px; max-width:320px; }
.im-x-search:focus-within { background:#fff; box-shadow:inset 0 0 0 1.5px var(--plum); }
.im-x-search input { min-width:0; flex:1; height:100%; background:none; outline:none; font-size:14px; color:var(--ink-900); }
.im-x-sel { position:relative; display:inline-flex; align-items:center; flex:0 1 220px; min-width:0; }
.im-x-sel select { appearance:none; -webkit-appearance:none; width:100%; height:40px; padding:0 34px 0 14px; border-radius:99px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); font-size:14px; font-weight:600; color:var(--ink-700); text-overflow:ellipsis; outline:none; cursor:pointer; }
.im-x-sel select:focus-visible { box-shadow:inset 0 0 0 1.5px var(--plum); }
.im-x-sel svg { position:absolute; right:12px; pointer-events:none; color:var(--ink-500); }
.im-x-clear { height:40px; padding:0 8px; font-size:13.5px; font-weight:700; color:var(--plum); }
@media (max-width:639px) { .im-x-search { flex:1 1 55%; max-width:none; height:44px; } .im-x-sel { order:2; flex:1 1 calc(50% - 4px); } .im-x-sel.is-st { order:1; flex:1 1 34%; } .im-x-clear { order:3; } .im-x-sel select, .im-x-clear { height:44px; } }

/* item rows (Data quality worklists, saved lists) */
.im-x-group { border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); overflow:hidden; }
.im-x-group-h { display:flex; align-items:center; gap:10px; padding:9px 10px 9px 14px; background:var(--canvas); border-bottom:1px solid var(--line); }
.im-x-group-n { display:flex; min-width:0; font-size:14.5px; font-weight:800; color:var(--ink-900); }
.im-x-row { display:grid; grid-template-columns:40px minmax(0,1fr) auto; grid-template-areas:"img id a" "img c a" ". x x"; align-items:center; gap:2px 12px; padding:10px 14px; cursor:pointer; }
.im-x-row + .im-x-row { border-top:1px solid var(--line); }
.im-x-row:hover { background:var(--canvas); }
.im-x-row > :first-child { grid-area:img; align-self:start; }
.im-x-row-id { grid-area:id; min-width:0; }
.im-x-row-n { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; font-weight:600; line-height:1.35; color:var(--ink-900); }
.im-x-row-n:hover { color:var(--plum); }
.im-x-row-c { grid-area:c; display:flex; flex-wrap:wrap; gap:0 16px; margin-top:2px; }
.im-x-row-x { grid-area:x; display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.im-x-row-x:empty { display:none; }
.im-x-row-a { grid-area:a; }
@media (max-width:767px) { .im-x-row-c .im-x-code { height:28px; } .im-x-row-x:not(:empty) { margin-top:4px; } }
@media (min-width:768px) {
  .im-x-row { grid-template-columns:40px minmax(0,1.5fr) 270px minmax(0,1fr) auto; grid-template-areas:"img id c x a"; padding:8px 14px; }
  .im-x-row > :first-child { align-self:center; }
  .im-x-row-n { display:block; white-space:nowrap; text-overflow:ellipsis; }
  .im-x-row-c { margin:0; flex-wrap:nowrap; }
  .im-x-row-c > :first-child { min-width:96px; }
}
.im-x-more { display:block; width:100%; padding:11px; border-top:1px solid var(--line); font-size:13.5px; font-weight:700; color:var(--plum); }
.im-x-more:hover { background:var(--plum-50); }

/* Data quality: tile groups + worklist header */
.im-x-tgs { display:grid; gap:12px; margin-top:16px; }
.im-x-tgl { margin:0 0 6px 2px; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.im-x-tiles { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
@media (min-width:640px) { .im-x-tiles { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (min-width:1200px) { .im-x-tiles { grid-template-columns:repeat(6,minmax(0,1fr)); } }
@media (max-width:639px) { .im-x-tiles { gap:6px; } .im-x-tile { gap:5px; padding:8px 10px 9px; } }
.im-x-wl { scroll-margin-top:calc(var(--x-top, 0px) + 12px); }
.im-x-tile { display:flex; flex-direction:column; gap:6px; min-width:0; padding:10px 12px 11px; border-radius:16px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); text-align:left; }
.im-x-tile:hover { box-shadow:inset 0 0 0 1px var(--plum-200), 0 6px 16px -12px rgba(65,22,61,.4); }
.im-x-tile.is-on { background:var(--plum-50); box-shadow:inset 0 0 0 1.5px var(--plum); }
.im-x-bar { display:block; height:4px; border-radius:99px; background:rgba(27,24,31,.07); overflow:hidden; }
.im-x-bar i { display:block; height:100%; border-radius:inherit; background:var(--plum); }
.im-x-wl-h { display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"t csv" "a a"; align-items:center; gap:10px 12px; margin-bottom:12px; }
.im-x-wl-t { grid-area:t; min-width:0; }
.im-x-wl-csv { grid-area:csv; }
.im-x-wl-a { grid-area:a; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
@media (min-width:768px) { .im-x-wl-h { grid-template-columns:minmax(0,1fr) auto auto; grid-template-areas:"t a csv"; } }
@media (max-width:767px) { .im-x-wl-csv > span { display:none; } .im-x-wl-csv, .im-x-chip, .im-x-group-h .btn-sm { height:44px; } .im-x-seg button { height:38px; } }

/* header menu (popover on desktop, sheet on phones) + shortcuts + switch */
.im-x-pop { position:absolute; right:0; top:calc(100% + 8px); z-index:60; width:300px; max-width:calc(100vw - 24px); max-height:calc(100dvh - 96px); overflow-y:auto; padding:6px; border-radius:20px; background:#fff; box-shadow:0 0 0 1px var(--line), 0 24px 48px -16px rgba(27,24,31,.28); transform-origin:top right; outline:none; }
.im-x-menu { margin:0 -10px; }
.im-x-pop > .im-x-menu { margin:0; }
.im-x-live { flex:none; width:7px; height:7px; margin-top:6px; border-radius:50%; background:var(--leaf); box-shadow:0 0 0 3px rgba(19,130,93,.15); }
.im-x-mh { margin:4px 10px 3px; padding-top:10px; border-top:1px solid var(--line); font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.im-x-mi { display:flex; width:100%; align-items:center; gap:12px; min-height:40px; padding:6px 10px; border-radius:12px; font-size:14px; font-weight:600; color:var(--ink-900); text-align:left; cursor:pointer; }
.im-x-mi > svg { flex:none; color:var(--ink-500); }
.im-x-mi:hover { background:var(--mist); }
.im-x-mi:hover > svg { color:var(--plum); }
.im-x-mi-m { min-width:24px; height:22px; padding:0 7px; border-radius:99px; background:var(--plum-50); color:var(--plum); font-size:12px; font-weight:700; line-height:22px; text-align:center; }
@media (max-width:767px) { .im-x-mi { min-height:48px; font-size:15px; } }
@media (hover:none) and (pointer:coarse) { .im-x-kb { display:none; } }
.im-x-sw { appearance:none; -webkit-appearance:none; flex:none; position:relative; width:40px; height:24px; border-radius:99px; background:var(--ink-300); cursor:pointer; transition:background .15s; }
.im-x-sw::after { content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .15s; }
.im-x-sw:checked { background:var(--plum); }
.im-x-sw:checked::after { transform:translateX(16px); }
.im-x-keys > div { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; color:var(--ink-700); }
.im-x-keys > div:last-child { border:0; }
.im-x-keys dd { display:flex; gap:4px; }
.im-x-keys kbd { min-width:26px; height:26px; padding:0 7px; border-radius:7px; box-shadow:inset 0 0 0 1px var(--line), 0 1px 0 var(--ink-300); font:600 12.5px/26px ui-monospace, Menlo, Consolas, monospace; text-align:center; color:var(--ink-900); }

/* compare tray */
.im-x-tray { position:fixed; z-index:45; left:50%; transform:translateX(-50%); bottom:calc(var(--tabbar-h, 0px) + max(10px, env(safe-area-inset-bottom))); display:flex; align-items:center; gap:6px; padding:6px; border-radius:99px; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); box-shadow:0 12px 32px -12px rgba(27,24,31,.28), 0 0 0 1px var(--line); max-width:calc(100vw - 20px); }
@media (min-width:768px) { .im-x-tray { bottom:24px; } }
@media (max-width:767px) { .im-x-tray-item { display:none; } }
@media print { .im-x-tray { display:none; } }
.im-x-tray-e { width:36px; height:36px; border-radius:99px; border:1.5px dashed var(--ink-300); }

/* compare */
.im-x-cmpv { --lw:112px; --cw:148px; }
@media (min-width:768px) { .im-x-cmpv { --lw:176px; --cw:200px; } }
@media (max-width:639px) { .im-x-icb { width:44px; padding:0; } .im-x-icb span { display:none; } }
.im-x-cmpbar { position:sticky; top:var(--x-top, 0px); z-index:6; height:0; }
.im-x-cmpbar-clip { position:absolute; left:0; right:0; top:0; overflow:hidden; background:rgba(255,255,255,.97); border-radius:0 0 16px 16px; box-shadow:0 1px 0 var(--line), 0 12px 24px -18px rgba(27,24,31,.45); opacity:0; pointer-events:none; transition:opacity .15s; }
.im-x-cmpbar.is-on .im-x-cmpbar-clip { opacity:1; pointer-events:auto; }
.im-x-cmpbar-in { display:grid; grid-template-columns:var(--lw) repeat(var(--n), minmax(0,1fr)); min-width:calc(var(--lw) + var(--n) * var(--cw)); }
.im-x-cmpbar-in > * { display:flex; align-items:center; gap:8px; min-width:0; padding:8px 14px; }
.im-x-cmpbar-in > .im-x-cmpbar-l { position:sticky; left:0; z-index:1; padding-left:18px; background:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--plum); box-shadow:1px 0 0 var(--line); }
.im-x-cmpwrap { margin-top:18px; overflow-x:auto; border-radius:20px; box-shadow:inset 0 0 0 1px var(--line); }
.im-x-cmp { width:100%; min-width:calc(var(--lw) + var(--n) * var(--cw)); border-collapse:separate; border-spacing:0; table-layout:fixed; font-size:14px; }
.im-x-cmp-lc { width:var(--lw); }
.im-x-cmp th, .im-x-cmp td { padding:9px 14px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.im-x-cmp td { color:var(--ink-600); }
.im-x-cmp thead th { padding-top:14px; padding-bottom:12px; }
.im-x-cmp tr:last-child > * { border-bottom:0; }
.im-x-cmp .im-x-cmp-l { position:sticky; left:0; z-index:1; padding-left:18px; background:#fff; font-size:12.5px; font-weight:600; color:var(--ink-500); box-shadow:1px 0 0 var(--line); }
.im-x-cmp tr.is-diff td { background:var(--plum-50); color:var(--ink-900); font-weight:600; }
.im-x-cmp tr.is-diff .im-x-cmp-l { background:var(--plum-50); color:var(--plum); font-weight:700; }
.im-x-cmp-sec > * { padding-top:16px !important; padding-bottom:6px !important; background:var(--canvas) !important; }
.im-x-cmp .im-x-cmp-sec .im-x-cmp-l { white-space:nowrap; overflow:visible; font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-400); }
.im-x-dot { position:absolute; left:8px; top:16px; width:5px; height:5px; border-radius:50%; background:var(--plum); }
.im-x-cmp-ph { position:relative; max-width:150px; }
.im-x-rm { position:absolute; top:6px; right:6px; }
.im-x-cmp .im-x-code { margin:-2px -5px; font-size:13.5px; }
/* v13p: phones show two items beside the sticky field names and snap item by item when swiped; print = the table only, landscape */
.im-x-cmp-swipe { display:none; }
@media (max-width:767px) {
  .im-x-cmpv { --cw:calc((100vw - 34px - var(--lw)) / 2); }
  .im-x-cmpwrap { scroll-snap-type:x mandatory; scroll-padding-left:var(--lw); overscroll-behavior-x:contain; }
  .im-x-cmp thead th:not(.im-x-cmp-l) { scroll-snap-align:start; }
  .im-x-cmp-swipe { display:flex; align-items:center; gap:6px; margin-top:10px; font-size:12.5px; font-weight:600; color:var(--ink-500); }
}
@media print {
  html.cmp-on .im-x-cmpv .im-x-icb, html.cmp-on .im-x-cmpv label, html.cmp-on .im-x-rm, html.cmp-on .im-x-cmpbar, html.cmp-on .im-x-cmp-swipe, html.cmp-on .im-x-tray { display:none !important; }
  html.cmp-on .im-x-cmpwrap { overflow:visible; border-radius:0; }
  html.cmp-on .im-x-cmp { min-width:0; font-size:11px; }
  html.cmp-on .im-x-cmp th, html.cmp-on .im-x-cmp td { padding:3px 8px; font-size:11px; }
  html.cmp-on .im-x-cmp .im-x-cmp-l { position:static; }
  html.cmp-on .im-x-cmp-ph { max-width:64px; }
  html.cmp-on .im-x-cmp tr { break-inside:avoid; }
  html.cmp-on .im-x-cmpv * { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}
@media (max-width:767px) { .im-x-cmp { font-size:13.5px; } .im-x-cmp th, .im-x-cmp td { padding:9px 10px; } .im-x-cmp .im-x-cmp-l { padding-left:16px; font-size:12px; } .im-x-dot { left:7px; } .im-x-cmp-ph { max-width:112px; } }

/* saved lists */
.im-x-lcard { display:flex; align-items:center; gap:14px; min-height:76px; padding:12px 14px; border-radius:18px; background:#fff; box-shadow:inset 0 0 0 1px var(--line); transition:box-shadow .2s; }
.im-x-lcard:hover { box-shadow:inset 0 0 0 1px var(--plum-200), 0 12px 28px -18px rgba(65,22,61,.35); }
.im-x-lpics { display:flex; flex:none; }
.im-x-lpics > * { box-shadow:0 0 0 2px #fff; }
.im-x-lpics > * + * { margin-left:-16px; }

/* sheets: add to list, scanner */
.im-x-pick { display:flex; width:100%; align-items:center; gap:12px; min-height:50px; padding:0 14px; border-radius:14px; box-shadow:inset 0 0 0 1px var(--line); }
.im-x-pick:hover { background:var(--canvas); }
.im-x-pick.is-on { background:var(--plum-50); box-shadow:inset 0 0 0 1.5px var(--plum); }
.im-x-box { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; flex:none; border-radius:7px; box-shadow:inset 0 0 0 1.5px var(--ink-300); color:transparent; }
.is-on > .im-x-box { background:var(--plum); box-shadow:none; color:#fff; }
.im-x-cam { position:relative; aspect-ratio:4/3; border-radius:20px; overflow:hidden; background:var(--ink-950); }
.im-x-cam video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .3s; }
.im-x-cam video.is-on { opacity:1; }
.im-x-aim, .im-x-camoff { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color:rgba(255,255,255,.55); }
.im-x-aim span { position:relative; width:72%; height:34%; border-radius:16px; border:2px solid rgba(255,255,255,.9); box-shadow:0 0 0 999px rgba(18,16,20,.4); overflow:hidden; }
.im-x-aim span::after { content:''; position:absolute; left:8%; right:8%; top:50%; height:2px; background:#ff5a6a; box-shadow:0 0 12px #ff5a6a; animation:imx-scan 1.8s ease-in-out infinite; }
@keyframes imx-scan { 0%,100% { transform:translateY(-30px); } 50% { transform:translateY(30px); } }
.im-x-miss { display:flex; align-items:center; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px; background:#FFF6E5; color:#7A4B00; font-size:13.5px; }
.im-x-live.is-stale { background:#C27C0E; box-shadow:0 0 0 3px rgba(194,124,14,.18); }
.im-x-stale { color:#8A5A0B; font-weight:600; }