/* Zentra login — two-column hero.
 *
 * Standalone stylesheet for `/login`. Pulls in `tokens.css` so every color,
 * radius, focus ring, and font here comes from the same source of truth
 * the SPA uses at `/zentra`, meaning a token tweak lands on both surfaces
 * on the next reload — no drift.
 *
 * Layout rules (PLAN.md §8 + design_handoff §Screens.Login):
 *   - Full-viewport 2-column grid: left `minmax(420px, 44%)` on `--z-surface`,
 *     right takes the rest and is the `--z-ink-brand` hero.
 *   - Left column padding: 56px 64px, three vertical zones (logo · form · legal).
 *   - Form column caps at 376px so the input row + primary button read as one
 *     block even on very wide screens.
 *   - Below the `narrow` breakpoint (900px, matching tokens.css comment) the
 *     right hero collapses and the layout stacks; below phone (640px) the
 *     inner form padding tightens so the fields don't touch the viewport
 *     edge on a 375px device.
 *
 * The `.z-` prefix is deliberate — it stops any of these rules from ever
 * leaking into a Frappe web page that borrows this stylesheet by accident.
 */

@import "./tokens.css";

/* --- Reset the couple of Frappe globals that would bleed in ------------
 * The login page does NOT extend `templates/web.html`, so there is no
 * Bootstrap or `desk.min.css` on the page. But belt-and-braces the box
 * model so future template additions don't shift layout.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	padding: 0;
	min-height: 100vh;
	background: var(--z-canvas);
	color: var(--z-text);
	font: 400 14px/1.5 var(--z-font-ui);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Layout container — the whole viewport is the login page. */
.z-login {
	display: grid;
	grid-template-columns: minmax(420px, 44%) 1fr;
	min-height: 100vh;
	background: var(--z-canvas);
}

/* --- Left column — form ------------------------------------------------ */
.z-login__form-col {
	background: var(--z-surface);
	padding: 56px 64px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 32px;
	min-width: 0; /* let inputs shrink inside grid */
}

.z-login__brand {
	display: flex;
	align-items: center;
}

.z-login__brand img {
	height: 40px;
	width: auto;
	display: block;
}

.z-login__form-wrap {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 376px;
	width: 100%;
}

.z-login__heading {
	font: 600 29px/1.2 var(--z-font-ui);
	color: var(--z-text);
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}

.z-login__tagline {
	font: 400 14px/1.5 var(--z-font-ui);
	color: var(--z-muted);
	margin: 0 0 28px;
}

.z-login__error {
	display: none;
	align-items: flex-start;
	gap: 10px;
	background: var(--z-danger-bg);
	color: var(--z-danger);
	border: 1px solid transparent;
	border-radius: var(--z-radius-input);
	padding: 10px 12px;
	font: 500 13px/1.4 var(--z-font-ui);
	margin: 0 0 16px;
}

.z-login__error[data-visible="true"] {
	display: flex;
}

/* --- Fields ------------------------------------------------------------ */
.z-field {
	display: block;
	margin: 0 0 16px;
}

.z-field__label {
	display: block;
	font: 500 13px/1.4 var(--z-font-ui);
	color: var(--z-text);
	margin: 0 0 6px;
}

.z-field__input {
	width: 100%;
	height: 40px;
	padding: 8px 12px;
	background: var(--z-surface);
	color: var(--z-text);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-input);
	font: 400 14px/1.5 var(--z-font-ui);
	transition: border-color var(--z-motion-pop), box-shadow var(--z-motion-pop);
}

.z-field__input:hover:not(:focus) {
	border-color: var(--z-p);
}

.z-field__input::placeholder {
	color: var(--z-faint);
}

.z-field--invalid .z-field__input {
	border-color: var(--z-danger);
}

/* --- Row: remember + forgot ------------------------------------------- */
.z-login__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 4px 0 20px;
	gap: 12px;
	flex-wrap: wrap;
}

.z-check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font: 400 13px/1.4 var(--z-font-ui);
	color: var(--z-muted);
	user-select: none;
}

.z-check input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--z-p);
	margin: 0;
	cursor: pointer;
}

.z-link {
	color: var(--z-p700);
	text-decoration: none;
	font: 500 13px/1.4 var(--z-font-ui);
	border-radius: 4px;
}

.z-link:hover {
	text-decoration: underline;
}

/* --- Buttons -----------------------------------------------------------
 * Per PLAN.md §5: primary button is OUTLINED, never solid — 1px border in
 * `--z-p`, fill in `--z-p50`, text in `--z-p800`. 44px on login (heavier
 * than the 34px used elsewhere in the SPA) so the sign-in action reads as
 * the anchor of the form.
 */
.z-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 44px;
	padding: 0 20px;
	border-radius: var(--z-radius-button);
	font: 600 14px/1 var(--z-font-ui);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--z-motion-pop), border-color var(--z-motion-pop);
	border: 1px solid transparent;
	background: transparent;
	color: inherit;
	white-space: nowrap;
}

