/* SP E-Invoice Viewer — rendered inside a Shadow DOM ( theme-isolated ).
 *
 * Layout: rectangular ( "eckig" ), inspired by the original ZUGFeRD QUBA viewer — square cards with a
 * coloured header tab ( dark = the section carries data, light = empty section ) and label / value rows.
 * Unchanged by the typography pass below - "eckig" was never about colour or font.
 *
 * ⚠️ TYPOGRAFIE UND GRAUSKALA VOM EXPLAINER UEBERNOMMEN - AUF WUNSCH, 01.09.2026. Inter / Space
 * Grotesk / JetBrains Mono statt Systemschrift, echt neutrale Grauskala ( #F7F8FA / #D5D8DE / #0B1220,
 * dieselben Werte wie assets/css/spx-explainer.css's :root ) statt der leicht blaustichigen eigenen
 * ( #f4f8fa / #cddbe3 / #1f2a30 ).
 *
 * ⚠️ 18.09.2026: Die Markenfarbe selbst wurde jetzt DOCH ersetzt, auf ausdrücklichen Wunsch - widerruft
 * den vorigen Absatz ("Markenfarben bleiben bewusst unangetastet"). Teal-Blau #5f8fa8 und Orange #f28c1b
 * ( aus dem Produktlogo, bis dahin über jede Umbenennung hinweg unverändert ) sind jetzt Kit-H-Navy
 * ( #1E3A8A / #172554, siehe :host-Block unten ) - dieses Plugin soll optisch mit den internen
 * specialPress/invoicePress-Werkzeugen (spt-kit-h.css) übereinstimmen statt mit dem alten Logo.
 *
 * Theme independence:
 *   :host { all: initial } neutralises every inherited property that would otherwise leak through the
 *   shadow boundary. All sizes are stated in px ( NOT rem — rem would resolve against the outer document
 *   root and re-introduce theme coupling ).
 *
 * ⚠️ FONTS ARE BUNDLED, NOT LOADED FROM A THIRD PARTY - copied verbatim from the explainer's
 * assets/fonts/ ( same reasoning applies here: wordpress.org forbids loading fonts from
 * fonts.googleapis.com, and the IP of every visitor uploading an invoice should not go to Google
 * either way ). font-display: swap for the same reason as there - the viewer's content should not stay
 * invisible while a font loads.
 */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-regular.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-500.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-700.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Inter'; font-style: italic; font-weight: 400; font-display: swap; src: url( '../fonts/inter-v20-latin/inter-v20-latin-italic.woff2' ) format( 'woff2' ); }

@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/space-grotesk-v22-latin/space-grotesk-v22-latin-700.woff2' ) format( 'woff2' ); }

@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-regular.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-600.woff2' ) format( 'woff2' ); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url( '../fonts/jetbrains-mono-v24-latin/jetbrains-mono-v24-latin-700.woff2' ) format( 'woff2' ); }

