/* ==========================================================================
   OneStage — login page.  Layer 1 of the platform build order.

   A true two-column split: their carousel owns the left column edge to edge,
   the sign-in panel is a solid white column on the right.

   Palette sampled from their logo mark; type is Poppins, as their site loads it.
   Spec: OneStage/docs/design-tokens.md
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700&display=swap");

:root {
	--os-red: #ef4123;
	--os-red-deep: #d12f25;
	--os-amber: #fdb913;
	--os-bistre: #31231e;
	--os-ground: #f8f4f3;
	--os-white: #ffffff;
	--os-line: #e9e6e5;
	--os-muted: #7a6e6a;
	--os-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Strip the website chrome this page inherits. */
body.onestage-login-page {
	margin: 0;
	font-family: var(--os-font);
	color: var(--os-bistre);
	background: var(--os-white);
	overflow: hidden;
}

body.onestage-login-page .navbar,
body.onestage-login-page .web-footer,
body.onestage-login-page footer,
body.onestage-login-page .page-breadcrumbs {
	display: none !important;
}

body.onestage-login-page .main-section,
body.onestage-login-page .page_content,
body.onestage-login-page .container,
body.onestage-login-page #page-login,
body.onestage-login-page .page-content-wrapper {
	max-width: 100% !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* --------------------------------------------------------------------------
   The split
   -------------------------------------------------------------------------- */

.os-login {
	display: grid;
	grid-template-columns: 1fr 480px;
	height: 100vh;
	width: 100%;
	overflow: hidden;
}

@media (max-width: 940px) {
	.os-login {
		grid-template-columns: 1fr;
	}
	.os-stage {
		display: none;
	}
}

/* --------------------------------------------------------------------------
   Left — their carousel
   -------------------------------------------------------------------------- */

.os-stage {
	position: relative;
	overflow: hidden;
	background: var(--os-bistre);
}

.os-slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.1s ease;
}

.os-slide.is-on {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.os-slide {
		transition: none;
	}
}

.os-scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(49, 35, 30, 0.9) 0%,
		rgba(49, 35, 30, 0.45) 46%,
		rgba(49, 35, 30, 0.12) 100%
	);
}

.os-stage-head {
	position: absolute;
	top: 34px;
	left: 44px;
	right: 44px;
	display: flex;
	align-items: center;
	gap: 14px;
	color: #fff;
	z-index: 2;
}

.os-stage-head img {
	height: 32px;
	width: auto;
	filter: drop-shadow(0 1px 6px rgba(0, 0, 0, 0.4));
}

.os-stage-head span {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	opacity: 0.95;
}

.os-caption {
	position: absolute;
	left: 44px;
	right: 44px;
	bottom: 74px;
	z-index: 2;
	color: #fff;
}

.os-eyebrow {
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--os-amber);
	margin-bottom: 12px;
}

.os-caption h2 {
	font-size: clamp(28px, 3.2vw, 42px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 12px;
	color: #fff;
	max-width: 16ch;
	text-wrap: balance;
}

.os-caption p {
	font-size: 15px;
	font-weight: 300;
	line-height: 1.55;
	margin: 0;
	color: #fff;
	opacity: 0.94;
	max-width: 46ch;
}

.os-dots {
	position: absolute;
	left: 44px;
	bottom: 38px;
	display: flex;
	gap: 7px;
	z-index: 2;
}

.os-dots i {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.38);
	cursor: pointer;
	transition: background 0.35s ease;
}

.os-dots i.is-on {
	background: var(--os-amber);
}

/* --------------------------------------------------------------------------
   Right — the sign-in column
   -------------------------------------------------------------------------- */

.os-panel {
	background: var(--os-white);
	display: flex;
	justify-content: center;
	overflow-y: auto;
	padding: 40px 0;
}

/* Vertical centring is done with auto margins, not `align-items: center`, on purpose.
   With align-items, content taller than the screen spills out of the top as well as
   the bottom, and the top part cannot be scrolled back to: the client's logo was cut
   off on short screens and at higher zoom. Auto margins centre when there is room and
   start at the top when there is not, so the whole logo is always reachable. */
.os-panel-inner {
	width: 100%;
	max-width: 340px;
	padding: 0 12px;
	margin-block: auto;
}

