/* ============================================
   AUTH — LOGIN
   Tela publica de autenticacao do painel CZS.

   Direcao visual: dark neutral com azul de acento.
   - Chrome em neutros (cinza/branco rgba) para nao competir com o lima do logo.
   - Azul aparece com forca apenas no foco e no botao primario.
   - Logo CZS lima vive em seu proprio glow como momento de identidade.
   ============================================ */

/* ---------- 1. Layout base ---------- */
.auth-body {
	min-height: 100vh;
	min-height: 100dvh;          /* desconta a barra dinamica do navegador mobile */
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow-y: auto;            /* rola em telas baixas/paisagem em vez de cortar o card */
	background:
		radial-gradient(ellipse 60% 45% at 50% 0%, rgba(var(--theme-primary-rgb), 0.14), transparent 60%),
		radial-gradient(ellipse 55% 40% at 100% 100%, rgba(var(--theme-primary-rgb), 0.08), transparent 60%),
		var(--bg-deepest);
	padding: var(--space-lg);
}

/* A profundidade do fundo vem so dos radiais sutis tingidos pelo tema em .auth-body.
   Orbs flutuantes e grid removidos: decoracao sem funcao, fora da "Sala de Controle". */

/* ---------- 3. Cartao principal ---------- */
.auth-wrapper {
	width: 100%;
	max-width: 420px;
}

.auth-card.form-card-modern {
	position: relative;
	/* Superficie solida tingida: sem backdrop blur (nada atras para revelar) */
	background: var(--czs-stat-box-bg);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-2xl);
	padding: var(--space-2xl) var(--space-xl);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.05) inset,
		var(--shadow-xl);
	animation: authCardAppear 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Highlight sutil de luz no topo do card */
.auth-card.form-card-modern::before {
	content: '';
	position: absolute;
	top: 0;
	left: 15%;
	right: 15%;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
	pointer-events: none;
}

@keyframes authCardAppear {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 4. Cabecalho (logo + titulo) ---------- */
.auth-header {
	text-align: center;
	margin-bottom: var(--space-2xl);
}

.auth-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: var(--space-xl);
}

.auth-logo img {
	width: 100%;
	max-width: 220px;
	height: auto;
	object-fit: contain;
	/* Glow estatico do logo lima: unico gesto de identidade, sem pulsar */
	filter: drop-shadow(0 0 16px rgba(var(--brand-lime-rgb), 0.16)) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.auth-title {
	font-size: 1.375rem;       /* 22px — mais discreto que xl (24px) */
	font-weight: 600;          /* semibold, nao bold */
	color: var(--text-primary);
	margin: 0;                 /* sem subtitulo abaixo, sem gap inferior */
	letter-spacing: -0.3px;
	line-height: 1.3;
}

/* ---------- 5. Form (override do form-group-modern para login) ---------- */
.auth-card .form-group-modern {
	margin-bottom: var(--space-lg);
}

.auth-card .form-group-modern .form-label {
	font-size: 0.75rem;
	font-weight: 500;                            /* peso reduzido — menos heavy */
	color: rgba(255, 255, 255, 0.6);
	text-transform: none;                        /* sem uppercase agressivo */
	letter-spacing: 0;
	margin-bottom: var(--space-sm);
	display: block;
}

.auth-card .form-group-modern .input-group-text {
	background: transparent;                     /* sem fundo proprio */
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-right: none;
	color: var(--text-hint);                     /* icone neutro em repouso */
	border-radius: var(--radius-md) 0 0 var(--radius-md);
	padding: 0 var(--space-md);
	min-width: 46px;
	justify-content: center;
	font-size: 1rem;
	transition: var(--transition-base);
}

.auth-card .form-group-modern .form-control {
	height: 50px;
	font-size: 0.9375rem;                        /* 15px — leitura confortavel */
	font-weight: 400;
	color: var(--text-primary);
	background: rgba(0, 0, 0, 0.28);             /* depth via escuro, nao via azul */
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-left: none;
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
	padding: 0 var(--space-md);
	transition: var(--transition-smooth-fast);
}

.auth-card .form-group-modern .form-control::placeholder {
	color: var(--text-hint);
	font-weight: 400;
}

/* Hover sutil */
.auth-card .form-group-modern .input-group:hover .input-group-text,
.auth-card .form-group-modern .input-group:hover .form-control {
	border-color: rgba(255, 255, 255, 0.12);
}

/* Foco — aqui o azul aparece com forca */
.auth-card .form-group-modern .input-group:focus-within .input-group-text {
	border-color: var(--theme-primary);
	color: var(--theme-primary-light);
	background: rgba(var(--theme-primary-rgb), 0.06);
}

.auth-card .form-group-modern .input-group:focus-within .form-control {
	background: rgba(0, 0, 0, 0.35);
	border-color: var(--theme-primary);
	box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb), 0.15);
}

