/* FUA NightFleet login continuity for Frappe v16 website/login surfaces. */
:root {
	--fua-login-mark: #02cef3;
	--fua-login-raised: #121a22;
	--fua-login-text: #f2f7fa;
	--fua-login-muted: #8ca3b5;
	--fua-login-outline: rgba(140, 163, 181, 0.6);
}

/* Scope the document seal to Frappe's four authentication states. */
body:is(:has(.for-login), :has(.for-forgot), :has(.for-signup), :has(.for-login-with-email-link)) {
	background: #001b33 !important;
	color: var(--fua-login-text);
}

.for-login,
.for-forgot,
.for-signup,
.for-login-with-email-link {
	min-height: 100vh;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
	padding-top: clamp(3rem, 10vh, 8rem);
	background: radial-gradient(circle at 50% 14%, #064262 0%, #002749 42%, #001b33 100%) !important;
	color: var(--fua-login-text);
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .login-content.page-card {
	padding: 30px;
	background: rgb(10 15 20 / 96%) !important;
	border: 1px solid rgb(2 206 243 / 36%) !important;
	border-radius: 18px !important;
	box-shadow: 0 24px 70px rgb(0 11 24 / 48%) !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .page-card-head {
	align-items: center;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .page-card-head .app-logo {
	width: auto !important;
	height: 48px !important;
	max-width: 180px !important;
	object-fit: contain;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) :is(
		.page-card-head h4,
		.page-card-head-text,
		.form-label
	) {
	color: var(--fua-login-text) !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) :is(
		.page-card-subtitle,
		.forgot-password-message,
		.text-muted
	) {
	color: var(--fua-login-muted) !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .form-control {
	background: var(--fua-login-raised) !important;
	border-color: var(--fua-login-outline) !important;
	color: var(--fua-login-text) !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .form-control:focus {
	border-color: var(--fua-login-mark) !important;
	box-shadow: 0 0 0 3px rgb(2 206 243 / 18%) !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .form-control::placeholder {
	color: #6f91a6 !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .page-card-actions .btn.btn-login {
	background: var(--fua-login-mark) !important;
	border: 1px solid var(--fua-login-mark) !important;
	color: #06272e !important;
	font-weight: 700;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) .page-card-actions .btn.btn-login:hover {
	background: #4de0f5 !important;
	border-color: #4de0f5 !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link)
	.page-card-actions
	.btn.btn-login-with-email-link {
	background: rgb(2 206 243 / 8%) !important;
	border: 1px solid rgb(2 206 243 / 42%) !important;
	color: #d9f7ff !important;
}

:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link)
	:is(a, button, .btn, .form-control):focus-visible {
	outline: 2px solid var(--fua-login-mark);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) *,
	:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) *::before,
	:where(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

@media print {
	body:is(:has(.for-login), :has(.for-forgot), :has(.for-signup), :has(.for-login-with-email-link)),
	:is(.for-login, .for-forgot, .for-signup, .for-login-with-email-link) {
		background: #fff !important;
		color: #000 !important;
	}
}