/* Xpeedium Desk — sign-in page.
   A split screen: brand panel on the left, the form on the right; a slim brand
   band above the form on phones.

   Pure CSS, correct from the first frame. Solvronix's login runtime later fetches
   its theme CSS and branding and swaps the logo, title and data-theme; every rule
   here is anchored on #page-login (beats its class selectors) and the swapped
   elements are hidden, so nothing visible changes when those calls land.

   Per-site text and logo come from four variables, set in Website Settings →
   Head HTML:  --xp-login-logo: url(...)   --xp-login-name: "Company"
               --xp-login-headline: "..."  --xp-login-subline: "..."            */

:root {
	--xp-login-logo: none;
	--xp-login-name: "";
	--xp-login-headline: "Welcome back";
	--xp-login-subline: "";

	--xl-bg: #0b111d;
	--xl-brand: #0f1e38;
	--xl-text: #f1f5f9;
	--xl-muted: #93a4c3;
	--xl-label: #cbd5e1;
	--xl-field: #111a2b;
	--xl-field-border: #26324a;
	--xl-accent: #2563eb;
	--xl-accent-hover: #1d4ed8;
	--xl-link: #7fb0f8;
}

/* page frame -------------------------------------------------------------- */
html body:has(#page-login),
html body #page-login,
html body #page-login .page-content-wrapper,
html body #page-login main.container,
html body #page-login .page_content {
	background: var(--xl-bg) !important;
	animation: none !important;
}
/* Solvronix's fixed, blurred "drifting colour" layer sits over everything */
html body:has(#page-login)::before,
html body:has(#page-login)::after {
	display: none !important;
	animation: none !important;
}
html body #page-login main.container {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
html body #page-login .page-breadcrumbs,
html body #page-login .page-header-wrapper,
html body #page-login .page-footer,
html body:has(#page-login) footer.web-footer,
html body:has(#page-login) .st-login-custom-footer,
html body #page-login .powered-by {
	display: none !important;
}

/* one layout for every sign-in screen that is showing (ERPNext hides the
   others with an inline display:none; Solvronix re-shows them inline) ------- */
html body #page-login section.for-login:not([style*="none"]),
html body #page-login section.for-email-login:is([style*="block"], [style*="flex"]),
html body #page-login section.for-forgot:is([style*="block"], [style*="flex"]),
html body #page-login section.for-signup:is([style*="block"], [style*="flex"]),
html body #page-login section.for-login-with-email-link:is([style*="block"], [style*="flex"]) {
	display: grid !important;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	grid-template-rows: auto minmax(0, 1fr) auto;
	min-height: 100vh !important;
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
	flex-direction: unset !important;
	align-items: stretch !important;
	justify-content: stretch !important;
	animation: none !important;
}

/* a screen ERPNext hid stays hidden: Solvronix forces .for-login to
   display:flex !important, so "Forgot password" showed below the whole login */
html body #page-login section[class*="for-"][style*="display: none"] {
	display: none !important;
}

/* brand panel: navy, two soft blue glows, a faint dot grid, logo + name ----- */
html body #page-login section[class*="for-"]::before {
	content: var(--xp-login-name);
	grid-column: 1;
	grid-row: 1 / span 3;
	display: block !important;
	position: static !important;
	box-sizing: border-box;
	padding: 52px 64px 0 114px;
	min-height: 100vh;
	font: 700 21px/40px Inter, "Segoe UI", system-ui, sans-serif;
	letter-spacing: -0.01em;
	color: #ffffff;
	background:
		var(--xp-login-logo) 64px 52px / 38px 38px no-repeat,
		radial-gradient(640px 460px at 12% 108%, rgba(37, 99, 235, 0.55), transparent 62%),
		radial-gradient(560px 420px at 100% -8%, rgba(59, 130, 246, 0.32), transparent 60%),
		radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.2px) 0 0 / 22px 22px,
		var(--xl-brand);
	border-right: 1px solid rgba(255, 255, 255, 0.06);
}

/* headline + one line under it, at the bottom of the brand panel. ERPNext's
   own logo/title here are hidden: Solvronix replaces them after a network call */
html body #page-login section[class*="for-"] > .page-card-head {
	grid-column: 1;
	grid-row: 3;
	align-self: end;
	position: relative;
	z-index: 1;
	padding-top: 0 !important;
	padding-bottom: 72px !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	text-align: left !important;
}
html body #page-login section[class*="for-"] > .page-card-head > * {
	display: none !important;
}
html body #page-login section[class*="for-"] > .page-card-head::before {
	content: var(--xp-login-headline);
	display: block;
	margin: 0 64px;
	max-width: 520px;
	font: 700 40px/1.15 Inter, "Segoe UI", system-ui, sans-serif;
	letter-spacing: -0.025em;
	color: #ffffff;
	text-wrap: balance;
}
html body #page-login section[class*="for-"] > .page-card-head::after {
	content: var(--xp-login-subline);
	display: block;
	margin: 16px 64px 0;
	max-width: 540px;
	font: 400 16px/1.55 Inter, "Segoe UI", system-ui, sans-serif;
	color: rgba(226, 234, 246, 0.74);
}

