/* fsbrew login theme: isolated to /login for safe rollback. */
body[data-path="/login"],
body[data-path="login"] {
	--login-bg-1: #090c12;
	--login-bg-2: #111827;
	--login-card: rgba(12, 18, 30, 0.72);
	--login-border: rgba(148, 163, 184, 0.22);
	--login-text: #f8fafc;
	--login-muted: #94a3b8;
	--login-muted-strong: #cbd5e1;
	--login-panel-width: 430px;
	--login-logo-width: calc(var(--login-panel-width) * 1.04);
	--login-input: rgba(15, 23, 42, 0.85);
	--login-btn: #ff6900;
	--login-btn-hover: #ff7e27;

	background:
		radial-gradient(1200px 700px at -8% 0%, rgba(255, 105, 0, 0.2), transparent 58%),
		radial-gradient(900px 500px at 100% 100%, rgba(59, 130, 246, 0.18), transparent 55%),
		linear-gradient(145deg, var(--login-bg-1), var(--login-bg-2)) !important;
	color: var(--login-text);
	position: relative;
	overflow-x: hidden;
}

body[data-path="/login"]::before,
body[data-path="login"]::before {
	content: "";
	position: fixed;
	left: clamp(20px, 6vw, 96px);
	top: 50%;
	transform: translateY(-50%);
	width: var(--login-logo-width);
	min-width: 364px;
	max-width: 468px;
	aspect-ratio: 321 / 112;
	background: url("/assets/fsbrew/images/LivaLogo.png") left center / contain no-repeat;
	opacity: 0.95;
	pointer-events: none;
	z-index: 0;
}

body[data-path="/login"] .navbar,
body[data-path="login"] .navbar,
body[data-path="/login"] .web-footer,
body[data-path="login"] .web-footer {
	display: none !important;
}

body[data-path="/login"] .page-content-wrapper,
body[data-path="login"] .page-content-wrapper {
	min-height: 100vh !important;
	padding: 0;
	position: relative;
	z-index: 1;
}

body[data-path="/login"] main.container.my-4,
body[data-path="login"] main.container.my-4 {
	max-width: 100%;
	margin: 0;
	padding: 0;
}

body[data-path="/login"] .page_content > div,
body[data-path="login"] .page_content > div {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 36px clamp(18px, 6vw, 120px);
}

body[data-path="/login"] section.for-login,
body[data-path="/login"] section.for-email-login,
body[data-path="/login"] section.for-signup,
body[data-path="/login"] section.for-forgot,
body[data-path="/login"] section.for-login-with-email-link,
body[data-path="login"] section.for-login,
body[data-path="login"] section.for-email-login,
body[data-path="login"] section.for-signup,
body[data-path="login"] section.for-forgot,
body[data-path="login"] section.for-login-with-email-link {
	width: min(var(--login-panel-width), 100%);
}

body[data-path="/login"] .page-card-head,
body[data-path="login"] .page-card-head {
	text-align: left;
	padding: 0 4px 16px;
}

body[data-path="/login"] .page-card-head .app-logo,
body[data-path="login"] .page-card-head .app-logo {
	display: none;
}

body[data-path="/login"] .page-card-head::before,
body[data-path="login"] .page-card-head::before {
	display: none;
}

body[data-path="/login"] .page-card-head h4,
body[data-path="login"] .page-card-head h4 {
	color: var(--login-text);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	letter-spacing: 0.01em;
	text-align: center;
	width: 100%;
	margin-top: 0.35rem;
}

body[data-path="/login"] .login-content.page-card,
body[data-path="login"] .login-content.page-card {
	background: var(--login-card) !important;
	border: 1px solid var(--login-border) !important;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-radius: 16px;
	box-shadow: 0 22px 40px rgba(2, 6, 23, 0.38);
	padding: 28px 16px;
}

body[data-path="/login"] .page-card-body input[type="text"],
body[data-path="/login"] .page-card-body input[type="email"],
body[data-path="/login"] .page-card-body input[type="password"],
body[data-path="login"] .page-card-body input[type="text"],
body[data-path="login"] .page-card-body input[type="email"],
body[data-path="login"] .page-card-body input[type="password"] {
	background: var(--login-input) !important;
	border: 1px solid transparent !important;
	color: var(--login-text) !important;
	border-radius: 10px;
}

