/* ═══════════════════════════════════════════════════════════════════════════
   GOFUR THEME v16 · LOGIN
   ---------------------------------------------------------------------------
   Frappe's stock login page, laid out as two columns: a brand panel beside the
   form instead of one narrow card adrift in an empty page.

   THE LOOK
   Quiet and editorial rather than decorative -- this is the front door of an
   accounting system and it should read as precise. The panel is built in
   layers: a deep ink gradient, a soft bloom from the top left, and fine ruled
   lines at 4% white. The rules are the one deliberate reference: ledger paper,
   for a product whose next screen is a balance sheet.

   WHOSE BRAND
   ERPNext's. Nothing here ships a logo, a wordmark or a line of copy. The panel
   is assembled entirely out of markup frappe already renders -- img.app-logo,
   whose src is the site's own logo from Website Settings, plus the h4 and
   p.page-card-subtitle. All three already pass through _(), so they stay
   translated. This file only moves them and paints behind them.

   That is also why there is no template override. Copying login.html would mean
   re-merging 8.7 KB of somebody else's markup on every frappe release, and it
   would put those strings under our control -- exactly what we do not want.

   WHY body:has(...) IS THE ROOT OF EVERY RULE
   Two problems, one selector.

   1. web_include_css loads on EVERY website page, not just /login. Anchoring on
      a section only the login page renders means these rules cannot reach
      anything else, whatever the site publishes.
   2. login.bundle.css loads AFTER this file -- head.html runs inside
      {% block head %} (base.html:24), login.html adds its bundle in
      {% block head_include %} (base.html:27).

   :has() is Chrome 105 / Safari 15.4 / Firefox 121. Anything older gets
   frappe's stock login page -- plainer, not broken.

   ON SELECTOR LENGTH
   login.bundle.css styles the form through four-class chains such as
   `.for-login .page-card .page-card-body .form-label` (0,4,0). Rules that have
   to beat those repeat `.page-card .page-card-body` to clear the bar; the
   prefix contributes (0,1,2), so the result is (0,4,2) and lands without a
   single !important. Rules that only have to beat a one-class selector stay
   short. Length here is arithmetic, not habit.

   GEOMETRY IS LITERAL, COLOUR IS NOT
   gofur_tokens.css carries colour and type only, so spacing and radii are
   written out. Every colour is still var(--gf-*), except the white-on-dark
   washes inside the panel -- those are alpha over whatever the gradient happens
   to be underneath, and there is no token for that.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Page ──────────────────────────────────────────────────────────────────── */

body:has(section.for-login) {
	background:
		radial-gradient(90% 60% at 50% 0%, var(--gf-white) 0%, transparent 70%),
		var(--gf-ink-50);
}

/* The card used to sit against the top of the page with the rest of the screen
   empty below it. Centring is the single biggest change here: a login is one
   object on an otherwise blank page, and anywhere but the middle reads as a
   layout that gave up.

   Done by making the wrapper a full-height column and letting <main> take the
   slack, rather than by giving main a viewport height of its own. The wrapper
   also holds the navbar -- 60px when the language picker is on, nothing when it
   is off -- and flex subtracts whatever that turns out to be. A fixed height
   here would have to guess it, and would be wrong in one of the two cases. */
body:has(section.for-login) .page-content-wrapper {
	display: flex;
	flex-direction: column;
	min-height: 100dvh;
}

body:has(section.for-login) .page-content-wrapper > main {
	flex: 1 1 auto;
	display: grid;
	place-items: center;
	padding-block: 40px;
}

/* ── The card ──────────────────────────────────────────────────────────────── */

/* Padding is set on three sides only. The fourth is left to the brand panel,
   which reclaims the top and bottom with negative margins below -- that is what
   lets the gradient reach the card's edges while every other child keeps a
   normal, uniform inset. It also means a child this file has never seen (the
   signup form arrives from an injected template) is spaced correctly anyway. */
body:has(section.for-login) .page-card {
	display: grid;
	grid-template-columns: minmax(0, 20rem) minmax(0, 23rem);
	width: min(43rem, 100%);
	max-width: min(43rem, 100%);
	padding: 38px 38px 34px 0;
	border: none;
	border-radius: 18px;
	background: var(--gf-white);
	box-shadow:
		0 1px 0 0 var(--gf-ink-100),
		0 2px 6px -2px rgb(15 23 42 / 0.10),
		0 28px 64px -32px rgb(15 23 42 / 0.55);
	overflow: hidden;
	animation: gf-login-rise 520ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
}

@keyframes gf-login-rise {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.995);
	}
}

@media (prefers-reduced-motion: reduce) {
	body:has(section.for-login) .page-card {
		animation: none;
	}
}

/* Everything that is not the panel belongs in the right-hand column. Written as
   a blanket rule rather than one selector per element so markup we do not
   control -- the signup template, the social login block -- lands in the right
   place without needing a rule of its own. */
body:has(section.for-login) .page-card > * {
	grid-column: 2;
	min-width: 0;
}

/* ── Brand panel ───────────────────────────────────────────────────────────── */

