/* =============================================================================
   Shell mobile compartilhado — carregado por base.html e cliente_base.html.
   Cobre o que NÃO dá para resolver tela a tela: área segura do aparelho,
   altura de viewport que muda com a barra do navegador, vazamento horizontal
   e alvo de toque de elementos do próprio Bootstrap (paginação, offcanvas).

   Regra de convivência com o CSS por página: aqui só entram (a) correções que
   valem para TODAS as telas e (b) utilitários OPT-IN (classes que a página
   precisa pedir). Nada que mude o desktop sem ser pedido.

   Depende de viewport-fit=cover no <meta name="viewport"> do layout: sem isso
   env(safe-area-inset-*) devolve 0 em qualquer aparelho.
   ========================================================================== */

/* ---------------------------------------------------------------- variáveis */
:root {
  /* Insets do aparelho com piso 0 — em desktop e Android sem gesto viram 0.
     Nomeados aqui para a página compor (calc) sem repetir o env(). */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  /* Alvo de toque das ações isoladas. 44px é o mínimo confortável para o
     polegar; o global do base.html continua em 40px para botões de texto em
     grade densa, que ficariam desproporcionais com 44. */
  --tap: 44px;
}

/* ------------------------------------------------------- utilitários opt-in */

/* Barra fixa (rodapé de ação, toolbar) que encosta na borda do aparelho.
   Sem isso o último botão fica embaixo da barra de gestos do iPhone. */
.app-safe-bottom { padding-bottom: calc(.5rem + var(--safe-bottom)); }
.app-safe-top { padding-top: calc(.5rem + var(--safe-top)); }
.app-safe-x {
  padding-left: calc(.5rem + var(--safe-left));
  padding-right: calc(.5rem + var(--safe-right));
}

/* Alvo de toque quadrado para botão só-com-ícone (a lupa, a lixeira, o "..."). */
.tap-target {
  min-width: var(--tap);
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Trilha horizontal de chips (filtros ativos) logo abaixo da busca.
   scrollbar escondida porque no celular ela rouba altura e não é arrastada. */
.chips-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .25rem;
  padding-bottom: .25rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.chips-scroll::-webkit-scrollbar { display: none; }
.chips-scroll > * { flex: 0 0 auto; }

/* Colunas fixas no scroll lateral da tabela. Opt-in por classe no wrapper:
   .tbl-sticky-first prende a 1ª coluna (identificador), .tbl-sticky-last a
   última (ações).

   O POSICIONAMENTO fica aqui fora, para valer mesmo em navegador sem @layer.
   :not([colspan]) deixa de fora a célula de rodapé/aviso que atravessa a
   tabela — fixá-la grudaria uma faixa da largura inteira na borda. */
.tbl-sticky-first > table > thead > tr > :first-child:not([colspan]),
.tbl-sticky-first > table > tbody > tr > :first-child:not([colspan]),
.tbl-sticky-first > table > tfoot > tr > :first-child:not([colspan]) {
  position: sticky;
  left: 0;
  z-index: 2;
}
.tbl-sticky-last > table > thead > tr > :last-child:not([colspan]),
.tbl-sticky-last > table > tbody > tr > :last-child:not([colspan]),
.tbl-sticky-last > table > tfoot > tr > :last-child:not([colspan]) {
  position: sticky;
  right: 0;
  z-index: 2;
}
/* O cabeçalho fica um degrau acima para não ser encoberto pelas células que
   passam por baixo dele quando a tabela também rola na vertical. */
.tbl-sticky-first > table > thead > tr > :first-child:not([colspan]),
.tbl-sticky-last > table > thead > tr > :last-child:not([colspan]) { z-index: 3; }

/* A COR de fundo vai para uma camada: regra em @layer perde para qualquer
   regra fora de camada, por mais específica que a nossa seja. Sem isso, esta
   regra (0,3,3) atropelava o CSS das telas — em Comissões o cabeçalho azul
   com texto branco virava branco no branco, e linha destacada com
   .table-warning ficava amarela no meio e branca nas pontas.
   A cor sai de --bs-table-bg, que as variantes contextuais do Bootstrap
   redefinem, e cai para o fundo do corpo quando não houver.
   Sem suporte a @layer perde-se só a cor; a coluna continua presa. */
@layer apigo-mobile-shell {
  .tbl-sticky-first > table > thead > tr > :first-child:not([colspan]),
  .tbl-sticky-first > table > tbody > tr > :first-child:not([colspan]),
  .tbl-sticky-first > table > tfoot > tr > :first-child:not([colspan]),
  .tbl-sticky-last > table > thead > tr > :last-child:not([colspan]),
  .tbl-sticky-last > table > tbody > tr > :last-child:not([colspan]),
  .tbl-sticky-last > table > tfoot > tr > :last-child:not([colspan]) {
    background-color: var(--bs-table-bg, var(--bs-body-bg));
  }
}

/* O traço que separa a coluna presa do resto é um pseudo-elemento, não border:
   o Reboot deixa a tabela com border-collapse: collapse, e com bordas
   colapsadas o navegador não pinta a borda de uma célula sticky — ela pertence
   à tabela e não acompanha o deslocamento. box-shadow também não serve: é por
   ele que o Bootstrap 5.3 pinta zebra e hover da linha, e o nosso apagaria os
   dois justamente na coluna que fica à vista o tempo todo. */
.tbl-sticky-first > table > * > tr > :first-child:not([colspan])::after,
.tbl-sticky-last > table > * > tr > :last-child:not([colspan])::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--bs-border-color);
  pointer-events: none;
}
.tbl-sticky-first > table > * > tr > :first-child:not([colspan])::after { right: 0; }
.tbl-sticky-last > table > * > tr > :last-child:not([colspan])::after { left: 0; }

