/* ── Login page (#page-login) ──────────────────────────────────────────────
 *
 * Moved here from accounting_integration/public/css/portal.css. It has to live
 * in this app because this app now owns www/login.html, and tenant sites get
 * build365_erpnext on every site while accounting_integration is installed only
 * per-tenant — leaving the CSS behind would render the branding unstyled on a
 * deliberately bottomless card for exactly the sites that are not IRBY's.
 *
 * Frappe 16.26 ships the login form as a flat card whose background is
 * var(--bg-color) — the same colour as the page — with no border and no
 * shadow, so on desktop it reads as fields floating on a blank white page.
 * Give the page a tinted backdrop and the card a real surface, and vertically
 * centre the column. Scoped to #page-login so no other website page is touched.
 *
 * The Build365 branding footer comes from www/login.html; it exists for Google
 * OAuth consent-screen brand verification and must stay in the server-rendered
 * HTML. On phones the blurb is a wall of text that buries the form, so there it
 * collapses to just the Privacy / Terms links.
 * ------------------------------------------------------------------------- */

#page-login {
	min-height: 100vh;
	background-color: var(--gray-100);
}

#page-login .page-content-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100vh;
	padding: 40px 0;
}

/* Frappe puts min-height: 500px on .page_content. The login card is shorter than
 * that, so the leftover height became dead space between the card and the
 * page_footer below it — which is what kept the branding block detached from the
 * card no matter what margin it had. Let the content size to the card. */
#page-login .page_content {
	min-height: 0;
}

/* ID beats Frappe's `.for-login .page-card`, so this wins without !important.
 * The branding block lives in page_footer, a sibling of the card (Frappe exposes
 * no block *inside* the card — the login options are inside a macro within
 * `block page_content`, and overriding that means vendoring the whole template).
 * Rather than fork the template, the sections are styled as one continuous box:
 * the card loses its bottom edge and rounds only at the top, anything between
 * rounds at neither end, and the last section rounds only at the bottom — so
 * they read as a single card whose last rows are ours. */
#page-login .page-card {
	background-color: var(--card-bg);
	border: 1px solid var(--border-color);
	border-bottom: none;
	border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
	box-shadow: var(--shadow-base);
	padding: 32px 32px 24px;
}

/* The portal bounce button (plan D9), rendered only when site config carries
 * `login_portal_site`. It is a middle section: sides only, square both ends, so
 * it reads as another row of the card rather than a detached control. The button
 * inside it is Frappe's own .btn-login-option, styled by login.bundle.css, so it
 * matches the native "Login with …" controls above it exactly. */
#page-login .build365-login-options {
	max-width: 371px;
	width: 100%;
	margin: 0 auto;
	padding: 0 32px 20px;
	background-color: var(--card-bg);
	border-left: 1px solid var(--border-color);
	border-right: 1px solid var(--border-color);
	box-shadow: var(--shadow-base);
}

#page-login .build365-login-options .btn-login-option {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
}

#page-login .build365-login-options .btn-login-option svg {
	flex: 0 0 auto;
}

/* A compliance footnote (OAuth brand verification), not something anyone signing
 * in needs to read — so: small, muted, and on one line. */
#page-login .build365-info {
	max-width: 371px;
	width: 100%;
	margin: 0 auto;
	padding: 12px 24px 14px;
	background-color: var(--card-bg);
	border: 1px solid var(--border-color);
	border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
	box-shadow: var(--shadow-base);
	text-align: center;
	color: var(--text-muted);
	font-size: 11px;
	line-height: 1.45;
}

/* When the options row sits above it, that row already draws the side borders
 * and the top edge belongs to the card — so the footnote must not draw its own
 * top border, or the seam shows as a double line. */
#page-login .build365-login-options + .build365-info {
	border-top: none;
}

/* Name and description run inline as a single sentence. */
#page-login .build365-info h5,
#page-login .build365-info p {
	display: inline;
	margin: 0;
	font-size: 11px;
	line-height: 1.45;
}

#page-login .build365-info h5 {
	color: var(--text-color);
	font-weight: 600;
}

#page-login .build365-info h5::after {
	content: " — ";
	font-weight: 400;
	color: var(--text-muted);
}

#page-login .build365-info .legal-links {
	margin-top: 8px;
}

#page-login .build365-info .legal-links a {
	color: var(--text-muted);
	text-decoration: none;
	margin: 0 0.35rem;
}

#page-login .build365-info .legal-links a:hover {
	color: var(--text-color);
	text-decoration: underline;
}

/* Phones: Frappe makes the card full-bleed (100svh, no radius). Match it —
 * drop the backdrop and the card chrome, and let the card size to its content
 * so the legal links stay reachable instead of being pushed a screen down. */
@media (max-width: 575.98px) {
	#page-login {
		background-color: var(--bg-color);
	}

	#page-login .page-content-wrapper {
		min-height: 0;
		padding: 0 0 32px;
	}

	#page-login .page-card {
		border: none;
		border-radius: 0;
		box-shadow: none;
		min-height: 0;
		padding: 48px 24px 16px;
	}

	/* The bounce button is a real login control, so unlike the branding blurb it
	 * stays visible on a phone — it just loses the card chrome with everything
	 * else. */
	#page-login .build365-login-options {
		padding: 0 24px 16px;
		border: none;
		box-shadow: none;
	}

	/* Name + description are for OAuth review, not for someone signing in on a
	 * phone. Keep them in the HTML; just don't render them here. */
	#page-login .build365-info h5,
	#page-login .build365-info p {
		display: none;
	}

	#page-login .build365-info {
		margin-top: 0;
		padding: 0 24px 24px;
		background-color: transparent;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}

	#page-login .build365-info .legal-links {
		margin-top: 0;
	}
}