:host {
	all: initial;
	display: block;
	contain: layout style;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #0B1220;
	text-align: left;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

/* design tokens ( logo palette + explainer's neutral grayscale ) */
:host {
	/* ⚠️ 18.09.2026: Markenfarben (Blaugrün/Orange) auf Wunsch durch Kit-H-Navy ersetzt - widerruft die
	 * 01.09.2026-Entscheidung ("Markenfarben bleiben bewusst unangetastet"), siehe STATUS.md. Werte
	 * identisch zu spt-kit-h.css's --accent/--accent-2/--accent-soft, damit dieses Plugin optisch mit
	 * den internen Werkzeugen (Kit H) übereinstimmt statt mit dem alten Logo-Blaugrün/Orange. */
	--spev-primary:        #1E3A8A;   /* Kit H --accent */
	--spev-primary-dark:   #172554;   /* Kit H --accent-2 */
	--spev-primary-darker: #0F1938;
	--spev-primary-soft:   #DCE2F5;   /* light header tab ( empty sections ) */
	--spev-primary-faint:  #E7EBFB;   /* sub-group tab ( a group nested inside a card, e.g. BG-12 ) */
	--spev-primary-tint:   #EEF2FF;   /* field value background - Kit H --accent-soft */
	--spev-accent:         #172554;   /* emphasis/active state - Kit H --accent-2 */
	--spev-accent-dark:    #0F1938;
	--spev-accent-soft:    #DCE2F5;
	--spev-surface:        #ffffff;
	--spev-muted-surface:  #F7F8FA;   /* echt neutral, wie --panel-alt im Explainer ( war #f4f8fa, blaustichig ) */
	--spev-border:         #D5D8DE;   /* echt neutral, wie --rule ( war #cddbe3 ) */
	--spev-border-strong:  #B8BDC7;   /* wie --rule-strong ( war #a9c0cc ) */
	--spev-text:           #0B1220;   /* wie --ink ( war #1f2a30 ) */
	--spev-text-muted:     #4A5468;   /* wie --ink-2 ( war #5d6b73 ) */
	--spev-text-faint:     #7A8399;   /* wie --ink-3 - neu, fuer Mikro-Typografie ( Eyebrows, Labels ) */
	--spev-error:          #B42318;   /* wie --error im Explainer, statt des bisherigen inline #b91c1c */
	--spev-radius:         0;         /* eckig */
}

.spev-viewer,
.spev-viewer *,
.spev-viewer *::before,
.spev-viewer *::after {
	box-sizing: border-box;
}

.spev-viewer {
	color: var( --spev-text );
	position: relative;   /* anchors .spev-tooltip - see spev-uploader.js:initTooltips() */
}

/*
 * The custom BT/BG tooltip (spev-uploader.js:initTooltips()), replacing the native `title` box a
 * `.spev-bt` badge used to carry - a browser tooltip is drawn by the OS chrome and can never pick up
 * this stylesheet, so it could not be made to match the rest of the layout no matter what was tried
 * here; this is the actual fix; see AbstractTemplate::bt()'s doc block for the other half.
 */

.spev-tooltip {
	position: absolute;
	z-index: 50;
	max-width: 320px;
	padding: 10px 12px;
	background: var( --spev-surface );
	border: 1px solid var( --spev-border-strong );
	border-left: 3px solid var( --spev-primary );
	box-shadow: 0 4px 16px rgba( 11, 18, 32, 0.14 );
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.45;
	color: var( --spev-text );
	pointer-events: none;   /* a hover leaving the badge for the tooltip itself would otherwise re-fire mouseout on the badge and hide it mid-read */

	/* CII/UBL paths ( "/rsm:CrossIndustryInvoice/…/ram:BuyerTradeParty/ram:Name" ) are one unbroken
	   token far wider than max-width - without this they overflow the box instead of wrapping, see
	   Screenshot 2026-09-04 115744.png. overflow-wrap alone would still prefer breaking at the ':' /
	   '/' that XPath already has, but Chrome/Firefox only honour that AFTER trying a whole-word break
	   first, which fails here because there is no space in the string; break-word as the word-break
	   fallback forces the break to happen at all. */
	overflow-wrap: break-word;
	word-break: break-word;
}

.spev-tooltip-core {
	font-weight: 600;
	color: var( --spev-text );
	margin-bottom: 6px;
}

.spev-tooltip-ext {
	padding-top: 6px;
	border-top: 1px solid var( --spev-border );
	display: flex;
	flex-direction: column;
	gap: 3px;
}

.spev-tooltip-line {
	font-size: 11.5px;
	color: var( --spev-text-muted );
}

.spev-tooltip-label {
	font-weight: 600;
	color: var( --spev-text );
}

/* ---------------------------------------------------------------- uploader */

/*
 * ⚠️ THE 900px CAP MOVED HERE FROM .spev-viewer, NOT REMOVED - Ralf, 10.09.2026, same width audit
 * that already fixed the KoSIT validator's own .spkv-root/.drop split ( see
 * einvoice-validator-for-peppol-en16931/STATUS.md ). .spev-viewer wraps the dropzone AND the
 * rendered invoice ( .spev-result ) in one box, so the invoice - card grid, tables, the toolbar -
 * inherited the dropzone's own comfortable-reading-width cap for no reason of its own, wasting real
 * width on any page whose content column is wider than the cap. .spev-grid's 2-column layout is
 * percentage-based ( minmax( 0, 1fr ) ), so it simply grows wider, no breakage.
 *
 * ⚠️ 900px, NOT THE ORIGINAL 1040px - Ralf, 10.09.2026: "die Grösse des Upload-Dialogs
 * vereinheitlichen" across all three upload tools. 900px was already the KoSIT validator's own
 * ( einvoice-validator-for-peppol-en16931/assets/css/spkv-validator.css's .drop ) and the
 * Explainer's own Rule Browser modal width ( spx-explainer.css's .modal ) - the Viewer's 1040px was
 * the odd one out, not the other way round, so this moved to match rather than the other two moving
 * up. min-height/padding/gap were already identical across all three before this - only max-width
 * differed.
 */
.spev-dropzone {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 150px;
	padding: 28px;
	max-width: 900px;
	margin: 0 auto;
	border: 2px dashed var( --spev-border-strong );
	border-radius: var( --spev-radius );
	background: var( --spev-muted-surface );
	text-align: center;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.spev-dropzone:hover,
.spev-dropzone:focus {
	border-color: var( --spev-primary );
	background: var( --spev-primary-tint );
	outline: none;
}

.spev-dropzone.spev-dragover {
	border-color: var( --spev-accent );
	background: var( --spev-accent-soft );
}

.spev-dropzone.spev-busy {
	opacity: .6;
	pointer-events: none;
}

.spev-dropzone-inner {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.spev-dropzone-text {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 16px;
}

.spev-dropzone-hint {
	font-size: 13px;
	color: var( --spev-text-muted );
}

.spev-dropzone.spev-busy::after {
	content: "";
	position: absolute;
	width: 26px;
	height: 26px;
	border: 3px solid var( --spev-primary-soft );
	border-top-color: var( --spev-accent );
	border-radius: 50%;
	animation: spev-spin .8s linear infinite;
}

@keyframes spev-spin {
	to { transform: rotate( 360deg ); }
}

.spev-message {
	margin: 12px 0;
	font-size: 14px;
}

.spev-message.spev-error { color: var( --spev-error ); }
.spev-message.spev-info  { color: var( --spev-text-muted ); }

.spev-result { margin-top: 16px; }

.spev-bt-toggle-wrap {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 4px 0 14px;
	font-size: 14px;
	color: var( --spev-text-muted );
	cursor: pointer;
	user-select: none;
}

.spev-bt-toggle-wrap input { margin: 0; }

/* ---------------------------------------------------------- invoice canvas */

.spev-invoice {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* hero / document head */

.spev-hero {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	padding: 20px 22px;
	border-radius: var( --spev-radius );
	background: linear-gradient( 135deg, var( --spev-primary-dark ) 0%, var( --spev-primary ) 100% );
	color: #ffffff;
	border-bottom: 3px solid var( --spev-accent );
}

.spev-hero-main { min-width: 0; }

.spev-hero-type {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #e6eef2;
}

.spev-hero-no {
	margin-top: 4px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	word-break: break-word;
}

.spev-hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 22px;
	margin-top: 12px;
	font-size: 13px;
	color: #e6eef2;
}

.spev-hero-meta b {
	display: block;
	font-weight: 600;
	color: #ffffff;
	font-size: 14px;
}

.spev-hero-amount {
	flex: 0 0 auto;
	text-align: right;
	padding: 12px 18px;
	border-radius: var( --spev-radius );
	background: var( --spev-accent );
	color: #ffffff;
}

.spev-hero-amount > span {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #fff0df;
}

.spev-hero-amount b {
	font-size: 22px;
	font-weight: 700;
	white-space: nowrap;
}

/* disclaimer note */

.spev-disclaimer {
	padding: 9px 14px;
	border: 1px solid #f3d39a;
	background: var( --spev-accent-soft );
	border-radius: var( --spev-radius );
	font-size: 13px;
	color: #8a5a12;
	text-align: center;
}

/* card grid */

.spev-grid {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 16px;
	align-items: start;
}

.spev-grid > .spev-span-2 { grid-column: 1 / -1; }

@media ( max-width: 720px ) {
	.spev-grid { grid-template-columns: minmax( 0, 1fr ); }
}

/* position group */

.spev-pos {
	border: 1px solid var( --spev-border );
	border-left: 4px solid var( --spev-primary );
	background: var( --spev-muted-surface );
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.spev-pos-head {
	font-family: 'Space Grotesk', sans-serif;
	font-size: 15px;
	font-weight: 700;
	color: var( --spev-primary-dark );
}

/* card */

.spev-card {
	background: var( --spev-surface );
	border: 1px solid var( --spev-border );
	border-radius: var( --spev-radius );
}

/* the header tab : only as wide as its text, sitting at the top-left ( QUBA style ) */

.spev-card-head {
	display: inline-block;
	max-width: 100%;
	padding: 7px 16px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: #ffffff;
	background: var( --spev-primary-dark );
	word-break: break-word;
}

/* empty section → light tab with dark text */

.spev-card--empty .spev-card-head {
	background: var( --spev-primary-soft );
	color: var( --spev-primary-dark );
}

.spev-card-body { padding: 12px 16px 16px; }
.spev-card-body--flush { padding: 0; }

/* field rows ( label + value box ) — always rendered, even when empty */

.spev-fields {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.spev-field {
	display: grid;
	grid-template-columns: 42% 1fr;
	gap: 12px;
	align-items: start;
}

.spev-field-label {
	font-size: 13px;
	color: var( --spev-text-muted );
	padding-top: 7px;
	word-break: break-word;
}

.spev-field-value {
	display: block;
	min-height: 32px;
	padding: 6px 10px;
	font-size: 14px;
	color: var( --spev-text );
	background: var( --spev-primary-tint );
	border-radius: var( --spev-radius );
	word-break: break-word;
	white-space: pre-wrap;
}

.spev-field-value.spev-empty {
	color: var( --spev-text-faint );
	font-style: italic;
}

a.spev-field-value.spev-link {
	color: var( --spev-accent-dark );
	text-decoration: underline;
	cursor: pointer;
}

/* sub-heading inside a card — a business group nested in another group ( e.g. BG-12 inside BG-11 ).
 *
 * Same tab shape as a card header so it reads as one system, but smaller and in a fainter tint: the
 * dark / light card tab keeps meaning "carries data / is empty", and this third level means "nested
 * group". align-self / justify-self are required because .spev-fields is a flex ( and in span-2 cards
 * a grid ) container, which blockifies the inline-block and would stretch the tab to full width.
 */

.spev-subhead {
	display: inline-block;
	align-self: flex-start;
	max-width: 100%;
	margin: 6px 0 2px;
	padding: 5px 12px;
	font-family: 'Space Grotesk', sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.3;
	color: var( --spev-primary-dark );
	background: var( --spev-primary-faint );
	word-break: break-word;
}

.spev-subhead .spev-bt {
	color: var( --spev-primary-dark );
	background: rgba( 56, 86, 102, .10 );
}

/* span-2 cards lay their fields out in two columns ( sub-headings span the full width ) */

.spev-card.spev-span-2 .spev-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 28px;
	align-items: start;
}

.spev-card.spev-span-2 .spev-subhead {
	grid-column: 1 / -1;
	justify-self: start;
}

@media ( max-width: 720px ) {
	.spev-card.spev-span-2 .spev-fields { grid-template-columns: 1fr; }
}

/* tables ( vat / charges ) */

.spev-table-wrap { overflow-x: auto; }

.spev-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}

.spev-table th {
	text-align: left;
	background: var( --spev-muted-surface );
	color: var( --spev-text-muted );
	font-weight: 600;
	padding: 9px 12px;
	border-bottom: 1px solid var( --spev-border );
	white-space: nowrap;
}

.spev-table td {
	padding: 9px 12px;
	border-bottom: 1px solid var( --spev-border );
	vertical-align: top;
}

.spev-table tbody tr:last-child td { border-bottom: 0; }

.spev-num { text-align: right; white-space: nowrap; }

/* BT/BG badge stacked above a table cell's value ( allowances/charges, VAT breakdown ) - .spev-bt's
   own margin-left is meant for sitting inline after text, not as the first thing on its own line. */
.spev-cell-bt { margin-bottom: 3px; }
.spev-cell-bt .spev-bt { margin-left: 0; }

/* totals */

.spev-totals-list {
	display: flex;
	flex-direction: column;
}

.spev-totals-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 9px 16px;
	font-size: 14px;
}

.spev-totals-row:not( :last-child ) {
	border-bottom: 1px solid var( --spev-border );
}

.spev-totals-row span { color: var( --spev-text-muted ); }
.spev-totals-row b    { font-weight: 600; white-space: nowrap; }

.spev-totals-row.spev-grand {
	background: var( --spev-primary-tint );
	font-size: 16px;
}

.spev-totals-row.spev-grand span,
.spev-totals-row.spev-grand b { color: var( --spev-primary-dark ); font-weight: 700; }

.spev-totals-row.spev-due {
	background: var( --spev-accent-soft );
}

.spev-totals-row.spev-due span,
.spev-totals-row.spev-due b { color: var( --spev-accent-dark ); font-weight: 700; }

/* ---- BT ( Business Term ) badges : hidden unless toggled on ---- */

.spev-bt {
	display: none;
	margin-left: 6px;
	padding: 1px 6px;
	font-size: 11px;
	font-weight: 600;
	font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	color: var( --spev-primary-dark );
	background: var( --spev-primary-soft );
	border-radius: var( --spev-radius );
	vertical-align: middle;
	white-space: nowrap;
	cursor: help;
}

.spev-bt:focus-visible { outline: 2px solid var( --spev-primary ); outline-offset: 1px; }

/* badges sitting on a dark surface */
.spev-hero .spev-bt,
.spev-card-head .spev-bt {
	color: #ffffff;
	background: rgba( 255, 255, 255, .25 );
}

.spev-card--empty .spev-card-head .spev-bt {
	color: var( --spev-primary-dark );
	background: rgba( 56, 86, 102, .14 );
}

.spev-result.spev-show-bt .spev-bt {
	display: inline-block;
}

/* ---------------------------------------------------------- action toolbar
   One small, deliberately understated row for the KoSIT-validate and Excel-export buttons - moved
   above .spev-result 09.09.2026 ( feedback: both used to sit in their own full-width boxes AFTER the
   rendered invoice, several screens down for a long ZUGFeRD Extended document ). Plain flex row with
   no fixed child count, so a future third button ( UBL<->CII convert, say ) just adds another
   .spev-toolbar-btn - no layout rework needed. Empty ( both buttons hidden ) collapses to nothing,
   `gap` only applies between VISIBLE children so no stray space is left behind either. */

.spev-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 2px;
}

.spev-toolbar-btn {
	font-family: inherit;
	font-size: 12.5px;
	font-weight: 500;
	padding: 6px 12px;
	border: 1px solid var( --spev-border );
	border-radius: var( --spev-radius );
	background: var( --spev-surface );
	color: var( --spev-text-muted );
	cursor: pointer;
	transition: background .12s ease, color .12s ease, border-color .12s ease;
}

.spev-toolbar-btn:hover {
	background: var( --spev-muted-surface );
	color: var( --spev-text );
	border-color: var( --spev-primary );
}

.spev-toolbar-btn:disabled { opacity: .5; cursor: default; }

/* ---------------------------------------------------------- KoSIT validator bridge
   Button and result area for the additional, optional server-side XML validation this plugin can
   hand off to einvoice-validator-for-peppol-en16931 when it is present and active - see
   class-spev-plugin.php::enqueue_assets() and spev-uploader.js::validateWithKosit().

   ⚠️ .spkv-result-head / .spkv-download / .spkv-report-frame ARE NOT THIS PLUGIN'S OWN CLASSES -
   they are built by window.SPKV_renderReport() ( spkv-uploader.js ) and reused here verbatim rather
   than reinvented. spkv-validator.css itself is deliberately never loaded on THIS plugin's page
   ( its .drop / .drop-title / .drop-sub selectors are unscoped, correct only inside ITS OWN shadow
   root - see SPKV_Plugin::enqueue_bridge_script() ), so the handful of classes
   window.SPKV_renderReport() actually emits is restyled here instead, once, with this plugin's own
   tokens - kept in sync by eye with spkv-validator.css's own copy, the same "shared family, no
   shared file" pattern this plugin's fonts and dropzone already follow. */

/* ⚠️ NO BORDER/BACKGROUND BOX HERE ANYMORE - suite-todo feedback 09.09.2026. This div used to hold
   the button too, so a visible box made sense even before a click. Now it only holds the message and
   the report result, both empty until the ( now separate, see .spev-toolbar above ) button is
   actually clicked - a bordered box with nothing in it would just be visual noise sitting above the
   invoice. `:empty` alone will not do here: it still has whitespace/comment text nodes from the PHP
   template, so this relies on the message/result children staying empty rather than the div itself. */

.spev-kosit-check { margin-top: 4px; }

.spev-kosit-message {
	font-size: 13px;
	margin: 4px 0;
}

.spev-kosit-message.spev-error { color: var( --spev-error ); }
.spev-kosit-message.spev-info  { color: var( --spev-text-muted ); }

.spkv-result-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	background: var( --spev-muted-surface );
	border-top: 1px solid var( --spev-border );
	border-bottom: 1px solid var( --spev-border );
	font-size: 13px;
	color: var( --spev-text-muted );
}

