/* Premium split layout for the /login page (login, signup, forgot and
   email-link states all share the same shell).

   Built against frappe's own login markup:
     body[data-path="login"] > .page-content-wrapper > main.container
       > .page_content > section.for-login > .login-content.page-card
   The form on the left half; on the right, the <aside class="auth-panel">
   carousel that js/login.js appends to main.container. Colours are the
   espresso design tokens the app already uses, so the page follows the
   product theme; the brand green is the Learning mark's. Everything is scoped
   to the login page. No other web page is affected. */

/* The website navbar has no business on an auth screen. frappe v15 renders
   it above the login card; develop already suppresses it via a template block. */
body[data-path="login"] header.navbar,
body[data-path="login"] .navbar,
body[data-path="login"] .web-footer {
	display: none;
}

body[data-path="login"] {
	--auth-brand: #0E7159;
	--auth-brand-strong: #0B5B47;
	--auth-brand-tint: rgba(14, 113, 89, 0.12);
	--auth-panel-from: #EAF3F0;
	--auth-panel-to: #F6F8F7;
	--auth-ease: cubic-bezier(0.22, 1, 0.36, 1);
	background-color: var(--surface-gray-1, #f7f7f7);
}

/* ---- The shell -------------------------------------------------------- */

@media (min-width: 992px) {
	body[data-path="login"] .page-content-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 100vh;
		padding: 24px;
	}

	body[data-path="login"] .page-content-wrapper > .page-breadcrumbs,
	body[data-path="login"] main.container > .page-header-wrapper,
	body[data-path="login"] main.container > .page-footer {
		display: none;
	}

	body[data-path="login"] main.container {
		position: relative;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		width: 100%;
		max-width: 1280px;
		height: min(820px, calc(100vh - 48px));
		padding: 0;
		background-color: var(--surface-base, #fff);
		border: 1px solid var(--outline-gray-2, #e5e5e5);
		border-radius: 16px;
		overflow: hidden;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 24px 60px -28px rgba(0, 0, 0, 0.22);
	}

	/* Left half: the form column. */
	body[data-path="login"] main.container > .page_content {
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		width: 50%;
		height: 100%;
		padding: 32px 24px;
		overflow-y: auto;
	}

	/* Right half: the carousel panel, inset with its own radius. */
	body[data-path="login"] .auth-panel {
		position: absolute;
		top: 14px;
		bottom: 14px;
		inset-inline-end: 14px;
		width: calc(50% - 28px);
		border-radius: 14px;
		overflow: hidden;
		background-color: var(--auth-panel-to);
		background-image: radial-gradient(32rem 24rem at 78% 8%, rgba(14, 113, 89, 0.14), transparent 62%),
			linear-gradient(160deg, var(--auth-panel-from), var(--auth-panel-to) 62%);
		box-shadow: inset 0 0 0 1px rgba(14, 113, 89, 0.08);
	}
}

/* Below the split the panel has no home: the script still appends it, so
   keep it out of the flow on small screens. */
@media (max-width: 991px) {
	body[data-path="login"] .auth-panel {
		display: none;
	}
}

/* ---- The carousel ----------------------------------------------------- */

body[data-path="login"] .auth-slides {
	position: absolute;
	inset: 0;
}

body[data-path="login"] .auth-slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	margin: 0;
	padding: 48px;
	box-sizing: border-box;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 700ms var(--auth-ease), transform 700ms var(--auth-ease), visibility 0s linear 700ms;
}

body[data-path="login"] .auth-slide.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

body[data-path="login"] .auth-slide img {
	display: block;
	width: min(76%, 440px);
	height: auto;
	max-height: 56%;
	/* auto on every side centres it in whatever room the caption leaves. */
	margin: auto;
	object-fit: contain;
}

body[data-path="login"] .auth-slide figcaption {
	max-width: 400px;
}

body[data-path="login"] .auth-slide h3 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 28px;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--ink-gray-9, #171717);
}

