/**
 * Páginas públicas de autenticação (login, register, forgot, reset, invite)
 * — split-screen no padrão do onboarding: rail azul da marca + formulário.
 *
 * Dois mundos, mesmo truque do password-checklist.css: essas páginas NÃO têm
 * os tokens --dashboard-*, então toda cor usa var(--dashboard-*, <fallback do
 * tema light>). Zero hex fora de fallback.
 *
 * O bug histórico de scroll (overflow hidden + align-items center no login.css)
 * morre aqui pela estrutura: shell fixed + scroll interno em .auth-main +
 * .auth-content com margin auto (centraliza quando cabe, rola quando não cabe).
 */

/*
 * Tema: o CLARO é o default (vem dos fallbacks de cada var). O ESCURO define
 * os tokens sob [data-theme="dark"] com os MESMOS valores do :root dark do
 * dashboard.css (manter em sincronia se a paleta mudar). O data-theme é
 * resolvido antes do paint no htmlHeader (localStorage → preferência do
 * sistema) e alternado pelo switch (.auth-theme-toggle, auth-theme.js).
 * O password-checklist.css usa os mesmos tokens e adapta junto.
 */
:root[data-theme='dark'] {
	--dashboard-bg: #0a0a0f;
	--dashboard-surface: #111118;
	--dashboard-surface-secondary: #080809;
	--dashboard-hover-bg: #16162a;
	--dashboard-input-bg: #2d3139;
	--dashboard-border: #1e1e2e;
	--dashboard-text: #e0e4f0;
	--dashboard-text-secondary: #9599af;
	--dashboard-text-muted: #6b6f84;
	--dashboard-primary: #1036F2;
	--dashboard-primary-hover: #3655f4;
	--dashboard-primary-light: #6681f7;
	--dashboard-on-primary: #ffffff;
	--dashboard-rail-bg: #0b228e;
	--dashboard-danger: #f85149;
	--dashboard-success: #3fb950;
	--dashboard-warning: #d29922;
	--dashboard-radius: 6px;
	--dashboard-radius-lg: 12px;
	color-scheme: dark;
}

