/*
 * EZNEXT Soft UI - Phase 2: login page.
 *
 * The markup comes from e2next_theme/www/login.html, which overrides
 * frappe/www/login.html. This file only styles it: the brand panel on the
 * left, the login card on the right, both from the shell's --e2-* tokens.
 */

/* Frappe's website bundle does not put the page's own boxes in border-box,
 * so every min-height below would add its padding on top of 100vh and every
 * full-width field would overhang the card. One reset for the whole page. */
#page-login,
#page-login *,
#page-login *::before,
#page-login *::after {
	box-sizing: border-box;
}

#page-login {
	/* The mockup is a light page. Colours come from the shared tokens so
	 * the page follows the site's theme when one is applied, but the split
	 * shell itself is only ever laid out for a wide viewport. */
	color-scheme: light dark;
	--e2-login-pane: 480px;
	--e2-login-card: 352px;
	/* Frappe's website bundle redefines --font-stack on :root after the
	 * token file loads, so the mockup stack is set here on the page itself
	 * (an id beats :root) instead of relying on load order. */
	--font-stack: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Cairo", Helvetica, Arial, sans-serif;
	min-height: 100vh;
	background: var(--e2-bg);
	color: var(--e2-t1);
	font-family: var(--font-stack);
	/* The mockup's base leading. Frappe's website bundle sets 1.5 on body
	 * copy and 1.2/1.7 on headings, which is why the measured card rows came
	 * out taller than the reference. */
	line-height: 1.28;
}

body:has(#page-login),
#page-login body {
	--font-stack: "Plus Jakarta Sans", "IBM Plex Sans Arabic", "Cairo", Helvetica, Arial, sans-serif;
	font-family: var(--font-stack);
}