.z-btn--primary {
	width: 100%;
	background: var(--z-p50);
	border-color: var(--z-p);
	color: var(--z-p800);
}

.z-btn--primary:hover {
	background: var(--z-p100);
}

.z-btn--primary:active {
	background: var(--z-p200);
}

.z-btn--primary[disabled] {
	opacity: 0.6;
	cursor: progress;
}

.z-btn--secondary {
	background: var(--z-surface);
	border-color: var(--z-border);
	color: var(--z-text);
	height: 44px;
}

.z-btn--secondary:hover {
	border-color: var(--z-p);
	background: var(--z-p50);
	color: var(--z-p800);
}

/* --- OR divider — outer ends fade to transparent ---------------------- */
.z-divider {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
	margin: 20px 0 16px;
	color: var(--z-faint);
	font: 500 11px/1 var(--z-font-ui);
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.z-divider::before,
.z-divider::after {
	content: "";
	height: 1px;
	display: block;
}

.z-divider::before {
	background: linear-gradient(to right, transparent, var(--z-border));
}

.z-divider::after {
	background: linear-gradient(to left, transparent, var(--z-border));
}

/* --- Secondary action row: SSO + Passkey side-by-side 50/50 ----------- */
.z-login__secondary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

/* If either button is hidden (no providers, no passkey), let the other
   fill the row — grid `1fr 1fr` with a hidden child collapses cleanly
   because we use `:only-child` to widen the survivor. */
.z-login__secondary .z-btn:only-child {
	grid-column: 1 / -1;
}

/* Frappe icon spans injected by `get_icon_html` come with mixed sizing —
   normalize inside the SSO button so multi-provider dropdowns are legible. */
.z-btn--secondary img,
.z-btn--secondary svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* --- Provider list (shown when >1 SSO providers) ---------------------- */
.z-provider-list {
	list-style: none;
	padding: 6px;
	margin: 8px 0 0;
	background: var(--z-surface);
	border: 1px solid var(--z-border);
	border-radius: var(--z-radius-card);
	box-shadow: var(--shadow-md);
	display: none;
}

.z-provider-list[data-open="true"] {
	display: block;
}

.z-provider-list li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	color: var(--z-text);
	text-decoration: none;
	border-radius: var(--z-radius-button);
	font: 500 13px/1.4 var(--z-font-ui);
}

.z-provider-list li a:hover {
	background: var(--z-sunken);
	color: var(--z-p800);
}

/* --- Legal / tenant footer ------------------------------------------- */
.z-login__legal {
	font: 400 12px/1.5 var(--z-font-ui);
	color: var(--z-faint);
}

.z-login__legal strong {
	color: var(--z-muted);
	font-weight: 500;
}

/* --- Right column — brand hero --------------------------------------- */
.z-login__hero-col {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 85% 15%, #1d727c 0%, transparent 55%),
		radial-gradient(circle at 10% 95%, #145961 0%, transparent 55%),
		var(--z-ink-brand);
	color: var(--z-on-ink);
	padding: 72px 64px;
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 32px;
}

/* Circuit graphic sits behind the copy; low opacity so it never fights it. */
.z-login__hero-circuit {
	position: absolute;
	inset: 0;
	opacity: 0.16;
	pointer-events: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

.z-login__hero-copy {
	position: relative;
	max-width: 520px;
	align-self: end;
}

.z-eyebrow {
	display: inline-block;
	font: 600 11px/1 var(--z-font-ui);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: #7fd6de;
	margin: 0 0 20px;
}

.z-login__hero-heading {
	font: 600 40px/1.12 var(--z-font-ui);
	color: #f2fafb;
	margin: 0 0 20px;
	letter-spacing: -0.015em;
}

.z-login__hero-body {
	font: 400 15px/1.55 var(--z-font-ui);
	color: #b8dce0;
	margin: 0;
}

.z-login__hero-stats {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 520px;
}

.z-stat__value {
	font: 600 24px/1 var(--z-font-ui);
	color: #f2fafb;
	margin: 0 0 6px;
	font-variant-numeric: tabular-nums;
}

.z-stat__label {
	font: 500 11px/1.3 var(--z-font-ui);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #7fd6de;
	margin: 0;
}

/* --- Responsive: stack under 900px ----------------------------------- */
@media (max-width: 900px) {
	.z-login {
		grid-template-columns: 1fr;
	}

	.z-login__form-col {
		padding: 40px 32px;
		order: 2;
	}

	.z-login__hero-col {
		order: 1;
		padding: 48px 32px;
		grid-template-rows: auto auto;
		min-height: 220px;
	}

	.z-login__hero-copy {
		align-self: start;
	}

	.z-login__hero-heading {
		font-size: 28px;
	}

	.z-login__hero-stats {
		display: none;
	}
}

@media (max-width: 640px) {
	.z-login__form-col {
		padding: 32px 20px;
	}

	.z-login__form-wrap {
		max-width: 100%;
	}

	.z-login__heading {
		font-size: 24px;
	}

	.z-login__secondary {
		grid-template-columns: 1fr;
	}
}

/* --- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
	}
}