/* Frappe's card chrome is unwanted here — the column is the card. */
.os-panel .login-content.page-card,
.os-panel .page-card {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
}

.os-card-head {
	text-align: center;
	margin-bottom: 26px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.os-card-head .os-logo {
	height: 44px;
	width: auto;
	margin: 0;
}

/* The full logo (figures + wordmark + tagline) is stacked, so it needs height to stay legible. */
/* !important: a base login style caps .app-logo images at the mark's small size, which left the
   wordmark and tagline unreadable. Scoped to this one image. */
.os-card-head img.os-logo.os-logo-full {
	height: 112px !important;
	max-height: none !important;
	width: auto !important;
	max-width: 100%;
}

/* B5 — platform attribution, below the OneStage heading and subtitle.

   Deliberately quiet and deliberately last. It has to be legible to a CEO who
   looks for it and invisible to one who does not: the heading above it is the
   client's own name and this must stay subordinate to it. Weight is normal, not
   600 — on the first pass it sat above the heading in semibold, which read as
   the page's primary line.

   Sizes in em so the block scales with the panel rather than drifting at zoom. */
.os-attribution {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.1em;
	margin-top: 0.5em;
	line-height: 1.35;
}

/* B10 — "Powered by mGrant" words and mark, on one row.
   Stacked would cost a third line under an already-long heading. */
.os-attribution-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	margin-top: 0.6em;
}

/* B9/B10 — the mGrant mark. Nihaan: "put the logo".

   18px against the OneStage logo's 44px, so the client's mark is about two and a
   half times the platform's and the eye reads OneStage as the owner of the page.

   Asset is 1012x363 px, so at 18px tall it renders at roughly 20x density — no
   softness from downscaling at any zoom. Same file the pinned footer rendered;
   no new artwork introduced.

   Slightly muted so it reads as a credit, not a second brand at full strength. */
.os-attribution-mark {
	height: 18px;
	width: auto;
	display: block;
	opacity: 0.72;
}

/* B10/B12 — the Dhwani RIS mark, in place of the text "developed by Dhwani RIS".
   Nihaan: "and Dhwani RIS logo please not the text". It lives in the page footer
   (.os-foot), below the login button.

   14px tall against mGrant's 18px. The two assets are near-identical in aspect
   (Dhwani 320x120 = 2.67:1, mGrant 1012x363 = 2.79:1), so matching on height also
   matches visual weight — no separate width correction needed. Smallest of the
   three marks because it is the furthest-removed credit on the client's own page:
   the hierarchy reads OneStage 44 > mGrant 18 > Dhwani 14.

   At 14px the 320x120 source renders at about 8.6x density, so it stays crisp at
   every zoom level in the 80-110% range.

   No margin of its own — .os-foot owns the spacing now that this sits in the
   footer rather than stacked under the mGrant mark. */
.os-builder-mark {
	height: 14px;
	width: auto;
	display: block;
	opacity: 0.72;
}

.os-attribution-platform {
	font-family: var(--os-font);
	font-size: 0.72em;
	font-weight: 500;
	letter-spacing: 0.05em;
	color: var(--os-muted);
}

.os-attribution-builder {
	font-family: var(--os-font);
	font-size: 0.66em;
	font-weight: 400;
	letter-spacing: 0.03em;
	color: var(--os-muted);
	opacity: 0.75;
}

/* B11 — the heading is "Welcome to OneStage Project MIS", 12 characters longer
   than the "Welcome to OneStage" that 21px was originally set for.

   Size measured against the real Poppins Bold file the page loads (--os-font),
   not estimated. Usable width is 316px: .os-panel-inner is max-width 340px with
   12px padding each side. Rendered widths for this exact string, letter-spacing
   -0.018em included:

       21px -> 351.2px   over by 35
       20px -> 334.4px   over by 18
       19px -> 317.8px   over by 2      <- marginal; an estimate had said it fit
       18px -> 301.0px   15px headroom  <- chosen

   So 21px cannot be restored. 19px sat in this file briefly on an estimate that
   proved 2px optimistic once measured against the actual font — that is the width
   a slightly wider glyph or a different rasteriser would spill, so it is not a
   margin worth shipping.

   `text-wrap: balance` stays as the safety net for a larger browser font setting:
   if it wraps anyway it splits evenly instead of orphaning "MIS".
   `text-transform: none` guards against any inherited uppercase rule. */
