/* Anmeldeseite (/login): vollflaechiger Hintergrund, zentrierte Karte, Titel, Untertitel, Knoepfe, Fusszeile, Demo-Zugang.
   Alle Farben sind Tokens (--vml-*), Dunkelmodus ueber prefers-color-scheme und data-theme. Die Klasse vm-login setzt vm_login.js. */
:root.vm-login {
	--vml-bg: #f7f4f5;
	--vml-bg-glow-a: rgba(148, 21, 43, .10);
	--vml-bg-glow-b: rgba(102, 163, 206, .20);
	--vml-card: #ffffff;
	--vml-card-border: #e6dde0;
	--vml-shadow: 0 1px 2px rgba(60, 16, 28, .06), 0 12px 40px rgba(60, 16, 28, .12);
	--vml-text: #1f1a1c;
	--vml-muted: #4d4347;
	--vml-brand: #94152b;
	--vml-brand-hover: #700f2b;
	--vml-on-brand: #ffffff;
	--vml-link: #94152b;
	--vml-field-bg: #ffffff;
	--vml-field-border: #8a7e83;
	--vml-focus: #1f6ea6;
	--vml-divider: #e6dde0;
	--vml-error: #b42318;
	--vml-logo: #94152b;
	color-scheme: light;
}
@media (prefers-color-scheme: dark) {
	:root.vm-login:not([data-theme="light"]) {
	--vml-bg: #12090d;
		--vml-bg-glow-a: rgba(148, 21, 43, .38);
		--vml-bg-glow-b: rgba(102, 163, 206, .16);
		--vml-card: #1d1217;
		--vml-card-border: #3a2830;
		--vml-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .55);
		--vml-text: #f5eef0;
		--vml-muted: #cdbfc4;
		--vml-brand: #b3203c;
		--vml-brand-hover: #c9304d;
		--vml-on-brand: #ffffff;
		--vml-link: #a3cce9;
		--vml-field-bg: #261920;
		--vml-field-border: #8f7f86;
		--vml-focus: #a3cce9;
		--vml-divider: #3a2830;
		--vml-error: #ffb4ab;
		--vml-logo: #f5eef0;
		color-scheme: dark;
	}
}
:root.vm-login[data-theme="dark"] {
	--vml-bg: #12090d;
	--vml-bg-glow-a: rgba(148, 21, 43, .38);
	--vml-bg-glow-b: rgba(102, 163, 206, .16);
	--vml-card: #1d1217;
	--vml-card-border: #3a2830;
	--vml-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 16px 48px rgba(0, 0, 0, .55);
	--vml-text: #f5eef0;
	--vml-muted: #cdbfc4;
	--vml-brand: #b3203c;
	--vml-brand-hover: #c9304d;
	--vml-on-brand: #ffffff;
	--vml-link: #a3cce9;
	--vml-field-bg: #261920;
	--vml-field-border: #8f7f86;
	--vml-focus: #a3cce9;
	--vml-divider: #3a2830;
	--vml-error: #ffb4ab;
	--vml-logo: #f5eef0;
	color-scheme: dark;
}

/* Seite: ganzer Anzeigebereich, kein eingebettetes Rechteck */
html.vm-login { min-height: 100%; background-color: var(--vml-bg); }
body.vm-login {
	min-height: 100vh; min-height: 100dvh; margin: 0; color: var(--vml-text);
	background-color: var(--vml-bg);
	background-image:
		radial-gradient(60rem 36rem at 12% -8%, var(--vml-bg-glow-a), transparent 70%),
		radial-gradient(52rem 34rem at 100% 108%, var(--vml-bg-glow-b), transparent 70%);
	background-attachment: fixed;
	display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px 16px;
}
.vm-login .navbar, .vm-login .web-footer, .vm-login footer, .vm-login .page-header-wrapper { display: none; }
.vm-login .page-content-wrapper, .vm-login main, .vm-login .container, .vm-login .page-content, .vm-login .page_content,
.vm-login .for-login, .vm-login #page-login {
	width: 100%; max-width: none; margin: 0; padding: 0; background: transparent; border: 0; box-shadow: none; min-height: 0;
}
.vm-login .page-content-wrapper, .vm-login .for-login, .vm-login #page-login { display: flex; justify-content: center; }