body[data-path="login"] .auth-slide p {
	margin: 0;
	font-size: 14px;
	line-height: 21px;
	color: var(--ink-gray-6, #525252);
	text-wrap: pretty;
}

body[data-path="login"] .auth-dots {
	position: absolute;
	inset-inline-end: 48px;
	bottom: 52px;
	display: flex;
	gap: 6px;
}

body[data-path="login"] .auth-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: none;
	border-radius: 9999px;
	background-color: rgba(14, 113, 89, 0.22);
	cursor: pointer;
	transition: width 300ms var(--auth-ease), background-color 300ms var(--auth-ease);
}

body[data-path="login"] .auth-dot.is-active {
	width: 22px;
	background-color: var(--auth-brand);
}

body[data-path="login"] .auth-dot:focus-visible {
	outline: 2px solid var(--auth-brand);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	body[data-path="login"] .auth-slide,
	body[data-path="login"] .auth-dot {
		transition: none;
	}
}

/* ---- The card ----------------------------------------------------------- */

/* Desktop only: the shell already draws the surface, so the card itself stops
   being a card. Below 992px frappe's own full-bleed mobile card is left alone. */
@media (min-width: 992px) {
	body[data-path="login"] .for-login .page-card,
	body[data-path="login"] .for-email-login .page-card,
	body[data-path="login"] .for-signup .page-card,
	body[data-path="login"] .for-forgot .page-card,
	body[data-path="login"] .for-login-with-email-link .page-card,
	body[data-path="login"] .for-reset-password .page-card {
		max-width: 384px;
		padding: 0;
		background-color: transparent;
		border: none;
		box-shadow: none;
	}

	/* The card is the only thing in the left column, so the section wrapper
	   must not add the page's own vertical rhythm on top of it. */
	body[data-path="login"] .page_content > div {
		width: 100%;
	}

	/* v15 renders .page-card-head and .sign-up-message as siblings of the
	   card, each centred on its own axis; develop nests them inside it. Give
	   the section the card's width so every state lines up on one left edge,
	   and let v15's 320px inner form fill it. */
	body[data-path="login"] .page_content section {
		max-width: 384px;
		margin: 0 auto;
	}

	body[data-path="login"] .page-card form {
		max-width: none;
	}
}

body[data-path="login"] .page-card-head {
	padding: 0 0 20px;
	text-align: start;
}

body[data-path="login"] .page-card-head h4,
body[data-path="login"] .page-card-head .page-card-title {
	margin-top: 12px;
	font-size: 26px;
	line-height: 32px;
	font-weight: 600;
	letter-spacing: -0.02em;
}

body[data-path="login"] .app-logo {
	width: 28px;
	height: 28px;
	border-radius: 7px;
}

/* ---- Fields --------------------------------------------------------------- */

