/* Adapted design, ported by scripts/port-skin.py. Colours were remapped
 * onto the Abushakra palette, preserving the source's lightness
 * structure. Origin and attribution: DECISIONS.md D-003.
 * Do not edit by hand: re-run the porter instead.
 */
/* Login styling is hand-written, not ported. See DECISIONS.md D-018. */

/* Login page, hand-written on Frappe's real login selectors (data-path="login",
   .page-card, .btn-login), not ported. Background glow + monogram watermark +
   brand button, over Frappe's own clean card layout. */

body[data-path="login"] {
	background:
		radial-gradient(820px 560px at 82% -10%, rgba(190, 147, 62, 0.16), transparent 58%),
		radial-gradient(900px 640px at 10% 6%, rgba(131, 143, 125, 0.20), transparent 55%),
		radial-gradient(1000px 760px at 60% 122%, rgba(72, 89, 86, 0.14), transparent 60%),
		linear-gradient(160deg, #fcf7e6, #fdf9ea 58%, #f6efdc) !important;
	background-attachment: fixed !important;
}

/* --------------------------------------------------------------------------
   Abushakra monogram, watermarked behind the login card. Added by as_hr, not
   ported. The mark is the cream-on-transparent variant at low opacity, so it
   reads as a texture on the cream stage rather than competing with the form.
   -------------------------------------------------------------------------- */
.for-login .page-card,
.login-content {
	position: relative;
}

body[data-path="login"] {
	background:
		radial-gradient(820px 560px at 82% -10%, rgba(190, 147, 62, 0.18), transparent 58%),
		radial-gradient(900px 640px at 10% 6%, rgba(131, 143, 125, 0.22), transparent 55%),
		radial-gradient(1000px 760px at 60% 122%, rgba(72, 89, 86, 0.15), transparent 60%),
		linear-gradient(160deg, #fcf7e6, #fdf9ea 58%, #f6efdc) !important;
	background-attachment: fixed !important;
}

/* faint dotted texture over the glow */
body[data-path="login"] > .page-card,
body[data-path="login"] .login-content {
	position: relative;
	z-index: 1;
}

/* the monogram watermark, behind the card */
body[data-path="login"]::before {
	content: "";
	position: fixed;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(-50%, -58%);
	width: min(60vmin, 420px);
	height: min(60vmin, 420px);
	background-image: url("/assets/as_hr/images/as-monogram-teal.png");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: 0.05;
	pointer-events: none;
	z-index: 0;
}

/* --------------------------------------------------------------------------
   Login button, styled directly rather than through --btn-primary. Frappe's
   login and desk bundles redeclare that variable on :root and load after this
   file, so overriding the variable is a fight with load order. Styling the
   element under the login body wins on specificity and is stable.
   -------------------------------------------------------------------------- */
/* The primary action on the login page is .btn-login (the Continue/Sign In
   button), which Frappe classes .btn-default and colours dark directly. The
   real primary buttons elsewhere on the page (.btn-primary) are the secondary
   actions here. So the brand-coloured button is .btn-login, and .btn-primary
   is styled as the softer secondary. Confirmed against the served markup. */
body[data-path="login"] .btn-login,
body[data-path="login"] button.btn-login.btn-default {
	background: var(--as-primary, #304140) !important;
	border-color: var(--as-primary, #304140) !important;
	color: var(--as-surface, #fdf9ea) !important;
	font-weight: 600;
	letter-spacing: 0.01em;
}

body[data-path="login"] .btn-login:hover {
	background: #26332f !important;
	border-color: #26332f !important;
}

/* Secondary actions: the email-link and sign-up buttons, warm and quiet. */
body[data-path="login"] .btn-login-with-email-link,
body[data-path="login"] .btn-signup {
	background: rgba(255, 255, 255, 0.7) !important;
	border: 1px solid rgba(48, 65, 64, 0.18) !important;
	color: var(--as-primary, #304140) !important;
}

/* card: lift it off the glow with a soft brand-tinted shadow */
body[data-path="login"] .page-card {
	box-shadow: 0 24px 60px -20px rgba(48, 65, 64, 0.28),
	            0 8px 24px -12px rgba(48, 65, 64, 0.16) !important;
	border-radius: 16px !important;
	border: 1px solid rgba(48, 65, 64, 0.06) !important;
}