/* ===========================================================================
   CompleteStatus — auth pages (layouts/guest.blade.php only)
   ---------------------------------------------------------------------------
   Split screen (branding brief, LOGIN / SIGNUP):
     LEFT   calm navy brand panel: dark-ground logo, short positioning, a small
            green "operational" indicator. A faint engineering grid and one
            soft blue glow; no noisy gradient, nothing animated.
     RIGHT  white form column: 44px fields, blue primary button.
   Below 992px it is one column: the panel shrinks to a slim navy bar with the
   logo, so the form comes first.
   Tokens come from brand.css, which always loads first. site.css does NOT
   load here, so the few type rules auth needs live in this file.
   ========================================================================= */

/* ---- Local tokens (light by default; follows the app's dark theme) ------ */
.cs-auth {
	--auth-ink: var(--text-primary);
	--auth-text: var(--text-secondary);
	--auth-muted: var(--text-muted-aa);
	--auth-surface: var(--bg-white);
	--auth-hover: var(--bg-page);
	--auth-line: var(--border-default);
	--auth-field: var(--border-strong);

	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	min-height: 100vh;
	min-height: 100dvh;
	background: var(--auth-surface);
	color: var(--auth-ink);
}
[data-bs-theme="dark"] .cs-auth {
	--auth-ink: #F2F5F9;
	--auth-text: #AAB4C2;
	--auth-muted: #8A96A8;
	--auth-surface: var(--bg-dark);
	--auth-hover: var(--bg-dark-elevated);
	--auth-line: #232B36;
	--auth-field: #2E3744;
}

/* ===========================================================================
   Brand panel (navy)
   ========================================================================= */
.cs-auth__brand {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: flex;
	align-items: center;
	background: var(--brand-navy);
	color: var(--text-on-dark);
	/* phones/tablets: a slim bar that only carries the logo */
	min-height: 60px;
	padding: 12px 16px;
}
.cs-auth__brand-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
}
.cs-auth__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	border-radius: 6px;
}
.cs-auth__logo .wt-logo__full {
	height: 26px;
	width: auto;
}

/* Small operational indicator: dot + words (never colour alone). Static:
   the brief allows pulsing only where the dot means "live". */
.cs-auth__beacon {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 10px;
	border-radius: 999px;
	border: 1px solid rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .04);
	color: #D5DCE5;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	white-space: nowrap;
}
.wt-beacon-pulse {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--status-success);
	box-shadow: 0 0 0 3px rgba(34, 197, 94, .22);
}

.cs-auth__pitch,
.cs-auth__foot { display: none; }

@media (min-width: 576px) {
	.cs-auth__beacon { display: inline-flex; }
}

/* ---- Desktop: the full panel on the left ------------------------------- */
@media (min-width: 992px) {
	.cs-auth {
		grid-template-columns: minmax(400px, 44fr) 56fr;
		grid-template-rows: none;
	}
	.cs-auth__brand {
		position: sticky;
		top: 0;
		align-self: start;
		height: 100vh;
		height: 100dvh;
		min-height: 560px;
		flex-direction: column;
		align-items: stretch;
		justify-content: space-between;
		gap: 40px;
		padding: clamp(36px, 4vw, 56px) clamp(36px, 4.4vw, 64px);
	}
	/* Texture, not decoration: a faint engineering grid fading out from the
	   top, and one soft blue glow low on the panel. */
	.cs-auth__brand::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background-image:
			linear-gradient(rgba(170, 180, 194, .05) 1px, transparent 1px),
			linear-gradient(90deg, rgba(170, 180, 194, .05) 1px, transparent 1px);
		background-size: 48px 48px;
		-webkit-mask-image: radial-gradient(110% 80% at 30% 0%, #000 25%, transparent 72%);
		        mask-image: radial-gradient(110% 80% at 30% 0%, #000 25%, transparent 72%);
		pointer-events: none;
	}
	.cs-auth__brand::after {
		content: "";
		position: absolute;
		left: -20%;
		bottom: -30%;
		width: 90%;
		height: 70%;
		z-index: -1;
		background: radial-gradient(closest-side, rgba(7, 135, 227, .18), rgba(7, 135, 227, 0));
		pointer-events: none;
	}
	.cs-auth__logo .wt-logo__full { height: 32px; }
	.cs-auth__brand-top { flex-wrap: wrap; row-gap: 14px; }

	.cs-auth__pitch {
		display: block;
		max-width: 520px;
	}
	.cs-auth__title {
		margin: 0 0 18px;
		font-size: clamp(26px, 2.35vw, 34px);
		line-height: 1.15;
		font-weight: 700;
		letter-spacing: -.025em;
		color: var(--text-on-dark);
		text-wrap: balance;
	}
	.cs-auth__lead {
		margin: 0 0 28px;
		font-size: 16px;
		line-height: 1.6;
		color: var(--text-on-dark-muted);
	}
	.cs-auth__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: grid;
		gap: 12px;
	}
	.cs-auth__list li {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		font-size: 15px;
		line-height: 1.5;
		color: #D5DCE5;
	}
	/* Green check = an included capability (its one job besides "healthy"). */
	.cs-auth__list svg {
		flex: 0 0 auto;
		margin-top: 1px;
		color: var(--status-success);
	}
	.cs-auth__foot {
		display: block;
		margin: 0;
		padding-top: 20px;
		border-top: 1px solid rgba(255, 255, 255, .08);
		font-size: 13px;
		line-height: 1.5;
		color: var(--text-on-dark-muted);
	}
}

