/*
 * TRIF GBV MIS — custom login page.
 * Full split-screen redesign ported from TRIF-GBV-MIS-Wireframes.html's
 * own `#view-login` markup/CSS (see trif_gbv/www/login.html for the
 * template + trif_gbv/www/login.py for the context). Loaded only on
 * the login page itself (not desk-wide like trif_theme.css), scoped under
 * body.trif-login-page as a defensive measure against ever leaking onto
 * another website page.
 *
 * Structural markup (ids/classes like #login_email, .form-login, .for-forgot,
 * .page-card-body, .field-error, .login-error-banner) is NOT wireframe
 * vocabulary - those are Frappe's own frappe/templates/includes/login/login.js
 * hooks, kept so the real login/forgot-password/2FA flows keep working
 * unmodified. Only the visual layer is replaced.
 */

body.trif-login-page {
	/* This page does not load trif_theme.css (that bundle is desk-only, via
	   app_include_css) so the brand palette is self-contained here too -
	   same literal values, sourced from the wireframe's own :root block. */
	--trif-coral: #77250d;
	--trif-coral-dk: #5e1c09;
	--trif-badge: #fdce13;
	--trif-green: #005a26;
	--trif-coral-ink: #7a2a14;
	--trif-ink: #1f2a2e;
	--trif-subtle: #6b7c7e;
	--trif-label: #3a3430;
	--trif-field-bg: #f7f6f5;
	--trif-field-bd: #e4ded9;
	--trif-footer: #9a938e;
	--trif-ov: 24, 16, 12; /* warm-dark tint for photo overlays, as r,g,b */

	margin: 0;
	padding: 0;
	height: 100%;
	overflow: hidden;
	font-family: "DM Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--trif-ink);
	background: #fff;
}

body.trif-login-page * {
	box-sizing: border-box;
}

body.trif-login-page a {
	text-decoration: none;
	color: inherit;
}

body.trif-login-page img {
	display: block;
}

body.trif-login-page .trif-auth-wrap {
	display: flex;
	height: 100vh;
	width: 100vw;
}

/* ---- LEFT: photo stage ---- */
body.trif-login-page .trif-auth-left {
	position: relative;
	width: 58%;
	overflow: hidden;
	background: #1a1413;
}
body.trif-login-page .trif-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 1.6s ease;
}
body.trif-login-page .trif-slide.on {
	opacity: 1;
}
body.trif-login-page .trif-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1.04);
}
body.trif-login-page .trif-slide.on img {
	animation: trif-kb 13s ease-out forwards;
}
@keyframes trif-kb {
	from {
		transform: scale(1.04);
	}
	to {
		transform: scale(1.12);
	}
}
body.trif-login-page .trif-slide .trif-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(var(--trif-ov), 0.3) 0%,
		rgba(var(--trif-ov), 0.12) 30%,
		rgba(var(--trif-ov), 0.55) 66%,
		rgba(var(--trif-ov), 0.92) 100%
	);
}

body.trif-login-page .trif-slide-text {
	position: absolute;
	bottom: 96px;
	left: 46px;
	right: 54px;
	z-index: 3;
	color: #fff;
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease 0.35s, transform 0.7s ease 0.35s;
}
body.trif-login-page .trif-slide.on .trif-slide-text {
	opacity: 1;
	transform: translateY(0);
}
body.trif-login-page .trif-slide-eyebrow {
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 10.5px;
	font-weight: 700;
	color: var(--trif-badge);
	margin-bottom: 13px;
}
body.trif-login-page .trif-slide-headline {
	font-size: 28px;
	font-weight: 300;
	line-height: 1.25;
	margin: 0 0 13px;
	color: #fff;
}
body.trif-login-page .trif-slide-headline b {
	font-weight: 700;
}
body.trif-login-page .trif-slide-desc {
	font-size: 13px;
	line-height: 1.6;
	opacity: 0.78;
	max-width: 540px;
	margin: 0;
}

