/* ╔══════════════════════════════════════════════════════════════════════════
   ║ VyaHub Platform — Premium Auth Styles (Fase Portal P1b)
   ║ Folha dedicada das telas /login, /setup e /change-password.
   ║ Estilos Frosted Glassmorphism de Luxo com Micro-animações e Glows Neon.
   ║ 100% CSP-Safe: Zero inline styles or inline scripts required.
   ╚══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Vinheta SUAVE — centro quase aberto pra imagem da fabrica vazar no card */
  --bg:            radial-gradient(ellipse at center, rgba(7, 11, 22, 0.25) 0%, rgba(7, 11, 22, 0.65) 60%, rgba(7, 11, 22, 0.92) 100%);
  /* Card com leve branco (5% branco neutro) — igual tile 'Integrations' da home. */
  --card:          rgba(255, 255, 255, 0.05);
  --border:        rgba(255, 255, 255, 0.10);
  --border-hover:  rgba(255, 255, 255, 0.20);
  --accent:        #0ea5e9;
  --accent-bright: #38bdf8;
  --accent-purple: #8b5cf6;
  --accent-indigo: #6366f1;
  --text:          #ffffff;
  --text-soft:     #cbd5e1;
  --text-muted:    #94a3b8;
  --text-foot:     #64748b;
  --danger:        #f43f5e;
  --danger-bg:     rgba(244, 63, 94, 0.1);
  --danger-border: rgba(244, 63, 94, 0.2);
  --font-sans:     -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
}

.auth-body {
  /* Camada 1: vinheta escura (--bg radial gradient) sobre Camada 2: imagem da fabrica */
  background-image: var(--bg), url('/bg-factory.png') !important;
  background-size: cover, cover !important;
  background-position: center !important;
  background-attachment: fixed !important;
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-sans) !important;
  color: var(--text) !important;
  padding: 32px 20px !important;
  position: relative !important;
  overflow-x: hidden !important;
}

/* Ambient Radial Glow DESATIVADO — qualquer tint colorido contradiz a transparencia */
.auth-ambient {
  display: none !important;
}

/* Luxury Frosted Card */
.auth-card {
  position: relative !important;
  z-index: 1 !important;
  background: var(--card) !important;
  /* Sem blur — imagem da fabrica passa nitida por tras */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--border) !important;
  border-radius: 24px !important;
  /* Sombra mais leve pra nao "afundar" o card visualmente */
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35) !important;
  padding: 40px !important;
  width: 100% !important;
  max-width: 440px !important;
  transition: all 0.3s ease !important;
  animation: fadeUp 0.6s ease-out backwards !important;
}

.auth-card:hover {
  border-color: var(--border-hover) !important;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.6), 0 0 50px rgba(14, 165, 233, 0.05) !important;
}

/* Brand logo */
.auth-brand {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 24px !important;
}

.auth-mark {
  background: linear-gradient(135deg, var(--accent), var(--accent-purple)) !important;
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.4) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  font-weight: 900 !important;
  color: white !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 20px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  animation: float 4s ease-in-out infinite !important;
}

.auth-brand-text {
  font-size: 24px !important;
  font-weight: 800 !important;
  background: linear-gradient(to right, #ffffff, #94a3b8) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

/* Headings */
.auth-title {
  font-weight: 800 !important;
  font-size: 24px !important;
  color: var(--text) !important;
  margin-bottom: 6px !important;
  letter-spacing: -0.025em !important;
}

.auth-sub {
  color: var(--text-muted) !important;
  font-size: 13px !important;
  margin-bottom: 24px !important;
  line-height: 1.6 !important;
}

/* Form inputs & labels */
.auth-form {
  display: flex !important;
  flex-direction: column !important;
}

.auth-label {
  color: var(--text-soft) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.auth-label:not(:first-of-type) {
  margin-top: 10px !important;
}

.auth-input {
  /* Input quase transparente tambem — so o suficiente pra o texto digitado ler bem */
  background: rgba(0, 0, 0, 0.25) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  padding: 12px 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}

.auth-input:focus {
  border-color: var(--accent-bright) !important;
  box-shadow: 0 0 12px rgba(56, 189, 248, 0.2) !important;
  outline: none !important;
}

/* Password eye-toggle wrappers */
.auth-input-wrapper {
  position: relative !important;
  width: 100% !important;
}

.auth-input-toggle {
  position: absolute !important;
  right: 14px !important;
  top: 12px !important;
  background: none !important;
  border: none !important;
  color: var(--text-muted) !important;
  cursor: pointer !important;
  transition: color 0.2s ease, transform 0.2s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  z-index: 10 !important;
}

.auth-input-toggle:hover {
  color: var(--accent-bright) !important;
  transform: scale(1.1) !important;
}

/* Password hint & helper text */
.auth-hint {
  font-size: 11.5px !important;
  color: var(--text-muted) !important;
  margin-top: -6px !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

/* Primary buttons */
.auth-btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-indigo)) !important;
  box-shadow: 0 4px 15px rgba(14, 165, 233, 0.3) !important;
  border: none !important;
  border-radius: 10px !important;
  color: white !important;
  font-weight: 700 !important;
  padding: 14px !important;
  width: 100% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-top: 14px !important;
  font-size: 15px !important;
}

.auth-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(14, 165, 233, 0.4) !important;
}

