/* Specta — app layer on the Ownware UI kit (assets/ui/ownware-ui.css). Accent + app-specific rules only; generic rules come from the kit. */
:root{--accent:#7c3aed;--accent-dark:#6d28d9;--accent-soft:#f1eafe;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#a78bfa;--accent-dark:#c4b5fd;--accent-soft:#251b47;--on-accent:#140a2e;--accent-ink:var(--on-accent)}

/* ── status pills the kit doesn't know ─────────────────────────────────── */
.pill.mapped,.pill.extracting,.pill.processing{background:var(--warnbg);color:var(--warn)}
.pill.extracted{background:var(--infobg);color:var(--info)}
.pill.reviewed{background:var(--okbg);color:var(--ok)}
.pill.attention{background:var(--badbg);color:var(--bad)}
.pill.queued,.pill.empty,.pill.off{background:var(--chip);color:var(--sub)}

/* ── upload drop zones (app.js drives .dragging/.chosen) ───────────────── */
.drop-zone{position:relative;border:2px dashed var(--line);border-radius:var(--radius);padding:44px 24px;text-align:center;transition:border-color .15s,background .15s;cursor:pointer;background:var(--bg)}
.drop-zone:hover,.drop-zone.dragging{border-color:var(--accent);background:var(--accent-soft)}
.drop-zone.chosen{border-color:var(--accent);border-style:solid}
.drop-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer}

/* ── the hero: normalize-review split (sticky source viewer ⇄ review grid) ─ */
.review-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:18px;align-items:start}
.review-grid.rv{grid-template-columns:minmax(280px,30fr) minmax(0,70fr)}
.viewer{position:sticky;top:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 28px)}
.viewer .vt{display:flex;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line);font-size:.84rem}
.viewer .vt .name{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.viewer .vs{overflow:auto;background:var(--bg);flex:1;min-height:220px}
.viewer .vs img{display:block;width:calc(100% * var(--z,1));max-width:none}
.viewer .vs .pdfbox{padding:40px 16px}

/* review grid cells (app.js drives td.cell / .conf-warn / .conf-bad) */
td.cell{cursor:pointer;outline-offset:-2px}
td.cell:hover{background:var(--accent-soft)}
td.cell:focus{outline:2px solid var(--accent)}
td.conf-warn{background:var(--warnbg);box-shadow:inset 3px 0 0 var(--warn)}
td.conf-warn:hover,td.conf-warn:focus{background:color-mix(in srgb,var(--warn) 22%,var(--card))}
td.conf-bad{background:var(--badbg);box-shadow:inset 3px 0 0 var(--bad)}
td.conf-bad:hover,td.conf-bad:focus{background:color-mix(in srgb,var(--bad) 18%,var(--card))}
td.cell input{padding:5px 8px;font-size:.88rem;min-width:110px;min-height:0}
tr.row-reviewed td.cell{cursor:default}

.conf-pill{display:inline-block;padding:2px 8px;border-radius:12px;font-size:.72rem;font-weight:700;font-variant-numeric:tabular-nums}
.conf-pill.ok{background:var(--okbg);color:var(--ok)}
.conf-pill.warn{background:var(--warnbg);color:var(--warn)}
.conf-pill.bad{background:var(--badbg);color:var(--bad)}
.conf-count{display:inline-block;background:var(--warnbg);color:var(--warn);font-weight:700;font-size:.8rem;padding:2px 10px;border-radius:12px}
.legend .swatch{display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:3px}
.legend .swatch.warn{background:var(--warn)}
.legend .swatch.bad{background:var(--bad)}

/* schema column chips (role-tagged, non-interactive) */
.chip .role{font-size:.66rem;text-transform:uppercase;letter-spacing:.04em;color:var(--faint);font-weight:700;margin-left:2px}
.chip.name i,.chip.sku i{background:var(--info)}
.chip.price i{background:var(--ok)}
.chip.attribute i{background:var(--faint)}

/* meta grid on batch/catalog heads */
.meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin:0}
.meta-grid .m .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:700}
.meta-grid .m .v{font-weight:600;margin-top:2px;overflow-wrap:anywhere}

.spinner{display:inline-block;width:12px;height:12px;border:2px solid var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:spectaspin .8s linear infinite;vertical-align:-2px;margin-right:4px}
@keyframes spectaspin{to{transform:rotate(360deg)}}

/* mapping + line-item editors keep tight cells */
#map-table td{padding:6px 8px;vertical-align:middle}
#map-table td input,#map-table td select{padding:7px 9px;font-size:.88rem;min-height:0}
#li-table td{padding:5px 6px;vertical-align:top}
#li-table td input{padding:7px 9px;font-size:.9rem;min-height:0}
#li-table td:last-child{width:44px;text-align:center}

/* ── phone (app layer loads after the kit) ─────────────────────────────── */
@media(max-width:1100px){.review-grid,.review-grid.rv{grid-template-columns:minmax(0,1fr)}.viewer{position:static;max-height:420px}}
@media(max-width:700px){.meta-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.drop-zone{padding:28px 14px}}

/* review grid density + always-reachable row actions (sticky right) */
#review-grid td{padding:7px 10px;font-size:.9rem}
#review-grid th{padding:8px 10px}
#review-grid td.num,#review-grid th.num{white-space:nowrap}
#review-grid .rowactions{opacity:1;flex-wrap:nowrap}
@media(min-width:701px){
  #review-grid th:last-child,#review-grid td:last-child{position:sticky;right:0;background:var(--card);box-shadow:inset 6px 0 6px -6px rgba(16,24,40,.18)}
  #review-grid tbody tr:hover td:last-child{background:var(--hover-bg)}
}
@media(max-width:700px){.topbar .t h1{white-space:normal!important;max-width:100%!important}}