/* Gerado por split de app/static/css/estilo_ph3a.css (fundação da reorganização de CSS, 03/08/2026). Ver app/utils/css_manifest.py pra ordem de carregamento. */

/* ============================================================
   LAYOUT
   ============================================================ */

.ph3a-wrapper {
  display: flex;
  min-height: 100vh;
}

.ph3a-main {
  flex: 1;
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  transition: margin-left var(--transition);
  min-width: 0;
}

.ph3a-content {
  flex: 1;
  padding: 20px 32px 12px;
  margin-top: var(--topbar-height);
  /* Espaço pro footer fixo não cobrir o último elemento.
     ~50px cobre footer 1-linha; em viewports estreitas onde
     o footer faz wrap, regras abaixo aumentam o espaço. */
  padding-bottom: 60px;
  width: 100%;
  min-width: 0;
  /* position:relative é OBRIGATÓRIO pro overlay de skeleton de navegação
     (#ph3aSkeletonOverlay) ancorar com position:absolute;inset:0 dentro
     do content. Sem isso, ele escapa pra <body> e cobre sidebar/topbar. */
  position: relative;
}

/* Barra de ações (Voltar + botões) das telas de detalhe gruda logo abaixo do
   topbar ao rolar — os botões nunca saem da tela (Paulo 29/08/2026). Aplicada
   por JS em base.html à barra do topo que contém o "Voltar", em QUALQUER tela.
   top = altura do topbar fixo; z-index abaixo do topbar (999) e acima do
   conteúdo; fundo sólido pra o conteúdo não aparecer atrás ao rolar. */
.ph3a-actionbar-sticky {
  position: sticky;
  top: var(--topbar-height);
  z-index: 40;
  background: var(--ph3a-bg, #f4f6fb);
  padding-top: 10px;
  padding-bottom: 10px;
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, .12);
}

/* Footer global FIXO no fundo da viewport — espelha o padrão do
   .ph3a-topbar (top fixo). Antes era `position: sticky`, que se
   desgrudava ao rolar conteúdo longo (o "rodapé que se movimenta"
   reportado pelo admin). Fixed garante presença permanente, igual
   o cabeçalho. Z-index 50: abaixo do topbar (999) e modais (1050+),
   acima do conteúdo normal. */
.ph3a-main > footer {
  position: fixed;
  bottom: 0;
  left: var(--sidebar-width);
  right: 0;
  background: var(--ph3a-white);
  z-index: 50;
  transition: left var(--transition);
}

/* Em mobile (sidebar oculta / off-canvas), footer ocupa largura toda. */
@media (max-width: 991.98px) {
  .ph3a-main > footer { left: 0; }
  /* Mobile: footer com mais wrap → mais espaço de respiro no content. */
  .ph3a-content { padding-bottom: 90px; }
}



/* Janela modal rolável com <form> em volta do conteúdo (08/10/2026).
   O Bootstrap (.modal-dialog-scrollable) limita .modal-content à altura da
   tela e rola o .modal-body — mas só quando o .modal-body é filho direto do
   .modal-content. Com um <form> no meio (cabeçalho+corpo+rodapé num form só),
   o corpo crescia além da janela sem barra de rolagem: no criador de Fluxos de
   Assinatura, com 6 signatários, o botão "Salvar fluxo" ficava fora da tela e
   inalcançável. O form passa a se comportar como o .modal-content. */
.modal-dialog-scrollable .modal-content > form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  max-height: 100%;
  overflow: hidden;
}