/* Karte */
/* Frappe setzt die Karte auf min-height: 100vh; mit Demo-Banner ueber der Karte war die Seite bei 360 px 49 px hoeher als der Anzeigebereich (Lap 10 TEST, gemessen) */
:root.vm-login .login-content, :root.vm-login .page-card { min-height: 0; }
:root.vm-login .login-content, :root.vm-login .page-card {
	display: flex; flex-direction: column; width: 100%; max-width: 420px; margin: 0 auto; padding: 32px 28px 20px;
	background: var(--vml-card); color: var(--vml-text); border: 1px solid var(--vml-card-border); border-radius: 16px;
	box-shadow: var(--vml-shadow);
}
.vm-login .page-card-head { padding: 0; border: 0; background: transparent; }
.vm-login .page-card-head .app-logo, .vm-login .page-card-head img { display: none; }
.vm-login-logo {
	display: block; width: 190px; max-width: 70%; aspect-ratio: 232 / 50; margin: 0 auto 24px; color: var(--vml-logo);
	background-color: currentColor;
	-webkit-mask: url("/assets/vm_erp/images/full-logo-flat.svg") center / contain no-repeat;
	mask: url("/assets/vm_erp/images/full-logo-flat.svg") center / contain no-repeat;
}
.vm-login-h1 { font-size: 1.625rem; font-weight: 600; line-height: 1.2; margin: 0 0 .5rem; text-align: center; color: var(--vml-text); }
.vm-login-sub { text-align: center; color: var(--vml-muted); margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.5; }
.vm-login .login-content label, .vm-login .page-card label { color: var(--vml-text); font-weight: 500; }
.vm-login .text-muted, .vm-login .help-box, .vm-login .login-content .small { color: var(--vml-muted); }

/* Felder */
.vm-login .form-control, .vm-login .btn { box-sizing: border-box; }
.vm-login .form-control, .vm-login input[type="text"], .vm-login input[type="email"], .vm-login input[type="password"] {
	height: 44px; padding: 0 14px; border: 1px solid var(--vml-field-border); border-radius: 10px;
	background: var(--vml-field-bg); color: var(--vml-text); font-size: 1rem; box-shadow: none;
}
.vm-login .form-control::placeholder { color: var(--vml-muted); opacity: 1; }
.vm-login .form-control:focus, .vm-login input:focus-visible {
	outline: 3px solid var(--vml-focus); outline-offset: 1px; border-color: var(--vml-focus); box-shadow: none;
}

/* Fremde Regeln des Anmeldepakets (login.bundle.css) kommen spaeter im Dokument und sind spezifischer. Ohne diese Zeilen
   bliebe im Dunkelmodus die Karte weiss, die Felder 28 px hoch und der Untertitel grau auf dunkel (Befund TEST Lap 8). */
:root.vm-login {
	--bg-color: var(--vml-card); --surface-base: var(--vml-field-bg); --text-color: var(--vml-text);
	--ink-gray-5: var(--vml-muted); --ink-gray-6: var(--vml-muted); --ink-gray-7: var(--vml-text); --ink-gray-8: var(--vml-text); --ink-gray-9: var(--vml-text);
}
:root.vm-login .page-card .page-card-body input:not([type="checkbox"]):not([type="radio"]) {
	height: 44px; padding: 0 14px; border: 1px solid var(--vml-field-border); border-radius: 10px;
	background-color: var(--vml-field-bg); color: var(--vml-text); font-size: 1rem; box-shadow: none;
}
:root.vm-login .page-card .page-card-subtitle, :root.vm-login .page-card .text-ink-gray-6 { color: var(--vml-muted); }

/* Knoepfe: ein Hauptknopf, ein ruhiger Zweitknopf, gleiche Hoehe, sichtbarer Fokus */
.vm-login .btn, .vm-login button.btn-login, .vm-login .btn-login-option {
	display: block; width: 100%; min-height: 44px; padding: 10px 16px; border-radius: 10px; font-size: 1rem; font-weight: 600;
	line-height: 1.3; text-align: center; box-shadow: none; transition: background-color .15s, border-color .15s, color .15s;
}
.vm-login .btn-primary, .vm-login .btn-login {
	background: var(--vml-brand); border: 1px solid var(--vml-brand); color: var(--vml-on-brand);
}
.vm-login .btn-primary:hover, .vm-login .btn-login:hover { background: var(--vml-brand-hover); border-color: var(--vml-brand-hover); color: var(--vml-on-brand); }
.vm-login .btn-default, .vm-login .btn-secondary, .vm-login .btn-login-option, .vm-login .vm-login-demo-knopf {
	background: transparent; border: 1px solid var(--vml-link); color: var(--vml-link);
}
.vm-login .btn-default:hover, .vm-login .btn-secondary:hover, .vm-login .btn-login-option:hover, .vm-login .vm-login-demo-knopf:hover {
	background: var(--vml-link); color: var(--vml-card); border-color: var(--vml-link);
}
.vm-login .btn:focus-visible, .vm-login a:focus-visible, .vm-login button:focus-visible {
	outline: 3px solid var(--vml-focus); outline-offset: 2px; box-shadow: none;
}
.vm-login .btn[disabled], .vm-login .btn:disabled { opacity: .6; cursor: not-allowed; }
.vm-login .login-content a:not(.btn), .vm-login .page-card a:not(.btn) { color: var(--vml-link); }

