/*
 * LMS auth screens (/login, /update-password).
 * Values are taken from student.infinitylearn.com/login so the two products feel identical.
 * Loaded site-wide through web_include_css, so every rule is scoped to the auth pages.
 */

:root {
	--il-chrome: #027bff;
	--il-primary-10: #00254c;
	--il-primary-30: #004a99;
	--il-primary-40: #0062cc;
	--il-primary-95: #e6f2ff;
	--il-ink: #080e14;
	--il-ink-30: #3a3e44;
	--il-neutral-50: #6c6e72;
	--il-neutral-60: #85878a;
	--il-neutral-90: #e6e7e8;
	--il-neutral-95: #f2f2f2;
	--il-surface: #ffffff;
	--il-error: #f03e3e;
	--il-success: #04742d;
	--il-tagline: #f1f2f6;
}

body:is([data-path="login"], [data-path="update-password"]) {
	margin: 0;
	min-height: 100vh;
	background: var(--il-chrome) !important;
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

body:is([data-path="login"], [data-path="update-password"]) :is(.navbar, .web-footer, footer, .page-breadcrumbs, .page-header-wrapper) {
	display: none !important;
}

body:is([data-path="login"], [data-path="update-password"]) :is(.page-content-wrapper, main.container, .page_content, .main-section) {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: 100% !important;
}

/* ---------- Shell: blue brand half + light panel half ---------- */

.il-auth-shell {
	display: flex;
	width: 100vw;
	min-height: 100vh;
	height: 100vh;
	overflow: hidden;
	background: var(--il-chrome);
	font-family: Poppins, system-ui, sans-serif;
}

.il-auth-brand {
	position: relative;
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--il-chrome);
}

.il-auth-brand-bg {
	position: absolute;
	inset: 0;
	background: url("/assets/lms/images/il-auth-bg-web.webp") center / cover no-repeat;
}

.il-auth-brand-content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 2.5rem;
	text-align: center;
}

.il-auth-logo {
	display: block;
	width: 18.5rem;
	max-width: 100%;
	height: auto;
}


.il-auth-product {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	max-width: 22rem;
	margin-top: 2rem;
}

.il-auth-product-badge {
	padding: 0.35rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.il-auth-product-text {
	margin: 0;
	color: var(--il-tagline);
	font-size: 0.95rem;
	font-weight: 400;
	line-height: 1.5;
}

.il-auth-panel {
	position: relative;
	z-index: 1;
	flex: 0 0 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	overflow: hidden auto;
	background: var(--il-surface);
	border-top-left-radius: 2rem;
	border-bottom-left-radius: 2rem;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
	transition: background-color 0.2s ease;
}

.il-auth-panel[data-screen="welcome"] {
	background: var(--il-neutral-95);
}

/* The student app's welcome card carries 96px of bottom padding, lifting it above centre. */
.il-auth-panel[data-screen="welcome"] .il-auth-content {
	padding-bottom: 6rem;
}

.il-auth-content {
	width: 100%;
	max-width: 480px;
}

.il-auth-back {
	position: absolute;
	top: 2rem;
	left: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--il-surface);
	color: var(--il-ink);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16);
	cursor: pointer;
}

.il-auth-back[hidden] {
	display: none;
}

.il-auth-back:hover {
	background: var(--il-neutral-95);
}

/* ---------- Sections ---------- */

/* !important beats the inline display Frappe's login.js sets with $.toggle(). */
.il-auth-content > section {
	display: none !important;
}

.il-auth-content > section.is-active {
	display: block !important;
	animation: ilAuthIn 0.25s ease-out both;
}

