/* UBL viewer — tool chrome in the PeppolNavigator / automatize.eu design. Colours only via site tokens. */

.v-sec { padding:clamp(28px,4vw,40px) 0 clamp(36px,4vw,48px); border-bottom:1px solid var(--line); }
.v-step { display:flex; gap:14px; align-items:baseline; margin-bottom:20px; }
.v-step .num { font-size:12px; color:var(--muted); padding:0; }

/* buttons rendered as <button>: same look as the site's anchor buttons */
.v-tool button.btn-ghost { background:transparent; color:var(--ink); cursor:pointer; }
.v-tool button.btn-ghost:hover { background:var(--tint); }
.v-tool button:disabled { opacity:.4; cursor:not-allowed; }
.v-tool .btn.v-sm, .v-tool .btn-ghost.v-sm { padding:9px 14px; font-size:13px; }

/* drop zone: a label around a real file input, so click, keyboard and drag all work */
.v-drop { display:grid; justify-items:center; gap:10px; padding:clamp(32px,6vw,56px) 16px; border:1px solid var(--ink); text-align:center; cursor:pointer; position:relative; }
.v-drop:hover, .v-drop.dragover { background:var(--tint); }
.v-drop.dragover { outline:2px solid var(--ink); outline-offset:-4px; }
.v-drop:focus-within { outline:2px solid var(--ink); outline-offset:3px; }
html[data-theme="agentic"] .v-drop:focus-within, html[data-theme="agentic"] .v-drop.dragover { outline-color:var(--accent); }
.v-drop .t { font-size:clamp(18px,2vw,22px); font-weight:600; letter-spacing:-.02em; }
.v-drop .d { font-size:14px; color:var(--muted); }
.v-drop .btn { margin-top:6px; }

.v-paste { margin-top:28px; }
.v-paste textarea { font-family:var(--mono); font-size:12.5px; line-height:1.5; min-height:132px; }
.v-error { margin:0; font-size:14px; font-weight:600; color:var(--ink); }

/* result bar */
.v-bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px 24px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.v-status { margin:0; font-family:var(--mono); font-size:13px; overflow-wrap:anywhere; }
html[data-theme="agentic"] .v-status { color:var(--accent); }

.v-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:36px clamp(24px,4vw,48px); padding-top:28px; }
.v-panel { min-width:0; }
.v-panel-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; border-top:1px solid var(--ink); padding-top:14px; margin-bottom:16px; }
.v-panel-head .chip:empty { display:none; }

.v-select { display:grid; gap:8px; margin-bottom:12px; }
.v-select select { width:100%; padding:10px 12px; border:1px solid var(--ink); border-radius:0; background:var(--bg); color:var(--ink); font:inherit; font-size:14px; }
.v-select select:focus-visible { outline:2px solid var(--ink); outline-offset:3px; }
html[data-theme="agentic"] .v-select select:focus-visible { outline-color:var(--accent); }

.v-pdf { height:clamp(460px,78vh,820px); border:1px solid var(--line); background:var(--tint); overflow:auto; }
.v-pdf iframe { display:block; width:100%; height:100%; border:0; background:#fff; }
.v-note { display:grid; gap:8px; padding:24px; }
.v-note p { margin:0; }
.v-note .t { font-size:17px; font-weight:600; }
.v-note .d { color:var(--muted); font-size:14px; overflow-wrap:anywhere; }

/* invoice data */
.v-doc-no { margin:6px 0 16px; font-size:clamp(24px,3vw,32px); font-weight:700; letter-spacing:-.03em; line-height:1.1; overflow-wrap:anywhere; }
.v-meta { display:flex; flex-wrap:wrap; gap:10px 32px; margin:0; }
.v-meta dt { font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.v-meta dd { margin:2px 0 0; font-family:var(--mono); font-size:14px; }
.v-parties { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:20px 32px; margin:28px 0; }
.v-party { border-top:1px solid var(--line); padding-top:12px; min-width:0; overflow-wrap:anywhere; }
.v-party h3 { margin:0 0 8px; }
.v-party .name { font-size:16px; font-weight:600; letter-spacing:-.01em; }
.v-party .det { margin:4px 0 0; font-size:14px; color:var(--muted); }
.v-h3 { margin:0; }
.v-lines .cmp { min-width:420px; }
.v-lines .cmp tbody tr:first-child { background:none; }
.v-lines .cmp td { overflow-wrap:anywhere; }
.v-lines .cmp .n { text-align:end; white-space:nowrap; font-variant-numeric:tabular-nums; }
.v-lines .cmp th.n { text-align:end; }
.v-lines .cmp td.n, .v-lines .cmp th.n { padding-right:0; padding-left:14px; }
.v-lines .cmp .idx { font-family:var(--mono); font-size:12px; color:var(--muted); width:36px; }
.v-totals { margin:24px 0 0 auto; max-width:380px; }
.v-totals > div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; }
.v-totals dt { color:var(--muted); }
.v-totals dd { margin:0; font-weight:600; font-variant-numeric:tabular-nums; }
.v-totals > div.due { border-top:1px solid var(--ink); font-size:18px; }
.v-totals > div.due dt { color:var(--ink); font-weight:600; }

.v-fallback { display:grid; gap:10px; }
.v-fallback p { margin:0; }
.v-fb-t { font-size:17px; font-weight:600; }
.v-list { list-style:none; margin:0; padding:0; }
.v-list li { position:relative; padding:8px 0 8px 18px; border-top:1px solid var(--line); font-size:14px; }
.v-list li::before { content:"■"; position:absolute; left:0; top:9px; font-size:9px; }

/* off-screen stage for html2pdf: invoice paper stays white with dark text in every theme */
.v-print-stage { position:absolute; left:-10000px; top:0; width:210mm; background:#fff; color:#111; }