/* Números de largura fixa em toda tabela. Com a fonte proporcional o "1" é
   mais estreito que o "8", e uma coluna de valores fica com as casas decimais
   desalinhadas — comparar duas linhas vira trabalho de contar dígito. Isto não
   muda layout nem tamanho de fonte: só troca o desenho dos algarismos pelos de
   largura igual, que já vêm na mesma fonte. */
.table { font-variant-numeric: tabular-nums; }

/* Fila de ações que não cabe na largura do celular. Opt-in: rola de lado com
   inércia em vez de empilhar, e nenhum botão é escondido. */
.acoes-scroll {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  gap: .5rem;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.acoes-scroll::-webkit-scrollbar { display: none; }
.acoes-scroll > * { flex: 0 0 auto; }

/* ------------------------------------------------------------ só no celular */
@media (max-width: 575.98px) {
  /* Vazamento horizontal: clip (e não hidden) porque hidden transformaria o
     body em contêiner de scroll e mataria todo position:sticky de dentro. */
  html, body { max-width: 100%; overflow-x: clip; }

  /* Rodapé do modal acima da barra de gestos do aparelho.

     Altura e rolagem interna NÃO são impostas aqui. Definir overflow-y sozinho
     faz o outro eixo virar "auto" junto, e o corpo do modal passa a recortar
     lista de sugestão e dropdown ancorados dentro dele. Quem precisa de rolagem
     interna usa .modal-dialog-scrollable, e todo modal grande já leva
     .modal-fullscreen-sm-down, onde o próprio Bootstrap cuida disso. */
  .modal-footer { padding-bottom: calc(.5rem + var(--safe-bottom)); }

  /* Offcanvas de filtros: teto de 85dvh para a lista atrás continuar visível,
     corpo rolável e rodapé acima da barra de gestos. */
  .offcanvas-bottom { max-height: 85dvh; }
  .offcanvas-body { overflow-y: auto; }
  .offcanvas-bottom .offcanvas-footer,
  .offcanvas-end .offcanvas-footer,
  .offcanvas-start .offcanvas-footer {
    padding-bottom: calc(.75rem + var(--safe-bottom));
  }

  /* Paginação: alvo de 44px. O global do base.html já centraliza o glifo. */
  .page-link { min-height: var(--tap); min-width: var(--tap); }

  /* Botão só-com-ícone: 44px quadrado. A marca js-icon-only é posta pelo
     js/comum/tap-targets.js, que olha o texto do botão — CSS não consegue
     separar ícone puro de ícone+texto, e alargar o de texto o distorceria. */
  .btn.js-icon-only,
  .btn-block-option.js-icon-only {
    min-width: var(--tap);
    min-height: var(--tap);
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Rolagem lateral da tabela com inércia; o scroll fica DENTRO do wrapper,
     que é o que impede a página inteira de andar de lado. */
  .table-responsive { -webkit-overflow-scrolling: touch; }
}