body.trif-login-page .trif-left-bottom {
	position: absolute;
	left: 46px;
	right: 46px;
	bottom: 30px;
	z-index: 4;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}
body.trif-login-page .trif-progress {
	display: flex;
	gap: 6px;
}
body.trif-login-page .trif-progress .seg {
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.28);
	overflow: hidden;
	cursor: pointer;
	position: relative;
}
body.trif-login-page .trif-progress .seg .fill {
	position: absolute;
	inset: 0;
	width: 0;
	background: rgba(255, 255, 255, 0.9);
}
body.trif-login-page .trif-progress .seg.on .fill {
	animation: trif-prfill 6s linear forwards;
}
@keyframes trif-prfill {
	from {
		width: 0;
	}
	to {
		width: 100%;
	}
}
body.trif-login-page .trif-coverage {
	text-align: right;
	color: #fff;
}
body.trif-login-page .trif-coverage .n {
	font-size: 18px;
	font-weight: 700;
	opacity: 0.92;
	line-height: 1;
}
body.trif-login-page .trif-coverage .l {
	font-size: 10px;
	opacity: 0.6;
	margin-top: 6px;
	letter-spacing: 0.1em;
}

/* ---- RIGHT: form (white panel, maroon accents) ---- */
body.trif-login-page .trif-auth-right {
	width: 42%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 24px;
	overflow-y: auto;
}
/* .trif-auth-right is a flex container, and section.for-login (login.html's
   direct flex child - forgot-password.html has no such wrapper, .auth is
   its own direct flex child there) has no explicit width of its own. A flex
   item with an auto width and a *percentage-width descendant* (.auth's own
   width:100%) is exactly the indeterminate case CSS3 Flexbox falls back to
   content-fit sizing for, rather than stretching - so section.for-login was
   shrinking to ~240px (its content's min/max-content size) regardless of
   whatever .auth's own max-width said, capping the form at that width no
   matter how large max-width was set to. Giving the section itself a
   definite width breaks the ambiguity: .auth's width:100% then resolves
   against a real number, and its own max-width applies correctly. */
