/* ============================================================
   FluxoTISS — Fundo de imagem nas telas do app (apenas index.html)
   ------------------------------------------------------------
   Aplica o fundo (background.png) às telas autenticadas, na
   imagem original, sem véu, sem transparência e sem modificação.

   IMPORTANTE: este arquivo é carregado SOMENTE pelo index.html.
   landing.html e login.html não o importam, portanto permanecem
   intactos. Todas as regras são escopadas em body.app-root /
   #appBackdrop, que só existem no index.html.
   ============================================================ */

/* 1) Torna o "chassi" do app transparente para a imagem aparecer
      como fundo, atrás de tudo ------------------------------------ */
body.app-root {
    background: transparent;
}

body.app-root .main-content-area {
    background: transparent; /* neutraliza bg-primary e o gradiente dark */
}

/* 2) Camada fixa com a imagem original — atrás de absolutamente tudo.
      Fica com opacidade 0 por padrão: só aparece quando o painel
      autenticado (#dashboardView sem .hidden) está visível. Isso
      elimina o flash da imagem durante a checagem de sessão, antes
      do redirect para landing/login. */
#appBackdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #f4f6fa; /* cor de apoio (clara, casando com a imagem branca) enquanto ela carrega */
    background-image: url("../assets/images/background.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
}

#appBackdrop:has(~ #dashboardView:not(.hidden)) {
    opacity: 1;
}