/*
 * Branded auth pages — sign in, sign up, forgot password, email-link login.
 *
 * Loaded via `web_include_css` (hooks.py), which puts every website page
 * through this file, not just /login. Every rule below is scoped under a
 * selector that only exists on the five auth sections (`.page-card`,
 * `.page-card-head`, `.btn-login`, ...) or under `body:has(.for-login, ...)`,
 * so nothing here can leak onto an ordinary web page.
 *
 * Specificity note: `web_include_css` renders in <head> BEFORE login.html's
 * own `login.bundle.css` (see templates/includes/head.html vs. login.html's
 * head_include block), so on any selector of equal specificity the stock
 * rule loads later and wins. Stock nests card-body/card-actions elements
 * four classes deep (`.for-login .page-card .page-card-actions .btn-login`),
 * which beats a same-depth override from this file every time — matching
 * that nesting would mean five copies of every rule (one per auth section:
 * for-login, for-forgot, for-signup, for-login-with-email-link,
 * for-email-login), so those rules use `!important` instead. Anything
 * nested only two deep (`.page-card` itself, `.page-card-head`) is beaten
 * with one extra `body` ancestor and needs no `!important`.
 */

@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700&family=IBM+Plex+Sans:wght@400;500;600&display=swap");

:root {
	--nt-bg: #f7f4f0;
	--nt-card: #ffffff;
	--nt-border: rgba(28, 23, 18, 0.09);
	--nt-text: #1c1712;
	--nt-muted: #6f665d;
	--nt-label: #4a433c;
	--nt-input-bg: #f5f2ee;
	--nt-accent: #d0021b;
	--nt-accent-dark: #a3010f;
}

body:has(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) {
	background: var(--nt-bg) !important;
}

/* blueprint grid + a soft red glow behind the card — one layered background
   on a fixed pseudo-element so it never scrolls with the (short) page. */
body:has(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login)::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(closest-side, rgba(208, 2, 27, 0.1), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cpath d='M36 0H0V36' fill='none' stroke='%231c1712' stroke-opacity='0.06' stroke-width='1'/%3E%3C/svg%3E");
	background-position: top center, 0 0;
	background-repeat: no-repeat, repeat;
}

/* Without this, text selection on the auth pages falls back to the OS/
   browser's own highlight color — on some Linux desktop themes that's an
   opaque red block, which reads as a bug against our red accent. */
body:has(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) ::selection {
	background: rgba(208, 2, 27, 0.25);
	color: var(--nt-text);
}

/* real page content must stack above the fixed decorative layer */
.for-login,
.for-forgot,
.for-signup,
.for-login-with-email-link,
.for-email-login {
	position: relative;
	z-index: 1;
}

/* ---- brand lockup (icon + wordmark), injected by login.js next to the
   existing app-logo <img> so the wordmark renders as real text, not part
   of the logo file) ---- */
.nt-brand-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 408px;
	margin: 0 auto 24px;
}

.nt-brand-header img.app-logo {
	width: 44px;
	height: 44px;
	mix-blend-mode: multiply;
}

.nt-wordmark {
	font-family: "Sora", sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--nt-text);
	white-space: nowrap;
}

/* ---- card ---- */
body .login-content.page-card {
	background: var(--nt-card) !important;
	border: 1px solid var(--nt-border);
	box-shadow: 0 24px 60px rgba(28, 23, 18, 0.1);
	max-width: 408px;
	padding: 32px 32px 28px;
}

body .page-card-head h4 {
	font-family: "Sora", sans-serif;
	color: var(--nt-text);
}

body .page-card-head .page-card-subtitle {
	color: var(--nt-muted);
}

/* ---- form fields ---- */
body .page-card-body .form-label {
	color: var(--nt-label) !important;
}

body .page-card-body input[type="text"],
body .page-card-body input[type="email"],
body .page-card-body input[type="password"] {
	background-color: var(--nt-input-bg) !important;
	border: 1px solid var(--nt-border) !important;
	color: var(--nt-text) !important;
	height: 44px !important;
}

