/* Philentia — the sign-in screen
 * Copyright (c) 2026, IT Business Dominicana (ITBD)
 *
 * The first screen anybody sees, and until now the least designed: Frappe's
 * default, left-aligned, serif, with the full lockup at full size.
 *
 * Styled entirely from outside. Frappe owns `www/login.html`, and ADR-003
 * forbids modifying it, so this works on the DOM it already emits —
 * `.for-login`, `.page-card`, `.page-card-head`, `.form-control`, `.btn-login`.
 * The trade is that a Frappe upgrade could rename a class; the alternative is
 * a template fork that silently stops receiving security fixes.
 *
 * ---------------------------------------------------------------------------
 * Why the selectors are long
 * ---------------------------------------------------------------------------
 * `login.bundle.css` is loaded from the template's own `head_include`, which
 * renders *after* `web_include_css`. So Frappe's login styles win on equal
 * specificity, and `.app-logo { max-height: 32px }` quietly shrank the mark to
 * a thumbnail while `.btn-primary` kept its near-black.
 *
 * The answer is specificity, not `!important`: `body .for-login .page-card …`
 * outranks a single class and still loses to a deliberate override later.
 * Reaching for `!important` here would win the argument and leave nothing able
 * to adjust this page afterwards.
 *
 * Built only on `philentia-tokens.css`. No hex values below this line.
 */

/* ===========================================================================
 * Which switch decides the theme
 * ===========================================================================
 * Frappe's `login.bundle.css` switches on `[data-theme]` and ignores
 * `prefers-color-scheme` entirely. `philentia-tokens.css` honours both, which
 * is right everywhere else in the product and wrong here: on a login page with
 * no `data-theme` set, opened in a browser that prefers dark, the two halves
 * disagreed. Our `--surface` went dark; Frappe's `--gray-100` did not. The
 * card rendered white with a dark secondary button — measured, not guessed:
 * `--surface: #101828` against `card: rgb(255,255,255)`.
 *
 * Following the media query harder would be worse, not better. Frappe styles
 * the inputs, the labels and "Forgot password?" from its own light tokens on
 * this page, and nothing we do moves them. A card that went dark on OS
 * preference would leave those light-on-dark and unreadable.
 *
 * So the sign-in card follows `data-theme` only, exactly as Frappe does. An
 * explicit choice of dark still works — `[data-theme="dark"]` moves both sets
 * together. A mere OS preference does not, because only half the page would
 * hear it.
 */
@media (prefers-color-scheme: dark) {
	html:not([data-theme="dark"]) body.login-page,
	html:not([data-theme="dark"]) body[data-path="login"] {
		--surface: var(--white);
		--surface-secondary: var(--neutral-50);
		--text-primary: var(--neutral-950);
		--text-secondary: var(--neutral-700);
		--text-muted: var(--neutral-600);
		--text-link: var(--philentia-blue-600);
		--brand-primary: var(--philentia-blue-600);
		--brand-primary-hover: var(--philentia-blue-700);
	}
}

/* ===========================================================================
 * The page
 * =========================================================================== */

body.login-page,
body[data-path="login"] {
	min-height: 100vh;
	margin: 0;
	font-family: var(--font-ui);
	color: var(--text-primary);
	background: var(--philentia-navy);
	/* The brand gradient, held still. A login is a doorway, not a showcase. */
	background-image: var(--gradient-brand);
	background-attachment: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-6) var(--space-4);
}

/* The ascending arrow of the mark, expressed as light rather than drawn again
 * (§58: growth is a direction, not a decoration). Two slow, very soft washes.
 * They move once every twenty seconds and never cross the card. */
body.login-page::before,
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset: -30% -10% auto -30%;
	height: 90vh;
	background: radial-gradient(
		ellipse at 30% 40%,
		rgba(124, 207, 44, 0.16) 0%,
		transparent 60%
	);
	animation: ph-drift 22s var(--ease-out) infinite alternate;
	pointer-events: none;
}

body.login-page::after,
body[data-path="login"]::after {
	content: "";
	position: fixed;
	inset: auto -30% -30% 20%;
	height: 80vh;
	background: radial-gradient(
		ellipse at 60% 60%,
		rgba(3, 139, 239, 0.28) 0%,
		transparent 62%
	);
	animation: ph-drift 26s var(--ease-out) infinite alternate-reverse;
	pointer-events: none;
}

@keyframes ph-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* ===========================================================================
 * The card
 * =========================================================================== */

.for-login,
.for-email-login,
.for-forgot,
.for-signup,
.for-login-with-email-link {
	width: 100%;
	display: flex;
	justify-content: center;
}

