/* USt-IdNr-Pruefung: Feld, Pruefknopf, Statuszeile.
 *
 * Kili, 03.09.2026: „eher einen kleinen Button daneben, vielleicht mit Pruef-Icon, dann
 * kann das feedback auch darueber ausgegeben werden, oder halt Button, der dann
 * verschwindet wenn positives Feedback mit gruenem Rahmen und Haken im Feld."
 * Umgesetzt sind BEIDE Haelften: Knopf neben dem Feld, und nach der Bestaetigung
 * verschwindet er zugunsten von gruenem Rahmen und Haken im Feld.
 *
 * ZWEI TOKEN JE FARBE, NICHT EINS. Die Kasse definiert --spfk-ok/-bad nur fuer den
 * Hellmodus und laesst sie nachts unveraendert stehen. Gemessen gegen die tatsaechlichen
 * Gruende (hell #ffffff, dunkel #17181a):
 *   --spfk-ok-deep  #177a35   hell 5,42:1 ✓   dunkel 3,27:1 ✗
 *   --spfk-ok       #22a447   dunkel 5,47:1 ✓
 *   --spfk-bad-deep #a5251d   hell 7,29:1 ✓
 *   --spfk-bad      #e0453c   dunkel 4,30:1 ✗ (unter 4,5 — deshalb #ff6b61 mit 6,37:1)
 * Deshalb eigene Token, die je Modus umgeschaltet werden. Dieselbe Regel wie bei der
 * Akzentfarbe als Text.
 *
 * Das Feld steht nicht nur an der Kasse, sondern auch im Konto unter „Adressen". Dort
 * gibt es `body.spf-kasse-v3` nicht — jedes uebernommene Token braucht daher einen
 * eigenen Rueckfallwert.
 */

.bsl-vat {
	--bsl-ok:       #177a35;
	--bsl-ok-line:  #22a447;
	--bsl-ok-soft:  rgba( 34, 164, 71, .10 );
	--bsl-bad:      #a5251d;
	--bsl-bad-line: #e0453c;
	--bsl-bad-soft: rgba( 224, 69, 60, .08 );
	--bsl-ink:      var( --spfk-ink, #16181c );
	--bsl-muted:    var( --spfk-muted, #5b6270 );
	--bsl-line:     var( --spfk-border, #d7d9dc );
	--bsl-panel:    var( --spfk-panel, #ffffff );
	--bsl-radius:   var( --spfk-r-s, 10px );
}

html.spf-night .bsl-vat,
body.spf-night .bsl-vat {
	--bsl-ok:       #3ec46a; /* 7,87:1 auf #17181a */
	--bsl-bad:      #ff6b61; /* 6,37:1 auf #17181a */
	--bsl-ok-soft:  rgba( 62, 196, 106, .12 );
	--bsl-bad-soft: rgba( 255, 107, 97, .12 );
}

/* ---------- Zeile: Feld + Knopf ---------- */

.bsl-vat__zeile {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.bsl-vat__zeile > input {
	flex: 1 1 auto;
	/* minmax-Ersatz fuer Flex: ohne min-width:0 waechst ein Eingabefeld ueber seine
	   Spalte hinaus, weil sein Standard-`size` eine Mindestbreite erzeugt. */
	min-width: 0;
}

/* ---------- Pruefknopf ----------
   Kein eigener Knopf: `.bso-btn` mit `--ter` (nur Kante) und `--s` (klein) kommt aus
   spf-buttons.css. Nur was diese Rolle NICHT mitbringt, steht hier — die Bindung an die
   Feldhoehe und das Icon. */

.bsl-vat__knopf {
	flex: 0 0 auto;
	/* 44px ist die Untergrenze fuer Zeigeflaechen; die Feldhoehe liegt darueber und
	   gewinnt, damit Knopf und Feld buendig sind. */
	min-height: 44px;
	gap: 7px;
}

.bsl-vat__knopf svg {
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.bsl-vat__knopf[disabled] {
	cursor: progress;
}

/* Wartezustand: der Ring dreht sich, der Text bleibt stehen. */
.bsl-vat__knopf.is-laeuft svg {
	animation: bsl-vat-dreh 900ms linear infinite;
}

@keyframes bsl-vat-dreh {
	to { transform: rotate( 360deg ); }
}

@media ( prefers-reduced-motion: reduce ) {
	.bsl-vat__knopf.is-laeuft svg { animation: none; opacity: .55; }
}

/* ---------- Bestaetigtes Feld ----------
   Der Haken sitzt IM Feld. Er ist Dekoration — die Aussage steht als Text in der
   Statuszeile, damit sie auch ohne Farbwahrnehmung und mit Vorleseprogramm ankommt. */

.bsl-vat.is-ok .bsl-vat__zeile > input {
	border-color: var( --bsl-ok-line ) !important;
	background-color: var( --bsl-ok-soft );
	padding-right: 38px;
}

.bsl-vat__haken {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY( -50% );
	width: 18px;
	height: 18px;
	color: var( --bsl-ok );
	pointer-events: none;
}

.bsl-vat__zeile { position: relative; }

.bsl-vat.is-bad .bsl-vat__zeile > input {
	border-color: var( --bsl-bad-line ) !important;
	background-color: var( --bsl-bad-soft );
}

/* ---------- Statuszeile ---------- */

.bsl-vat__status {
	display: flex;
	align-items: flex-start;
	gap: 7px;
	margin: 7px 0 0;
	font-size: 14px;
	line-height: 1.45;
	color: var( --bsl-muted );
}

.bsl-vat__status:empty { display: none; }

.bsl-vat__status svg {
	width: 16px;
	height: 16px;
	flex: 0 0 auto;
	margin-top: 2px;
}

.bsl-vat__status.is-ok  { color: var( --bsl-ok ); }
.bsl-vat__status.is-bad { color: var( --bsl-bad ); }

/* ---------- Schmale Fenster ----------
   Unter 420px stehen Feld und Knopf untereinander: nebeneinander bliebe fuer die
   Nummer zu wenig Platz, und ATU12345678 soll vollstaendig lesbar sein. */

@media ( max-width: 420px ) {
	.bsl-vat__zeile { flex-wrap: wrap; }
	.bsl-vat__zeile > input { flex: 1 1 100%; }
	.bsl-vat__knopf { width: 100%; }
	.bsl-vat.is-ok .bsl-vat__zeile > input { padding-right: 38px; }
}