/* Shared design for every authentication page (Login, Forgot Password,
   Reset Password) so all three stay visually consistent instead of
   drifting apart as pages get touched individually.
   Brand colors sampled from the Carrier Hub logo pack. */

:root {
	--bg-deep: #020f25;
	--bg-deep-2: #0c1c36;
	--accent: #1699ef;
	--accent-hover: #0f7dc9;
	--accent-soft: rgba(22, 153, 239, 0.14);
	--text: #101828;
	--text-muted: #667085;
	--border: #e4e7ec;
	--danger: #d92d20;
	--danger-bg: #fef3f2;
	--success: #067647;
	--success-bg: #ecfdf3;
	--radius: 16px;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	min-height: 100%;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	background: var(--bg-deep);
	color: var(--text);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	padding: 24px;
	position: relative;
	overflow-x: hidden;
}

/* Ambient background: two breathing orbs + a slow pulsing edge glow.
   Animates only transform and opacity (GPU-cheap, no repaint storms),
   and switches itself off entirely for prefers-reduced-motion. */
.bg-glow {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.bg-glow::before,
.bg-glow::after {
	content: "";
	position: absolute;
	width: 52vw;
	height: 52vw;
	max-width: 720px;
	max-height: 720px;
	border-radius: 50%;
	filter: blur(90px);
	will-change: transform, opacity;
}
.bg-glow::before {
	top: -12%;
	left: -10%;
	background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
	animation: orb1 16s ease-in-out infinite;
}
.bg-glow::after {
	bottom: -16%;
	right: -10%;
	background: radial-gradient(circle, #0c3d63 0%, transparent 70%);
	animation: orb2 20s ease-in-out infinite;
}
@keyframes orb1 {
	0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.35; }
	50%      { transform: translate(5%, 7%) scale(1.18); opacity: 0.6; }
}
@keyframes orb2 {
	0%, 100% { transform: translate(0, 0) scale(1.12); opacity: 0.55; }
	50%      { transform: translate(-5%, -6%) scale(1); opacity: 0.3; }
}

/* Pulsing edges: a fixed vignette ring in the brand colors that slowly
   breathes. The shadow itself is static - only opacity animates. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	box-shadow:
		inset 0 0 140px rgba(22, 153, 239, 0.25),
		inset 0 0 320px rgba(2, 15, 37, 0.35);
	animation: edgepulse 9s ease-in-out infinite;
	will-change: opacity;
}
@keyframes edgepulse {
	0%, 100% { opacity: 0.45; }
	50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.bg-glow::before, .bg-glow::after, body::before { animation: none; }
	.bg-glow::before, .bg-glow::after { opacity: 0.35; }
	body::before { opacity: 0.5; }
}

.auth-card {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 400px;
	background: #ffffff;
	border-radius: var(--radius);
	box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
	padding: 40px 32px;
}

.auth-logo {
	display: block;
	max-width: 200px;
	max-height: 84px;
	width: auto;
	height: auto;
	margin: 0 auto 16px;
}

.auth-heading {
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}

.auth-subheading {
	display: block;
	text-align: center;
	font-size: 14px;
	color: var(--text-muted);
	margin: 0 0 28px;
}

.field {
	margin-bottom: 18px;
}

.field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--text);
}

.field-input-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.field-icon {
	position: absolute;
	left: 14px;
	width: 18px;
	height: 18px;
	color: var(--text-muted);
	pointer-events: none;
}

.auth-card input[type="text"],
.auth-card input[type="password"] {
	width: 100%;
	height: 46px;
	padding: 0 14px 0 42px;
	font-family: inherit;
	font-size: 15px;
	color: var(--text);
	background: #fff;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	outline: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-card input[type="text"]:focus,
.auth-card input[type="password"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 4px var(--accent-soft);
}

.password-toggle {
	position: absolute;
	right: 6px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--text-muted);
	border-radius: 8px;
}
.password-toggle:hover { color: var(--text); background: #f2f4f7; }
.password-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.field-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 4px 0 20px;
	flex-wrap: wrap;
	gap: 8px;
}

.remember-me {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--text-muted);
	cursor: pointer;
	user-select: none;
}
.remember-me input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--accent);
	cursor: pointer;
}

.forgot-link {
	font-size: 14px;
	color: var(--accent);
	text-decoration: none;
	font-weight: 500;
}
.forgot-link:hover { text-decoration: underline; }

.error-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--danger-bg);
	border: 1px solid #fda29b;
	color: var(--danger);
	font-size: 13px;
	font-weight: 500;
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 18px;
}
.error-banner svg { flex-shrink: 0; margin-top: 1px; }

.success-banner {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	background: var(--success-bg);
	border: 1px solid #a6f4c5;
	color: var(--success);
	font-size: 13px;
	font-weight: 500;
	padding: 12px 14px;
	border-radius: 10px;
	margin-bottom: 18px;
}
.success-banner svg { flex-shrink: 0; margin-top: 1px; }

.btn-primary {
	width: 100%;
	height: 48px;
	background: var(--accent);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

a.btn-primary, a.btn-secondary {
	display: block;
	text-align: center;
	line-height: 48px;
	text-decoration: none;
}
a.btn-primary { color: #fff; }
a.btn-primary:hover { color: #fff; text-decoration: none; }

.btn-secondary {
	width: 100%;
	height: 48px;
	background: transparent;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
	display: block;
	text-align: center;
	text-decoration: none;
	line-height: 48px;
}
.btn-secondary:hover { background: #f9fafb; color: var(--text); text-decoration: none; }
.btn-secondary:active { transform: translateY(1px); }
.btn-secondary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.error-icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--danger-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.reference-code {
	display: inline-block;
	background: #f2f4f7;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 6px 12px;
	font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
	font-size: 13px;
	color: var(--text-muted);
	margin: 4px 0 24px;
}

.g-recaptcha {
	width: 304px;
	max-width: 100%;
	margin: 4px auto 16px;
}
.g-recaptcha > div { margin: 0 auto; }

.auth-footer {
	text-align: center;
	margin-top: 20px;
}
.auth-footer p {
	font-size: 13px;
	color: var(--text-muted);
	margin: 10px 0 0;
	line-height: 1.5;
}
.auth-footer a { color: var(--text-muted); }

@media (max-width: 420px) {
	body {
		padding: 16px 12px;
		align-items: center;
	}

	.auth-card {
		max-width: 380px;
		padding: 28px 16px;
		border-radius: 14px;
	}

	.auth-logo {
		max-height: 76px;
		margin-bottom: 14px;
	}

	.auth-subheading {
		margin-bottom: 22px;
	}

	.field {
		margin-bottom: 15px;
	}

	.field-row {
		margin-bottom: 16px;
	}

	.auth-footer {
		margin-top: 16px;
	}
}

/* Global page-loading overlay, shown on form submit. */
#globalLoadingOverlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(2, 15, 37, 0.6);
	z-index: 99999;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}
#globalLoadingOverlay.active {
	display: flex;
}
#globalLoadingOverlay .gl-spinner {
	width: 56px;
	height: 56px;
	border: 5px solid rgba(255, 255, 255, 0.25);
	border-top-color: #fff;
	border-radius: 50%;
	animation: glSpin 0.8s linear infinite;
}
#globalLoadingOverlay .gl-message {
	color: #fff;
	margin-top: 16px;
	font-size: 1rem;
}
@keyframes glSpin {
	to { transform: rotate(360deg); }
}