/* Links */
.vm-login-links { order: 99; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 1.25rem; margin: 1rem 0 0; padding-top: .5rem; border-top: 1px solid var(--vml-divider); font-size: .9rem; text-align: center; }
.vm-login-links a { margin: 0; text-decoration: underline; text-underline-offset: 3px; display: inline-block; padding: .5rem 0; min-height: 24px; color: var(--vml-link); }
.vm-login-links a:hover { text-decoration-thickness: 2px; }
.vm-login .forgot-password-message a, .vm-login a[href="#forgot"] { display: inline-block; padding: .5rem 0; min-height: 24px; }
.vm-login-anfrage { order: 60; margin: 1rem 0 0; text-align: center; font-size: .9rem; color: var(--vml-muted); }
.vm-login-anfrage a { display: inline-block; padding: .5rem 0; min-height: 24px; text-decoration: underline; color: var(--vml-link); }
.vm-login-demo { order: 50; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--vml-divider); }
.vm-login-fehler { margin: .5rem 0 0; color: var(--vml-error); font-size: .9rem; text-align: center; }
.vm-login-banner {
	position: sticky; top: 0; z-index: 1100; align-self: stretch; text-align: center; padding: 6px 12px; font-weight: 600;
	background: #fff3d6; color: #6b4700; border-bottom: 1px solid #d69e2e;
}
@media (prefers-color-scheme: dark) {
	:root.vm-login:not([data-theme="light"]) .vm-login-banner { background: #3b2f10; color: #fde68a; border-bottom-color: #a16207; }
}
:root.vm-login[data-theme="dark"] .vm-login-banner { background: #3b2f10; color: #fde68a; border-bottom-color: #a16207; }

@media (max-width: 480px) {
	body.vm-login { padding: 16px 12px; }
	.vm-login .login-content, .vm-login .page-card { padding: 24px 18px 14px; border-radius: 14px; }
	.vm-login-h1 { font-size: 1.45rem; }
}
/* Responsiv (Lap 10, V10-02): bei 360 px lief die Seite um 16 px ueber. Wahrscheinliche Ursachen (nur im Quelltext gesucht, im echten
   Browser erst durch infra/test/login_responsive.sh bestaetigt): Bootstrap-Zeilen mit negativem Seitenrand (-15 px), Rahmen und
   Innenabstand ausserhalb der Breite, lange Woerter. Alles unter der Wurzelklasse :root.vm-login, weil login.bundle.css spaeter laedt.
   Keine Schrift-Regeln hier: der Schriftwechsel beim Erststart (Preload) ist Sache der Apache-Datei infra/apache/font-preload.conf. */
:root.vm-login, :root.vm-login body.vm-login { box-sizing: border-box; max-width: 100%; }
:root.vm-login body.vm-login *, :root.vm-login body.vm-login *::before, :root.vm-login body.vm-login *::after { box-sizing: border-box; }
:root.vm-login body.vm-login { width: 100%; overflow-x: hidden; }
:root.vm-login .row { margin-left: 0; margin-right: 0; }
:root.vm-login [class*="col-"] { padding-left: 0; padding-right: 0; max-width: 100%; }
:root.vm-login .login-content, :root.vm-login .page-card, :root.vm-login .page-card-body, :root.vm-login .page-card-head,
:root.vm-login .for-login, :root.vm-login .page-content-wrapper { min-width: 0; max-width: 100%; }
:root.vm-login .login-content, :root.vm-login .page-card { max-width: min(420px, 100%); }
:root.vm-login .page-card .page-card-body input:not([type="checkbox"]):not([type="radio"]), :root.vm-login .form-control, :root.vm-login .btn { width: 100%; max-width: 100%; min-height: 44px; }
:root.vm-login .vm-login-h1, :root.vm-login .vm-login-sub, :root.vm-login .vm-login-links a { overflow-wrap: anywhere; }
@media (max-width: 400px) {
	:root.vm-login body.vm-login { padding: 12px 8px; }
	:root.vm-login .login-content, :root.vm-login .page-card { padding: 20px 14px 12px; }
	:root.vm-login .vm-login-logo { width: 150px; margin-bottom: 14px; }
	:root.vm-login .vm-login-h1 { font-size: 1.35rem; }
	:root.vm-login .vm-login-sub { margin-bottom: .75rem; }
}
@media (prefers-reduced-motion: reduce) { .vm-login .btn { transition: none; } }