.os-card-head h4 {
	font-family: var(--os-font);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.018em;
	color: var(--os-bistre);
	margin: 0;
	text-transform: none;
	text-wrap: balance;
	line-height: 1.25;
}

.os-subtitle {
	margin: -6px 0 0;
	font-size: 13.5px;
	color: var(--os-muted);
}

/* fields */
.os-panel .form-label {
	font-family: var(--os-font);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--os-bistre);
	margin-bottom: 6px;
	display: block;
	letter-spacing: 0.01em;
}

.os-panel .form-group {
	margin-bottom: 16px;
}

/* Frappe overlays an icon inside each field, so the text needs room on the left
   or it renders underneath the glyph.

   Both wrappers are pinned to the same box explicitly: Frappe's own login styles
   give them different display values, which made the email field render narrower
   than the password field and pushed "Show" above the box. */
.os-panel .email-field,
.os-panel .password-field {
	position: relative !important;
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box;
}

/* Frappe pins the field icon to the TOP-LEFT, not the middle: login.bundle.scss:88
   sets `left: 9px; top: 5px` inside `.for-email-login .page-card ...`, a three-class
   chain that outranks a plain `.os-panel .field-icon`. That is why both icons sat
   high and tight to the corner, above the placeholder baseline.

   Same trap the `.toggle-password` block below already documents — their offsets
   win on specificity, so they are overridden here and their file is never edited.

   Units are relative on purpose: `top: 50%` resolves against the input's own
   rendered height and `em` scales with font-size, so the centring holds from 80%
   to 110% zoom. A fixed pixel offset drifts as the box grows. */
.os-panel .email-field .field-icon,
.os-panel .password-field .field-icon {
	position: absolute !important;
	left: 0.875em !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	width: 1.05em !important;
	height: 1.05em !important;
	pointer-events: none;
	opacity: 1 !important;
	/* The SVG is drawn with `fill`, so colour set via `color` alone does nothing.
	   Matches the label grey so the icons read as deliberate rather than washed out. */
	fill: var(--os-muted) !important;
	color: var(--os-muted) !important;
	z-index: 2;
}

.os-panel input.form-control {
	font-family: var(--os-font);
	font-size: 14px;
	border: 1px solid var(--os-line) !important;
	border-radius: 7px !important;
	background: var(--os-ground) !important;
	/* Left inset clears the field icon: 0.875em inset + 1.05em glyph + 0.7em gap.
	   Expressed in em so it tracks the icon, which is also em-sized — at 110% zoom
	   a fixed 38px would no longer clear a larger glyph and the text would collide. */
	padding: 0.8em 0.95em 0.8em 2.65em !important;
	height: auto !important;
	line-height: 1.4 !important;
	color: var(--os-bistre);
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

/* the password field also has the Show toggle on the right */
.os-panel .password-field input.form-control {
	padding-right: 58px !important;
}

.os-panel .form-group {
	width: 100%;
}

/* Frappe pins this to the TOP of the field, not its middle. login.bundle.scss
   sets `top: 5px; right: 9px` on a selector nested five levels deep, which
   outranks anything we can write at .os-panel depth — and our translateY(-50%)
   then lifted it a further half-height, so "Show" sat above the box. Override
   their two offsets here; never edit their file. */
.os-panel .toggle-password {
	position: absolute !important;
	right: 13px !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 12px;
	cursor: pointer;
	color: var(--os-muted);
	z-index: 2;
}

.os-panel .toggle-password:hover {
	color: var(--os-red);
}

.os-panel input.form-control:focus {
	border-color: var(--os-amber) !important;
	background: var(--os-white) !important;
	box-shadow: 0 0 0 3px rgba(253, 185, 19, 0.22) !important;
	outline: none;
}

.os-panel .forgot-password-message {
	text-align: right;
	font-size: 12.5px;
	margin: -4px 0 18px;
}

.os-panel a {
	color: var(--os-red);
	font-weight: 500;
	text-decoration: none;
}

.os-panel a:hover {
	color: var(--os-red-deep);
	text-decoration: underline;
}

/* button — their CTA red */
.os-panel .btn-primary,
.os-panel .btn-login,
.os-panel .btn-forgot {
	background: var(--os-red) !important;
	border-color: var(--os-red) !important;
	color: #fff !important;
	font-family: var(--os-font);
	font-weight: 600 !important;
	font-size: 14.5px !important;
	border-radius: 7px !important;
	padding: 12px 18px !important;
	width: 100%;
	box-shadow: none !important;
	transition: background 0.15s ease;
}

.os-panel .btn-primary:hover,
.os-panel .btn-login:hover,
.os-panel .btn-forgot:hover {
	background: var(--os-red-deep) !important;
	border-color: var(--os-red-deep) !important;
}

/* SSO buttons (Hub TASK-2026-02278). Secondary to the red Login button: white,
   outlined, bistre text, the provider's logo pinned left and the label centred.
   The divider reads "OR" between two hairlines.
   Email-link login stays hidden: no outgoing mail on this deployment. */
.os-panel .login-with-email-link {
	display: none !important;
}

.os-panel .social-logins {
	display: block !important;
	width: 100%;
	margin-top: 20px;
}

.os-panel .login-divider {
	display: flex !important;
	align-items: center;
	gap: 14px;
	margin: 0 0 16px !important;
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--os-muted) !important;
}

