/* Copyright (c) 2026, Thirvusoft and contributors
 * For license information, please see license.txt
 *
 * Branded auth pages -- sign in, sign up, forgot password, email-link login.
 *
 * Loaded through `web_include_css`, which puts every website page through this
 * file, not only /login. So every rule is scoped either under an auth-only
 * class (.page-card, .btn-login, ...) or under body:has(...), and nothing here
 * can reach an ordinary web page.
 *
 * Specificity: `web_include_css` renders in <head> BEFORE login.html's own
 * login.bundle.css, so a stock rule of equal weight loads later and wins.
 * Stock nests the card's buttons and inputs four classes deep, once for each
 * of the five auth sections -- matching that would mean five copies of every
 * rule, so those use !important instead. Anything only two deep is beaten by
 * adding one `body` ancestor and needs none.
 */

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

:root {
	/* A plain white page, like the desk's, with the card on it and the
	   machinery drawn faintly round it. See saraswathi_theme.css for the
	   measurements; the only ones this page adds are the wordmark and the
	   footer, which sit on the page rather than the card -- the darkest ink at
	   17.1:1 and the ink at 14.4:1. */
	--sagf-login-bg: #ffffff;
	--sagf-login-on-bg: #121a38;
	--sagf-login-on-bg-soft: #1c2750;
	--sagf-login-card: #ffffff;
	--sagf-login-ink: #1c2750;
	--sagf-login-link: #3a4d9c;
	/* Same scale as the desk theme: a fill deep enough to carry white, its
	   pressed shade, and the shades for lines and for text. */
	--sagf-login-accent: #4a5db0;
	--sagf-login-accent-dark: #3b4c96;
	--sagf-login-accent-line: #4a5db0;
	--sagf-login-accent-text: #3b4c96;
	--sagf-login-on-accent: #ffffff;
	--sagf-login-border: rgba(28, 39, 80, 0.16);
	--sagf-login-text: #1c2750;
	--sagf-login-muted: #56618a;
	--sagf-login-input-bg: #f4f6fc;
	--sagf-login-font: "Manrope", -apple-system, "Segoe UI", Roboto, sans-serif;
}

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

/* A grain-fine dot field with a soft glow behind the card. One layered
   background on a fixed pseudo-element, so it never scrolls with the 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(255, 255, 255, 0.35), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Ccircle cx='1.5' cy='1.5' r='1.2' fill='%23ffffff' fill-opacity='0.1'/%3E%3C/svg%3E");
	background-position: top center, 0 0;
	background-repeat: no-repeat, repeat;
}

/* Left to the browser, selection on these pages falls back to the desktop
   theme's own highlight, which on some Linux themes is a solid block that
   reads as an error against the blue. */
body:has(.for-login, .for-forgot, .for-signup, .for-login-with-email-link, .for-email-login) ::selection {
	background: rgba(74, 93, 176, 0.25);
	color: var(--sagf-login-text);
}

/* The real content has to 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, moved out of the card by login.js so it sits on the page
   background rather than on the white surface ---- */
.sagf-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	max-width: 408px;
	margin: 0 auto 24px;
}

.sagf-brand img.app-logo {
	width: 44px;
	height: 44px;
}

.sagf-wordmark {
	font-family: var(--sagf-login-font);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	color: var(--sagf-login-on-bg);
	white-space: nowrap;
}

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

body .page-card-head h4 {
	font-family: var(--sagf-login-font);
	font-weight: 700;
	color: var(--sagf-login-ink);
}

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

/* ---- fields ---- */
body .page-card-body .form-label {
	color: var(--sagf-login-text) !important;
	font-weight: 500;
}

body .page-card-body input[type="text"],
body .page-card-body input[type="email"],
body .page-card-body input[type="password"] {
	background-color: var(--sagf-login-input-bg) !important;
	border: 1px solid var(--sagf-login-border) !important;
	color: var(--sagf-login-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: var(--sagf-login-accent-line) !important;
	box-shadow: 0 0 0 3px rgba(74, 93, 176, 0.22) !important;
	outline: none;
}

/* The mail, lock and eye glyphs are stock markup; only their colour changes. */
body .page-card-body .field-icon,
body .page-card-body .toggle-password {
	stroke: var(--sagf-login-muted);
}

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

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

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

/* Drawn by hand: an unstyled checkbox picks up the page's accent-color in
   Chromium even when unchecked, which puts a coloured tint on a box that has
   not been ticked. This keeps it neutral until it is. */
.sagf-remember input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 15px;
	height: 15px;
	margin: 0;
	border: 1px solid rgba(28, 39, 80, 0.3);
	border-radius: 4px;
	background: #ffffff;
	cursor: pointer;
}