/* Narrower desktop panel: let the headline balance itself instead of the
   hard line break leaving "watch," on a line of its own. */
@media (min-width: 992px) and (max-width: 1279.98px) {
	.cs-auth__title br { display: none; }
}

/* ===========================================================================
   Form column (white)
   ========================================================================= */
.cs-auth__main {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 32px 16px 20px;
	background: var(--auth-surface);
}
.cs-auth__card {
	width: 100%;
	max-width: 400px;
	padding-bottom: 32px;
}
.cs-auth__footer {
	width: 100%;
	max-width: 400px;
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 20px;
	padding-top: 16px;
	border-top: 1px solid var(--auth-line);
	font-size: 14px;
	color: var(--auth-muted);
}
.cs-auth__footer-links { display: flex; flex-wrap: wrap; gap: 0 16px; }
.cs-auth__footer-links a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: var(--auth-text);
	font-weight: 500;
	text-decoration: none;
}
.cs-auth__footer-links a:hover { color: var(--link); text-decoration: underline; }
[data-bs-theme="dark"] .cs-auth__footer-links a:hover { color: var(--link-on-dark); }

@media (min-width: 992px) {
	.cs-auth__main { padding: 48px clamp(32px, 5vw, 80px) 28px; }
	/* centre the form vertically in the column; the footer sits at the foot */
	.cs-auth__card { margin-block: auto; padding-block: 24px; }
	.cs-auth__footer { margin-top: 0; }
}

/* ---- Heading block ------------------------------------------------------- */
.cs-auth-head { margin-bottom: 28px; }
.cs-auth-head--center { text-align: center; }
.cs-auth-title {
	margin: 0 0 8px;
	font-size: 28px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -.022em;
	color: var(--auth-ink);
	text-wrap: balance;
}
.cs-auth-sub {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--auth-text);
	text-wrap: pretty;
}
.cs-auth-sub strong { color: var(--auth-ink); font-weight: 600; }
@media (max-width: 575.98px) {
	.cs-auth-title { font-size: 24px; }
}

/* Icon tile above a centred heading (2FA, verify email): navy/blue only. */
.cs-auth-icon {
	display: inline-grid;
	place-items: center;
	width: 56px;
	height: 56px;
	margin-bottom: 20px;
	border-radius: var(--radius-card);
	background: var(--action-light);
	color: var(--brand-blue);
}
.cs-auth-icon i { font-size: 28px; color: inherit; }
.cs-auth-icon i [class^="path"]::before,
.cs-auth-icon i [class*=" path"]::before { color: currentColor; }
[data-bs-theme="dark"] .cs-auth-icon { background: #102538; color: var(--link-on-dark); }
/* Green only where it means "done / healthy" (unsubscribe succeeded). */
.cs-auth-icon--ok { background: var(--status-success-soft); color: var(--status-success-text); }
[data-bs-theme="dark"] .cs-auth-icon--ok { background: #12261C; color: #4ADE80; }

/* ---- Fields ------------------------------------------------------------- */
.cs-auth .cs-field { margin-bottom: 20px; }
.cs-auth .form-label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 600;
	color: var(--auth-ink);
}
.cs-auth .cs-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 6px;
}
.cs-auth .cs-field-head .form-label { margin-bottom: 0; }
.cs-auth .form-control,
.cs-auth .form-control.form-control-lg {
	min-height: 44px;
	padding: 10px 14px;
	font-size: 15px;
	line-height: 1.4;
	border-radius: var(--radius-input);
	border: 1px solid var(--auth-field);
	background-color: var(--auth-surface);
	color: var(--auth-ink);
}
.cs-auth .form-control::placeholder { color: var(--text-muted); }
.cs-auth .form-control:focus {
	border-color: var(--focus-outline);
	box-shadow: var(--focus-ring);
}
.cs-auth .form-control.is-invalid { border-color: var(--status-danger); }
.cs-auth .form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(232, 61, 91, .15); }
.cs-auth .invalid-feedback { font-size: 13px; margin-top: 6px; }
.cs-auth .cs-field-hint { margin-top: 8px; font-size: 13px; line-height: 1.5; color: var(--auth-muted); }
.cs-auth-link-sm { font-size: 13px; font-weight: 600; }

/* Password + show/hide toggle (wt-public.js password meter). */
.cs-auth-pw { position: relative; }
.cs-auth-pw .form-control { padding-right: 52px; }
.cs-auth-pw .form-control.is-invalid { padding-right: 52px; background-image: none; }
.cs-auth .cs-auth-eye {
	position: absolute;
	top: 50%;
	right: 2px;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-grid;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var(--auth-muted);
}
.cs-auth .cs-auth-eye:hover { color: var(--auth-ink); background: var(--auth-hover); }
.cs-auth .cs-auth-eye i { font-size: 20px; color: inherit; }
.cs-auth .cs-auth-eye i [class^="path"]::before,
.cs-auth .cs-auth-eye i [class*=" path"]::before { color: currentColor; }

