/* ============================================================
   Auth Layout - estilos globais partilhados pelas páginas
   de autenticação (Login, ForgotPassword, NewPassword).
   ------------------------------------------------------------
   Carregado apenas para o AuthLayout (não polui o resto da app).
   Estilos de componentes individuais (.field, .btn-primary, etc.)
   ficam em scoped CSS dos respetivos componentes.
   ============================================================ */

/* Reset local do body quando se está no AuthLayout.
   Nota: gradient via background-image + background-color separados para que
   o preflight inline (background-color !important) coexista sem bloquear
   o gradient. Sem transition para não prolongar o flash de reload. */
body.auth-layout {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-bg);
  background-image:
    radial-gradient(ellipse 800px 600px at 30% 20%, rgba(45,63,231,0.10), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 80%, rgba(91,110,255,0.06), transparent 60%);
  color: var(--color-fg);
}

[data-theme="dark"] body.auth-layout {
  background-color: #07091a;
  background-image:
    radial-gradient(ellipse 800px 600px at 30% 20%, rgba(45,63,231,0.18), transparent 60%),
    radial-gradient(ellipse 600px 500px at 80% 80%, rgba(91,110,255,0.10), transparent 60%);
  color: #E6E8EE;
}

/* Wrapper centrado vertical+horizontal */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

/* Coluna central — brand + card */
.auth {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
}

/* Footer fixo da página de auth */
.auth-footer {
  position: fixed;
  bottom: var(--space-4);
  left: 0;
  right: 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-fg-muted);
  opacity: 0.6;
}

[data-theme="dark"] .auth-footer {
  color: rgba(230, 232, 238, 0.3);
  opacity: 1;
}

/* Container dos FABs no topo direito (tema + idioma) */
.auth-fabs {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}

@media (max-width: 480px) {
  .auth-wrap {
    padding: var(--space-4);
  }
}