.os-panel .login-divider::before,
.os-panel .login-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--os-line);
}

.os-panel .social-login-buttons {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
}

.os-panel .login-button-wrapper {
	width: 100%;
	margin: 0 !important;
}

.os-panel .btn-login-option {
	position: relative;
	box-sizing: border-box;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	background: var(--os-white) !important;
	border: 1px solid var(--os-line) !important;
	color: var(--os-bistre) !important;
	font-family: var(--os-font);
	font-weight: 500 !important;
	font-size: 14px !important;
	border-radius: 7px !important;
	padding: 10px 48px !important;
	box-shadow: none !important;
	text-decoration: none !important;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.os-panel .btn-login-option:hover,
.os-panel .btn-login-option:focus-visible {
	background: var(--os-ground) !important;
	border-color: var(--os-muted) !important;
	color: var(--os-bistre) !important;
	text-decoration: none !important;
}

.os-panel .os-sso-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	line-height: 0;
}

.os-panel .os-sso-icon img,
.os-panel .os-sso-icon svg {
	width: 20px;
	height: 20px;
	margin: 0 !important;
}

/* Frappe's own login.css positions the login/forgot/signup sections absolutely
   (left: 186px, width: 246px), which pushes the form right of the column and
   leaves .os-panel-inner with no height. Put the sections back in normal flow at
   the column's width; Frappe still toggles them with display, so the flows work. */
.os-panel-inner > .for-login,
.os-panel-inner > .for-forgot,
.os-panel-inner > .for-signup {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.os-panel-inner .page-card,
.os-panel-inner .page-card-body,
.os-panel-inner form {
	width: 100% !important;
}

.os-panel {
	position: relative;
}

/* B12 — the page footer, carrying the Dhwani RIS mark.

   NOT absolutely positioned, deliberately. Ticket 21's version pinned this to
   `bottom: 28px`, which is exactly what makes a footer collide with a form: the
   panel content grows with zoom while an absolute footer stays pinned, so at 110%
   the Login button runs into it.

   In normal flow it cannot overlap anything at any zoom — it is pushed down by
   whatever sits above it. `.os-panel` is a centred flex column with
   `overflow-y: auto`, so the whole stack stays vertically centred and gains a
   scrollbar only if the content genuinely exceeds the viewport, rather than a
   pinned element forcing one.

   The 2.4em top margin is the clearance from the Login button, in em so it scales
   with zoom instead of tightening as everything around it grows. */
.os-foot {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2.4em;
	font-size: 11.5px;
	color: var(--os-muted);
	letter-spacing: 0.03em;
}

/* Retained: no element carries this class since B9 moved the mGrant mark up into
   the attribution row. Kept in case the slot is ever wanted for that mark again. */
.os-mgrant-mark {
	height: 20px;
	width: auto;
	display: block;
}