/* the form column ----------------------------------------------------------- */
html body #page-login section[class*="for-"] > .login-content.page-card,
html body #page-login section[class*="for-"] > .page-card {
	grid-column: 2;
	grid-row: 1 / span 3;
	align-self: center;
	justify-self: center;
	box-sizing: border-box;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	animation: none !important;
	font-family: Inter, "Segoe UI", system-ui, sans-serif;
}
html body #page-login section[class*="for-"] > .page-card::before {
	display: block;
	font: 700 28px/1.2 Inter, "Segoe UI", system-ui, sans-serif !important;
	letter-spacing: -0.02em;
	color: var(--xl-text) !important;
	margin-bottom: 6px;
}
html body #page-login section.for-login > .page-card::before {
	content: "Log in to " var(--xp-login-name);
}
html body #page-login section.for-forgot > .page-card::before {
	content: "Reset your password";
}
html body #page-login section.for-email-login > .page-card::before,
html body #page-login section.for-login-with-email-link > .page-card::before {
	content: "Log in with an email link";
}
html body #page-login section.for-signup > .page-card::before {
	content: "Create your account";
}
/* ERPNext caps the form at 320px and centres it inside the 420px card: the
   heading sat 50px left of the fields. One left edge for everything. */
html body #page-login section[class*="for-"] > .page-card > form {
	max-width: none !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body #page-login section[class*="for-"] .btn-login-option,
html body #page-login section[class*="for-"] .login-button-wrapper {
	margin: 0 !important;
	padding: 0 !important;
	width: 100% !important;
}
html body #page-login section[class*="for-"] > .page-card > form::before {
	display: block;
	font: 400 14.5px/1.5 Inter, "Segoe UI", system-ui, sans-serif !important;
	color: var(--xl-muted) !important;
	margin-bottom: 28px;
}
html body #page-login section.for-login > .page-card > form::before {
	content: "Welcome back. Enter your details to continue.";
}
html body #page-login section.for-forgot > .page-card > form::before {
	content: "We will email you a link to choose a new password.";
}
html body #page-login section.for-login-with-email-link > .page-card > form::before,
html body #page-login section.for-email-login > .page-card > form::before {
	content: "We will email you a one-time link to log in.";
}
/* Solvronix's "Powered by" line under the button shows until its late script
   hides it (the form then jumped); off from the first frame */
html body #page-login section[class*="for-"] .page-card-actions::after {
	display: none !important;
	content: none !important;
}
html body #page-login section[class*="for-"] .page-card-body,
html body #page-login section[class*="for-"] .page-card-actions {
	padding: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* fields: visible labels, big inputs, one focus ring ------------------------- */
html body #page-login section[class*="for-"] .form-group {
	margin: 0 0 18px !important;
}
html body #page-login section[class*="for-"] .form-label.sr-only {
	position: static !important;
	width: auto !important;
	height: auto !important;
	margin: 0 0 7px !important;
	padding: 0 !important;
	overflow: visible !important;
	clip: auto !important;
	white-space: normal !important;
	display: block !important;
	font: 600 13px/1.3 Inter, "Segoe UI", system-ui, sans-serif !important;
	color: var(--xl-label) !important;
}
html body #page-login section[class*="for-"] .form-control {
	height: 46px !important;
	box-sizing: border-box;
	border-radius: 10px !important;
	background: var(--xl-field) !important;
	border: 1px solid var(--xl-field-border) !important;
	color: var(--xl-text) !important;
	font: 400 15px/1 Inter, "Segoe UI", system-ui, sans-serif !important;
	box-shadow: none !important;
	transition: border-color 0.15s, box-shadow 0.15s;
}
html body #page-login section[class*="for-"] .form-control::placeholder {
	color: #5d6b85 !important;
}
html body #page-login section[class*="for-"] .form-control:focus {
	border-color: var(--xl-accent) !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.28) !important;
	outline: none !important;
}
/* Chrome / password-manager autofill keeps the field colours */
html body #page-login section[class*="for-"] .form-control:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 60px var(--xl-field) inset !important;
	-webkit-text-fill-color: var(--xl-text) !important;
	caret-color: var(--xl-text);
}
html body #page-login section[class*="for-"] .field-icon,
html body #page-login section[class*="for-"] .email-field svg,
html body #page-login section[class*="for-"] .password-field svg {
	color: var(--xl-muted) !important;
	--icon-stroke: var(--xl-muted);
}
html body #page-login section[class*="for-"] .toggle-password {
	top: 50% !important;
	transform: translateY(-50%);
	color: var(--xl-muted) !important;
	font: 600 12.5px/1 Inter, "Segoe UI", system-ui, sans-serif !important;
	cursor: pointer;
}
html body #page-login section[class*="for-"] .toggle-password:hover {
	color: var(--xl-text) !important;
}
html body #page-login section[class*="for-"] .forgot-password-message {
	margin: -8px 0 20px !important;
	text-align: right !important;
}
html body #page-login section[class*="for-"] .forgot-password-message a,
html body #page-login section[class*="for-"] .sign-up-message a,
html body #page-login section[class*="for-"] .page-card a:not(.btn) {
	color: var(--xl-link) !important;
	font: 600 13px/1.4 Inter, "Segoe UI", system-ui, sans-serif !important;
	text-decoration: none !important;
}
html body #page-login section[class*="for-"] .forgot-password-message a:hover,
html body #page-login section[class*="for-"] .page-card a:not(.btn):hover {
	text-decoration: underline !important;
}