@keyframes ilAuthIn {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.il-auth-header {
	margin: 0.5rem 0 1.5rem;
	text-align: center;
}

.il-auth-title {
	margin: 0;
	color: var(--il-ink);
	font-family: inherit;
	font-size: 36px;
	font-weight: 500;
	line-height: 54px;
	letter-spacing: 0;
}

.il-auth-subtitle {
	margin: 0 0 10px;
	color: var(--il-primary-10);
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.15px;
}

/* ---------- Method picker ---------- */

.il-auth-methods {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 1rem;
}

.il-auth-method {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 1rem;
	border: 1px solid var(--il-neutral-90);
	border-radius: 1rem;
	background: var(--il-neutral-95);
	color: inherit;
	text-decoration: none !important;
	cursor: pointer;
	transition: box-shadow 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.il-auth-method:hover {
	border-color: #cce5ff;
	background: #fafafa;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.il-auth-method:focus-visible {
	outline: 2px solid var(--il-primary-40);
	outline-offset: 2px;
}

.il-auth-method-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	margin-right: 1rem;
	border-radius: 1.25rem;
	background: var(--il-primary-40);
	color: #fff;
}

.il-auth-method-text {
	display: flex;
	flex: 1;
	min-width: 0;
	flex-direction: column;
}

.il-auth-method-title {
	margin-bottom: 0.25rem;
	color: var(--il-ink-30);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.25rem;
}

.il-auth-method-sub {
	color: var(--il-neutral-60);
	font-size: 0.75rem;
	line-height: 1.05rem;
}

.il-auth-method-arrow {
	flex-shrink: 0;
	color: #52565c;
}

/* ---------- Form controls ---------- */

.il-auth-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
	width: 100%;
}

.il-auth-form.hide {
	display: flex !important;
}

.il-field {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
}

.il-input-box {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
	height: 48px;
	padding-right: 0.25rem;
	border: 1px solid var(--il-neutral-60);
	border-radius: 12px;
	background: var(--il-surface);
	transition: border-color 0.2s ease;
}

.il-input-box:focus-within {
	border-color: var(--il-primary-40);
}

.il-field.invalid .il-input-box {
	border-color: var(--il-error);
}

.il-input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding: 0 0 0 1.5rem;
	border: 0 !important;
	outline: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
	color: var(--il-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 24px;
}

.il-label {
	position: absolute;
	top: 24px;
	left: 16px;
	z-index: 1;
	margin: 0;
	padding: 0 4px;
	transform: translateY(-50%);
	color: var(--il-neutral-60);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	pointer-events: none;
	transition: top 0.2s ease-out, transform 0.2s ease-out, color 0.2s ease-out, background-color 0.2s ease-out;
}

.il-input:focus + .il-label,
.il-input:not(:placeholder-shown) + .il-label {
	top: -12px;
	transform: none;
	background: var(--il-surface);
}

.il-input:focus + .il-label {
	color: var(--il-primary-40);
}

.il-field.invalid .il-label {
	color: var(--il-error);
}

.il-input-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem;
	border: 0;
	background: none;
	color: var(--il-neutral-50);
	cursor: pointer;
}

.field-error {
	display: none;
	margin: 6px 0 0;
	color: var(--il-error);
	font-size: 12px;
	text-align: left;
	white-space: pre-line;
}

.il-field.invalid .field-error {
	display: block;
}

.il-auth-forgot {
	align-self: flex-start;
	margin-top: -4px;
	color: var(--il-primary-40) !important;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none !important;
}

.il-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 4px 0 0;
	color: var(--il-ink);
	font-size: 14px;
	line-height: 20px;
	cursor: pointer;
}

.il-consent a {
	color: var(--il-primary-40) !important;
	text-decoration: none;
}

.il-consent-input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.il-consent-box {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-top: 1px;
	border: 2px solid var(--il-primary-40);
	border-radius: 4px;
	color: var(--il-primary-40);
}

.il-consent-box svg {
	visibility: hidden;
}

.il-consent-input:checked + .il-consent-box svg {
	visibility: visible;
}

.il-consent-input:focus-visible + .il-consent-box {
	outline: 2px solid var(--il-primary-40);
	outline-offset: 2px;
}

/* Pill submit — grey until the form is valid, like the student app. */
.il-auth-submit,
body[data-path="update-password"] #update {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 3.5rem;
	margin-top: 1rem;
	border: 0 !important;
	border-radius: 100px !important;
	background: var(--il-primary-30) !important;
	color: #fff !important;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.16) !important;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.il-auth-submit:hover:not(:disabled) {
	background: var(--il-primary-10) !important;
}

.il-auth-submit:disabled,
body[data-path="update-password"] #update:disabled {
	background: var(--il-neutral-90) !important;
	color: var(--il-neutral-50) !important;
	cursor: not-allowed;
}

.il-auth-links {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	margin-top: 0.5rem;
}

