/* PDF → Excel extraction */
.dropzone { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); cursor: pointer; flex-wrap: wrap; }
.dropzone > .icon { width: 26px; height: 26px; color: var(--primary-text); }
.dropzone:hover, .dropzone.over { border-color: var(--primary); background: var(--primary-weak); }
.dropzone.done { border-style: solid; border-color: var(--signal); }
.dropzone .dz-info { flex: 1 1 180px; min-width: 0; display: grid; gap: 6px; }
.dz-file { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--signal-text); overflow-wrap: anywhere; }

.ex-review { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 12px 16px 12px; gap: 8px; }
.ex-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ex-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ex-title strong { font-family: var(--font-head); font-size: var(--fs-lg); overflow-wrap: anywhere; }
.ex-title .xs { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.ex-sub { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ex-counts { display: flex; gap: 12px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-2); }
.ex-counts .cnt { display: inline-flex; align-items: center; gap: 6px; }
.ex-counts .cnt.strong { font-weight: 600; color: var(--text); }
.ex-counts .dot { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.ex-split { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.ex-page, .ex-fields { min-height: 0; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.ex-page-bar { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.ex-page-bar .legend { gap: 8px; }
.ex-page-scroll { flex: 1; overflow: auto; background: var(--surface-3); padding: 12px; }
.page-canvas { position: relative; margin: 0 auto; box-shadow: var(--shadow-2); background: #fff; }
.page-img { display: block; width: 100%; height: auto; }
.bbox-layer { position: absolute; inset: 0; }
.bbox { position: absolute; border: 2px solid; border-radius: 3px; background: transparent; cursor: pointer; padding: 0; }
.bbox:hover { background: rgba(37, 99, 235, .08); }
.bbox.active { box-shadow: 0 0 0 3px rgba(37, 99, 235, .55); z-index: 2; }
/* status colours shared by boxes, dots, swatches and badges */
.bbox.auto, .dot.auto, .sw.auto { border-color: #2563EB; --c: #2563EB; }
.bbox.needs_review, .dot.needs_review, .sw.needs_review { border-color: #D97706; --c: #D97706; }
.bbox.unreadable, .dot.unreadable, .sw.unreadable { border-color: #DC2626; --c: #DC2626; border-style: dashed; }
.bbox.approved, .dot.approved, .sw.approved { border-color: #0D9488; --c: #0D9488; }
.bbox.rejected, .dot.rejected, .sw.rejected { border-color: #64748B; --c: #64748B; }
.bbox.needs_review { background: rgba(217, 119, 6, .10); }
.bbox.unreadable { background: rgba(220, 38, 38, .08); }
.dot { background: var(--c); }
.sw { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--c); border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.st-badge { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 500; white-space: nowrap; color: var(--text); background: color-mix(in srgb, var(--c) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 45%, transparent); }
.st-badge.auto { --c: #2563EB; } .st-badge.needs_review { --c: #D97706; } .st-badge.unreadable { --c: #DC2626; } .st-badge.approved { --c: #0D9488; } .st-badge.rejected { --c: #64748B; }
.ex-table { border: 0; border-radius: 0; flex: 1; overflow: auto; }
.ex-table table { min-width: 780px; }
.ex-table th, .ex-table td { padding: 7px 8px; }
.ex-table .fcell { min-width: 150px; }
.ex-table .fl .code { font-family: var(--font-mono); font-size: 11px; color: var(--text-3); font-weight: 400; margin-left: 6px; }
.ex-table td { vertical-align: top; }
.ex-table tr { outline: none; }
.ex-table tr.active td { background: var(--primary-weak) !important; }
.ex-table tr:focus-visible td { box-shadow: inset 0 2px 0 var(--focus), inset 0 -2px 0 var(--focus); }
.ex-table tr.active td:first-child { box-shadow: inset 3px 0 0 var(--primary); }
.ex-table .fl { font-weight: 600; }
.ex-table input.corr { min-height: 30px; padding: 4px 8px; font-family: var(--font-mono); font-size: 13px; width: 92px; }
.ex-table .reason { max-width: 180px; margin-top: 4px; }
.conf { display: grid; grid-template-columns: 40px auto; gap: 6px; align-items: center; }
.conf .bar { height: 6px; }
.icon-btn.ok:hover { color: var(--signal-text); background: var(--signal-weak); }
.icon-btn.no:hover { color: var(--danger-text); background: var(--danger-weak); }
@media (max-width: 1100px) {
  .ex-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(300px, 45vh) minmax(320px, auto); }
  .ex-review { overflow-y: auto; }
}