body.trif-login-page .trif-auth-right > section {
	width: 100%;
}
body.trif-login-page .auth {
	width: 100%;
	max-width: 420px;
	/* margin: 0 auto centers .auth horizontally within its container.
	   Needed on login.html, where section.for-login (the flex item, see the
	   comment on .trif-auth-right above) is now full-width - the flex
	   parent's justify-content:center has nothing left to center once its
	   only child spans the whole container, so .auth (capped at
	   max-width:420px) would otherwise just hug the container's left edge.
	   Harmless on forgot-password.html, where .auth is itself the direct
	   flex item and this margin is a no-op alongside justify-content:center. */
	margin: 0 auto;
	transform: translateY(-30px);
}
body.trif-login-page .trif-brand-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 16px;
}
body.trif-login-page .trif-brand-card .trif-lockup {
	width: 226px;
	height: auto;
}
body.trif-login-page .trif-brand-card .trif-badge {
	margin-top: 16px;
	background: var(--trif-badge);
	color: #1f2a2e;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	padding: 6px 18px;
	border-radius: 4px;
}
body.trif-login-page .auth h1 {
	color: var(--trif-coral-ink);
	font-size: 22px;
	font-weight: 700;
	text-align: center;
	margin: 18px 0 6px;
	letter-spacing: 0.01em;
}
body.trif-login-page .auth .trif-subtitle {
	color: var(--trif-subtle);
	font-size: 13px;
	text-align: center;
	margin: 0 0 26px;
}
body.trif-login-page .fld {
	margin-bottom: 16px;
}
body.trif-login-page .fld label {
	display: block;
	font-size: 12.5px;
	color: var(--trif-label);
	font-weight: 600;
	margin-bottom: 7px;
}
body.trif-login-page .input-wrap {
	position: relative;
}
body.trif-login-page .input-wrap .lead {
	/* top:50% + transform:translateY(-50%) (the technique used for
	   .trif-eye just below, which works fine there) does not center this
	   element correctly - confirmed via computed getBoundingClientRect()
	   that it renders ~16px (one full icon height) too high specifically
	   when applied directly to an <svg> root element (as .lead is; .trif-eye
	   is a <span> wrapper around its svg, and centers correctly with the
	   percentage+transform technique). A fixed negative margin equal to
	   half this icon's own known height (16px, set via the svg's width/
	   height attributes in login.html) sidesteps whatever the percentage/
	   transform interaction is and centers reliably. */
	position: absolute;
	left: 13px;
	top: 50%;
	margin-top: -8px;
	color: #a59c95;
	pointer-events: none;
}
body.trif-login-page .input-wrap .trif-eye {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #a59c95;
	cursor: pointer;
}
body.trif-login-page .input-wrap input {
	width: 100%;
	height: 46px;
	padding: 0 42px;
	border: 1.5px solid var(--trif-field-bd);
	border-radius: 8px;
	background: var(--trif-field-bg);
	font-size: 13.5px;
	color: var(--trif-ink);
	font-family: inherit;
}
body.trif-login-page .input-wrap input:focus {
	outline: none;
	border-color: var(--trif-coral);
	box-shadow: 0 0 0 3px rgba(119, 37, 13, 0.12);
	background: #fff;
}
body.trif-login-page .fld.form-group.invalid .input-wrap input {
	border-color: #c0392b;
}
body.trif-login-page .field-error {
	display: none;
	font-size: 11.5px;
	color: #c0392b;
	margin: 6px 0 0;
}
body.trif-login-page .fld.form-group.invalid .field-error {
	display: block;
}
body.trif-login-page .login-error-banner {
	display: none;
	align-items: center;
	gap: 8px;
	background: #fdecea;
	color: #c0392b;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12.5px;
	margin-bottom: 16px;
}
body.trif-login-page .login-error-banner svg {
	flex-shrink: 0;
	stroke: #c0392b;
}
body.trif-login-page .trif-forgot {
	display: block;
	text-align: right;
	color: var(--trif-coral-dk);
	font-size: 12.5px;
	font-weight: 600;
	margin: -4px 0 20px;
}
body.trif-login-page .btn-login {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	background: var(--trif-coral);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	font-family: inherit;
	transition: background 0.15s;
}
body.trif-login-page .btn-login:hover {
	background: var(--trif-coral-dk);
}
body.trif-login-page .btn-login:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}
body.trif-login-page .trif-powered {
	position: absolute;
	bottom: 18px;
	left: 0;
	right: 0;
	text-align: center;
	color: var(--trif-footer);
	font-size: 11.5px;
}
body.trif-login-page .trif-powered b {
	color: var(--trif-coral-dk);
	font-weight: 600;
}

/* shake on invalid credentials, same mechanism as frappe/public/scss/login.bundle.scss */
body.trif-login-page .login-content.invalid-login {
	animation: trif-wiggle 0.4s ease-in-out;
}
@keyframes trif-wiggle {
	0%,
	100% {
		transform: translateX(0);
	}
	20% {
		transform: translateX(-4px);
	}
	40% {
		transform: translateX(4px);
	}
	60% {
		transform: translateX(-3px);
	}
	80% {
		transform: translateX(3px);
	}
}

