/*
 * mandari-Look für Anmeldung und die übrigen Web-Seiten von Frappe (Passwort setzen, Hinweisseiten).
 * Gleiche Grautöne und Kennfarbe wie im Desk (mandari_desk.css). Die Anmeldeseite bleibt so schlicht,
 * wie Frappe sie anlegt: Wortmarke, Überschrift, ein Satz, zwei Felder, eine Hauptaktion.
 * Frappe kennt auf Web-Seiten keinen Dunkelmodus – wir folgen dort der Systemeinstellung.
 * „html:root“ statt „:root“: website.bundle.css und login.bundle.css laden nach diesem Stylesheet und
 * setzen dieselben Variablen; die höhere Spezifität sorgt dafür, dass unsere Werte gelten.
 */

html:root {
	--gray-50: #f7f8fa;
	--gray-100: #f1f3f6;
	--gray-200: #ebedf1;
	--gray-300: #dfe2e8;
	--gray-400: #c3c7cf;
	--gray-500: #9399a4;
	--gray-600: #767c88;
	--gray-700: #4b5260;
	--gray-800: #313846;
	--gray-900: #101725;
	--surface-gray-1: #f7f8fa;
	--surface-gray-2: #f1f3f6;
	--surface-gray-3: #ebedf1;
	--surface-gray-7: #101725;
	--ink-gray-4: #9399a4;
	--ink-gray-5: #767c88;
	--ink-gray-6: #4b5260;
	--ink-gray-7: #4b5260;
	--ink-gray-9: #101725;
	--outline-gray-1: #ebedf1;
	--outline-gray-2: #dfe2e8;
	--outline-gray-3: #c3c7cf;

	--mandari-600: #4f46e5;
	--mandari-700: #4338ca;
	--primary: var(--mandari-600);
	--primary-color: var(--mandari-600);
	--btn-primary: var(--mandari-600);
	--focus-default: 0 0 0 2px rgb(79 70 229 / 0.35);
}

/* Wortmarke statt des quadratischen Zeichens (das bleibt Favicon und App-Symbol) */
.page-card-head img.app-logo {
	content: url("/assets/mandari_erp/images/mandari-logo.svg");
	height: 22px;
	max-height: 22px;
	width: auto;
	margin-bottom: 8px;
}

.page-card-head h4 {
	font-size: 20px;
	font-weight: 600;
	letter-spacing: 0;
}

/* Die eine Hauptaktion in Kennfarbe, 32 px hoch */
/* „body“ vorn: login.bundle.css lädt nach diesem Stylesheet und hat sonst dieselbe Spezifität */
body .for-login .page-card .page-card-actions .btn-login,
body .for-forgot .page-card .page-card-actions .btn-forgot,
body .page-card .page-card-actions .btn-primary,
body .for-reset-password .btn-primary,
body .btn-primary {
	background: var(--mandari-600);
	border-color: var(--mandari-600);
	color: #ffffff;
	min-height: 32px;
	font-weight: 500;
}
body .for-login .page-card .page-card-actions .btn-login:hover,
body .for-login .page-card .page-card-actions .btn-login:focus,
body .for-login .page-card .page-card-actions .btn-login:active,
body .page-card .page-card-actions .btn-primary:hover,
body .btn-primary:hover,
body .btn-primary:focus {
	background: var(--mandari-700);
	border-color: var(--mandari-700);
	color: #ffffff;
}
body .for-login .page-card .page-card-actions .btn-login:disabled {
	background: var(--mandari-600);
	opacity: 0.7;
}

body .page-card .page-card-body input[type="text"]:focus,
body .page-card .page-card-body input[type="email"]:focus,
body .page-card .page-card-body input[type="password"]:focus,
body #login_token:focus {
	border-color: var(--mandari-600);
	box-shadow: var(--focus-default);
	outline: none;
}

.page-card .forgot-password-message a:hover,
.page-card a:hover {
	color: var(--mandari-700);
}

/* Zweiter Faktor: Hinweis und Feld ruhig, ohne blauen Punkt */
#twofactor_div .page-card-head .indicator::before {
	display: none;
}
#twofactor_div .page-card-head .indicator {
	padding-left: 0;
	font-size: 20px;
	font-weight: 600;
	color: var(--ink-gray-9);
}

/* ---------- Dunkel (Systemeinstellung) ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
	html:root {
		color-scheme: dark;
		--bg-color: #111827;
		--fg-color: #111827;
		--text-color: #f1f3f6;
		--heading-color: #f7f8fa;
		--text-muted: #aaafb9;
		--surface-white: #1c2331;
		--surface-gray-2: #242b39;
		--ink-gray-4: #7a808c;
		--ink-gray-5: #9399a4;
		--ink-gray-6: #aaafb9;
		--ink-gray-9: #f7f8fa;
		--outline-gray-2: #2d3442;
		--outline-gray-3: #3b4250;
		--focus-default: 0 0 0 2px rgb(129 140 248 / 0.45);
	}
	html body {
		background-color: #111827;
		color: #f1f3f6;
	}
	.page-card-head img.app-logo {
		content: url("/assets/mandari_erp/images/mandari-logo-white.svg");
	}
	html body .page-card,
	html body .for-login .page-card {
		background-color: #111827;
	}
	html body .page-card-head h4,
	html body #twofactor_div .page-card-head .indicator {
		color: #f7f8fa;
	}
	.page-card .form-label,
	.page-card label {
		color: #aaafb9;
	}
	html body .page-card .page-card-body input[type="text"],
	html body .page-card .page-card-body input[type="email"],
	html body .page-card .page-card-body input[type="password"],
	html body #login_token {
		background-color: #1c2331;
		border-color: #2d3442;
		color: #f1f3f6;
	}
	.page-card .field-icon,
	.page-card .toggle-password {
		color: #7a808c;
		stroke: #7a808c;
	}
	.page-card a:hover {
		color: #a5b4fc;
	}
}