html:lang(ar) #page-login,
html:lang(ar) body:has(#page-login),
[dir="rtl"] #page-login,
[dir="rtl"] body:has(#page-login) {
	--font-stack: "Cairo", "IBM Plex Sans Arabic", "Plus Jakarta Sans", Helvetica, Arial, sans-serif;
	font-family: var(--font-stack);
}

/* Frappe's page container keeps a my-4 margin and the website template adds
 * a web-footer below the split shell, which together make the page taller
 * than the viewport and leave a scrollbar. Both live outside #page-login, so
 * they are reset through :has() as well as from the inside. */
#page-login .container,
#page-login .container.my-4,
#page-login main.container,
#page-login .page-content-wrapper,
#page-login .page-content,
body:has(#page-login) .container,
body:has(#page-login) main.container,
body:has(#page-login) .page-content-wrapper {
	margin: 0 !important;
	padding: 0 !important;
}

body:has(#page-login) .navbar,
body:has(#page-login) header,
body:has(#page-login) .page-breadcrumbs,
body:has(#page-login) .page-footer,
body:has(#page-login) .web-footer,
#page-login .navbar,
#page-login header,
#page-login .page-breadcrumbs,
#page-login .page-footer,
#page-login .web-footer {
	display: none !important;
}

/* The website template leaves the browser's default body margin on this
 * page, which shifts the whole split shell down and makes it overflow. */
body:has(#page-login) {
	margin: 0;
}

#page-login .page-content-wrapper,
#page-login .page-content,
#page-login main.container,
#page-login .page_content {
	width: 100%;
	max-width: none;
	min-height: 100vh;
	margin: 0;
	padding: 0;
}

/* ------------------------------------------------------------------ *
 * 1. Split shell
 * ------------------------------------------------------------------ */

#page-login section.for-login,
#page-login section.for-email-login,
#page-login section.for-signup,
#page-login section.for-forgot,
#page-login section.for-login-with-email-link {
	display: none;
}

#page-login section.e2-login-split:not([style*="display: none"]) {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--e2-login-pane);
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background: var(--e2-bg);
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * 2. Brand panel
 * ------------------------------------------------------------------ */

.e2-login-brand {
	display: flex;
	position: relative;
	flex-direction: column;
	/* The mockup's panel is one space-between column: the lockup row on top,
	 * the copy in the middle, the contact cards and the foot line at the
	 * bottom, with 28px as the minimum gap between the three blocks. */
	justify-content: space-between;
	gap: 28px;
	min-height: 100vh;
	padding: 52px 56px 44px;
	/* The mockup's two soft glows, as background layers: a white one bleeding
	 * in from the top right and a light blue one from the bottom left. */
	background:
		radial-gradient(circle 230px at calc(100% - 110px) 90px, rgb(255 255 255 / 20%) 0%, transparent 68%),
		radial-gradient(circle 210px at 110px calc(100% - 30px), rgb(36 180 252 / 34%) 0%, transparent 70%),
		linear-gradient(158deg, #0e96ea 0%, #0a6fae 58%, #075287 100%);
	color: #fff;
	overflow-x: hidden;
	overflow-y: auto;
}

.e2-login-brand-top {
	display: flex;
	align-items: center;
	gap: 11px;
}

.e2-login-logo {
	display: block;
	width: auto;
	height: 56px;
	max-width: 260px;
	object-fit: contain;
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 22%));
}

/* The mockup's lockup: the chevron stacked over the EZNEXT word, 79x56 in the
 * brand panel and 0.75x of that on the login card. One scale knob (--wm) so a
 * breakpoint only has to restate the ratio. */
.e2-login-wordmark {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	--wm: 1;
	gap: calc(5px * var(--wm));
	filter: drop-shadow(0 2px 8px rgb(0 0 0 / 22%));
}

.e2-login-wordmark .e2-wm-mark {
	width: calc(23px * var(--wm));
	height: calc(31px * var(--wm));
	align-self: center;
	color: #24b4fc;
}

.e2-wm-word {
	color: #24b4fc;
	font-family: var(--font-stack);
	font-size: calc(20px * var(--wm));
	font-weight: 500;
	/* 79px of wordmark in a 56px lockup, as in the mockup. */
	letter-spacing: calc(0.9px * var(--wm));
	line-height: 1;
}

.e2-login-lang {
	display: flex;
	height: 32px;
	align-items: center;
	gap: 2px;
	margin-inline-start: auto;
	padding: 0 5px;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 999px;
	background: rgb(255 255 255 / 14%);
}

.e2-login-lang-item {
	display: flex;
	height: 24px;
	align-items: center;
	padding: 0 11px;
	border-radius: 999px;
	background: transparent;
	color: rgb(255 255 255 / 72%);
	font-family: var(--font-stack);
	font-size: 12px;
	font-weight: 800;
	/* Frappe tracks links; the mockup's pills do not. */
	letter-spacing: normal;
	line-height: 1;
	text-decoration: none;
	transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.e2-login-lang-item:hover {
	color: #fff;
}

.e2-login-lang-item.is-active {
	background: #fff;
	color: var(--e2-brand-deep);
	font-weight: 800;
}

.e2-login-brand-copy {
	max-width: 520px;
}

.e2-login-bottom {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.e2-login-headline {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--font-stack);
	font-size: 40px;
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1.14;
	/* The mockup breaks before "one place." rather than leaving a single
	 * word on the last line, which is what text-wrap: pretty buys. */
	text-wrap: pretty;
}

.e2-login-subcopy {
	margin: 0;
	color: rgb(255 255 255 / 78%);
	font-family: var(--font-stack);
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.6;
}

.e2-login-contacts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}

/* The mockup stacks the icon badge above the label and value, not beside
 * them - a row would clip the longer values. */
.e2-login-contact {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 99px;
	gap: 9px;
	min-width: 0;
	padding: 13px 14px 12px;
	border: 1px solid rgb(255 255 255 / 16%);
	border-radius: 14px;
	background: rgb(255 255 255 / 11%);
}

.e2-login-contact > div {
	min-width: 0;
	max-width: 100%;
}

.e2-login-contact-icon {
	display: flex;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: rgb(255 255 255 / 18%);
}

.e2-login-contact-icon svg {
	width: 16px;
	height: 16px;
	stroke: #fff;
}

.e2-login-contact-label {
	color: rgb(255 255 255 / 60%);
	font-family: var(--font-stack);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 1.2;
	text-transform: uppercase;
}

.e2-login-contact-value {
	overflow: hidden;
	margin-top: 3px;
	color: #fff;
	/* Keeps a phone number or a domain in its own order inside an RTL
	 * page, where bidi would otherwise reverse the digits. */
	unicode-bidi: plaintext;
	font-family: var(--font-stack);
	font-size: 12.5px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.e2-login-foot {
	color: rgb(255 255 255 / 62%);
	font-family: var(--font-stack);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
}

/* ------------------------------------------------------------------ *
 * 3. Login card
 * ------------------------------------------------------------------ */

.e2-login-pane {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 44px 40px;
	background: var(--e2-srf);
}

#page-login .e2-login-pane .login-content.page-card {
	width: 100%;
	max-width: var(--e2-login-card);
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

#page-login .e2-login-pane .login-content.page-card.invalid-login {
	animation: e2-login-shake 0.4s ease-in-out;
}

@keyframes e2-login-shake {
	0%,
	100% {
		transform: translateX(0);
	}

	25% {
		transform: translateX(-6px);
	}

	75% {
		transform: translateX(6px);
	}
}

.e2-login-card-logo {
	display: block;
	width: auto;
	height: 42px;
	max-width: 200px;
	margin: 0 auto 22px;
	object-fit: contain;
}

.e2-login-card-head-logo {
	display: flex;
	justify-content: center;
	margin: 0 0 22px;
	opacity: 0.94;
}

/* The mockup's card lockup is the panel lockup at 42/56 of the size. */
.e2-login-card-head-logo .e2-login-wordmark {
	--wm: 0.75;
	filter: none;
	align-items: center;
}

.e2-login-card-head-logo .e2-wm-mark {
	color: #30b8fc;
}

.e2-login-card-head-logo .e2-wm-word {
	color: var(--e2-t1);
}

.e2-login-title {
	margin: 0 0 6px;
	color: var(--e2-t1);
	font-family: var(--font-stack);
	font-size: 25px;
	font-weight: 800;
	letter-spacing: -0.032em;
	line-height: 1.28;
}

.e2-login-tagline {
	margin: 0 0 30px;
	color: var(--e2-t4);
	font-family: var(--font-stack);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.28;
}

#page-login .e2-login-pane .form-signin {
	width: 100%;
	max-width: none;
}

#page-login .e2-login-pane .page-card-body,
#page-login .e2-login-pane .page-card-actions {
	width: 100%;
	max-width: none;
	padding: 0;
}

#page-login .e2-login-pane .form-group {
	margin-bottom: 0;
}

/* Frappe's website bundle sets .form-label to 14px/420, so the mockup's
 * label type needs the pane's id to win. */
#page-login .e2-login-pane .e2-login-label {
	display: block;
	margin: 0 0 7px;
	color: var(--e2-t3);
	font-family: var(--font-stack);
	font-size: 11.5px;
	font-weight: 700;
}

