/* eInvoice Viewer — Technical Details: Rule Browser + Reference Browser, rendered inside a Shadow DOM
 * ( theme-isolated, same construction as the family's other shortcodes ).
 *
 * Same design tokens as einvoice-viewer-for-peppol-en16931's spev-viewer.css - Inter / Space Grotesk /
 * JetBrains Mono, "eckig" ( no border-radius ) - so this add-on reads as part of the same product, not
 * a bolted-on tool with its own look.
 *
 * ⚠️ 18.09.2026: Markenfarbe (Blaugrün/Orange) durch Kit-H-Navy ersetzt, siehe spev-viewer.css's
 * eigener Kommentar für die volle Begründung - dasselbe hier, damit beide Plugins optisch übereinstimmen.
 */

@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: '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: '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' ); }

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

:host {
	--svtd-primary:       #1E3A8A;
	--svtd-primary-dark:  #172554;
	--svtd-accent:        #172554;
	--svtd-surface:       #ffffff;
	--svtd-muted-surface: #F7F8FA;
	--svtd-border:        #D5D8DE;
	--svtd-border-strong: #B8BDC7;
	--svtd-text:          #0B1220;
	--svtd-text-muted:    #4A5468;
	--svtd-text-faint:    #7A8399;
	--svtd-error:         #B42318;
	--svtd-error-bg:      #FEF3F2;
	--svtd-warn:          #B54708;
	--svtd-warn-bg:       #FFFAEB;
}

.svtd-root, .svtd-root *, .svtd-root *::before, .svtd-root *::after { box-sizing: border-box; }

.svtd-root {
	/*
	 * ⚠️ NO max-width HERE ON PURPOSE - Ralf, 10.09.2026, same width audit as the Viewer/Validator/
	 * Explainer ( see those plugins' own STATUS.md ). Unlike those, .svtd-root has no separate
	 * dropzone/upload element to protect a comfortable-reading-width cap for - it IS the table
	 * ( Field/Rule/Reference Browser ), and a wide table ( five to seven columns, one of them free
	 * text ) is exactly the content that benefits most from real width, not the content a cap should
	 * protect. Removed outright rather than raised to a larger fixed number, since there is nothing
	 * here that needs ANY comfortable-reading-width behaviour the way a paragraph of prose would.
	 * <colgroup>'s <col> widths ( class-svtd-renderer.php ) are already percentage-based, so a wider
	 * .svtd-root just gives every column more room, no breakage.
	 */
	color: var( --svtd-text );
	/* ⚠️ MUST BE EXPLICIT, NOT INHERITED FROM :host. Measured live: the theme's own
	   "body.open_sans { font-family: ... }" rule has higher specificity (0,1,1) than a bare
	   ":host { font-family: ... }" (0,1,0) and wins the cascade for the shadow HOST's own computed
	   style - :host's declaration never even applies to the host element, so nothing is left for the
	   shadow tree to inherit, and every element without its own font-family (.svtd-severity,
	   .svtd-text, .svtd-label) silently fell back to the theme's "Open Sans" instead of Inter. A rule
	   INSIDE the shadow tree can't lose that fight - no outer stylesheet can select past the shadow
	   boundary - so declaring it again here, not just on :host, is what actually protects it. */
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.svtd-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	background: var( --svtd-surface );
	border: 1px solid var( --svtd-border );
	border-bottom: 0;
}

.svtd-search {
	flex: 1;
	min-width: 200px;
	padding: 8px 12px;
	border: 1px solid var( --svtd-border );
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var( --svtd-text );
	background: var( --svtd-surface );
}

.svtd-search:focus { outline: none; border-color: var( --svtd-primary ); }

.svtd-filter-standard, .svtd-filter-severity, .svtd-filter-kind, .svtd-filter-scope, .svtd-list-picker {
	padding: 7px 10px;
	border: 1px solid var( --svtd-border );
	background: var( --svtd-surface );
	color: var( --svtd-text );
	font-family: 'Inter', sans-serif;
	font-size: 13px;
}

.svtd-picker-form { margin-bottom: 10px; }