body .page-card-body input[type="text"]:focus,
body .page-card-body input[type="email"]:focus,
body .page-card-body input[type="password"]:focus {
	border-color: transparent !important;
	box-shadow: 0 0 0 3px rgba(208, 2, 27, 0.12) !important;
	outline: none;
}

.nt-password-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	align-self: stretch !important;
	width: 100%;
}

.nt-password-row .forgot-password-message {
	margin: 0 !important;
}

.nt-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--nt-muted);
	cursor: pointer;
}

/* A plain unstyled checkbox — even unchecked — picks up a reddish tint from
   `accent-color` in Chromium, which reads as an error state. Drawing it
   ourselves keeps the unchecked box neutral and only turns red once checked. */
.nt-remember input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid rgba(28, 23, 18, 0.22);
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
}

.nt-remember input[type="checkbox"]:checked {
	background-color: var(--nt-accent);
	border-color: var(--nt-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E");
	background-size: 11px 11px;
	background-position: center;
	background-repeat: no-repeat;
}

.nt-remember input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--nt-accent);
	outline-offset: 2px;
}

body .page-card-body .forgot-password-message > * {
	color: var(--nt-text) !important;
	font-weight: 500;
}

body .page-card-body .forgot-password-message a:hover {
	color: var(--nt-accent) !important;
}

/* ---- buttons ----
   Stock nests these four levels deep (.for-login .page-card
   .page-card-actions .btn-login), which outranks anything short of
   matching that same depth — `!important` is the practical way to win
   without repeating every selector five times (once per auth section). */
body .page-card-actions .btn-login,
body .page-card-actions .btn-ldap-login {
	font-family: "Sora", sans-serif;
	font-weight: 600;
	background: var(--nt-accent) !important;
	color: #ffffff !important;
	box-shadow: 0 10px 24px rgba(208, 2, 27, 0.3) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.nt-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 4px 0;
}

.nt-divider span {
	flex-grow: 1;
	height: 1px;
	background: rgba(28, 23, 18, 0.1);
}

.nt-divider em {
	font-style: normal;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--nt-muted);
}

.nt-footer {
	text-align: center;
	font-size: 11.5px;
	letter-spacing: 0.02em;
	color: #857c72;
	margin-top: 16px;
}

body .page-card-actions .btn-login:hover,
body .page-card-actions .btn-login:focus,
body .page-card-actions .btn-ldap-login:hover,
body .page-card-actions .btn-ldap-login:focus {
	background: var(--nt-accent-dark) !important;
	color: #ffffff !important;
}

body .page-card-actions .btn-login-option {
	background: transparent !important;
	border: 1px solid rgba(28, 23, 18, 0.16) !important;
	color: #2b2621 !important;
}

body .page-card-actions .btn-login-option:hover {
	background: var(--nt-input-bg) !important;
	border-color: rgba(28, 23, 18, 0.16) !important;
}

body .sign-up-message,
body .sign-up-message a {
	color: var(--nt-muted) !important;
}

body .sign-up-message a:hover {
	color: var(--nt-accent) !important;
}

/* ---- decorative corner motifs (icon + gear + compass), injected by
   login.js — see that file for why these can't be plain CSS backgrounds
   (each one needs its own independent rotation). ---- */
.nt-deco {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.nt-motif {
	position: absolute;
	opacity: 0.16;
	transform-origin: 50% 50%;
}

@keyframes nt-spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.nt-motif-hex {
	top: -90px;
	left: -90px;
	width: 360px;
	height: 360px;
	animation: nt-spin 55s linear infinite reverse;
}

.nt-motif-gear {
	top: -70px;
	right: -70px;
	width: 320px;
	height: 320px;
	animation: nt-spin 34s linear infinite;
}

.nt-motif-compass {
	bottom: -60px;
	right: -60px;
	width: 460px;
	height: 300px;
}

.nt-motif-compass .nt-compass-rotor {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	animation: nt-spin 46s linear infinite;
}

@media (max-width: 575.98px) {
	.nt-deco {
		display: none;
	}
}