/* buttons -------------------------------------------------------------------- */
html body #page-login section[class*="for-"] .btn {
	height: 46px !important;
	border-radius: 10px !important;
	font: 600 15px/1 Inter, "Segoe UI", system-ui, sans-serif !important;
	box-shadow: none !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	transition: background-color 0.15s, border-color 0.15s;
}
html body #page-login section[class*="for-"] .btn-primary {
	background: var(--xl-accent) !important;
	border: 1px solid var(--xl-accent) !important;
	color: #ffffff !important;
}
html body #page-login section[class*="for-"] .btn-primary:hover {
	background: var(--xl-accent-hover) !important;
	border-color: var(--xl-accent-hover) !important;
}
html body #page-login section[class*="for-"] .btn-default,
html body #page-login section[class*="for-"] .btn-login-option {
	background: transparent !important;
	border: 1px solid var(--xl-field-border) !important;
	color: var(--xl-text) !important;
}
html body #page-login section[class*="for-"] .btn-default:hover,
html body #page-login section[class*="for-"] .btn-login-option:hover {
	background: rgba(255, 255, 255, 0.04) !important;
	border-color: #37465f !important;
}
html body #page-login section[class*="for-"] .btn:focus-visible {
	outline: 3px solid rgba(96, 165, 250, 0.6) !important;
	outline-offset: 2px;
}

/* "or" as a line with the word in the middle ---------------------------------- */
html body #page-login section[class*="for-"] .login-divider {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 22px 0 !important;
	font: 500 12.5px/1 Inter, "Segoe UI", system-ui, sans-serif !important;
	color: var(--xl-muted) !important;
	text-transform: lowercase;
}
html body #page-login section[class*="for-"] .login-divider::before,
html body #page-login section[class*="for-"] .login-divider::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--xl-field-border);
}

/* note at the bottom of the form column --------------------------------------- */
html body #page-login section.for-login::after {
	content: "Need an account? Ask your system administrator.";
	grid-column: 2;
	grid-row: 3;
	justify-self: center;
	align-self: end;
	padding: 0 0 28px;
	font: 400 13px/1.4 Inter, "Segoe UI", system-ui, sans-serif;
	color: #6b7a96;
}

/* phones and small tablets: slim brand band, form below ------------------------ */
@media (max-width: 959.98px) {
	html body #page-login section.for-login:not([style*="none"]),
	html body #page-login section.for-email-login:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-forgot:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-signup:is([style*="block"], [style*="flex"]),
	html body #page-login section.for-login-with-email-link:is([style*="block"], [style*="flex"]) {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto auto minmax(0, 1fr) auto;
	}
	html body #page-login section[class*="for-"]::before {
		grid-column: 1;
		grid-row: 1;
		min-height: 0;
		height: 88px;
		padding: 24px 24px 0 72px;
		background-position: 24px 24px, 0 0, 0 0, 0 0, 0 0;
		border-right: 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	}
	html body #page-login section[class*="for-"] > .page-card-head {
		display: none !important;
	}
	html body #page-login section[class*="for-"] > .login-content.page-card,
	html body #page-login section[class*="for-"] > .page-card {
		grid-column: 1;
		grid-row: 2;
		align-self: start;
		margin-top: 40px !important;
	}
	html body #page-login section[class*="for-"] > .page-card::before {
		font-size: 24px;
	}
	html body #page-login section.for-login::after {
		grid-column: 1;
		grid-row: 4;
		padding: 24px 0 28px;
	}
}

/* reset-password screen: space between the field and its button */
html body #page-login section.for-forgot .page-card-actions {
	margin-top: 16px !important;
}