/* The mockup's "Forgot?" sits on the password label row, right-aligned. */
.e2-login-label-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 7px;
}

/* Inside the row the label is a flex item, so its own bottom margin would
 * stretch the row by 7px. */
#page-login .e2-login-pane .e2-login-label-row .e2-login-label {
	margin: 0;
}

#page-login .e2-login-pane .email-field {
	position: relative;
	/* The mockup's own gaps between the fields, not a form-group margin. */
	margin-bottom: 18px;
}

#page-login .e2-login-pane .password-field {
	position: relative;
	/* The password itself stays left-to-right in an Arabic page. */
	direction: ltr;
	margin-bottom: 14px;
}

#page-login .e2-login-pane .form-control {
	width: 100%;
	height: 44px;
	margin-bottom: 0;
	padding: 0 13px;
	border: 1px solid var(--e2-bd);
	border-radius: 12px;
	background: var(--e2-srf2);
	color: var(--e2-t1);
	font-family: var(--font-stack);
	font-size: 13.5px;
	line-height: normal;
	box-shadow: none;
}

#page-login .e2-login-pane .password-field .form-control {
	padding-right: 46px;
}

#page-login .e2-login-pane .form-control:focus {
	border-color: var(--e2-brand);
	background: var(--e2-srf);
	box-shadow: var(--e2-focus-ring);
}

#page-login .e2-login-pane .form-control::placeholder {
	color: #757575;
}

#page-login .e2-login-pane .field-icon {
	display: none;
}

/* The mockup's password eye. Frappe's own Show/Hide text link is replaced by
 * this button, which drives the same input. */