.spkv-download {
	font-family: inherit;
	font-weight: 600;
	font-size: 13px;
	padding: 7px 14px;
	border: 1px solid var( --spev-primary );
	border-radius: var( --spev-radius );
	background: var( --spev-primary );
	color: #fff;
	cursor: pointer;
	transition: background .12s ease, border-color .12s ease;
}

.spkv-download:hover {
	background: var( --spev-primary-dark );
	border-color: var( --spev-primary-dark );
}

.spkv-report-frame {
	display: block;
	width: 100%;
	height: 70vh;
	border: 0;
}

@media ( max-width: 700px ) {
	.spkv-report-frame { height: 60vh; }
}

/* ---------------------------------------------------------- Excel exporter bridge
   Button for the additional, optional Excel export this plugin can hand off to
   einvoice-viewer-exporter when it is present and active - see
   class-spev-plugin.php::enqueue_assets() and spev-uploader.js::exportInvoice(). Unlike the KoSIT
   bridge above, the exporter has no rendered result to display ( it triggers a file download ), so
   there is no equivalent to .spkv-result-head/.spkv-download/.spkv-report-frame to restyle here. */

/* ⚠️ NO BORDER/BACKGROUND BOX HERE ANYMORE, SAME REASONING AS .spev-kosit-check ABOVE - the button
   moved into .spev-toolbar, this div now only ever holds a short message. */

