/* Extracta — app layer on the Ownware UI kit. Accent + document status pills + drop zone + review screen. */
:root{--accent:#0f766e;--accent-dark:#115e59;--accent-soft:#e6faf7;--on-accent:#ffffff;--accent-ink:var(--on-accent);--infoink:var(--info);--chip-ink:var(--sub);--drop-bg:var(--bg)}
html[data-theme="dark"]{--accent:#2dd4bf;--accent-dark:#5eead4;--accent-soft:#123b36;--on-accent:#04211d;--accent-ink:var(--on-accent);--drop-bg:var(--bg2)}
.pill.uploaded{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)}
.drop-zone{position:relative;overflow:hidden;border:2px dashed var(--line);border-radius:10px;
  padding:44px 24px;text-align:center;transition:.15s;cursor:pointer;background:var(--drop-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}


/* ── review: document left (sticky viewer), fields right, state per field ─────────────── */
.review-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:18px;align-items:start} @media(max-width:1000px){.review-grid{grid-template-columns:1fr}}
.viewer{position:sticky;top:16px;border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);box-shadow:var(--shadow);overflow:hidden} .viewer .vt{display:flex;gap:6px;align-items:center;padding:8px 10px;border-bottom:1px solid var(--line);background:var(--card)} .viewer .vt .name{font-size:.82rem;color:var(--sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1} .viewer .vs{overflow:auto;max-height:calc(100vh - 140px);background:repeating-conic-gradient(var(--line2) 0 25%,transparent 0 50%) 0 0/20px 20px;padding:14px;text-align:center} .viewer img{max-width:100%;transform-origin:top left;transition:transform .15s;box-shadow:var(--shadow-md);border-radius:4px;background:#fff} .viewer.z2 img{max-width:none;width:200%} .viewer.z15 img{max-width:none;width:150%}
.fieldrow{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:640px){.fieldrow{grid-template-columns:1fr}}
.f{position:relative} .f label{display:flex;align-items:center;gap:6px} .f .st{width:8px;height:8px;border-radius:50%;background:var(--faint);flex:0 0 8px} .f.ok .st{background:var(--ok)} .f.warn .st{background:var(--warn)} .f.bad .st{background:var(--bad)} .f .why{font-size:.76rem;margin-top:4px;color:var(--faint)} .f.warn .why{color:var(--warn)} .f.bad .why{color:var(--bad)} .f.warn input{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))} .f.bad input{border-color:color-mix(in srgb,var(--bad) 60%,var(--line))}
.checks{display:flex;flex-direction:column;gap:6px} .checks div{display:flex;gap:8px;align-items:center;font-size:.86rem;padding:7px 10px;border-radius:8px;background:var(--bg);border:1px solid var(--line)} .checks i{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-style:normal;font-weight:800;flex:0 0 18px;background:var(--chip);color:var(--sub)} .checks .ok i{background:var(--okbg);color:var(--ok)} .checks .bad i{background:var(--badbg);color:var(--bad)} .checks .ok{border-color:color-mix(in srgb,var(--ok) 30%,var(--line))} .checks .bad{border-color:color-mix(in srgb,var(--bad) 35%,var(--line))} .checks b{font-family:var(--mono);font-size:.8rem;margin-left:auto}
.savebar{position:sticky;bottom:0;background:linear-gradient(transparent,var(--bg) 25%);padding:18px 0 4px;margin-top:6px;display:flex;gap:10px;align-items:center;flex-wrap:wrap} .savebar .spacer{flex:1}
.recon-hint-ok{color:var(--ok);font-weight:600} .recon-hint-err{color:var(--bad);font-weight:600}
.li-table input{min-height:34px;padding:6px 8px;font-size:.9rem}
.queue-kpi{cursor:pointer}

@media(max-width:700px){.viewer .vt{flex-wrap:wrap} .viewer .vt .name{flex:1 1 100%;min-width:0} .viewer .vs{max-height:60vh}}

/* audit-2 final: the drop zone and its native file input never widen the card on phones */
#drop-zone,.drop-zone{min-width:0;max-width:100%} #drop-zone input[type=file],.drop-zone input[type=file]{width:100%;max-width:100%;white-space:normal} #upload-form .field,#upload-form label{min-width:0;overflow-wrap:anywhere}

/* 3.3.0: an e-invoice's XML, shown to a person in the review viewer */
.einv{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px;text-align:left;margin-top:0;box-shadow:var(--shadow)} .viewer .vs .empty + .einv{margin-top:12px}
.einv-h{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin-bottom:10px} .einv-parties{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px;font-size:.9rem}
.einv .tbl{margin-bottom:10px} .einv-totals{display:grid;grid-template-columns:auto auto;justify-content:end;gap:4px 16px;margin:0;font-size:.9rem} .einv-totals dt{color:var(--sub)} .einv-totals dd{margin:0;text-align:right}