/* ============================================================================
   site.css — o que a parte PUBLICA do app (landing + login) precisa e o tema
   do shell nao tem.

   POR QUE ESTE ARQUIVO EXISTE

   A landing e a tela de login vieram de D2PdvSmart\Web\wwwroot\index.html e
   login.html e dependiam de src/css/main.css. Esse main.css NAO pode entrar
   aqui: ele e o CSS do shell do D2Bridge e disputa os MESMOS seletores do
   shell do GoPascal (#sidebar, body.sidebar-collapsed, .nav-link...). Entao
   dele so vieram as tres regras que a landing usa de verdade — fadeUp,
   [data-stagger] e .whatsapp-float — copiadas abaixo sem alteracao.

   O login.css veio inteiro (site-login.css): e exclusivo da tela de login e
   nao colide com nada.

   TOKENS: o azul do PdvSmart (--color-primary-*) fica ESCOPADO nos dois
   gates, nunca no :root. Motivo: css/base/variables.css do app ja define
   --color-primary-600 e amigos como APELIDOS do tema em uso (o --primary, que
   o usuario troca na tela de Personalizacao). Publicar os tokens no :root
   pintaria o app inteiro de azul e o gate ficaria refem do tema escolhido. Do
   jeito que esta, a marca e sempre a marca e o app e sempre o tema.
   ============================================================================ */

#landing-gate,
#login-gate {
  /* src/css/base/variables.css do D2PdvSmart, so a rampa da marca */
  --color-primary-50: #e6f2ff;
  --color-primary-100: #b3d9ff;
  --color-primary-200: #80bfff;
  --color-primary-300: #4da6ff;
  --color-primary-400: #1a8cff;
  --color-primary-500: #0079e6;
  --color-primary-600: #0066cc;
  --color-primary-700: #0052a3;
  --color-primary-800: #003d7a;
  --color-primary-900: #002952;
  --color-primary-950: #001833;
  --bg-app: #f8fafc;
}

.dark #landing-gate,
.dark #login-gate {
  --bg-app: #0f172a;
}

/* ----------------------------------------------------------------------------
   Os dois gates cobrem a tela inteira ate o runtime decidir a rota. Mesmo
   arranjo do #login-gate do gopascal-kbal: o shell continua montado por baixo,
   so nao aparece. Esconder e tirar o elemento do fluxo (o runtime usa
   FSink.Show, que mexe no atributo hidden).
   ---------------------------------------------------------------------------- */

.site-gate {
  position: fixed;
  inset: 0;
  z-index: 9990;
  overflow-y: auto;
  background: #ffffff;
  color: #0f172a;
}

.dark .site-gate {
  background: #111827;
  color: #f3f4f6;
}

/* Enquanto um gate publico esta aberto o shell nao pode rolar por tras. */
body.modo-site {
  overflow: hidden;
}

/* ----------------------------------------------------------------------------
   Copiado de src/css/main.css do D2PdvSmart (secao de animacao)
   ---------------------------------------------------------------------------- */

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
}

[data-stagger]>* {
  animation: fadeUp .5s cubic-bezier(.22, 1, .36, 1) both;
}

[data-stagger]>*:nth-child(1) { animation-delay: .04s; }
[data-stagger]>*:nth-child(2) { animation-delay: .08s; }
[data-stagger]>*:nth-child(3) { animation-delay: .12s; }
[data-stagger]>*:nth-child(4) { animation-delay: .16s; }
[data-stagger]>*:nth-child(5) { animation-delay: .20s; }
[data-stagger]>*:nth-child(6) { animation-delay: .24s; }

/* ----------------------------------------------------------------------------
   Copiado de src/css/main.css do D2PdvSmart (botao flutuante do WhatsApp)
   ---------------------------------------------------------------------------- */

.whatsapp-float {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #25d366;
  width: 56px;
  height: 56px;
  right: 1rem;
  bottom: 1rem;
  border-radius: 50%;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .3);
  z-index: 9997;
  transition: transform .2s ease, background .2s ease;
}

.whatsapp-float:hover {
  background: #128c7e;
  transform: scale(1.1);
}

@media (min-width: 992px) {
  .whatsapp-float {
    width: 60px;
    height: 60px;
    right: 2.5rem;
    bottom: 2.5rem;
  }
}

/* ----------------------------------------------------------------------------
   Botao "Entrar" do login: o spinner do login.html do D2PdvSmart era ligado
   por src/js/pages/login.js (classe .loading no <button>). Aqui quem poe e
   tira a classe e o runtime (PageShell), pelo mesmo caminho do gopascal-kbal.

   As regras do spinner ficam SO em site/css/site-login.css. Havia uma segunda
   copia aqui e, como esta folha vem depois, era ela que ganhava nos empates —
   com dois estragos na hora de animar: `.btn-text { display:none }` tirava o
   texto do fluxo e o botao, que so tem o spinner (position:absolute) dentro,
   encolhia para a altura do padding; e o @keyframes login-spin daqui girava
   sem o translate(-50%,-50%), jogando o spinner para fora do centro. Nao
   duplique estas regras: mexa no site-login.css.
   ---------------------------------------------------------------------------- */

/* Mensagem de erro do login (o toast do D2PdvSmart virou texto no gate). */
#login-erro {
  margin-top: .75rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #dc2626;
}

.dark #login-erro {
  color: #f87171;
}