/* ============================================================
   BRANDING: Login — Observatório IntegraGestão (EBAEM)
   Arquivo: /static/assets/branding/login.css
   Objetivos:
   - NÃO cortar topo (logo/título/subtítulo) em 100% zoom
   - Rolagem SOMENTE quando necessário (página inteira, não “só o card”)
   - Fundo ocupa a tela toda; sem “esticamento vertical estranho”
   - Forçar tema do LOGIN sempre como LIGHT (independente do SO/tema)
   - Evitar contradições (overflow duplicado, dois backgrounds, etc.)
   ============================================================ */

/* BRANDING_LOGIN_VERSION=ebaem-v4.2 */

/* ------------------------------------------------------------
   0) Reset seguro e baseline
   ------------------------------------------------------------ */
* { box-sizing: border-box; }

html.ss-login-branding,
html.ss-login-branding body{
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100%;
}

/* ------------------------------------------------------------
   1) Força LIGHT MODE somente no LOGIN
   - color-scheme influencia inputs/scrollbars nativos do browser
   ------------------------------------------------------------ */
html.ss-login-branding{
  color-scheme: light !important;
}
html.ss-login-branding body{
  color-scheme: light !important;
}

/* Neutraliza eventuais classes/tokens dark aplicados pelo app */
html.ss-login-branding.theme-dark,
html.ss-login-branding body.theme-dark,
html.ss-login-branding .theme-dark{
  color-scheme: light !important;
}

/* ------------------------------------------------------------
   2) Background em tela cheia (único, sem duplicidade)
   - Padrão: cover (preenche tudo, pode cortar bordas da imagem)
   - Se você quiser ver a imagem inteira (sem corte), troque para:
     background-size: contain;  (vai sobrar “faixas” nas laterais/topo)
   ------------------------------------------------------------ */
html.ss-login-branding body{
  /* IMPORTANTÍSSIMO: não travar overflow aqui.
     A rolagem deve ser do documento inteiro, só quando faltar altura. */
  overflow-y: auto !important;
  overflow-x: hidden !important;

  /* Fallback de cor caso a imagem não carregue */
  background: #0b0f17 !important;
}

html.ss-login-branding body::before{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -2;

  background-image:
    linear-gradient(120deg, rgba(2,6,23,0.78), rgba(15,23,42,0.35)),
    url("/static/assets/branding/login-bg.jpg");

  background-repeat: no-repeat;
  background-position: center center;

  /* Preenche toda a tela horizontal e verticalmente */
  background-size: cover;

  /* Evita “efeito estranho” em alguns browsers com zoom/scroll */
  background-attachment: scroll;
  transform: translateZ(0);
}

/* Overlay extra opcional (deixe baixo para não “escurecer demais”) */
html.ss-login-branding body::after{
  content:"";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(0,0,0,0.18);
}

/* ------------------------------------------------------------
   3) Esconde navbar SOMENTE no login
   ------------------------------------------------------------ */
html.ss-login-branding nav,
html.ss-login-branding header,
html.ss-login-branding .navbar,
html.ss-login-branding .top-nav,
html.ss-login-branding .ant-layout-header,
html.ss-login-branding #navbar{
  display: none !important;
}

/* ------------------------------------------------------------
   4) Transparência geral do “app shell” no login
   - Evita blocos/containers com fundo sólido e remove “faixa inferior”
   ------------------------------------------------------------ */
html.ss-login-branding #app,
html.ss-login-branding #root,
html.ss-login-branding .ant-layout,
html.ss-login-branding .container,
html.ss-login-branding .container-fluid,
html.ss-login-branding .ant-layout-content{
  background: transparent !important;
}

/* Garante que o conteúdo do login ocupe a altura de viewport */
html.ss-login-branding #app,
html.ss-login-branding #root{
  min-height: 100vh;
}

/* ------------------------------------------------------------
   5) Layout principal: alinhar pelo TOPO, com padding,
      para nunca cortar logo/título no topo.
   - O “corte do topo” acontece quando algo centraliza verticalmente
     e/ou o body fica com overflow hidden.
   ------------------------------------------------------------ */
html.ss-login-branding body{
  display: block !important; /* NÃO usar flex centralizado no body */
}

/* Container do branding (seu wrapper principal injetado no login.js) */
html.ss-login-branding .ss-login-wrap{
  width: min(980px, 96vw);
  margin: 0 auto;

  /* padding no topo para “descer” sem cortar em 100% - primeiro item é topo */
  padding: 6cm 16px 28px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* topo */
}

/* Se o Superset estiver envolvendo por .login-page (varia por versão) */
html.ss-login-branding .login-page{
  min-height: 100vh;
  padding: 0 !important;
  background: transparent !important;
}

/* ------------------------------------------------------------
   6) Hero (logo + título + subtítulo)
   - Evitar margens negativas e alturas fixas
   ------------------------------------------------------------ */
html.ss-login-branding .ss-hero{
  width: 100%;
  text-align: center;

  /* Espaço suficiente para não “colar” no topo */
  margin: 0 0 18px 0;

  /* Evita qualquer corte por overflow interno */
  overflow: visible;
}

html.ss-login-branding .ss-hero-logo{
  display: block;
  margin: 0 auto 14px auto;

  /* ajuste fino: aumente se quiser mais destaque */
  max-height: 86px;
  width: auto;
  object-fit: contain;

  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45));
}

