/* Página de login (2026-08-24, v4 - pedido do usuario: removeu o fundo
   animado em gradiente/orbs/brilho azul que existia antes - a pagina
   agora usa direto var(--bg) (herdado de body, ver base/tokens.css),
   o MESMO azul de fundo do resto do app/dashboard, sem elemento extra
   nenhum aqui). */

.login-page {
  position: relative;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

/* os 2 glows ambient de fundo (body::before/::after, ver base/tokens.css)
   existem em TODA pagina do app - mas antes, na tela de login, ficavam
   escondidos debaixo do .login-mesh (removido acima, cobria o viewport
   inteiro). Sem o mesh, esses 2 glows passaram a aparecer "vazando" nas
   bordas do viewport (reportado com print: "esse brilho ao redor") -
   como aqui nao tem nada por cima pra disfarcar, desliga so nesta pagina. */
body:has(.login-page)::before,
body:has(.login-page)::after { display: none; }

/* 2026-09-01, pedido do usuario: o brilho que ainda "vazava" ao redor da
   tela inteira NAO era esse (os 2 glows acima ja estavam desligados) - era
   o .ambient-glow, um <div> que login.js injeta direto em <body> (nao
   dentro de .main, que so existe nas paginas com sidebar) e liga sozinho
   no load (setGlow('running'), mesmo sem nenhuma automacao rodando de
   verdade). Como body tem position:relative + 100vh (base/tokens.css),
   esse div preenche a JANELA INTEIRA, e a borda animada dele (mask so' a
   linha, ver base/animations.css) contorna a tela toda - exatamente o
   "brilho ao redor" reportado. Mais simples esconder aqui do que mexer em
   login.js (o listener de progresso do login continua existindo, so' o
   efeito visual dele nunca aparece nesta pagina). */
body:has(.login-page) .ambient-glow { display: none !important; }

/* ---- marca (wordmark "Ally" por extenso, mesmo arquivo usado na sidebar
   aberta - unico arquivo, sem variante clara/escura) ---- */
.login-card-wrap { position: relative; z-index: 1; width: 100%; max-width: 420px; }
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.login-glyph {
  width: 176px;
  height: 72px;
  flex-shrink: 0;
  background-image: url('/static/img/ally-wordmark-blue.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---- cartão de login ---- */
/* sem fundo/borda/sombra de propósito (pedido explícito) - o conteúdo
   fica solto direto sobre o fundo da página, sem um "card" visível atrás. */
.login-card {
  background: transparent;
  border: none;
  border-radius: var(--radius-xl);
  padding: 36px 34px;
  box-shadow: none;
}
[data-theme="light"] .login-card {
  background: transparent;
  box-shadow: none;
}

.login-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--text);
  margin: 0 0 6px;
  text-align: center;
}
.login-sub {
  font-family: var(--font-sans);
  font-size: 14.5px;
  color: var(--text-faint);
  margin: 0 0 26px;
  text-align: center;
}

/* ---- caixa de erro ---- */
.login-erro {
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(240, 69, 91, 0.10);
  border: 1px solid rgba(240, 69, 91, 0.30);
  color: #F0839A; /* rosa claro, legível sobre o fundo escuro */
  font-size: 13.5px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
[data-theme="light"] .login-erro {
  color: #B22138; /* --rose-700: mesmo tom de "danger", mais escuro pra contraste no claro */
}

/* ---- formulário ---- */
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-field-group { display: flex; flex-direction: column; gap: 7px; }
.login-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps);
  color: var(--text-faint);
}

.login-field {
  position: relative;
  display: flex;
  align-items: center;
  height: 46px;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-xs);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.login-field:focus-within {
  border-color: var(--blue-400);
  box-shadow: var(--ring);
}
.login-field-icon {
  position: absolute;
  left: 14px;
  color: var(--text-faint);
  pointer-events: none;
}
.login-field input {
  width: 100%;
  height: 100%;
  padding: 0 14px 0 40px;
  border: none;
  background: transparent;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 15px;
  outline: none;
  box-shadow: none; /* evita duplicar o anel de foco de forms.css — o wrapper já tem */
}
/* campo da senha tem o botão de mostrar/ocultar do lado direito */
.login-field:has(#toggle-senha) input { padding-right: 40px; }

.login-field-toggle {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out);
}
.login-field-toggle:hover { color: var(--text-dim); }

.login-submit {
  width: 100%;
  height: 46px;
  justify-content: center;
  margin-top: 4px;
}