.auth-btn:disabled {
  background: rgba(255, 255, 255, 0.05) !important;
  color: rgba(255, 255, 255, 0.3) !important;
  box-shadow: none !important;
  transform: none !important;
  cursor: not-allowed !important;
}

/* Footer / metadata details */
.auth-foot {
  font-size: 12px !important;
  /* WCAG AA: --text-foot (#64748b ~3.9:1) reprovava p/ texto <18px. --text-muted
     (#94a3b8 ~6.5:1) passa. Vale p/ todas as telas auth (login/setup/change/security). */
  color: var(--text-muted) !important;
  margin-top: 24px !important;
  text-align: center !important;
  line-height: 1.5 !important;
}

/* Security alert banners */
.auth-error {
  background: var(--danger-bg) !important;
  border: 1px solid var(--danger-border) !important;
  border-radius: 8px !important;
  color: var(--danger) !important;
  padding: 10px 14px !important;
  margin-top: 8px !important;
  margin-bottom: 12px !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
}

.auth-error[hidden] {
  display: none !important;
}

/* Responsive constraints */
@media (max-width: 480px) {
  .auth-card {
    padding: 32px 24px !important;
  }
}

/* Animations */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to   { opacity: 1; transform: none; }
}

/* ╔══════════════════════════════════════════════════════════════════════════
   ║ Refinos da tela de login — a11y, Caps Lock, reveal nativo, grupos de campo.
   ║ Somente ADIÇÕES (compatível com /setup, /change-password, /security).
   ╚══════════════════════════════════════════════════════════════════════════ */

/* Suprime o reveal/clear NATIVO do Edge/IE — evita o ícone duplicado (a "lupa"
   que aparecia sobreposta ao nosso toggle de olho no campo de senha). */
input::-ms-reveal,
input::-ms-clear { display: none !important; }

/* Grupo de campo (label + input). Usado pela tela de login para
   mostrar/ocultar blocos no passo de MFA sem esconder o formulário inteiro. */
.auth-field { margin-bottom: 14px !important; }
.auth-field[hidden] { display: none !important; }
.auth-field .auth-input { margin-bottom: 0 !important; }
.auth-field .auth-label { margin-top: 0 !important; }

/* Ícone do toggle de senha (substitui o antigo style inline width/height). */
.auth-icon { width: 20px !important; height: 20px !important; display: block !important; }

/* Espaço à direita do input de senha p/ o botão de olho não cobrir o texto. */
.auth-input--with-toggle { padding-right: 44px !important; }

/* Aviso de Caps Lock — âmbar (atenção, não erro). */
.auth-caps {
  font-size: 11.5px !important;
  color: #fbbf24 !important;
  margin-top: 4px !important;
  line-height: 1.3 !important;
}
.auth-caps[hidden] { display: none !important; }

/* Acessibilidade: anel de foco visível para navegação por teclado. */
.auth-input:focus-visible,
.auth-btn:focus-visible,
.auth-input-toggle:focus-visible {
  outline: 2px solid var(--accent-bright) !important;
  outline-offset: 2px !important;
}

/* Respeita quem pede menos movimento (acessibilidade — vestibular). */
@media (prefers-reduced-motion: reduce) {
  .auth-mark  { animation: none !important; }
  .auth-card  { animation: none !important; transition: none !important; }
  .auth-btn, .auth-input, .auth-input-toggle { transition: none !important; }
  .auth-btn:hover { transform: none !important; }
}