/*
 * NakedERP Theme – Website, Login und Portal im RR42-Design
 *
 * Gleiche Tokens wie nakederp_desk.css (Palette von rr42.de). Die Variablen werden zusätzlich auf
 * body gesetzt, weil login.bundle.css nach dieser Datei geladen wird und
 * :root erneut belegt.
 */

:root,
[data-theme="light"],
body {
	--nk-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-stack: var(--nk-font);
	--nk-brand: #00485a;
	--nk-brand-hover: #003a49;
	--nk-brand-soft: rgba(0, 72, 90, 0.07);
	--nk-heading: #181213;
	--nk-muted: #645c59;

	/* Papier und weiße Blätter mit Haarlinie wie die App-Übersicht der Suite (www.rr42.de/apps) */
	--nk-backdrop: #f6f4f1;
	--nk-sheet: #ffffff;
	--nk-hairline: rgba(24, 18, 19, 0.09);
	--nk-shadow: 0 0 #0000;

	--primary: var(--nk-brand);
	--primary-color: var(--nk-brand);
	--brand-color: var(--nk-brand);
	--btn-primary: var(--nk-brand);
	--border-primary: var(--nk-brand);
}

[data-theme="dark"],
[data-theme="dark"] body {
	--nk-brand: #83a3ac;
	--nk-brand-hover: #a3bcc3;
	--nk-brand-soft: rgba(131, 163, 172, 0.12);
	--nk-heading: #ffffff;
	--nk-muted: #a8a09d;

	/* Dunkel: RR42-Tinte statt Papier */
	--nk-backdrop: #181213;
	--nk-sheet: #211a1b;
	--nk-hairline: rgba(255, 255, 255, 0.07);
	--nk-shadow: 0 0 #0000;

	--primary: var(--nk-brand);
	--primary-color: var(--nk-brand);
	--brand-color: var(--nk-brand);
	--btn-primary: var(--nk-brand);
	--border-primary: var(--nk-brand);
}

body .btn.btn-primary,
body .btn.btn-login {
	background-color: var(--nk-brand);
	border-color: transparent;
	color: #ffffff;
}

body .btn.btn-primary:hover,
body .btn.btn-primary:focus,
body .btn.btn-login:hover,
body .btn.btn-login:focus {
	background-color: var(--nk-brand-hover);
	color: #ffffff;
}

/* login.bundle.css färbt die Login-Buttons fest mit --gray-900 und hoher Spezifität */
body[data-path] .page-card .page-card-actions .btn.btn-login,
body[data-path] .page-card .page-card-actions .btn.btn-login:disabled,
body[data-path] .page-card .page-card-actions .btn.btn-ldap-login {
	background: var(--nk-brand);
}

body[data-path] .page-card .page-card-actions .btn.btn-login:hover,
body[data-path] .page-card .page-card-actions .btn.btn-login:focus,
body[data-path] .page-card .page-card-actions .btn.btn-login:active,
body[data-path] .page-card .page-card-actions .btn.btn-ldap-login:hover {
	background: var(--nk-brand-hover);
}

body .btn.btn-signup.btn-forgot {
	background-color: var(--nk-brand);
	color: #ffffff;
}

/*
 * Seiten mit einer Karte in der Mitte – Anmeldung, Passwort festlegen, Meldungen, 404 und Serverfehler –
 * wie die App-Übersicht der Suite: Papier, darauf ein weißes Blatt mit Haarlinie. Anmeldung und Passwort nutzen
 * .page-card (login.bundle.css), Meldungen und Fehler .error-page (message.html, 404.html, error.html).
 */
body:has(.page-card),
body:has(.error-page) {
	background: var(--nk-backdrop);
}

body:has(.page-card) .page-card,
.error-page > div {
	border: 1px solid var(--nk-hairline);
	border-radius: 12px;
	background: var(--nk-sheet);
	box-shadow: var(--nk-shadow);
}

.error-page > div {
	max-width: 420px;
	margin: 0 16px;
	padding: 32px 36px;
	text-align: center;
}

/* Leichte Titel wie auf rr42.de */
body:has(.page-card) .page-card-head h4,
.error-page h4 {
	color: var(--nk-heading);
	font-size: 24px;
	font-weight: 300;
	letter-spacing: -0.02em;
}

.error-page p {
	color: var(--nk-muted);
}

body:has(.page-card) .page-card a,
.error-page a:not(.btn) {
	color: var(--nk-brand);
}

/* RR42-Knöpfe und -Eingabefelder sind Pillen (login.bundle.css ist spezifisch, daher die langen Selektoren) */
body:has(.page-card) .page-card .btn,
body:has(.page-card) .page-card .page-card-actions .btn,
body:has(.page-card) .page-card .form-control,
.error-page .btn {
	border-radius: 1.5rem;
}

/* Schrift wie auf rr42.de: Helvetica Neue, leicht */
body,
.btn,
input,
.form-control {
	font-family: var(--nk-font);
}

body {
	font-weight: 300;
}

/* Clerk sign-in on /login (nakederp_clerk_login.js) */
.nk-clerk { margin-bottom: 12px; }
.nk-clerk-mount:empty { display: none; }
.nk-clerk-mount .cl-rootBox, .nk-clerk-mount .cl-cardBox { width: 100%; max-width: none; }
.nk-clerk-status { margin: 8px 0; white-space: pre-line; }
.nk-clerk-password { margin: 10px 0 0; }
.nk-clerk-choose { margin: 8px 0; }
.nk-clerk-choose .btn { margin-top: 6px; }

/* Not btn-primary: Frappe's login.js writes status text into every ".btn-primary" in the
   visible section on each native password-login attempt, so this button styles itself. */
.nk-clerk .nk-clerk-sign-in {
	background-color: var(--btn-primary, #00485a);
	border-color: transparent;
	color: #ffffff;
}
.nk-clerk .nk-clerk-sign-in:hover,
.nk-clerk .nk-clerk-sign-in:focus {
	background-color: var(--nk-brand-hover, #003a49);
	color: #ffffff;
}