.auth-card .form-group-modern .form-control:focus {
	outline: none;
	box-shadow: none;
}

/* Toggle de senha integrado */
.auth-password-toggle {
	position: absolute;
	right: var(--space-sm);
	top: 50%;
	transform: translateY(-50%);
	width: 44px;                 /* alvo de toque minimo 44x44 (regra do projeto) */
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	color: var(--text-hint);
	cursor: pointer;
	border-radius: var(--radius-sm);
	transition: var(--transition-base);
	z-index: var(--z-raised);
	font-size: 1rem;
}

.auth-password-toggle:hover {
	background: var(--glass-border);
	color: var(--text-secondary);
}

.auth-card .form-group-modern .input-group:has(.auth-password-toggle) .form-control {
	padding-right: 52px;
}

/* Erro de validacao inline por campo (validacao JS antes do submit) */
.auth-card .form-group-modern.has-error .input-group .input-group-text,
.auth-card .form-group-modern.has-error .input-group .form-control {
	border-color: rgba(var(--color-error-rgb), 0.55);
}

.auth-card .form-group-modern.has-error .input-group .input-group-text {
	color: var(--color-error);
	background: rgba(var(--color-error-rgb), 0.06);
}

.auth-field-error {
	margin: var(--space-xs) 0 0;
	font-size: 0.72rem;
	color: #fda4a4;
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.auth-field-error::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

/* Caps Lock hint: aparece junto ao campo de senha quando Caps Lock esta ativo.
   Anti-frustracao para operador 2am com caps lock acidental. */
.auth-caps-hint {
	margin: var(--space-xs) 0 0;
	font-size: 0.72rem;
	color: #fcd34d;                         /* amber, consistente com auth-alert--warning */
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	padding: 2px 8px;
	background: rgba(var(--color-warning-rgb), 0.08);
	border: 1px solid rgba(var(--color-warning-rgb), 0.22);
	border-radius: var(--radius-sm);
	width: max-content;
	animation: capsHintAppear 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.auth-caps-hint i {
	font-size: 0.85rem;
}

@keyframes capsHintAppear {
	from { opacity: 0; transform: translateY(-2px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 5.1 Remember-me (czs-switch-box compactado para login) ---------- */
.auth-card .auth-remember {
	margin-top: calc(-1 * var(--space-xs));      /* puxa para perto do campo de senha */
	margin-bottom: var(--space-lg);
	cursor: pointer;
}

.auth-card .auth-remember .czs-switch-box-label {
	font-size: 0.8125rem;                         /* alinha com a densidade do form */
	font-weight: 500;
}

.auth-card .auth-remember .czs-switch-box-desc {
	font-size: 0.7rem;
}

/* ---------- 6. Botao submit ---------- */
.auth-submit {
	width: 100%;
	height: 50px;
	margin-top: var(--space-lg);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--text-primary);
	background: linear-gradient(180deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
	border: none;
	border-radius: var(--radius-md);
	cursor: pointer;
	position: relative;          /* ancora o spinner .auth-submit__spinner (inset:0) */
	transition: var(--transition-smooth);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.12) inset,
		0 0 0 1px rgba(var(--theme-primary-dark-rgb), 0.5),
		0 4px 14px -4px rgba(var(--theme-primary-dark-rgb), 0.32);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-sm);
	letter-spacing: 0.1px;
}

.auth-submit:hover {
	/* Hover clareia o topo do gradiente para o azul mais claro do tema */
	background: linear-gradient(180deg, var(--theme-primary-light) 0%, var(--theme-primary) 100%);
	transform: translateY(-1px);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.16) inset,
		0 0 0 1px rgba(var(--theme-primary-rgb), 0.6),
		0 6px 18px -6px rgba(var(--theme-primary-dark-rgb), 0.4);
}

.auth-submit:active {
	transform: translateY(0);
}

.auth-submit.is-loading {
	pointer-events: none;
}

.auth-submit.is-loading .auth-submit__label {
	opacity: 0;
}

.auth-submit__spinner {
	position: absolute;
	inset: 0;
	display: none;
	align-items: center;
	justify-content: center;
}

.auth-submit.is-loading .auth-submit__spinner {
	display: flex;
}

.auth-submit__spinner::after {
	content: '';
	width: 20px;
	height: 20px;
	border: 2.5px solid rgba(255, 255, 255, 0.3);
	border-top-color: var(--text-primary);
	border-radius: 50%;
	animation: authSpin 0.8s linear infinite;
}

@keyframes authSpin {
	to { transform: rotate(360deg); }
}

/* ---------- 7. Alerts ---------- */
.auth-alert {
	padding: var(--space-md) var(--space-lg);
	border-radius: var(--radius-md);
	margin-bottom: var(--space-lg);
	font-size: var(--font-size-sm);
	font-weight: 400;
	display: flex;
	align-items: flex-start;
	gap: var(--space-md);
	animation: authAlertSlide 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	line-height: 1.45;
}

.auth-alert i {
	font-size: 1rem;
	flex-shrink: 0;
	margin-top: 1px;
}

/* min-width:0 deixa o texto encolher no flex; quebra strings longas (token/URL) do erro do servidor */
.auth-alert > div {
	min-width: 0;
}

.auth-alert p {
	margin: 0;
	overflow-wrap: anywhere;
}

.auth-alert--danger {
	background: rgba(var(--color-error-rgb), 0.08);
	border: 1px solid rgba(var(--color-error-rgb), 0.22);
	color: #fda4a4;
}

.auth-alert--success {
	background: rgba(var(--color-success-rgb), 0.08);
	border: 1px solid rgba(var(--color-success-rgb), 0.22);
	color: #86efac;
}

.auth-alert--warning {
	background: rgba(var(--color-warning-rgb), 0.08);
	border: 1px solid rgba(var(--color-warning-rgb), 0.28);
	color: #fcd34d;
}

@keyframes authAlertSlide {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 8. Footer op-status ---------- */
/* Substitui o copyright corporativo por status operacional em fonte mono.
   Identidade CZSBrasil "Sala de Controle": dado de maquina em Geist Mono. */
.auth-footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border-subtle);
	text-align: center;
}

.auth-op-status {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 0.7rem;
	font-weight: 400;
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: 0.02em;
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--space-xs) var(--space-sm);
	font-feature-settings: "tnum";
}

