/* Tema de login csurface — marca navy #0a1f44 + cyan #36d0ea. Re-skin completo do login
   clássico do Keycloak (sem mexer no FTL). UI 100% inglês/branded. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700;800&display=swap');

:root {
  --navy: #0a1f44;
  --cyan: #36d0ea;
  --ink: #0f172a;
  --muted: #334155;
}

html { height: 100%; }
body.login-pf,
.login-pf body,
body {
  font-family: 'Manrope', system-ui, sans-serif !important;
  /* degradê da hero: navy profundo no topo + brilho cyan no horizonte (base) — combina
     com o glow do ponto de fuga do grid no canvas (hero.js). */
  background:
    radial-gradient(900px 380px at 50% 102%, rgba(54,208,234,0.10) 0%, rgba(54,208,234,0) 60%),
    linear-gradient(180deg, #061025 0%, var(--navy) 60%, #0b265a 100%) fixed !important;
  color: #fff;
  min-height: 100vh;
  overflow: hidden;
}

/* canvas da hero (estrada digital + partículas) atrás de tudo; conteúdo acima. */
#csurface-hero-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.login-pf-page { position: relative; z-index: 1; }
.card-pf { position: relative; z-index: 2; }
/* wrappers do Keycloak transparentes pra não taparem o canvas (NÃO o body — lá está o degradê) */
#kc-container, #kc-container-wrapper, #kc-content, #kc-content-wrapper,
.login-pf-page .login-pf-header { background: transparent !important; }

/* container central */
.login-pf-page { padding-top: 6vh; }
.login-pf-page .login-pf-page-header { display: none; }   /* esconde logo padrão do KC */

/* cartão */
.card-pf {
  max-width: 420px;
  margin: 0 auto;
  background: #fff !important;
  color: var(--ink);
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.45) !important;
  padding: 2.2rem 2rem 1.8rem !important;
}

/* cabeçalho/marca dentro do card */
#kc-header, #kc-header-wrapper {
  color: var(--navy);
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  text-transform: none;
  padding: 0 0 0.2rem;
  text-align: left;
}
#kc-header-wrapper::before {
  content: "csurface";
  display: block;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--navy);
}
#kc-header-wrapper::after {
  content: "Continuous Threat Exposure Management";
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--muted);
  margin: 0.15rem 0 0.6rem;
}

/* título do form */
#kc-page-title { color: var(--navy); font-weight: 700; font-size: 1.05rem; }

/* labels + inputs */
.control-label, label { color: var(--muted) !important; font-weight: 700 !important; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.03em; }
input[type="text"], input[type="email"], input[type="password"], .form-control {
  border: 1px solid rgba(6, 8, 24, 0.18) !important;
  border-radius: 9px !important;
  padding: 0.65rem 0.75rem !important;
  font-size: 0.92rem !important;
  color: var(--ink) !important;
  box-shadow: none !important;
  height: auto !important;
}
input:focus, .form-control:focus {
  border-color: var(--cyan) !important;
  box-shadow: 0 0 0 3px rgba(54, 208, 234, 0.25) !important;
}

/* botão primário (Entrar) */
.btn-primary, #kc-login, input[type="submit"].btn-primary {
  background: var(--navy) !important;
  border: none !important;
  border-radius: 9px !important;
  font-weight: 800 !important;
  font-size: 0.92rem !important;
  padding: 0.7rem 1rem !important;
  width: 100%;
  transition: background .15s;
}
.btn-primary:hover, #kc-login:hover { background: #12306a !important; }

/* links (esqueci senha, registrar) */
a { color: #1e9bb1 !important; font-weight: 600; }
a:hover { color: var(--navy) !important; }

/* checkbox "lembrar" */
.checkbox label { text-transform: none !important; font-weight: 500 !important; color: var(--muted) !important; }

/* alerts (erro de credencial) */
.alert-error, .pf-c-alert.pf-m-danger { border-radius: 9px; }

/* social / federação (Azure, Google) — botões discretos */
#kc-social-providers a { border-radius: 9px !important; border: 1px solid rgba(6,8,24,0.16) !important; color: var(--navy) !important; font-weight: 700; }

/* rodapé */
#kc-info, .login-pf-signup, #kc-registration { color: var(--muted); }
#kc-info a { color: #1e9bb1 !important; }