html.ss-login-branding .ss-hero-title{
  font-size: 44px;
  line-height: 1.08;
  font-weight: 800;
  color: rgba(255,255,255,0.96);
  margin: 0 0 8px 0;
  text-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

html.ss-login-branding .ss-hero-subtitle{
  font-size: 16px;
  font-weight: 500;
  color: rgba(255,255,255,0.86);
  margin: 0;
}

/* Em telas mais estreitas */
@media (max-width: 720px){
  html.ss-login-branding .ss-hero-title{ font-size: 34px; }
  html.ss-login-branding .ss-hero-logo{ max-height: 72px; }
}

/* Em telas baixas: reduz padding para caber sem “cortar” */
@media (max-height: 820px){
  html.ss-login-branding .ss-login-wrap{ padding-top: 26px; }
  html.ss-login-branding .ss-hero-logo{ max-height: 68px; }
  html.ss-login-branding .ss-hero-title{ font-size: 34px; }
}

/* ------------------------------------------------------------
   7) Card do login sempre LIGHT e legível
   - cobre #loginbox (legacy) e ant-card (novos layouts)
   ------------------------------------------------------------ */
html.ss-login-branding #loginbox,
html.ss-login-branding .loginbox,
html.ss-login-branding .panel,
html.ss-login-branding .panel-default,
html.ss-login-branding .ant-card,
html.ss-login-branding .ant-card-bordered{
  width: min(760px, 92vw) !important;
  margin: 0 auto !important;

  border-radius: 18px !important;
  background: rgba(245, 247, 250, 0.94) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;

  box-shadow: 0 26px 85px rgba(0,0,0,0.45) !important;
  backdrop-filter: blur(6px);

  /* Não permitir que o card crie “scroll interno” que cause cortes */
  overflow: visible !important;
}

/* Texto interno do card sempre escuro */
html.ss-login-branding #loginbox,
html.ss-login-branding #loginbox *,
html.ss-login-branding .loginbox,
html.ss-login-branding .loginbox *,
html.ss-login-branding .panel,
html.ss-login-branding .panel *,
html.ss-login-branding .ant-card,
html.ss-login-branding .ant-card *{
  color: rgba(17,24,39,0.92) !important;
}

/* Inputs claros */
html.ss-login-branding input,
html.ss-login-branding input[type="text"],
html.ss-login-branding input[type="email"],
html.ss-login-branding input[type="password"],
html.ss-login-branding .ant-input,
html.ss-login-branding .ant-input-affix-wrapper{
  color: rgba(17,24,39,0.92) !important;
  background: rgba(255,255,255,0.95) !important;
  border-color: rgba(148,163,184,0.65) !important;
}

html.ss-login-branding input::placeholder,
html.ss-login-branding .ant-input::placeholder{
  color: rgba(100,116,139,0.85) !important;
}

/* Labels */
html.ss-login-branding label,
html.ss-login-branding .control-label,
html.ss-login-branding .form-label,
html.ss-login-branding .ant-form-item-label > label{
  font-weight: 800 !important;
  color: rgba(17,24,39,0.92) !important;
}

/* Links dentro do card */
html.ss-login-branding #loginbox a,
html.ss-login-branding .loginbox a,
html.ss-login-branding .panel a,
html.ss-login-branding .ant-card a{
  color: rgba(30,64,175,0.92) !important;
}
html.ss-login-branding #loginbox a:hover,
html.ss-login-branding .loginbox a:hover,
html.ss-login-branding .panel a:hover,
html.ss-login-branding .ant-card a:hover{
  color: rgba(29,78,216,0.92) !important;
  text-decoration: underline;
}

/* ------------------------------------------------------------
   8) Links úteis abaixo do card
   - Remove qualquer “bloco inferior vazio”: só aparece se houver conteúdo
   ------------------------------------------------------------ */
html.ss-login-branding .ss-login-links{
  width: min(760px, 92vw);
  margin-top: 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.45;
}

/* Se por algum motivo vier vazio, não ocupa altura */
html.ss-login-branding .ss-login-links:empty{
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

html.ss-login-branding .ss-login-links a{
  display: block;
  margin: 6px 0;
  color: rgba(255,255,255,0.92) !important;
  text-decoration: none;
  font-weight: 600;
  text-shadow: 0 10px 28px rgba(0,0,0,0.35);
}
html.ss-login-branding .ss-login-links a:hover{
  text-decoration: underline;
}

/* ------------------------------------------------------------
   9) Controle de rolagem: apenas quando faltar altura
   - O documento rola (página inteira). Não criamos scroll interno.
   ------------------------------------------------------------ */
@media (min-height: 860px){
  /* Em telas altas, evita “scrollbar fantasma” */
  html.ss-login-branding body{
    overflow-y: hidden !important; /* não precisa rolar */
  }

  /* mas o wrapper ainda deve caber */
  html.ss-login-branding .ss-login-wrap{
    min-height: 100vh;
    justify-content: flex-start;
  }
}

@media (max-height: 859px){
  /* Em telas baixas, permite rolar a página inteira */
  html.ss-login-branding body{
    overflow-y: auto !important;
  }
}

/* ------------------------------------------------------------
   10) Ajustes opcionais para evitar “faixas laterais pretas”
   - Se você estiver vendo barras laterais, geralmente vem de algum
     container pai com max-width + background.
     Aqui garantimos que nada pinte fundo sólido ao redor.
   ------------------------------------------------------------ */
html.ss-login-branding .ant-layout,
html.ss-login-branding .ant-layout-content,
html.ss-login-branding .container,
html.ss-login-branding .container-fluid{
  width: 100% !important;
  max-width: none !important;
}