body .page-card {
	width: min(420px, 100%);
	background: var(--surface);
	border: 0;
	border-radius: var(--radius-xl);
	box-shadow: 0 24px 60px rgba(6, 48, 120, 0.28);
	padding: var(--space-10) var(--space-8) var(--space-8);
	animation: ph-rise var(--duration-slow) var(--ease-out) both;
}

@keyframes ph-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Head ---------------------------------------------------------------- */

.page-card-head {
	text-align: center;
	margin-bottom: var(--space-8);
	border: 0;
	padding: 0;
}

/* The full lockup is square and carries two lines of tagline. At the size a
 * login wants it, that tagline is a smear — so the mark is capped and the
 * words are left to the wordmark inside it. */
body .for-login .page-card-head .app-logo,
body .for-email-login .page-card-head .app-logo,
body .for-forgot .page-card-head .app-logo,
body .for-signup .page-card-head .app-logo,
body .for-login-with-email-link .page-card-head .app-logo {
	height: 104px;
	max-height: none;
	width: auto;
	max-width: 78%;
	margin: 0 auto var(--space-5);
	display: block;
	object-fit: contain;
}

.page-card-head h4 {
	font-family: var(--font-brand);
	font-size: var(--text-h3);
	font-weight: var(--weight-bold);
	color: var(--text-primary);
	margin: 0 0 var(--space-2);
	letter-spacing: -0.01em;
}

.page-card-head p,
.page-card-head .text-muted {
	color: var(--text-muted);
	font-size: var(--text-body);
	margin: 0;
	line-height: var(--leading-relaxed);
}

/* ===========================================================================
 * Fields
 * =========================================================================== */

.page-card .form-group { margin-bottom: var(--space-5); }

.page-card label,
.page-card .control-label {
	display: block;
	font-size: var(--text-body);
	font-weight: var(--weight-medium);
	color: var(--text-secondary);
	margin-bottom: var(--space-2);
}

body .page-card .form-control,
body .page-card input[type="text"],
.page-card input[type="email"],
.page-card input[type="password"] {
	width: 100%;
	height: var(--control-height);
	padding: 0 var(--space-3);
	background: var(--surface);
	border: 1px solid var(--border-control);
	border-radius: var(--radius-md);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	color: var(--text-primary);
	box-shadow: none;
	transition: border-color var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-fast) var(--ease-out);
}

.page-card .form-control:focus {
	outline: none;
	border-color: var(--border-focus);
	box-shadow: var(--focus-ring);
}

.page-card .form-control::placeholder { color: var(--text-muted); }

/* ===========================================================================
 * Buttons
 *
 * Frappe styles these as
 * `.for-login .page-card .page-card-actions .btn-login` — four classes. A
 * three-class selector loses however sensible it reads, which is why the
 * primary button stayed near-black through two attempts. Matching the shape
 * and adding `body` wins by one element and nothing more.
 * =========================================================================== */

body .for-login .page-card .page-card-actions .btn-login,
body .for-forgot .page-card .page-card-actions .btn-login,
body .for-login-with-email-link .page-card .page-card-actions .btn-login,
body .for-signup .page-card .page-card-actions .btn-login,
body .for-email-login .page-card .page-card-actions .btn-login,
body .for-reset-password .page-card .page-card-actions .btn-login,
body .for-login .page-card .page-card-actions .btn-ldap-login,
body .for-forgot .page-card .page-card-actions .btn-ldap-login,
body .for-login-with-email-link .page-card .page-card-actions .btn-ldap-login,
body .for-signup .page-card .page-card-actions .btn-ldap-login,
body .for-email-login .page-card .page-card-actions .btn-ldap-login,
body .for-reset-password .page-card .page-card-actions .btn-ldap-login {
	width: 100%;
	min-height: var(--control-height);
	background: var(--brand-primary);
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	color: var(--text-on-fill);
	font-family: var(--font-ui);
	font-size: var(--text-body);
	font-weight: var(--weight-semibold);
	box-shadow: none;
	transition: background-color var(--duration-hover) var(--ease-out),
		transform var(--duration-press) var(--ease-out);
}