body:has(section.for-login) .page-card-head {
	grid-column: 1;
	grid-row: 1 / -1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 20px;
	margin: -38px 0 -34px 0;
	padding: 44px 34px;
	text-align: left;
	/* Three layers, painted back to front by the reverse of this order: the ink
	   gradient, then the ledger rules, then a bloom from the top left so the
	   logo has something to sit in. */
	background-image:
		radial-gradient(115% 75% at 14% 6%, rgb(255 255 255 / 0.16) 0%, transparent 58%),
		repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.04) 0 1px, transparent 1px 34px),
		linear-gradient(158deg, var(--gf-ink-800) 0%, var(--gf-ink-900) 50%, var(--gf-blue-900) 100%);
}

/* The logo sits on a light chip rather than straight on the gradient.
   img.app-logo renders whatever the site set in Website Settings, and the
   common case is a dark mark on transparency -- which would vanish against a
   dark panel. The chip makes the panel safe for a logo this file cannot see;
   the ring keeps it from reading as a sticker. */
body:has(section.for-login) .page-card-head .app-logo {
	width: auto;
	height: 38px;
	max-width: 100%;
	margin: 0;
	padding: 8px 11px;
	border-radius: 12px;
	background: var(--gf-white);
	box-shadow:
		0 0 0 1px rgb(255 255 255 / 0.16),
		0 6px 18px -6px rgb(0 0 0 / 0.55);
	object-fit: contain;
}

body:has(section.for-login) .page-card-head-text {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body:has(section.for-login) .page-card-head h4 {
	margin: 0;
	font-family: "Manrope", inherit;
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1.14;
	letter-spacing: -0.022em;
	color: var(--gf-white);
}

body:has(section.for-login) .page-card-subtitle {
	margin: 0;
	max-width: 25ch;
	font-size: 0.875rem;
	line-height: 1.6;
	color: rgb(255 255 255 / 0.62);
}

/* ── Form column ───────────────────────────────────────────────────────────── */

/* Chains from here down are sized to clear login.bundle.css; see the header. */

body:has(section.for-login) .page-card .page-card-body,
body:has(section.for-login) .page-card .page-card-actions {
	padding-left: 0;
	padding-right: 0;
}

body:has(section.for-login) .page-card .page-card-body .form-label {
	margin-bottom: 6px;
	font-size: 0.78125rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--gf-ink-700);
}

/* padding-left is deliberately left alone. The field has an icon absolutely
   positioned over it and frappe reserves 38px for it -- overwrite the shorthand
   and the placeholder slides under the envelope. */
body:has(section.for-login) .page-card .page-card-body .form-control {
	padding-top: 10px;
	padding-bottom: 10px;
	border: 1px solid var(--gf-ink-200);
	border-radius: 10px;
	background: var(--gf-white);
	transition: border-color 130ms ease, box-shadow 130ms ease;
}

body:has(section.for-login) .page-card .page-card-body .form-control:hover {
	border-color: var(--gf-ink-300);
}

/* A ring, not a border swap. Stock frappe gives these inputs no focus indicator
   at all -- outline resolves to none, the border does not move, there is no
   shadow -- and two adjacent fields with no way to tell which one holds the
   caret is a WCAG 2.4.7 failure. Worse here than most, because a password field
   shows nothing as you type. */
body:has(section.for-login) .page-card .page-card-body .form-control:focus {
	border-color: var(--gf-blue-500);
	box-shadow: 0 0 0 3px var(--gf-blue-100);
	outline: none;
}

/* Geometry only. The button colours are frappe's and stay that way -- the brand
   on this page is ERPNext's, and recolouring the one thing everybody clicks
   would be the loudest possible place to disagree with that. */
body:has(section.for-login) .page-card .page-card-actions .btn {
	padding-top: 11px;
	padding-bottom: 11px;
	border-radius: 10px;
	font-weight: 600;
	letter-spacing: 0.005em;
}

body:has(section.for-login) .page-card .sign-up-message {
	margin-top: 4px;
	font-size: 0.8125rem;
}

/* ── Narrow screens ────────────────────────────────────────────────────────── */

/* One column, panel back on top as a compact header. Nothing is hidden: the
   logo, the title and the subtitle are the page's own content, and dropping one
   on a phone would be losing information rather than saving room. */
@media (max-width: 900px) {
	body:has(section.for-login) .page-content-wrapper > main {
		padding-block: 28px;
	}

	body:has(section.for-login) .page-card {
		grid-template-columns: minmax(0, 1fr);
		width: min(27rem, 100%);
		max-width: min(27rem, 100%);
		padding: 0 28px 28px;
	}

	body:has(section.for-login) .page-card > * {
		grid-column: 1;
	}

	body:has(section.for-login) .page-card-head {
		grid-row: auto;
		margin: 0 -28px 24px;
		padding: 30px 28px;
		gap: 16px;
	}

	body:has(section.for-login) .page-card-head h4 {
		font-size: 1.375rem;
	}

	body:has(section.for-login) .page-card-subtitle {
		max-width: none;
	}
}