.spev-export-check { margin-top: 4px; }

.spev-export-message {
	font-size: 13px;
	margin: 4px 0;
}

.spev-export-message.spev-error { color: var( --spev-error ); }
.spev-export-message.spev-info  { color: var( --spev-text-muted ); }

/* ---------------------------------------------------------- Visualizer bridge
   Layout <select> + button for the additional, optional print-layout view this plugin can hand off
   to einvoice-viewer-visualizer when it is present and active - see
   class-spev-plugin.php::enqueue_assets() and spev-uploader.js::visualizeInvoice(). Opens its result
   in a new window rather than inline, so - same reasoning as the exporter bridge above - there is no
   result area to restyle here, only a short status message. */

.spev-toolbar-select {
	font-family: inherit;
	font-size: 12.5px;
	padding: 5px 8px;
	border: 1px solid var( --spev-border );
	border-radius: var( --spev-radius );
	background: var( --spev-surface );
	color: var( --spev-text-muted );
}

.spev-visualizer-check { margin-top: 4px; }

.spev-visualizer-message {
	font-size: 13px;
	margin: 4px 0;
}

.spev-visualizer-message.spev-error { color: var( --spev-error ); }
.spev-visualizer-message.spev-info  { color: var( --spev-text-muted ); }

/* ---------------------------------------------------------- Identifier Check bridge
   Results table for the additional, optional identifier formal-check / online-check this plugin can
   hand off to einvoice-viewer-identifier-check when it is present and active - see
   class-spev-plugin.php::enqueue_assets() and spev-uploader.js::runIdentifierCheck(). Rendered
   INLINE ( no popup, unlike the Visualizer ) since the result is a small table, not a printable
   document. */