.sagf-remember input[type="checkbox"]:checked {
	background-color: var(--sagf-login-accent);
	border-color: var(--sagf-login-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' 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;
}

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

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

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

/* ---- buttons ----
   Four levels deep in stock, once per auth section; !important is the
   practical way to win without repeating each rule five times. */
body .page-card-actions .btn-login,
body .page-card-actions .btn-ldap-login {
	font-family: var(--sagf-login-font);
	font-weight: 600;
	background: var(--sagf-login-accent) !important;
	color: var(--sagf-login-on-accent) !important;
	box-shadow: 0 10px 24px rgba(74, 93, 176, 0.35) !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

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(--sagf-login-accent-dark) !important;
	color: var(--sagf-login-on-accent) !important;
}

body .page-card-actions .btn-login-option {
	background: transparent !important;
	border: 1px solid var(--sagf-login-border) !important;
	color: var(--sagf-login-ink) !important;
}

body .page-card-actions .btn-login-option:hover {
	background: var(--sagf-login-input-bg) !important;
	border-color: var(--sagf-login-border) !important;
}

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

.sagf-divider span {
	flex-grow: 1;
	height: 1px;
	background: rgba(28, 39, 80, 0.14);
}

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

.sagf-footer {
	text-align: center;
	font-size: 11.5px;
	letter-spacing: 0.02em;
	color: var(--sagf-login-on-bg-soft);
	margin-top: 16px;
}

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

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

/* ---- the milling line behind the card, built by login.js ----
 * Wheat feeds a hopper, rollers mill it, the wheel turns and sacks leave on
 * the belt. Everything is drawn at low opacity and slow speeds: this is a
 * backdrop to a sign-in box, so it has to be readable at a glance and then
 * ignorable.
 */
.sagf-deco {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.sagf-motif {
	position: absolute;
	opacity: 0.14;
	transform-origin: 50% 50%;
}

@keyframes sagf-spin {
	to {
		transform: rotate(360deg);
	}
}

@keyframes sagf-spin-back {
	to {
		transform: rotate(-360deg);
	}
}

@keyframes sagf-sway {
	0%,
	100% {
		transform: rotate(-4deg);
	}
	50% {
		transform: rotate(4deg);
	}
}

/* The dashes travel along the belt, which is what sells it as moving without
   anything actually being redrawn. */
@keyframes sagf-belt-run {
	to {
		stroke-dashoffset: -68;
	}
}

@keyframes sagf-sack-run {
	from {
		transform: translateX(-90px);
	}
	to {
		transform: translateX(1450px);
	}
}

/* Grain dropping out of the hopper throat: it falls, then the next one is
   already on its way. */
@keyframes sagf-trickle {
	0% {
		transform: translateY(0);
		opacity: 0.9;
	}
	70% {
		opacity: 0.9;
	}
	100% {
		transform: translateY(34px);
		opacity: 0;
	}
}

@keyframes sagf-fall {
	0% {
		transform: translateY(-24px) rotate(0deg);
		opacity: 0;
	}
	12%,
	88% {
		opacity: 0.55;
	}
	100% {
		transform: translateY(104vh) rotate(220deg);
		opacity: 0;
	}
}

.sagf-motif-wheat {
	top: 8%;
	left: -30px;
	width: 240px;
	height: 240px;
	transform-origin: 50% 100%;
	animation: sagf-sway 9s ease-in-out infinite;
}

.sagf-motif-hopper {
	top: -50px;
	left: 190px;
	width: 300px;
	height: 300px;
}

.sagf-motif-mill {
	top: -70px;
	right: -70px;
	width: 320px;
	height: 320px;
}

.sagf-motif-belt {
	bottom: 0;
	left: 0;
	width: 100%;
	height: auto;
}

/* SVG children need a box to turn about; without transform-box they rotate
   around the origin of the whole canvas instead of their own centre. */
.sagf-roller,
.sagf-rotor {
	transform-box: fill-box;
	transform-origin: 50% 50%;
}

.sagf-rotor {
	animation: sagf-spin 38s linear infinite;
}

/* The pair counter-rotate, the way a real roller mill draws grain between
   them -- both turning the same way would read as a mistake. */
.sagf-roller-cw {
	animation: sagf-spin 6s linear infinite;
}

.sagf-roller-ccw {
	animation: sagf-spin-back 6s linear infinite;
}

/* The belt rollers are positioned by their own transform-origin, set inline,
   so they must not be re-boxed to their fill. */
.sagf-motif-belt .sagf-roller {
	transform-box: view-box;
}

.sagf-belt-line {
	animation: sagf-belt-run 2.2s linear infinite;
}

.sagf-trickle circle {
	animation: sagf-trickle 1.6s ease-in infinite;
}

.sagf-trickle circle:nth-child(2) {
	animation-delay: 0.5s;
}

.sagf-trickle circle:nth-child(3) {
	animation-delay: 1s;
}

.sagf-sack {
	transform-box: view-box;
	animation: sagf-sack-run 21s linear infinite;
}

.sagf-grains {
	position: absolute;
	inset: 0;
	opacity: 0.32;
}

.sagf-grain {
	position: absolute;
	top: 0;
	width: 5px;
	height: 8px;
	border-radius: 50%;
	background: var(--sagf-login-accent);
	opacity: 0;
	animation-name: sagf-fall;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* Nothing here carries meaning, so when motion is unwelcome it simply stops
   and the scene stays as a still drawing. */
@media (prefers-reduced-motion: reduce) {
	.sagf-deco * {
		animation: none !important;
	}

	.sagf-grains {
		display: none;
	}
}

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