.auth-shell {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
	background: var(--dashboard-bg, #f7f8fc);
}

/* ── Rail esquerdo (aside, nunca <nav>: style.css tem nav global) ──────── */

.auth-rail {
	display: flex;
	flex-direction: column;
	padding: 2.5rem 2.25rem;
	background:
		radial-gradient(720px 480px at -10% -10%, color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 9%, transparent), transparent 62%),
		var(--dashboard-rail-bg, #0b228e);
	color: var(--dashboard-on-primary, #ffffff);
	overflow-y: auto;
}

.auth-rail-logo {
	height: 30px;
	filter: brightness(0) invert(1);
}

/* Link minimalista para o site institucional, abaixo da logo */
.auth-rail-site {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	width: fit-content;
	margin-top: 0.75rem;
	font-size: 0.78rem;
	font-weight: 500;
	text-decoration: none;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 65%, transparent);
	transition: color 0.15s ease;
}

.auth-rail-site:hover {
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-rail-site .material-symbols-rounded {
	font-size: 0.85rem;
}

.auth-rail-body {
	margin: auto 0;
	padding: 2.5rem 0;
}

.auth-rail-title {
	font-size: 1.65rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	margin: 0 0 0.75rem;
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-rail-desc {
	font-size: 0.95rem;
	line-height: 1.55;
	margin: 0;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 75%, transparent);
}

.auth-rail-points {
	list-style: none;
	margin: 2rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.auth-rail-points li {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	font-size: 0.9rem;
	font-weight: 500;
}

.auth-rail-point-icon {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border-radius: var(--dashboard-radius, 6px);
	background: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 14%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-rail-point-icon .material-symbols-rounded {
	font-size: 1.1rem;
}

.auth-rail-foot {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.8rem;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 60%, transparent);
}

.auth-rail-foot .material-symbols-rounded {
	font-size: 1rem;
}

/* ── Switch de tema (canto esquerdo do rail; na faixa azul no mobile) ──── */

.auth-theme-toggle {
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	border: 1px solid color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 30%, transparent);
	border-radius: 50%;
	background: transparent;
	color: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 75%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.auth-theme-toggle:hover {
	background: color-mix(in srgb, var(--dashboard-on-primary, #ffffff) 14%, transparent);
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-theme-toggle:focus-visible {
	outline: 2px solid var(--dashboard-on-primary, #ffffff);
	outline-offset: 2px;
}

.auth-theme-toggle .material-symbols-rounded {
	font-size: 1.05rem;
}

.auth-rail .auth-theme-toggle {
	margin-top: 0.9rem;
}

/* ── Faixa mobile ──────────────────────────────────────────────────────── */

.auth-mobile-bar {
	display: none;
}

/* ── Coluna do formulário (o fix estrutural do scroll) ─────────────────── */

.auth-main {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.auth-content {
	margin: auto;
	width: 100%;
	max-width: 460px;
	padding: clamp(2rem, 6vh, 4.5rem) 2.5rem;
}

.auth-head {
	margin-bottom: 1.75rem;
}

.auth-title {
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	margin: 0 0 0.4rem;
	color: var(--dashboard-text, #1a1b2e);
}

.auth-desc {
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
	color: var(--dashboard-text-muted, #8b8fa8);
}

/* ── Campos (escopo vence os globals dark do style.css sem !important) ─── */

.auth-shell .form-group {
	margin-bottom: 1.1rem;
}

.auth-shell .form-label {
	display: block;
	font-size: 0.875rem;
	font-weight: 500;
	margin-bottom: 0.4rem;
	color: var(--dashboard-text-secondary, #4a4d60);
	text-transform: none;
	letter-spacing: normal;
}

.auth-shell .form-input,
.auth-shell input[type='text'],
.auth-shell input[type='email'],
.auth-shell input[type='password'] {
	width: 100%;
	background: var(--dashboard-input-bg, #f1f3f8);
	border: 1px solid var(--dashboard-border, #d9dbe2);
	border-radius: var(--dashboard-radius, 6px);
	color: var(--dashboard-text, #1a1b2e);
	font-size: 0.9375rem;
	padding: 0.7rem 0.9rem;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.auth-shell .form-input::placeholder,
.auth-shell input::placeholder {
	color: var(--dashboard-text-muted, #8b8fa8);
	opacity: 0.8;
}

.auth-shell .form-input:focus,
.auth-shell input[type='text']:focus,
.auth-shell input[type='email']:focus,
.auth-shell input[type='password']:focus {
	outline: none;
	background: var(--dashboard-surface, #ffffff);
	border-color: var(--dashboard-primary, #1036F2);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--dashboard-primary, #1036F2) 12%, transparent);
}

/* ── Botão primário ────────────────────────────────────────────────────── */

.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 44px;
	border: none;
	border-radius: var(--dashboard-radius, 6px);
	background: var(--dashboard-primary, #1036F2);
	color: var(--dashboard-on-primary, #ffffff);
	font-size: 0.9375rem;
	font-weight: 600;
	padding: 0.65rem 1.25rem;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

.auth-btn:hover {
	background: var(--dashboard-primary-hover, #0c28cc);
	color: var(--dashboard-on-primary, #ffffff);
}

.auth-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.auth-btn:focus-visible {
	outline: 2px solid var(--dashboard-primary, #1036F2);
	outline-offset: 2px;
}

/* ── Turnstile (anti-bot) — o container fica vazio quando desligado ────── */

.auth-turnstile {
	margin-bottom: 1.1rem;
}

.auth-turnstile:empty {
	margin-bottom: 0;
}

/* ── Links, divisor, rodapé do form ────────────────────────────────────── */

.auth-link {
	color: var(--dashboard-primary, #1036F2);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
}

.auth-link:hover {
	color: var(--dashboard-primary-hover, #0c28cc);
	text-decoration: underline;
}

.auth-row {
	display: flex;
	justify-content: flex-end;
	margin: -0.35rem 0 1.1rem;
}

.auth-divider {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.5rem 0;
	font-size: 0.8rem;
	color: var(--dashboard-text-muted, #8b8fa8);
}

.auth-divider::before,
.auth-divider::after {
	content: '';
	flex: 1;
	height: 1px;
	background: var(--dashboard-border, #d9dbe2);
}

.auth-alt {
	text-align: center;
	font-size: 0.9rem;
	color: var(--dashboard-text-muted, #8b8fa8);
	margin-top: 1.5rem;
}

.auth-alt .auth-link .material-symbols-rounded {
	font-size: 0.95rem;
	vertical-align: -2px;
	margin-right: 0.2rem;
}

/* ── Alertas (style.css tem #error-message por ID: override escopado) ──── */

.auth-shell .alert {
	display: none;
	padding: 0.75rem 1rem;
	border-radius: var(--dashboard-radius, 6px);
	font-size: 0.875rem;
	line-height: 1.45;
	margin-bottom: 1.25rem;
	border: 1px solid;
}

.auth-shell .alert-danger {
	background: color-mix(in srgb, var(--dashboard-danger, #cf222e) 8%, transparent);
	border-color: color-mix(in srgb, var(--dashboard-danger, #cf222e) 25%, transparent);
	color: var(--dashboard-danger, #cf222e);
}

.auth-shell .alert-success {
	background: color-mix(in srgb, var(--dashboard-success, #1a7f37) 8%, transparent);
	border-color: color-mix(in srgb, var(--dashboard-success, #1a7f37) 25%, transparent);
	color: var(--dashboard-success, #1a7f37);
}

.auth-shell #error-message,
.auth-shell #success-message {
	margin-top: 0;
}

.auth-shell #error-message {
	color: var(--dashboard-danger, #cf222e);
}

.auth-shell #success-message {
	color: var(--dashboard-success, #1a7f37);
}

/* ── Toggle segmentado (métodos 2FA) ───────────────────────────────────── */

.auth-seg {
	display: flex;
	border: 1px solid var(--dashboard-border, #d9dbe2);
	border-radius: var(--dashboard-radius, 6px);
	overflow: hidden;
	margin-top: 0.4rem;
}

.auth-seg-btn {
	flex: 1;
	min-height: 40px;
	border: none;
	border-radius: 0;
	background: transparent;
	color: var(--dashboard-text-secondary, #4a4d60);
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.5rem 0.5rem;
	cursor: pointer;
}

.auth-seg-btn.active {
	background: var(--dashboard-primary, #1036F2);
	color: var(--dashboard-on-primary, #ffffff);
	font-weight: 600;
}

.auth-hint {
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--dashboard-text-muted, #8b8fa8);
	margin: 0.6rem 0 1rem;
}

.auth-check {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--dashboard-text-secondary, #4a4d60);
	cursor: pointer;
	margin-bottom: 1rem;
}

/* ── Estados de página (sucesso / link inválido) ───────────────────────── */

.auth-state {
	text-align: center;
	padding: 0.5rem 0;
}

.auth-state-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.auth-state-icon .material-symbols-rounded {
	font-size: 1.6rem;
}

.auth-state-icon.is-success {
	background: color-mix(in srgb, var(--dashboard-success, #1a7f37) 10%, transparent);
	color: var(--dashboard-success, #1a7f37);
}

.auth-state-icon.is-danger {
	background: color-mix(in srgb, var(--dashboard-danger, #cf222e) 10%, transparent);
	color: var(--dashboard-danger, #cf222e);
}

.auth-state-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--dashboard-text, #1a1b2e);
	margin: 0 0 0.4rem;
}

.auth-state-desc {
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--dashboard-text-muted, #8b8fa8);
	margin: 0 0 1.25rem;
}

/* ── Responsivo ────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.auth-shell {
		display: flex;
		flex-direction: column;
	}

	.auth-rail {
		display: none;
	}

	.auth-mobile-bar {
		display: flex;
		align-items: center;
		gap: 0.75rem;
		padding: 0.9rem 1.25rem;
		background: var(--dashboard-rail-bg, #0b228e);
		flex-shrink: 0;
	}

	.auth-mobile-logo {
		height: 20px;
		filter: brightness(0) invert(1);
	}

	/* Na faixa mobile o link fica na mesma linha, encostado à direita */
	.auth-mobile-bar .auth-rail-site {
		margin-top: 0;
		margin-left: auto;
	}

	.auth-content {
		margin: 0 auto;
		padding: 2rem 1.25rem 2.5rem;
	}

	.auth-title {
		font-size: 1.35rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.auth-shell .form-input,
	.auth-shell input,
	.auth-btn {
		transition: none;
	}
}