body .for-login .page-card .page-card-actions .btn-login:hover,
body .for-forgot .page-card .page-card-actions .btn-login:hover,
body .for-login-with-email-link .page-card .page-card-actions .btn-login:hover,
body .for-signup .page-card .page-card-actions .btn-login:hover,
body .for-email-login .page-card .page-card-actions .btn-login:hover,
body .for-reset-password .page-card .page-card-actions .btn-login:hover,
body .for-login .page-card .page-card-actions .btn-login:focus,
body .for-forgot .page-card .page-card-actions .btn-login:focus,
body .for-login-with-email-link .page-card .page-card-actions .btn-login:focus,
body .for-signup .page-card .page-card-actions .btn-login:focus,
body .for-email-login .page-card .page-card-actions .btn-login:focus,
body .for-reset-password .page-card .page-card-actions .btn-login:focus,
body .for-login .page-card .page-card-actions .btn-login:active,
body .for-forgot .page-card .page-card-actions .btn-login:active,
body .for-login-with-email-link .page-card .page-card-actions .btn-login:active,
body .for-signup .page-card .page-card-actions .btn-login:active,
body .for-email-login .page-card .page-card-actions .btn-login:active,
body .for-reset-password .page-card .page-card-actions .btn-login:active {
	background: var(--brand-primary-hover);
	color: var(--text-on-fill);
	border: 1px solid transparent;
	box-shadow: none;
}

body .for-login .page-card .page-card-actions .btn-login:active,
body .for-forgot .page-card .page-card-actions .btn-login:active,
body .for-login-with-email-link .page-card .page-card-actions .btn-login:active,
body .for-signup .page-card .page-card-actions .btn-login:active,
body .for-email-login .page-card .page-card-actions .btn-login:active,
body .for-reset-password .page-card .page-card-actions .btn-login:active { transform: translateY(1px); }

body .for-login .page-card .page-card-actions .btn-login:focus-visible,
body .for-forgot .page-card .page-card-actions .btn-login:focus-visible,
body .for-login-with-email-link .page-card .page-card-actions .btn-login:focus-visible,
body .for-signup .page-card .page-card-actions .btn-login:focus-visible,
body .for-email-login .page-card .page-card-actions .btn-login:focus-visible,
body .for-reset-password .page-card .page-card-actions .btn-login:focus-visible {
	outline: 2px solid var(--philentia-navy);
	outline-offset: 2px;
}

/* The secondary ways in — email link, SSO — are choices, not the choice. */
body .for-login .page-card .page-card-actions .btn-login-option,
body .for-forgot .page-card .page-card-actions .btn-login-option,
body .for-login-with-email-link .page-card .page-card-actions .btn-login-option,
body .for-signup .page-card .page-card-actions .btn-login-option,
body .for-email-login .page-card .page-card-actions .btn-login-option,
body .for-reset-password .page-card .page-card-actions .btn-login-option {
	width: 100%;
	min-height: var(--control-height);
	margin-top: var(--space-3);
	background: var(--surface);
	border: 1px solid var(--border-control);
	border-radius: var(--radius-md);
	color: var(--text-secondary);
	font-weight: var(--weight-medium);
	box-shadow: none;
}

body .for-login .page-card .page-card-actions .btn-login-option:hover,
body .for-forgot .page-card .page-card-actions .btn-login-option:hover,
body .for-login-with-email-link .page-card .page-card-actions .btn-login-option:hover,
body .for-signup .page-card .page-card-actions .btn-login-option:hover,
body .for-email-login .page-card .page-card-actions .btn-login-option:hover,
body .for-reset-password .page-card .page-card-actions .btn-login-option:hover {
	background: var(--surface-secondary);
	color: var(--text-primary);
}

/* ===========================================================================
 * Links and footer
 * =========================================================================== */

.page-card a {
	color: var(--text-link);
	text-decoration: none;
	font-size: var(--text-body-sm);
}
.page-card a:hover { text-decoration: underline; }

.page-card .forgot-password-message,
.page-card .sign-up-message {
	text-align: center;
	margin-top: var(--space-5);
	font-size: var(--text-body-sm);
	color: var(--text-muted);
}

/* Frappe's attribution line sits outside the card on the page background,
 * where it is unreadable against the gradient. */
.footer-powered,
.web-footer,
footer .text-muted {
	text-align: center;
	margin-top: var(--space-6);
	color: rgba(255, 255, 255, 0.68);
	font-size: var(--text-caption);
}
.footer-powered a,
.web-footer a { color: rgba(255, 255, 255, 0.9); }

/* ===========================================================================
 * Small screens
 * =========================================================================== */

@media (max-width: 480px) {
	.page-card {
		padding: var(--space-8) var(--space-5) var(--space-6);
		border-radius: var(--radius-lg);
	}
	body .for-login .page-card-head .app-logo { height: 84px; }
}

/* Somebody who gets motion sick does not need a drifting background to sign
 * in. Everything below is decoration, and decoration is the first thing that
 * should stop. */
@media (prefers-reduced-motion: reduce) {
	body.login-page::before,
	body.login-page::after,
	body[data-path="login"]::before,
	body[data-path="login"]::after {
		animation: none;
	}
	.page-card { animation: none; }
}