body[data-path="login"] .page-card label {
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;
	color: var(--ink-gray-6, #525252);
}

body[data-path="login"] .form-control {
	height: 42px;
	padding: 0 12px;
	font-size: 14px;
	border: 1px solid var(--outline-gray-2, #e5e5e5);
	border-radius: 10px;
	background-color: var(--surface-gray-1, #f7f7f7);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
	transition: border-color 150ms var(--auth-ease), background-color 150ms var(--auth-ease),
		box-shadow 150ms var(--auth-ease);
}

body[data-path="login"] .form-control:hover {
	border-color: var(--outline-gray-3, #d4d4d4);
}

body[data-path="login"] .form-control:focus {
	background-color: var(--surface-base, #fff);
	border-color: var(--auth-brand);
	box-shadow: 0 0 0 3px var(--auth-brand-tint);
	outline: none;
}

body[data-path="login"] .form-control::placeholder {
	color: var(--ink-gray-4, #a3a3a3);
}

body[data-path="login"] .page-card-body.invalid .form-control,
body[data-path="login"] .form-group.invalid .form-control {
	border-color: var(--outline-red-3, #e03e3e);
	box-shadow: none;
}

/* Inside-field affordances. develop draws an eye icon in .password-field;
   v15 draws a leading icon in both fields and a "Show" text toggle. Both are
   absolutely positioned by frappe against a 28px control, so re-centre them
   on the 42px one. */
body[data-path="login"] .password-field .form-control {
	padding-inline-end: 56px;
}

body[data-path="login"] .email-field .field-icon ~ .form-control,
body[data-path="login"] .password-field .field-icon ~ .form-control,
body[data-path="login"] .page-card-body .email-field input,
body[data-path="login"] .page-card-body .password-field input {
	padding-inline-start: 38px;
}

body[data-path="login"] .field-icon {
	inset-inline-start: 13px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ink-gray-5, #737373);
}

body[data-path="login"] .password-field .toggle-password {
	inset-inline-end: 12px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 12px;
	font-weight: 500;
	color: var(--ink-gray-5, #737373);
	cursor: pointer;
}

body[data-path="login"] .password-field .toggle-password:hover {
	color: var(--ink-gray-8, #262626);
}

body[data-path="login"] .forgot-password-message {
	margin: 0;
}

body[data-path="login"] .login-divider {
	margin: 12px 0;
	font-size: 13px;
	color: var(--ink-gray-5, #737373);
}

/* ---- Buttons ------------------------------------------------------------- */

body[data-path="login"] .es-button,
body[data-path="login"] .page-card .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 42px;
	padding: 0 16px;
	font-size: 14px;
	font-weight: 600;
	border-radius: 10px;
	transition: background-color 150ms var(--auth-ease), border-color 150ms var(--auth-ease),
		box-shadow 150ms var(--auth-ease), transform 150ms var(--auth-ease);
}

body[data-path="login"] .es-button[data-variant="solid"],
body[data-path="login"] .page-card .btn-primary {
	color: #fff;
	background-color: var(--auth-brand);
	border-color: var(--auth-brand);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

body[data-path="login"] .es-button[data-variant="solid"]:hover,
body[data-path="login"] .es-button[data-variant="solid"]:focus-visible,
body[data-path="login"] .page-card .btn-primary:hover,
body[data-path="login"] .page-card .btn-primary:focus-visible {
	background-color: var(--auth-brand-strong);
	border-color: var(--auth-brand-strong);
}

body[data-path="login"] .es-button[data-variant="solid"]:active,
body[data-path="login"] .page-card .btn-primary:active {
	transform: translateY(1px);
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}

body[data-path="login"] .es-button[data-variant="solid"]:focus-visible,
body[data-path="login"] .page-card .btn-primary:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--auth-brand-tint);
}

body[data-path="login"] .es-button[data-variant="solid"]:disabled {
	opacity: 0.55;
	box-shadow: none;
}

/* Secondary actions: email link, social providers, LDAP. */
body[data-path="login"] .es-button:not([data-variant="solid"]),
body[data-path="login"] .page-card .btn-default,
body[data-path="login"] .page-card .btn-login-option {
	color: var(--ink-gray-8, #262626);
	background-color: var(--surface-base, #fff);
	border: 1px solid var(--outline-gray-2, #e5e5e5);
}

body[data-path="login"] .es-button:not([data-variant="solid"]):hover,
body[data-path="login"] .page-card .btn-default:hover,
body[data-path="login"] .page-card .btn-login-option:hover {
	border-color: var(--outline-gray-3, #d4d4d4);
	background-color: var(--surface-gray-1, #f7f7f7);
}

body[data-path="login"] .page-card a:hover,
body[data-path="login"] .sign-up-message a:hover {
	color: var(--auth-brand-strong);
}

body[data-path="login"] .sign-up-message {
	text-align: start;
	font-size: 14px;
	color: var(--ink-gray-6, #525252);
}

body[data-path="login"] .sign-up-message a {
	font-weight: 600;
	color: var(--auth-brand);
	text-decoration: none;
}

/* ---- Small screens: no split, no shell -------------------------------- */

@media (max-width: 991px) {
	body[data-path="login"] .page-content-wrapper {
		padding-top: 32px;
	}
}