/*
 * Backstage sign-in pages: Account/Login and Account/ForgotPassword.
 *
 * These views render without a layout (Layout = null), so this file is the only stylesheet on the page besides
 * Poppins. Same light Plankton look as the Reports and Helpdesk pages (reports.css, customers.css): sand page,
 * white card, alto lines, birch text, plankton pink accent. Light mode only.
 *
 * Everything is scoped under .lg (the <body> class) so the file is safe to load anywhere.
 */

.lg {
	--bg: #F7F5F1;            /* sand */
	--surface: #ffffff;
	--surface-2: #FBFAF7;
	--ink: #3C3228;           /* birch */
	--muted: #6F655A;         /* squirrel, darkened for small-text contrast */
	--faint: #9A9085;
	--line: #DED9D1;          /* alto */
	--line-strong: #CCC5BA;
	--accent: #F72863;        /* plankton */
	--accent-hover: #E41656;
	--accent-text: #D41551;   /* plankton, darkened for text on white */
	--accent-soft: #FEEAEF;
	--focus-ring: rgba(247, 40, 99, .22);
	--ok: #049A78;
	--ok-soft: #E3F4EF;
	--err: #F72863;
	--err-text: #C2124A;
	--shadow: 0 1px 3px rgba(60, 50, 40, .08), 0 24px 48px -24px rgba(60, 50, 40, .28);
	--font: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
	--r: 12px;

	color-scheme: light;
	margin: 0;
	min-height: 100vh;
	min-height: 100dvh;
	background-color: var(--bg);
	/* A faint dot field and two soft blooms give the sand some depth without competing with the card. */
	background-image:
		radial-gradient(60rem 40rem at 110% -10%, rgba(247, 40, 99, .07), transparent 60%),
		radial-gradient(50rem 36rem at -15% 115%, rgba(4, 154, 120, .06), transparent 60%),
		radial-gradient(rgba(60, 50, 40, .07) 1px, transparent 1.2px);
	background-size: auto, auto, 22px 22px;
	background-attachment: fixed;
	color: var(--ink);
	font: 14px/1.55 var(--font);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}
.lg *, .lg *::before, .lg *::after { box-sizing: border-box; }
.lg [hidden] { display: none !important; }

/* ── Page frame ─────────────────────────────────────────────────────── */
.lg-main {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 40px 16px;
}
.lg-card {
	position: relative;
	width: 100%; max-width: 420px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r);
	box-shadow: var(--shadow);
	padding: 36px 36px 28px;
	overflow: hidden;
}
/* The pink line across the top of the card: the one bold accent on the page. */
.lg-card::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
	background: linear-gradient(90deg, var(--accent) 0 72%, var(--ok) 72% 100%);
}

