/* GP-Buddy-Look fuer die Frappe-Standard-Anmeldung (L5-Anmeldung-*).
 * Bordmittel: hooks.py web_include_css. Wirkt NUR auf /login und /update-password
 * (templates/base.html setzt body[data-path]); alle anderen Website-Seiten bleiben unberuehrt.
 * Keine eigene Login-Seite, kein Eingriff ins Markup - nur Farben, Flaechen, Marke.
 * Palette = handoff tokens/gpbuddy-tokens.css (dunkel). Schriften: Fraunces/Hanken Grotesk
 * nur, wenn lokal vorhanden; sonst Georgia/System (die SPA hostet die Webfonts selbst). */
body[data-path="login"],
body[data-path="update-password"] {
	--gpb-grund: #140f1f;
	--gpb-flaeche: #1d1630;
	--gpb-flaeche-2: #271e3d;
	--gpb-linie: #3b3057;
	--gpb-linie-stark: #54467a;
	--gpb-text: #f3eff8;
	--gpb-text-2: #bdb3cf;
	--gpb-text-3: #9c90b2;
	--gpb-lila-akzent: #b99ce3;
	--gpb-gold: #c9a35a;
	--gpb-gold-hover: #d6b26c;
	--gpb-gold-text: #ddbe7e;
	--gpb-auf-gold: #1e1508;
	--gpb-fehler: #ef8a82;
	--gpb-fokus: #ddbe7e;
	--gpb-titel: "Fraunces", Georgia, serif;
	--gpb-ui: "Hanken Grotesk", system-ui, sans-serif;
	background: var(--gpb-grund) !important;
	color: var(--gpb-text) !important;
	font-family: var(--gpb-ui) !important;
	color-scheme: dark;
	min-height: 100vh;
}

/* Linke Markenflaeche ab 1024 px (L5-Anmeldung-Desktop) - Runde 2: altes GP-Buddy-Logo
 * (Gold-Hut, esos-v1 gponboarding/web/logo.svg) ueber der Wortmarke, Lila-Verlauf mit Goldschimmer. */
@media (min-width: 1024px) {
	body[data-path="login"]::before,
	body[data-path="update-password"]::before {
		content: "GP-Buddy";
		position: fixed;
		inset: 0 auto 0 0;
		width: 50vw;
		max-width: 720px;
		padding: 0 72px;
		display: flex;
		align-items: center;
		background:
			url("/assets/gpbuddy_ui/images/gpbuddy-logo.svg") no-repeat 64px calc(50% - 130px) / 150px 150px,
			radial-gradient(70% 55% at 20% 30%, rgba(220, 186, 102, 0.16) 0%, rgba(220, 186, 102, 0) 70%),
			linear-gradient(160deg, #3d1a5e 0%, #261040 60%, #1a0c2c 100%);
		border-right: 1px solid rgba(220, 186, 102, 0.25);
		font: 600 84px/1 var(--gpb-titel);
		letter-spacing: -0.015em;
		color: #ddbe7e;
		text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
		box-sizing: border-box;
	}
	body[data-path="login"]::after,
	body[data-path="update-password"]::after {
		content: "Dein Begleiter durchs Onboarding –\A lernen, wachsen, Karriere machen.";
		white-space: pre-line;
		position: fixed;
		left: 72px;
		top: calc(50% + 60px);
		max-width: calc(min(50vw, 720px) - 144px);
		font: 400 22px/1.45 var(--gpb-ui);
		color: #d9cfea;
	}
	body[data-path="login"] .page-content-wrapper,
	body[data-path="update-password"] .page-content-wrapper {
		margin-left: min(50vw, 720px);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/* Handy/Tablet: Gold-Hut mittig ueber der Karte statt Seitenflaeche */
@media (max-width: 1023px) {
	body[data-path="login"] .page-content-wrapper,
	body[data-path="update-password"] .page-content-wrapper {
		background: url("/assets/gpbuddy_ui/images/gpbuddy-logo.svg") no-repeat center 28px / 72px 72px;
		padding-top: 96px;
	}
}

body[data-path="login"] .navbar,
body[data-path="update-password"] .navbar,
body[data-path="login"] .web-footer,
body[data-path="update-password"] .web-footer {
	background: transparent !important;
	border: 0 !important;
}

body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	background: var(--gpb-flaeche) !important;
	border: 1px solid var(--gpb-linie) !important;
	border-radius: 24px !important;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55) !important;
	color: var(--gpb-text) !important;
	max-width: 440px;
}

body[data-path="login"] .page-card h4,
body[data-path="update-password"] .page-card h4 {
	font: 500 36px/1.15 var(--gpb-titel) !important;
	color: var(--gpb-text) !important;
}

body[data-path="login"] .page-card-subtitle,
body[data-path="login"] label,
body[data-path="login"] .sign-up-message,
body[data-path="update-password"] label {
	color: var(--gpb-text-2) !important;
}

body[data-path="login"] .app-logo,
body[data-path="update-password"] .app-logo {
	width: 56px;
	height: 56px;
	border-radius: 13px;
}

body[data-path="login"] .form-control,
body[data-path="update-password"] .form-control {
	height: 44px;
	background: var(--gpb-flaeche) !important;
	color: var(--gpb-text) !important;
	border: 1px solid var(--gpb-linie-stark) !important;
	border-radius: 10px !important;
	font: 400 15px var(--gpb-ui) !important;
}

body[data-path="login"] .form-control:focus-visible,
body[data-path="update-password"] .form-control:focus-visible,
body[data-path="login"] a:focus-visible,
body[data-path="login"] button:focus-visible {
	outline: 2px solid var(--gpb-fokus) !important;
	outline-offset: 2px;
}

body[data-path="login"] .es-button[data-variant="solid"],
body[data-path="update-password"] .es-button[data-variant="solid"],
body[data-path="update-password"] .btn-primary {
	min-height: 52px;
	background: var(--gpb-gold) !important;
	color: var(--gpb-auf-gold) !important;
	border: 0 !important;
	border-radius: 10px !important;
	font: 600 16px/1 var(--gpb-ui) !important;
}

body[data-path="login"] .es-button[data-variant="solid"]:hover,
body[data-path="update-password"] .es-button[data-variant="solid"]:hover {
	background: var(--gpb-gold-hover) !important;
}

body[data-path="login"] .es-button:not([data-variant="solid"]) {
	background: transparent !important;
	color: var(--gpb-text) !important;
	border: 1px solid var(--gpb-linie-stark) !important;
	min-height: 44px;
}

body[data-path="login"] a,
body[data-path="update-password"] a {
	color: var(--gpb-lila-akzent) !important;
	text-underline-offset: 3px;
}

body[data-path="login"] .field-error,
body[data-path="update-password"] .field-error {
	color: var(--gpb-fehler) !important;
}

/* Runde 2: Karte ruhiger - Ueberschrift kleiner, Logo als Goldkachel, Abstaende, Fusszeile weg */
body[data-path="login"] .page-card,
body[data-path="update-password"] .page-card {
	padding: 40px 36px !important;
	margin-left: auto;
	margin-right: auto;
}
body[data-path="login"] .page-card h4,
body[data-path="update-password"] .page-card h4 {
	font-size: 30px !important;
	margin-top: 16px !important;
}
body[data-path="login"] .app-logo,
body[data-path="update-password"] .app-logo {
	box-shadow: 0 8px 24px rgba(201, 163, 90, 0.25);
}
body[data-path="login"] .web-footer,
body[data-path="update-password"] .web-footer {
	display: none !important;
}
body[data-path="login"] .form-control::placeholder {
	color: var(--gpb-text-3) !important;
}