/* top-corner chips on the form side */
body.trif-login-page .trif-tools-left {
	position: absolute;
	top: 16px;
	left: 22px;
	z-index: 6;
	display: flex;
	gap: 8px;
}
body.trif-login-page .trif-email-chip {
	position: absolute;
	top: 16px;
	right: 22px;
	z-index: 6;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--trif-field-bd);
	border-radius: 22px;
	padding: 7px 14px;
	font-size: 12.5px;
	color: #6a625c;
	background: #fff;
}
body.trif-login-page .trif-email-chip svg {
	color: var(--trif-coral);
}
body.trif-login-page .trif-popwrap {
	position: relative;
}
body.trif-login-page .trif-pop-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	border: 1px solid var(--trif-field-bd);
	border-radius: 22px;
	padding: 7px 13px;
	font-size: 12.5px;
	color: #4a423c;
	background: #fff;
	cursor: pointer;
	font-family: inherit;
}
body.trif-login-page .trif-pop-btn:hover {
	background: var(--trif-field-bg);
}
body.trif-login-page .trif-pop-btn svg {
	color: var(--trif-coral);
}
body.trif-login-page .trif-pop-btn .caret {
	transition: transform 0.2s;
	color: #a59c95;
}
body.trif-login-page .trif-popwrap.open .trif-pop-btn .caret {
	transform: rotate(180deg);
}
body.trif-login-page .trif-pop-panel {
	position: absolute;
	top: 44px;
	left: 0;
	width: 360px;
	background: #fff;
	border: 1px solid var(--trif-field-bd);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16);
	padding: 18px 20px;
	display: none;
	z-index: 9;
}
body.trif-login-page .trif-popwrap.open .trif-pop-panel {
	display: block;
}
body.trif-login-page .trif-pop-panel h4 {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--trif-coral-ink);
	font-weight: 700;
}
body.trif-login-page .trif-pop-panel p {
	margin: 0;
	font-size: 12.5px;
	line-height: 1.62;
	color: #4a5656;
	text-align: justify;
}

/* /forgot-password's own "back to sign in" link */
body.trif-login-page .trif-back-link {
	display: block;
	text-align: center;
	color: var(--trif-coral-dk);
	font-size: 12.5px;
	font-weight: 600;
	margin-top: 18px;
}

/* /forgot-password's success state, shown in place of the form once
   reset_password's real API call succeeds - same shape as .login-error-banner
   just above, in green instead of red. */
body.trif-login-page .login-success-banner {
	display: none;
	align-items: center;
	gap: 8px;
	background: #eafaf1;
	color: #1f9d57;
	border-radius: 8px;
	padding: 10px 12px;
	font-size: 12.5px;
	margin-bottom: 16px;
	text-align: left;
}
body.trif-login-page .login-success-banner svg {
	flex-shrink: 0;
	stroke: #1f9d57;
}

/* 2FA verification form, injected by frappe's own login.js at runtime with no
   markup of its own to theme against - keep it legible and on-brand without
   depending on login.bundle.css, which this page deliberately does not load. */
body.trif-login-page #twofactor_div {
	width: 100%;
	max-width: 420px;
}
body.trif-login-page #twofactor_div .indicator {
	display: inline-block;
	margin-bottom: 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--trif-coral-ink);
}
body.trif-login-page #twofactor_div input.form-control {
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1.5px solid var(--trif-field-bd);
	border-radius: 8px;
	background: var(--trif-field-bg);
	font-size: 13.5px;
	color: var(--trif-ink);
	font-family: inherit;
	margin-bottom: 16px;
}
body.trif-login-page #twofactor_div input.form-control:focus {
	outline: none;
	border-color: var(--trif-coral);
	background: #fff;
}
body.trif-login-page #twofactor_div .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 46px;
	background: var(--trif-coral);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	font-family: inherit;
}
body.trif-login-page #twofactor_div .btn:hover {
	background: var(--trif-coral-dk);
}

@media (max-width: 1024px) {
	body.trif-login-page .trif-auth-left {
		width: 52%;
	}
	body.trif-login-page .trif-auth-right {
		width: 48%;
	}
	body.trif-login-page .trif-slide-headline {
		font-size: 23px;
	}
}
@media (max-width: 820px) {
	body.trif-login-page .trif-auth-wrap {
		flex-direction: column;
	}
	body.trif-login-page .trif-auth-left {
		width: 100%;
		height: 36vh;
		min-height: 230px;
	}
	body.trif-login-page .trif-auth-right {
		width: 100%;
		flex: 1;
	}
	body.trif-login-page .trif-tools-left,
	body.trif-login-page .trif-email-chip {
		display: none;
	}
	body.trif-login-page .trif-slide-text {
		bottom: 60px;
	}
}