.auth-op-token {
	white-space: nowrap;
}

.auth-op-sep {
	color: rgba(255, 255, 255, 0.18);
	user-select: none;
}

/* Breakdown por jogo no footer: dots coloridos contextualizam o painel
   (ASA azul, ASE vermelho, Rust laranja). Encarna o Design Principle 4:
   contexto do jogo presente, sem dominar. Tudo continua mono e micro. */
.auth-op-games {
	margin-left: 4px;
	color: rgba(255, 255, 255, 0.28);
}

.auth-op-game {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: rgba(255, 255, 255, 0.42);
}

.auth-op-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--game-dot-color, currentColor);
	box-shadow: 0 0 5px 0 rgba(var(--game-dot-rgb, 255, 255, 255), 0.35);
	flex-shrink: 0;
}

.auth-op-game--asa  { --game-dot-color: var(--game-asa-color);  --game-dot-rgb: var(--game-asa-color-rgb); }
.auth-op-game--ase  { --game-dot-color: var(--game-ase-color);  --game-dot-rgb: var(--game-ase-color-rgb); }
.auth-op-game--rust { --game-dot-color: var(--game-rust-color); --game-dot-rgb: var(--game-rust-color-rgb); }

.auth-op-game-sep {
	color: rgba(255, 255, 255, 0.14);
	user-select: none;
}

/* ---------- 9. Responsivo ---------- */
@media (max-width: 480px) {
	.auth-card.form-card-modern {
		padding: var(--space-xl) var(--space-lg);
		border-radius: var(--radius-xl);
	}

	.auth-logo img { max-width: 180px; }
	.auth-title    { font-size: 1.25rem; }

	.auth-card .form-group-modern .form-control,
	.auth-submit {
		height: 46px;
	}

	/* 16px evita o zoom automatico do iOS Safari ao focar o campo */
	.auth-card .form-group-modern .form-control {
		font-size: 16px;
	}
}

/* ---------- 10. Acessibilidade ---------- */
.auth-body :focus-visible {
	outline: 2px solid var(--theme-primary);
	outline-offset: 2px;
	border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	.auth-card.form-card-modern,
	.auth-alert,
	.auth-caps-hint {
		animation: none !important;
	}
	/* Spinner mantem animacao reduzida (rotacao lenta) mesmo com reduced-motion:
	   sem ela, nao ha sinal visual de loading. 2s e tolerada por WCAG 2.3.3. */
	.auth-submit.is-loading .auth-submit__spinner::after {
		animation-duration: 2s;
	}
	.auth-submit { transition: none; }
}