.svtd-picker-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --svtd-text-muted );
}

.svtd-stats {
	padding: 8px 16px;
	background: var( --svtd-muted-surface );
	border: 1px solid var( --svtd-border );
	border-bottom: 0;
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --svtd-text-muted );
}

.svtd-table-wrap {
	overflow-x: auto;
	border: 1px solid var( --svtd-border );
	max-height: 75vh;
	overflow-y: auto;
}

.svtd-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	background: var( --svtd-surface );
	/* ⚠️ FIXED, NOT AUTO. table-layout: auto sizes each column from the WIDEST content among the
	   currently visible rows - typing into the search box hides most rows, the widest survivor per
	   column changes, and every column jumps to a new width on every keystroke. Fixed layout takes
	   its widths from the <colgroup> below (or a resize the user made, see .svtd-table-resizable)
	   and never recomputes them from row content, so filtering can't move the columns. */
	table-layout: fixed;
}

.svtd-table thead th {
	position: sticky;
	top: 0;
	z-index: 1;
	text-align: left;
	background: var( --svtd-muted-surface );
	color: var( --svtd-text-muted );
	font-weight: 600;
	font-family: 'Space Grotesk', sans-serif;
	padding: 9px 12px;
	border-bottom: 1px solid var( --svtd-border );
	white-space: nowrap;
	/* ⚠️ NOT overflow: hidden. That would also clip .svtd-col-resizer below, which deliberately
	   pokes out 4px past the header's own right edge so its hit area straddles the column boundary -
	   clipped, it stops being clickable right where a user's eye and cursor actually land. A long
	   header label truncating itself is the lesser problem; these five/two labels are short enough
	   in practice that it never triggers anyway. */
}

/*
 * Column resize handles (svtd.js). A thin invisible strip on the right edge of every <th> except the
 * last - the last column absorbs whatever width the others give up, so it never needs its own handle
 * (dragging a handle that has nothing to its right to shrink into would just overflow the table).
 */

.svtd-col-resizer {
	position: absolute;
	top: 0;
	/* ⚠️ INSIDE THE COLUMN'S OWN BOX, NOT STRADDLING THE BORDER. A first version used "right: -4px" so
	   the handle's grab area would straddle the column boundary the way a spreadsheet's does - but that
	   pokes it 4px into the NEXT <th>, and that <th> is a later sibling at the same stacking level, so
	   it paints on top and silently eats every click in the overlapping strip (measured: dragging there
	   just text-selected the next header's label instead of resizing anything). Keeping the handle fully
	   inside its own <th> means it can never be under a sibling, at the cost of the grab area feeling
	   ever so slightly left of the visible border - an acceptable trade for it actually being clickable.
	*/
	right: 0;
	width: 8px;
	height: 100%;
	cursor: col-resize;
	user-select: none;
	touch-action: none;
	z-index: 2;
}
.svtd-col-resizer:hover, .svtd-col-resizer.svtd-resizing { background: var( --svtd-primary ); opacity: 0.35; }

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

.svtd-table tbody tr:hover { background: var( --svtd-muted-surface ); }

.svtd-table tbody tr.svtd-row-hidden { display: none; }

.svtd-rule-id, .svtd-code {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 12px;
	color: var( --svtd-primary-dark );
	white-space: nowrap;
}

/*
 * ⚠️ THE RULE-ID COLUMN WRAPS INSTEAD, EVEN THOUGH .svtd-rule-id ITSELF STAYS nowrap ABOVE. With
 * table-layout: fixed (see .svtd-table) a nowrap cell no longer shrinks the column to fit - it
 * overflows the fixed width and visibly bleeds into the next cell instead (measured: "PEPPOL-
 * EN16931-R001" running straight into "Error (fatal)" with no gap). A rule id is exactly the thing
 * this browser is searched BY, so truncating it with an ellipsis would hide the one column a lookup
 * most needs to read in full - wrapping the CELL, not the text run, keeps the id completely readable
 * while still respecting the column width a resize/search can't be knocked out of.
 */