.e2-login-eye {
	display: flex;
	position: absolute;
	top: 50%;
	right: 5px;
	width: 34px;
	height: 34px;
	align-items: center;
	justify-content: center;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 999px;
	background: transparent;
	color: var(--e2-t4);
	cursor: pointer;
	transition: background 0.15s ease-in-out, color 0.15s ease-in-out;
}

.e2-login-eye:hover {
	background: var(--e2-brand-tint);
	color: var(--e2-brand);
}

.e2-login-eye svg {
	width: 18px;
	height: 12px;
	stroke: currentColor;
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The eye stays on the physical right in both directions, as in the mockup,
 * so the right offset above is deliberately not a logical one. */

/* Frappe's own show/hide link is no longer used. */
#page-login .e2-login-pane .toggle-password {
	display: none;
}

.e2-login-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	margin: 0 0 22px;
}

.e2-login-remember {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0;
	cursor: pointer;
}

.e2-login-remember .custom-control-input {
	position: absolute;
	z-index: -1;
	opacity: 0;
}

.e2-login-remember .custom-control-label {
	position: relative;
	margin: 0;
	padding-inline-start: 26px;
	color: var(--e2-t3);
	font-family: var(--font-stack);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
}

.e2-login-remember .custom-control-label::before {
	position: absolute;
	top: 50%;
	left: 0;
	width: 17px;
	height: 17px;
	transform: translateY(-50%);
	border: 1px solid var(--e2-bd2);
	border-radius: 5px;
	background: var(--e2-srf2);
	content: "";
}

.e2-login-remember .custom-control-input:checked ~ .custom-control-label::before {
	border-color: var(--e2-brand);
	background: var(--e2-brand);
}

.e2-login-remember .custom-control-input:checked ~ .custom-control-label::after {
	position: absolute;
	top: 50%;
	left: 6px;
	width: 4px;
	height: 8px;
	transform: translateY(-60%) rotate(43deg);
	border: 2px solid #fff;
	border-block-start: 0;
	border-inline-start: 0;
	content: "";
}

#page-login .e2-login-pane .forgot-password-message {
	margin: 0;
	/* Frappe's paragraph is 16px/1, which makes the row 2px taller than the
	 * mockup's plain link. */
	font-size: 11.5px;
}

#page-login .e2-login-pane .forgot-password-message a,
#page-login .e2-login-pane .sign-up-message a {
	color: var(--e2-brand);
	font-family: var(--font-stack);
	font-size: 11.5px;
	font-weight: 600;
	/* Frappe tracks links by 0.23px, which widens "Forgot?" by 1.6px. */
	letter-spacing: normal;
	text-decoration: none;
}

#page-login .e2-login-pane .page-card-actions {
	margin-top: 0;
}

#page-login .e2-login-pane .btn-login,
#page-login .e2-login-pane .btn-ldap-login,
#page-login .e2-login-pane .btn-forgot,
#page-login .e2-login-pane .btn-login-with-email-link {
	display: flex;
	width: 100%;
	height: 46px;
	align-items: center;
	justify-content: center;
	gap: 9px;
	margin-top: 0;
	border: 0;
	border-radius: 999px;
	background: var(--e2-brand);
	color: #fff;
	font-family: var(--font-stack);
	font-size: 14px;
	font-weight: 700;
	box-shadow: 0 6px 18px -6px rgb(14 150 234 / 62%);
}

/* The mockup's chevron, as a CSS glyph: frappe replaces the whole button
 * content with .text() when a login fails, which would wipe a real <svg>
 * out of the markup for good. */
#page-login .e2-login-pane .btn-login::after {
	font-size: 15px;
	line-height: 1;
	content: "›";
}

[dir="rtl"] #page-login .e2-login-pane .btn-login::after {
	transform: scaleX(-1);
}

#page-login .e2-login-pane .btn-login:hover,
#page-login .e2-login-pane .btn-ldap-login:hover,
#page-login .e2-login-pane .btn-forgot:hover,
#page-login .e2-login-pane .btn-login-with-email-link:hover {
	background: var(--e2-brand-deep);
	color: #fff;
}

/* The mockup's OR divider. */
#page-login .e2-login-pane .login-divider {
	display: flex;
	align-items: center;
	gap: 13px;
	margin: 22px 0;
	color: var(--e2-t5) !important;
	font-family: var(--font-stack);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1;
	text-transform: uppercase;
}

