/* ═══════════════════════════════════════════════════════════════════════════
   Tela de login — identidade própria, isolada dos temas do dashboard.

   Antes: .auth-overlay/.auth-card usavam var(--paper)/var(--card)/var(--ink)
   dos tokens de TEMA (Original/Minimal/Suíte), então a aparência da tela de
   login mudava dependendo de qual tema o último usuário tinha escolhido —
   e ficava inconsistente quando o grid quadriculado do Original (hardcoded
   no .auth-overlay) caía sobre as cores do Minimal.

   A tela de login é vista por todo mundo igual, antes de qualquer preferência
   pessoal de tema entrar em jogo — então ela tem sua própria paleta fixa,
   só sensível ao prefers-color-scheme DO SISTEMA. Mesmo que o body já nasça
   com o tema escuro do dashboard para evitar clarão, as classes auth abaixo
   usam apenas tokens --auth-* e continuam isoladas dessa preferência.

   Classes próprias (.auth-field, .auth-input, .auth-btn…) em vez de
   .form-field/.form-input/.form-btn genéricos — assim nada de tema vaza
   aqui, e nada daqui vaza para o dashboard.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --auth-bg:      #F4F5F6;
  --auth-surface: #FFFFFF;
  --auth-ink:     #1B2426;
  --auth-muted:   #67757A;
  --auth-border:  #E2E6E8;
  --auth-red:     #C2373B;
  --auth-red-bg:  #FBEAEA;
}
@media (prefers-color-scheme: dark){
  :root{
    --auth-bg:      #141619;
    --auth-surface: #1B1E22;
    --auth-ink:     #E4E7EA;
    --auth-muted:   #7E868F;
    --auth-border:  #363D46;
    --auth-red:     #E5484D;
    --auth-red-bg:  #2A1D1E;
  }
}

.auth-overlay{
  position:fixed; inset:0; z-index:999;
  display:flex; align-items:center; justify-content:center;
  background:var(--auth-bg);
  padding:20px;
}
.auth-card{
  width:360px; max-width:100%;
  background:var(--auth-surface);
  border:1px solid var(--auth-border);
  border-radius:16px;
  box-shadow:0 4px 28px rgba(0,0,0,.08);
  padding:36px 32px 32px;
  text-align:center;
}
@media (prefers-color-scheme: dark){
  .auth-card{ box-shadow:0 4px 28px rgba(0,0,0,.35); }
}

.auth-card .clickfy-login-brand{ margin:0 auto 28px; width:172px; max-width:100%; }

/* Troca preto/branco pelo prefers-color-scheme do sistema — é o único sinal
   disponível neste ponto do fluxo (ver nota no topo do arquivo). */
@media (prefers-color-scheme: dark){
  .auth-card .clickfy-logo--black{display:none;}
  .auth-card .clickfy-logo--white{display:block;}
}

.auth-subhead{
  font-size:13.5px; color:var(--auth-muted);
  margin-bottom:22px; line-height:1.5;
}
.auth-field{ text-align:left; margin-bottom:14px; }
.auth-label{
  display:block; font-size:12px; font-weight:500;
  color:var(--auth-muted); margin-bottom:6px;
}
.auth-input{
  display:block; width:100%; min-width:0; max-width:100%; min-height:42px;
  border:1px solid var(--auth-border); border-radius:8px;
  background:var(--auth-bg); color:var(--auth-ink);
  font-family:'Inter',sans-serif; font-size:14px;
  padding:10px 12px; transition:border-color .15s;
}
.auth-input:focus{ outline:none; border-color:var(--auth-ink); }

/* Botão primário: inversão de luminância — a mesma linguagem do tema Suíte. */
.auth-btn{
  width:100%; min-width:0; min-height:42px; font-family:'Inter',sans-serif; font-size:14px; font-weight:600;
  background:var(--auth-ink); color:var(--auth-surface);
  border:1px solid var(--auth-ink); border-radius:8px;
  padding:11px 16px; margin-top:6px; cursor:pointer;
  transition:opacity .15s;
}
.auth-btn:hover:not(:disabled){ opacity:.88; }
.auth-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Link discreto — "Esqueci minha senha", "Voltar para login". */
.auth-link{
  display:block; width:100%; margin-top:14px;
  background:none; border:none; cursor:pointer;
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:500;
  color:var(--auth-muted); text-decoration:underline; text-underline-offset:2px;
}
.auth-link:hover{ color:var(--auth-ink); }

.auth-error{
  font-size:12px; color:var(--auth-red);
  background:var(--auth-red-bg); border:1px solid var(--auth-red);
  border-radius:8px; padding:9px 11px; margin-top:14px; text-align:left;
}

/* Confirmação de envio do link de recuperação. */
.auth-sent-icon{
  width:48px; height:48px; margin:0 auto 16px;
  border-radius:50%; background:var(--auth-bg);
  display:flex; align-items:center; justify-content:center; color:var(--auth-ink);
}
.auth-sent-hint{ font-size:12px; color:var(--auth-muted); margin:0 0 8px; line-height:1.5; }

@media (max-width:420px){
  .auth-card{ padding:28px 22px 24px; border-radius:14px; }
}