body[data-path="/login"] .page-card-body input::placeholder,
body[data-path="login"] .page-card-body input::placeholder {
	color: var(--login-muted);
}

body[data-path="/login"] .page-card-body input:focus,
body[data-path="login"] .page-card-body input:focus {
	border-color: rgba(255, 105, 0, 0.55) !important;
	box-shadow: 0 0 0 3px rgba(255, 105, 0, 0.2) !important;
}

body[data-path="/login"] .forgot-password-message a,
body[data-path="/login"] .sign-up-message,
body[data-path="/login"] .sign-up-message a,
body[data-path="login"] .forgot-password-message a,
body[data-path="login"] .sign-up-message,
body[data-path="login"] .sign-up-message a {
	color: var(--login-muted-strong) !important;
}

body[data-path="/login"] .page-card .btn.btn-primary,
body[data-path="login"] .page-card .btn.btn-primary {
	background: var(--login-btn) !important;
	border-color: var(--login-btn) !important;
	color: #fff !important;
	border-radius: 10px;
	font-weight: 600;
}

body[data-path="/login"] .page-card .btn.btn-primary:hover,
body[data-path="login"] .page-card .btn.btn-primary:hover {
	background: var(--login-btn-hover) !important;
	border-color: var(--login-btn-hover) !important;
}

body[data-path="/login"] .page-card .btn.btn-default,
body[data-path="/login"] .page-card .btn-login-option,
body[data-path="login"] .page-card .btn.btn-default,
body[data-path="login"] .page-card .btn-login-option {
	background: rgba(15, 23, 42, 0.92) !important;
	border: 1px solid rgba(148, 163, 184, 0.45) !important;
	color: var(--login-muted-strong) !important;
}

body[data-path="/login"] .page-card .btn.btn-default:hover,
body[data-path="/login"] .page-card .btn-login-option:hover,
body[data-path="login"] .page-card .btn.btn-default:hover,
body[data-path="login"] .page-card .btn-login-option:hover {
	background: rgba(30, 41, 59, 0.96) !important;
	border-color: rgba(255, 105, 0, 0.6) !important;
	color: #ffffff !important;
}

body[data-path="/login"] .social-logins .text-muted,
body[data-path="/login"] .login-divider,
body[data-path="login"] .social-logins .text-muted,
body[data-path="login"] .login-divider {
	color: var(--login-muted-strong) !important;
}

body[data-path="/login"] .field-icon,
body[data-path="/login"] .toggle-password,
body[data-path="login"] .field-icon,
body[data-path="login"] .toggle-password {
	color: var(--login-muted) !important;
}

/* Ensure msgprint dialog text is readable on login page. */
body[data-path="/login"] .msgprint-dialog .modal-content,
body[data-path="login"] .msgprint-dialog .modal-content {
	background: #ffffff !important;
}

body[data-path="/login"] .msgprint-dialog .modal-title,
body[data-path="/login"] .msgprint-dialog .modal-body,
body[data-path="/login"] .msgprint-dialog .msgprint,
body[data-path="/login"] .msgprint-dialog .msgprint *,
body[data-path="/login"] .msgprint-dialog .modal-body *,
body[data-path="/login"] .msgprint-dialog .text-muted,
body[data-path="login"] .msgprint-dialog .modal-title,
body[data-path="login"] .msgprint-dialog .modal-body,
body[data-path="login"] .msgprint-dialog .msgprint,
body[data-path="login"] .msgprint-dialog .msgprint *,
body[data-path="login"] .msgprint-dialog .modal-body *,
body[data-path="login"] .msgprint-dialog .text-muted {
	color: #000000 !important;
	opacity: 1 !important;
}

@media (max-width: 991px) {
	body[data-path="/login"]::before,
	body[data-path="login"]::before {
		display: none;
	}

	body[data-path="/login"] .page_content > div,
	body[data-path="login"] .page_content > div {
		justify-content: center;
		padding: 24px 14px;
	}

	body[data-path="/login"] .page-card-head,
	body[data-path="login"] .page-card-head {
		text-align: center;
	}

	body[data-path="/login"] .page-card-head::before,
	body[data-path="login"] .page-card-head::before {
		margin-left: auto;
		margin-right: auto;
	}
}