.svtd-table td.svtd-rule-id, .svtd-table td.svtd-standard { white-space: normal; word-break: break-word; }

.svtd-severity { white-space: nowrap; font-size: 12px; }

.svtd-severity[data-error="1"] { color: var( --svtd-error ); }
.svtd-severity[data-warn="1"]  { color: var( --svtd-warn ); }

/*
 * A light severity tint on the whole row, not just the Severity cell's text - the same idea as
 * .error-row / .warn-row in the sibling Explainer plugin's document view. "Information" gets a third
 * colour (blue) the two existing tokens don't cover, so it needs its own pair rather than reusing
 * --svtd-error/--svtd-warn.
 */

:host { --svtd-info: #175CD3; --svtd-info-bg: #EFF4FF; }

.svtd-row.svtd-sev-error { background: var( --svtd-error-bg ); }
.svtd-row.svtd-sev-warn  { background: var( --svtd-warn-bg ); }
.svtd-row.svtd-sev-info  { background: var( --svtd-info-bg ); }
.svtd-row.svtd-sev-error:hover { background: #FEE4E2; }
.svtd-row.svtd-sev-warn:hover  { background: #FEF0C7; }
.svtd-row.svtd-sev-info:hover  { background: #DBE7FE; }
.svtd-severity[data-info="1"]  { color: var( --svtd-info ); }

.svtd-standard {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var( --svtd-text-muted );
	white-space: nowrap;
}

.svtd-fields {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var( --svtd-primary-dark );
}

/* suite-todo 1.8 (h): Herkunft/Jurisdiktion columns - same muted treatment as .svtd-standard, since
   all three are short classification labels, not the row's actual content. */
.svtd-family, .svtd-jurisdiction {
	font-family: 'JetBrains Mono', monospace;
	font-size: 11px;
	color: var( --svtd-text-muted );
	white-space: nowrap;
}

.svtd-text, .svtd-label { color: var( --svtd-text ); }

/* ============================================================================================
 * FIELD BROWSER - expandable detail row ( class-svtd-renderer.php::field_browser(), svtd.js )
 * ============================================================================================ */

.svtd-row-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 600;
	font-size: 12px;
	color: var( --svtd-primary-dark );
	cursor: pointer;
}

.svtd-row-toggle-icon {
	display: inline-block;
	width: 0.8em;
	color: var( --svtd-text-faint );
}

.svtd-row-toggle-icon::before { content: '▸'; }
.svtd-row-toggle[aria-expanded="true"] .svtd-row-toggle-icon::before { content: '▾'; }

.svtd-row.svtd-row-expanded { background: var( --svtd-muted-surface ); }

/*
 * ⚠️ `svtd-row-hidden` on the DETAIL row is a SEPARATE mechanism from the same class on a summary
 * `.svtd-row` above - applyFilters() only ever queries `.svtd-row` (see svtd.js), so toggling a detail
 * row never confuses the search/filter pass, and filtering a summary row away always collapses its
 * detail via collapseRow() rather than leaving the two out of sync.
 */

.svtd-row-detail.svtd-row-hidden { display: none; }

.svtd-row-detail td {
	background: var( --svtd-muted-surface );
	padding: 14px 20px;
}

.svtd-detail { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }

.svtd-detail dt {
	font-family: 'Space Grotesk', sans-serif;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --svtd-text-muted );
	white-space: nowrap;
	padding-top: 2px;
}

.svtd-detail dd {
	margin: 0;
	color: var( --svtd-text );
	word-break: break-word;
}

.svtd-detail dd.svtd-mono {
	font-family: 'JetBrains Mono', monospace;
	font-size: 12px;
	color: var( --svtd-primary-dark );
}

.svtd-detail-ruleset { margin-bottom: 4px; }
.svtd-detail-ruleset:last-child { margin-bottom: 0; }
.svtd-detail-ruleset .svtd-standard { display: inline; font-weight: 600; margin-right: 6px; }

@media ( max-width: 700px ) {
	.svtd-toolbar { flex-direction: column; align-items: stretch; }
	.svtd-detail { grid-template-columns: 1fr; }
}