#page-login .e2-login-pane .login-divider::before,
#page-login .e2-login-pane .login-divider::after {
	height: 1px;
	flex: 1 1 auto;
	background: var(--e2-bd);
	content: "";
}

#page-login .e2-login-pane .social-login-buttons,
#page-login .e2-login-pane .login-button-wrapper {
	width: 100%;
	margin-top: 8px;
}

#page-login .e2-login-pane .btn-login-option {
	display: flex;
	height: 46px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0 16px;
	border: 1px solid var(--e2-bd);
	border-radius: 999px;
	background: var(--e2-srf);
	color: var(--e2-t2);
	font-family: var(--font-stack);
	font-size: 13.5px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: none;
}

#page-login .e2-login-pane .btn-login-option:hover {
	border-color: var(--e2-bd2);
	background: var(--e2-srf2);
	color: var(--e2-t1);
}

#page-login .e2-login-pane .btn-login-option img,
#page-login .e2-login-pane .btn-login-option svg {
	width: 16px;
	height: 16px;
}

#page-login .e2-login-pane .sign-up-message {
	position: static;
	margin: 20px 0 0;
	color: var(--e2-t4);
	font-family: var(--font-stack);
	font-size: 13px;
	text-align: center;
}

.e2-login-help {
	max-width: var(--e2-login-card);
	margin: 26px 0 0;
	color: var(--e2-t5);
	font-family: var(--font-stack);
	font-size: 12px;
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.65;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * 4. RTL
 * ------------------------------------------------------------------ */

/* Frappe's website templates put lang on <html> but never dir, so the mirror
 * layout is driven from the language and the base direction is set here. */
html:lang(ar) #page-login,
html:lang(ar) body:has(#page-login),
[dir="rtl"] #page-login,
[dir="rtl"] body:has(#page-login) {
	direction: rtl;
}

/* The mockup's two glows are placed with inset-inline-end, so they swap sides
 * with the writing direction. */
html:lang(ar) .e2-login-brand,
[dir="rtl"] .e2-login-brand {
	background:
		radial-gradient(circle 230px at 110px 90px, rgb(255 255 255 / 20%) 0%, transparent 68%),
		radial-gradient(circle 210px at calc(100% - 110px) calc(100% - 30px), rgb(36 180 252 / 34%) 0%, transparent 70%),
		linear-gradient(158deg, #0e96ea 0%, #0a6fae 58%, #075287 100%);
}

:is([dir="rtl"], html:lang(ar)) #page-login .e2-login-pane .btn-login::after {
	transform: scaleX(-1);
}

/* ------------------------------------------------------------------ *
 * 5. Narrow viewports
 * ------------------------------------------------------------------ */

@media (min-width: 768px) and (max-width: 1179px) {
	#page-login {
		--e2-login-pane: 400px;
		--e2-login-card: 336px;
	}

	.e2-login-brand {
		padding: 40px 36px 34px;
	}

	.e2-login-brand-top .e2-login-wordmark {
		--wm: 0.893;
	}

	.e2-login-headline {
		font-size: 32px;
	}

	.e2-login-contacts {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#page-login .e2-login-pane {
		padding: 40px 32px;
	}
}

@media (max-width: 767px) {
	#page-login {
		--e2-login-card: 352px;
	}

	#page-login section.e2-login-split:not([style*="display: none"]) {
		grid-template-columns: minmax(0, 1fr);
		align-content: start;
	}

	.e2-login-brand {
		min-height: 0;
		gap: 16px;
		padding: 22px 22px 24px;
	}

	.e2-login-brand-top .e2-login-wordmark {
		--wm: 0.786;
	}

	.e2-login-card-head-logo .e2-login-wordmark {
		--wm: 0.679;
	}

	.e2-login-card-head-logo {
		margin-bottom: 18px;
	}

	.e2-login-headline {
		font-size: 25px;
		margin-bottom: 10px;
	}

	.e2-login-subcopy {
		font-size: 13.5px;
	}

	.e2-login-bottom {
		display: none;
	}

	.e2-login-title {
		font-size: 22px;
	}

	#page-login .e2-login-pane {
		padding: 26px 20px 34px;
	}
}