/* Strength meter: neutral track, green fill only when the password passes. */
.cs-auth-meter {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 6px;
	margin-top: 10px;
}
.cs-auth-meter > div {
	height: 4px;
	border-radius: 2px;
	background-color: var(--auth-line);
	transition: background-color var(--dur) var(--ease);
}
.cs-auth-meter > div.active { background-color: var(--status-success); }

/* One-time code (2FA) */
.cs-auth .form-control.cs-auth-otp {
	min-height: 56px;
	font-size: 24px;
	font-weight: 600;
	letter-spacing: .3em;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Remember me */
.cs-auth .cs-auth-check {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 24px;
	margin: 0 0 24px;
	padding: 0;
	cursor: pointer;
	font-size: 14px;
	color: var(--auth-text);
}
.cs-auth .cs-auth-check .form-check-input {
	float: none;
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1px solid var(--auth-field);
	border-radius: 5px;
	background-color: var(--auth-surface);
	cursor: pointer;
}
.cs-auth .cs-auth-check .form-check-input:checked {
	background-color: var(--action-fill);
	border-color: var(--action-fill);
}

/* ---- Buttons -------------------------------------------------------------- */
/* Metronic sizes buttons through a long :not() chain, so padding needs
   !important to land; inline-flex centres <a> labels like <button> ones. */
.cs-auth .btn.btn-lg,
.cs-auth .btn:not(.btn-icon):not(.btn-link):not(.cs-auth-eye) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 600;
	border-radius: var(--radius-btn);
}
.cs-auth .btn.btn-lg {
	min-height: 46px;
	padding: 10px 20px !important;
	font-size: 15px;
}
.cs-auth .btn:not(.btn-lg):not(.btn-icon):not(.btn-link):not(.cs-auth-eye) {
	min-height: 44px;
	padding: 9px 18px !important;
	font-size: 14px;
}
.cs-auth-submit { display: grid; margin-bottom: 24px; }
.cs-auth-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-bottom: 24px;
}
.cs-auth-actions--center { justify-content: center; }
@media (max-width: 575.98px) {
	.cs-auth-actions > *,
	.cs-auth-actions > form,
	.cs-auth-actions > form .btn { width: 100%; }
}

/* Secondary on white: white + strong border, navy text (SSO, "Back to sign in") */
.cs-auth .btn.cs-auth-btn-secondary {
	color: var(--auth-ink);
	background: var(--auth-surface);
	border: 1px solid var(--auth-field);
}
.cs-auth .btn.cs-auth-btn-secondary:hover:not(.btn-active),
.cs-auth .btn.cs-auth-btn-secondary:focus-visible:not(.btn-active) {
	color: var(--auth-ink) !important;
	background: var(--auth-hover) !important;
	border-color: #B5C1D0 !important;
}
[data-bs-theme="dark"] .cs-auth .btn.cs-auth-btn-secondary:hover:not(.btn-active) { border-color: #44526A !important; }

/* SSO */
.cs-auth-social { margin-bottom: 20px; }
.cs-auth-social .btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 46px;
	font-size: 15px;
	font-weight: 600;
}
.cs-auth-social img { width: 20px; height: 20px; }
.cs-auth-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 20px;
	color: var(--auth-muted);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
}
.cs-auth-divider::before,
.cs-auth-divider::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--auth-line);
}

/* "New to CompleteStatus? Create an account" */
.cs-auth-alt {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--auth-text);
}
.cs-auth-alt a { font-weight: 600; }

/* Fine print (consent, notes) */
.cs-auth-fine {
	margin: -8px 0 24px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--auth-muted);
}
.cs-auth-note {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--auth-muted);
}

/* Security signals (register): quiet, blue icons, below a hairline. */
.cs-auth-trust {
	list-style: none;
	margin: 24px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--auth-line);
	display: grid;
	gap: 10px;
}
.cs-auth-trust li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.45;
	color: var(--auth-muted);
}
.cs-auth-trust i {
	flex: 0 0 auto;
	margin-top: 1px;
	font-size: 16px;
	color: var(--brand-blue);
}
.cs-auth-trust i [class^="path"]::before,
.cs-auth-trust i [class*=" path"]::before { color: currentColor; }
.cs-auth-sep { height: 1px; margin: 24px 0; background: var(--auth-line); border: 0; opacity: 1; }

/* Alerts inside the form column */
.cs-auth .alert {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 24px;
	padding: 14px 16px;
	font-size: 14px;
	line-height: 1.5;
	border-radius: var(--radius-card-sm);
}
.cs-auth .alert > i { flex: 0 0 auto; font-size: 22px; margin-top: -1px; }

/* Links are distinguishable without colour inside sentences (WCAG 1.4.1). */
.cs-auth-alt a,
.cs-auth-fine a,
.cs-auth-note a { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 1px; }

@media (prefers-reduced-motion: reduce) {
	.cs-auth-meter > div { transition: none; }
}