/* Cargora — 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:#0e7490;--accent-dark:#0c5f76;--accent-soft:#e2f3f8;--on-accent:#ffffff;--accent-ink:var(--on-accent)}
html[data-theme="dark"]{--accent:#38bdf8;--accent-dark:#7dd3fc;--accent-soft:#123043;--on-accent:#04161f;--accent-ink:var(--on-accent)}

/* ── status + document-type pills the kit doesn't know ─────────────────── */
.pill.pending{background:var(--chip);color:var(--sub)}
.pill.extracted{background:var(--infobg);color:var(--info)}
.pill.reviewed{background:var(--okbg);color:var(--ok)}
.pill.failed{background:var(--badbg);color:var(--bad)}
.pill.off{background:var(--chip);color:var(--sub)}
.pill.type-po{background:var(--accent-soft);color:var(--accent)}
.pill.type-packing_slip{background:var(--infobg);color:var(--info)}
.pill.type-delivery_note{background:var(--okbg);color:var(--ok)}

/* ── reconciliation states (the vocabulary of the hero) ────────────────── */
.rstat{display:inline-block;padding:2px 9px;border-radius:6px;font-size:.74rem;font-weight:700;text-transform:capitalize;white-space:nowrap}
.rstat.match{background:var(--okbg);color:var(--ok)}
.rstat.short,.rstat.mismatch,.rstat.missing{background:var(--badbg);color:var(--bad)}
.rstat.over,.rstat.extra{background:var(--warnbg);color:var(--warn)}
.rstat.unknown{background:var(--chip);color:var(--sub)}
/* single-word states read well title-cased; a phrase does not */
.rstat.phrase{text-transform:none}

/* ── the hero: three-column PO ⇄ slip ⇄ delta match ────────────────────── */
.match{border:1px solid var(--line);border-radius:var(--radius);background:var(--card);box-shadow:var(--shadow);overflow:hidden}
.match .mh{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.5fr);
  gap:0;border-bottom:1px solid var(--line);background:var(--bg);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--sub);font-weight:700}
.match .mh > *{padding:9px 12px;border-left:1px solid var(--line)}
.match .mh > *:first-child{border-left:0}
.match .mr{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.5fr);
  border-bottom:1px solid var(--line2);align-items:center}
.match .mr:last-child{border-bottom:0}
.match .mr:hover{background:var(--hover-bg)}
.match .mr > *{padding:10px 12px;border-left:1px solid var(--line2);min-width:0}
.match .mr > *:first-child{border-left:0}
.match .mr.bad{background:color-mix(in srgb,var(--bad) 7%,var(--card))}
.match .mr.warn{background:color-mix(in srgb,var(--warn) 9%,var(--card))}
.match .mr.resolved{background:color-mix(in srgb,var(--ok) 8%,var(--card))}
.match .sku{font-family:var(--mono);font-size:.82rem;font-weight:700;overflow-wrap:anywhere}
.match .desc{display:block;font-size:.8rem;color:var(--faint);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.match .q{font-variant-numeric:tabular-nums;text-align:right;font-size:.95rem}
.match .q small{display:block;font-size:.72rem;color:var(--faint);font-variant-numeric:normal}
/* The status modifier is prefixed: a bare `.match` here would collide with the container
   class above and paint every "no difference" cell as a card. */
.match .delta{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}
.match .delta.d-short{color:var(--bad)}
.match .delta.d-over{color:var(--warn)}
.match .delta.d-match{color:var(--ok)}
.match .acts{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.match .side-head{display:flex;flex-direction:column;gap:2px}
.match .side-head b{font-family:var(--display);font-size:.82rem;color:var(--ink);text-transform:none;letter-spacing:0}
.match-foot{padding:10px 12px;border-top:1px solid var(--line);font-size:.84rem;color:var(--sub);background:var(--bg)}

.recon-summary{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-bottom:18px}
@media(max-width:860px){.recon-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
.recon-summary .box{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;box-shadow:var(--shadow);min-width:0}
.recon-summary .box .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sub);font-weight:700}
.recon-summary .box .v{font-family:var(--display);font-size:1.4rem;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.recon-summary .box.bad .v{color:var(--bad)}
.recon-summary .box.ok .v{color:var(--ok)}
.recon-banner{padding:12px 16px;border-radius:var(--radius-sm);margin-bottom:16px;font-weight:600;border:1px solid transparent}
.recon-banner.clean{background:var(--okbg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)}
.recon-banner.issues{background:var(--warnbg);color:var(--warn);border-color:color-mix(in srgb,var(--warn) 35%,transparent)}

/* ── document detail + line-item editor ────────────────────────────────── */
.detail-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:20px;align-items:start}
.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:200px}
.viewer .vs img{display:block;width:calc(100% * var(--z,1));max-width:none}
.viewer .vs .pdfbox{padding:32px 14px}
#li-table td{padding:6px 7px;vertical-align:top}
#li-table td input{padding:7px 9px;font-size:.9rem;min-height:0}
.mismatch-row{background:var(--warnbg)}
.mismatch-cell{color:var(--bad);font-weight:700}

/* ── upload drop zone (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}

.topbar .t .sub{max-width:78ch}

/* ── phone (app layer loads after the kit) ─────────────────────────────── */
@media(max-width:980px){.detail-grid{grid-template-columns:minmax(0,1fr)}.viewer{position:static;max-height:340px}}
@media(max-width:900px){
  /* the five-column match collapses into stacked rows, each labelled by its own column head */
  .match .mh{display:none}
  .match .mr{grid-template-columns:minmax(0,1fr);row-gap:2px;padding:10px 12px}
  .match .mr > *{border-left:0;padding:2px 0}
  .match .q,.match .delta{text-align:left}
  .match .q::before,.match .delta::before{content:attr(data-l) " ";font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sub);font-weight:700}
  .match .acts{justify-content:flex-start;margin-top:6px}
}
@media(max-width:700px){.drop-zone{padding:28px 14px}.topbar .t h1{white-space:normal!important;max-width:100%!important}}