.il-auth-link {
	padding: 9.6px 19.2px;
	color: var(--il-primary-40) !important;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	letter-spacing: 0.15px;
	text-decoration: none !important;
}

.il-auth-banner {
	display: none;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 20px;
}

.il-auth-banner-error {
	background: #fff1f1;
	color: #b42323;
}

.il-auth-banner-success {
	background: #e9f9ef;
	color: var(--il-success);
}

/* ---------- /update-password (Frappe page restyled in place) ---------- */

/* Frappe's website CSS sets its own font on form controls; keep everything in Poppins. */
body:is([data-path="login"], [data-path="update-password"]) .il-auth-shell,
body:is([data-path="login"], [data-path="update-password"]) .il-auth-shell :is(h1, h2, h3, h4, p, a, label, input, button, span, div) {
	font-family: Poppins, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body[data-path="update-password"] .il-auth-content .page-card-head {
	display: block !important;
	text-align: center !important;
}

/* /update-password has a single screen; always show it. */
body[data-path="update-password"] .il-auth-content > section {
	display: block !important;
}

body[data-path="update-password"] .il-auth-content :is(.page-card, .page-card-head, .page-card-body) {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	background: transparent !important;
}

body[data-path="update-password"] .il-auth-content .page-card-head {
	margin-bottom: 1.5rem !important;
	text-align: center;
}

body[data-path="update-password"] .il-auth-content :is(.page-card-head h4, .page-card-head .reset-password-heading) {
	margin: 0;
	color: var(--il-ink);
	font-size: 36px;
	font-weight: 500;
	line-height: 54px;
}

body[data-path="update-password"] .il-auth-content .form-group {
	margin-bottom: 16px;
}

body[data-path="update-password"] .il-auth-content .form-group label {
	margin-bottom: 6px;
	color: var(--il-neutral-50);
	font-size: 14px;
	font-weight: 500;
}

body[data-path="update-password"] .il-auth-content input.form-control {
	height: 48px;
	padding: 0 1.25rem;
	border: 1px solid var(--il-neutral-60) !important;
	border-radius: 12px !important;
	background: var(--il-surface) !important;
	box-shadow: none !important;
	color: var(--il-ink);
	font-family: inherit;
	font-size: 16px;
}

body[data-path="update-password"] .il-auth-content input.form-control:focus {
	border-color: var(--il-primary-40) !important;
}

body[data-path="update-password"] .il-auth-content .password-hint,
body[data-path="update-password"] .il-auth-content .password-strength-indicator,
body[data-path="update-password"] .il-auth-content .help-block {
	color: var(--il-neutral-50);
	font-size: 12px;
}

.il-auth-hidden {
	display: none !important;
}

/* ---------- Tablet & mobile: brand on top, panel as a bottom sheet ---------- */

@media (max-width: 1023px) {
	.il-auth-shell {
		position: relative;
		flex-direction: column;
		height: auto;
		min-height: 100dvh;
		overflow: visible;
	}

	.il-auth-brand {
		flex: 0 0 45dvh;
		align-items: flex-start;
		padding-top: 12dvh;
	}

	.il-auth-brand-bg {
		background-image: url("/assets/lms/images/il-auth-bg-mobile.webp");
	}

	.il-auth-logo {
		width: 12rem;
	}

	.il-auth-product {
		margin-top: 1rem;
		gap: 0.5rem;
	}

	.il-auth-product-text {
		display: none;
	}

	.il-auth-panel {
		flex: 1 0 auto;
		align-items: flex-start;
		margin-top: -2rem;
		padding: 3rem 1rem 3.25rem;
		min-height: 55dvh;
		border-radius: 2rem 2rem 0 0;
	}

	.il-auth-back {
		top: 1rem;
		left: 1rem;
		width: 2.5rem;
		height: 2.5rem;
	}

	.il-auth-title {
		font-size: 28px;
		line-height: 36px;
	}

	.il-auth-subtitle {
		color: var(--il-neutral-50);
		font-size: 14px;
		font-weight: 400;
	}

	.il-auth-methods {
		padding: 0;
	}
}

@media (max-width: 767px) {
	.il-auth-brand {
		flex-basis: 40dvh;
		padding-top: 8dvh;
	}

}