.spev-identifier-check { margin-top: 4px; }

.spev-identifier-check-message {
	font-size: 13px;
	margin: 4px 0;
}

.spev-identifier-check-message.spev-error { color: var( --spev-error ); }
.spev-identifier-check-message.spev-info  { color: var( --spev-text-muted ); }

.spev-identifier-check-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 4px;
}

.spev-identifier-check-table th,
.spev-identifier-check-table td {
	text-align: left;
	padding: 4px 8px;
	border-bottom: 1px solid var( --spev-border );
}

.spev-identifier-check-table th {
	font-weight: 600;
	color: var( --spev-text-muted );
}

/* ✓ / ✗ / – badges - deliberately just colour + symbol, no icon font dependency. The 'title'
   attribute set in spev-uploader.js carries the machine reason ( e.g. "checksum-failed" ) as a
   native tooltip, so nothing here needs to render that text directly. */

.spev-idcheck-valid   { color: #067647; font-weight: 700; }
.spev-idcheck-invalid { color: var( --spev-error ); font-weight: 700; }
.spev-idcheck-unknown { color: var( --spev-text-muted ); }

/* --------------------------------------------------------------- Inbound Check bridge
   Findings list for the additional, optional check against the site's own buyer master data and
   supplier list this plugin can hand off to einvoice-viewer-inbound-check when it is present and
   active - see class-spev-plugin.php::enqueue_assets() and spev-uploader.js::runInboundCheck().
   Every finding carries an explanation (never a bare traffic light), so this is a list of short
   cards, not a compact badge table like the Identifier Check above. Colours reuse the same tokens/
   literal as the rest of this file - --spev-error for 'fatal', --spev-accent for 'warning' (already
   the family's orange-attention colour), the same #067647 green 'valid' already uses for 'ok', and
   the muted text colour for 'info'. */

.spev-inbound-check { margin-top: 4px; }

.spev-inbound-check-message {
	font-size: 13px;
	margin: 4px 0;
}

.spev-inbound-check-message.spev-error { color: var( --spev-error ); }
.spev-inbound-check-message.spev-info  { color: var( --spev-text-muted ); }

.spev-inbound-check-list {
	list-style: none;
	margin: 4px 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.spev-inbound-finding {
	border-left: 3px solid var( --spev-border );
	background: var( --spev-muted-surface );
	border-radius: 4px;
	padding: 6px 10px;
	font-size: 13px;
}

.spev-inbound-finding strong { display: block; margin-bottom: 2px; }
.spev-inbound-finding p      { margin: 0; color: var( --spev-text-muted ); }

.spev-inbound-fatal   { border-left-color: var( --spev-error ); }
.spev-inbound-warning { border-left-color: var( --spev-accent ); }
.spev-inbound-ok      { border-left-color: #067647; }
.spev-inbound-info    { border-left-color: var( --spev-text-muted ); }

.spev-inbound-adopt-btn {
	margin-top: 4px;
	font-size: 12px;
	padding: 3px 10px;
	border: 1px solid var( --spev-primary );
	border-radius: 4px;
	background: var( --spev-surface );
	color: var( --spev-primary-dark );
	cursor: pointer;
}

.spev-inbound-adopt-btn:hover    { background: var( --spev-primary-tint ); }
.spev-inbound-adopt-btn:disabled { opacity: .6; cursor: default; }