/*
 * Trif Mission Samriddh Gaon — custom login page.
 * Full split-screen redesign ported from trif_mis's dev_amit branch (itself
 * ported from trif_jhirrigation's development-standalone branch, originally
 * from TRIF-Irrigation-MIS-Wireframes.html's own `#view-login` markup/CSS -
 * see trif_mission_samriddh_gaon/www/login.html for the template +
 * trif_mission_samriddh_gaon/www/login.py for the context). Loaded only on the
 * login page itself (not desk-wide like trif_mission_samriddh_gaon.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_mission_samriddh_gaon.css (that bundle is desk-only, via
	   app_include_css) so the brand palette is self-contained here too -
	   same literal values, reused as-is from trif_jhirrigation. */
	--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-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);
	}
}

/* /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%;
	}
}
@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;
		flex-direction: column;
		justify-content: flex-start;
	}
	/* `.trif-powered`'s base rule pins it to the bottom of whatever box is
	   currently visible (position:absolute; bottom:18px) - fine when this
	   element's content always fit inside the viewport with room to spare,
	   but once the stack above can overflow and scroll, an absolutely
	   positioned footer stays glued to the visible viewport edge and
	   overlaps in-flow content scrolled underneath it. Returning it to
	   static flow places it where it visually belongs - directly under the
	   login form, its own actual DOM position (see login.html/
	   forgot-password.html) - and lets it scroll away with the rest of the
	   page instead of floating over it. */
	body.trif-login-page .trif-powered {
		position: static;
		margin-top: 18px;
	}
}

/* True phone widths (iPhone SE/12/Pixel-class, ~360-480px) - the 820px tier
   above only stacks the layout; nothing below it was ever tuned for a
   viewport this narrow. */
@media (max-width: 480px) {
	body.trif-login-page .trif-auth-left {
		height: 30vh;
		min-height: 180px;
	}
	body.trif-login-page .trif-left-bottom {
		left: 22px;
		right: 22px;
		bottom: 16px;
		flex-wrap: wrap;
		gap: 8px;
	}
	body.trif-login-page .trif-coverage {
		text-align: left;
	}
	body.trif-login-page .trif-coverage .n {
		font-size: 15px;
	}

	body.trif-login-page .trif-auth-right {
		padding: 18px 16px;
	}
	/* The -30px translateY was a desktop-only vertical-centering nudge
	   (auth's own comment above explains why) - on a viewport already this
	   short, it risks pushing the top of the form (the brand/logo card)
	   above the scroll area's visible top edge instead of just nudging it
	   up within extra whitespace. .trif-auth-right's own
	   `align-items: center` + `overflow-y: auto` already centers/scrolls the
	   form correctly without it. */
	body.trif-login-page .auth {
		transform: none;
	}
}