.lg-brand { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.lg-logo { display: block; height: 40px; width: auto; margin-left: -6px; } /* the PNG carries its own padding */
.lg-tag {
	font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
	color: var(--accent-text); background: var(--accent-soft);
	padding: 4px 10px; border-radius: 999px;
}

.lg h1 { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; color: var(--ink); }
.lg-lead { margin: 6px 0 24px; color: var(--muted); font-size: 13.5px; }

/* ── Messages ───────────────────────────────────────────────────────── */
.lg-alert {
	display: flex; gap: 10px; align-items: flex-start;
	margin: 0 0 20px; padding: 11px 14px;
	border-radius: 8px; border: 1px solid; border-left-width: 4px;
	font-size: 13.5px; line-height: 1.45;
}
.lg-alert p { margin: 0; }
.lg-alert p + p { margin-top: 4px; }
.lg-alert svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; }
.lg-alert.is-error { background: var(--accent-soft); border-color: rgba(247, 40, 99, .35); border-left-color: var(--err); color: var(--err-text); }
.lg-alert.is-info { background: var(--ok-soft); border-color: rgba(4, 154, 120, .3); border-left-color: var(--ok); color: #03684F; }

/* ── Fields ─────────────────────────────────────────────────────────── */
.lg-field { margin-bottom: 18px; }
.lg-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.lg-label { display: block; font-size: 13px; font-weight: 600; color: var(--ink); }
.lg-label-row .lg-label { margin: 0; }
.lg-field > .lg-label { margin-bottom: 6px; }

.lg-control { position: relative; }
.lg-input {
	display: block; width: 100%; height: 46px; margin: 0;
	padding: 0 14px;
	font: 400 15px/1.2 var(--font); color: var(--ink);
	background: var(--surface-2);
	border: 1px solid var(--line-strong); border-radius: 8px;
	box-shadow: none; outline: 0;
	-webkit-appearance: none; appearance: none;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.lg-input::placeholder { color: var(--faint); opacity: 1; }
.lg-input:hover { border-color: var(--faint); }
.lg-input:focus { background: var(--surface); border-color: var(--accent); box-shadow: 0 0 0 4px var(--focus-ring); }
.lg-input[aria-invalid="true"] { border-color: var(--err); background: #FFF8FA; }
.lg-input.has-toggle { padding-right: 76px; }
/* Hide Edge's built-in reveal button so there is only one show/hide control. */
.lg-input::-ms-reveal, .lg-input::-ms-clear { display: none; }

.lg-reveal {
	position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
	height: 34px; padding: 0 10px;
	font: 600 12.5px/1 var(--font); color: var(--muted);
	background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.lg-reveal:hover { color: var(--ink); background: var(--bg); }
.lg-reveal:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.lg-field-error { display: flex; gap: 6px; align-items: center; margin: 6px 0 0; font-size: 12.5px; font-weight: 500; color: var(--err-text); }
.lg-field-error::before { content: "!"; display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--err); color: #fff; font-size: 10px; font-weight: 700; }
.lg-field-error:empty { display: none; }

.lg-link { color: var(--accent-text); font-weight: 600; font-size: 13px; text-decoration: none; border-radius: 3px; }
.lg-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.lg a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Remember me ────────────────────────────────────────────────────── */
.lg-check { display: inline-flex; align-items: center; gap: 10px; margin: 2px 0 22px; font-size: 13.5px; color: var(--ink); cursor: pointer; user-select: none; }
.lg-check input {
	-webkit-appearance: none; appearance: none; flex: 0 0 auto;
	width: 18px; height: 18px; margin: 0;
	border: 1.5px solid var(--line-strong); border-radius: 5px; background: var(--surface);
	display: grid; place-items: center; cursor: pointer;
	transition: background-color .15s, border-color .15s;
}
.lg-check input::after {
	content: ""; width: 9px; height: 5px; margin-top: -2px;
	border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) scale(0);
	transition: transform .12s ease-out;
}
.lg-check input:checked { background: var(--accent); border-color: var(--accent); }
.lg-check input:checked::after { transform: rotate(-45deg) scale(1); }
.lg-check input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.lg-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; height: 48px; margin: 0; padding: 0 20px;
	font: 600 15px/1 var(--font); letter-spacing: .01em; color: #fff;
	background: var(--accent); border: 0; border-radius: 8px; cursor: pointer;
	box-shadow: 0 1px 2px rgba(60, 50, 40, .12), 0 8px 18px -10px rgba(247, 40, 99, .7);
	transition: background-color .15s, transform .08s, box-shadow .15s;
}
.lg-btn:hover { background: var(--accent-hover); }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.lg-btn[aria-busy="true"] { cursor: progress; opacity: .85; }
.lg-btn[aria-busy="true"]::after {
	content: ""; width: 16px; height: 16px; border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff;
	animation: lg-spin .7s linear infinite;
}
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── Footer bits ────────────────────────────────────────────────────── */
.lg-legal { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.6; color: var(--muted); }
.lg-legal a { color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 2px; }
.lg-legal a:hover { color: var(--accent-text); text-decoration-color: currentColor; }
.lg-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; }
.lg-back span { transition: transform .15s; }
.lg-back:hover span { transform: translateX(-3px); }
.lg-foot { margin: 20px 0 0; font-size: 12px; color: var(--faint); text-align: center; }

/* ── Entrance ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
	.lg-card { animation: lg-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
	.lg-card > * { animation: lg-fade .5s ease-out both; }
	.lg-card > :nth-child(2) { animation-delay: .06s; }
	.lg-card > :nth-child(3) { animation-delay: .1s; }
	.lg-card > :nth-child(n+4) { animation-delay: .14s; }
	@keyframes lg-rise { from { opacity: 0; transform: translateY(10px); } }
	@keyframes lg-fade { from { opacity: 0; } }
}

/* ── Phones ─────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
	.lg-main { justify-content: flex-start; padding: 20px 16px 28px; }
	.lg-card { padding: 28px 20px 22px; }
	.lg-brand { margin-bottom: 22px; }
	.lg-logo { height: 36px; }
	.lg h1 { font-size: 22px; }
	.lg-input { font-size: 16px; } /* 16px stops iOS zooming into the field */
}