/* Custom styles goes here */

/* Paginacao dos grids (DataTables Bootstrap5) em telas bem estreitas (<=575.98px, ex.: Agencia
   com 15+ paginas): o proprio tema (datatables.bootstrap5.css) forca
   `.dataTables_paginate ul.pagination { overflow-x: scroll }` de proposito - os botoes de
   pagina nao cabem lado a lado e o usuario arrasta pra ver as demais paginas. Mas o tema nao da
   nenhum respiro embaixo dos botoes pra essa scrollbar: ela fica colada bem debaixo dos
   circulos de pagina, parecendo "encavalada" neles. So adiciona espaco - a func(scroll) em si e
   proposital, nao removida. */
@media (max-width: 575.98px) {
  div.dataTables_wrapper div.dataTables_paginate ul.pagination {
    padding-bottom: 0.5rem;
  }
}

/* Grids com fnhelper_ExibirSomenteAtivos (helper-comum.js): o checkbox "Exibir Somente Ativos"
   e injetado como irmao de .dataTables_filter dentro do mesmo container flex sem wrap (dom
   padrao dos grids, ex.: <div class="col-sm-12 col-md-6 d-flex justify-content-center
   justify-content-md-end">). Em telas pequenas os dois nao cabem lado a lado: o label do
   checkbox quebra em varias linhas e cola no texto/campo de "Pesquisar". Aplica-se a todas as
   telas que usam o helper (Agencia, Cinema, Cliente, Exibidor, Usuario, etc.).
   Breakpoint estendido de 767.98 pra 991.98 (auditoria 2026-08-21, 12 telas com o mesmo bug em
   768px/tablet - iPad Mini etc.): esse container e SEMPRE `col-md-6` (metade da linha) a partir
   de 768px, sem nenhum `col-lg-*` que aumente depois - e metade de uma tela de 768px (~384px)
   nao cabe o label do checkbox + campo de busca lado a lado (so passa a caber com folga a
   partir de ~992px, onde o layout geral da pagina tambem muda). Empilhar nessa faixa toda evita
   a colisao de texto ("Exibir Somente Ativos" quebrando e colando em "Pesquisar") sem prejudicar
   telas largas, onde ha espaco de sobra mesmo empilhado. */
@media (max-width: 991.98px) {
  .dataTables_wrapper .d-flex.justify-content-center.justify-content-md-end {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  #divFilter_ChkStatus {
    width: 100%;
    margin-right: 0 !important;
    margin-top: 0 !important;
    display: flex;
    justify-content: center;
  }

  .dataTables_filter {
    width: 100%;
    text-align: center !important;
  }

  /* label envolve o texto "Pesquisar" (sem separador, pt-BR.json) + o input; empilha os dois
     em vez de deixar lado a lado, senao o input (width:100%) estoura a largura da tela porque
     o texto ocupa espaco na mesma linha. */
  .dataTables_filter label {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .dataTables_filter input {
    width: 100% !important;
    max-width: 100%;
    margin-left: 0 !important;
    margin-top: 0.5rem;
  }
}

/* Botoes de acao dos cards de filtro ("Filtrar Dados"/"Limpar Filtro", "Importar Dados"/
   "Limpar", "Consultar Dados"/"Limpar", etc. - dezenas de telas em Cadastro/Importacao/
   Relatorios/Financeiro/Comercial/Programacao/Material): cada tela usa uma classe diferente
   pro botao principal (btn-filter, btn-import, btn-load, ...), mas a estrutura e sempre a
   mesma - 2+ <button class="btn"> lado a lado dentro do mesmo <div>, filho direto de
   .card-widget-1 (ex.: <div class="card-widget-1 ..."><div class="pt-2"><button>A</button>
   <button>B</button></div></div>). Sao elementos inline-block (padrao do Bootstrap .btn), sem
   flex-wrap nem gap; em telas estreitas eles quebram linha mas ficam colados um no outro (sem
   espacamento vertical). Regra estrutural (independente do nome da classe do botao) cobre
   todos os casos de uma vez, em vez de listar cada classe usada em cada tela. */
@media (max-width: 767.98px) {
  .card-widget-1 > div > .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  .card-widget-1 > div > .btn:last-child {
    margin-bottom: 0;
  }
}

/* Coluna que envolve a linha de botoes de filtro (ex.: `col-sm-6 col-lg-4` em
   Programacao/Limpar.cshtml e varias outras) - entre 576px e 991.98px (tablet, ex.: iPad Mini
   768px) o `col-sm-6` deixa essa coluna com so METADE da largura da linha (a outra metade fica
   vazia, ja que nao ha mais nenhum campo pra ocupar), e os 2-3 botoes ficam espremidos/quebrados
   nessa metade em vez de se distribuir pela largura toda. Acima de 767.98px a regra de empilhar
   (bloco anterior) nao se aplica mais, entao os botoes voltam ao tamanho natural (inline-block) -
   forcando a coluna a 100% da linha nessa faixa, o `.d-flex.justify-content-center`/`gap-4` que
   ja existe nesses wrappers centraliza e distribui os botoes por toda a largura corretamente. */
@media (min-width: 576px) and (max-width: 991.98px) {
  .row > div:has(> .card-widget-1 > div > .btn) {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Bug de markup em algumas telas (Exibidor, CinemaList, MaterialStatus, etc.): o bloco dos
   botoes de filtro tem um <div class="row"> redundante envolvendo direto outro <div class="row">
   (o "col" com .d-flex.justify-content-center + .card-widget-1), sem nenhum .col-* entre eles.
   Como todo filho direto de .row ganha padding-left/right (metade do gutter) e TODO .row tem
   margin negativa (metade do gutter pra fora), esse wrapper redundante soma padding+margem duas
   vezes, deixando o conteudo ~24px mais estreito e deslocado pra esquerda (fora de centro) em
   relacao ao card. So acontece quando ha 2 .row aninhados direto (sem .col no meio); telas com a
   estrutura correta (ex.: Drive.cshtml, onde o "col" e filho direto do .row de fora) nao sao
   afetadas por este seletor. */
.row > .row:has(> .d-flex.justify-content-center > .card-widget-1) {
  margin: 0 !important;
  padding: 0 !important;
}

/* Botoes dos modais SweetAlert2 (Swal.fire, usado em ~60 telas: confirmacao de exclusao via
   fnhelper_ItemDelete, alertas de sucesso/erro, etc.): a regra do tema
   `.swal2-actions button + button { margin-left: 0.375rem }` (sweetalert2.css) so cria espaco
   HORIZONTAL entre os botoes. Em telas estreitas o container (.swal2-actions) tem
   flex-wrap:wrap e os 2 botoes (com texto+icone, ex.: "Nao, Cancelar!"/"Sim, Confirmar!") nao
   cabem lado a lado e quebram para 2 linhas - como so existe margem horizontal, as linhas ficam
   coladas uma na outra (gap vertical de 0px), parecendo um unico botao dividido so pela cor.
   row-gap cobre o espacamento entre linhas quando quebra, sem efeito nenhum quando os botoes
   cabem em 1 linha so. */
.swal2-actions {
  row-gap: 0.5rem;
}

/* PREMISSA do projeto (ver [[feedback_swal_botoes_mesma_largura]]): em mobile, TODOS os botoes
   de um mesmo Swal.fire devem ter a mesma largura entre si - nao importa a combinacao
   (confirmar+cancelar, so "Ok!", confirmar+negar+cancelar etc.) - por padrao o SweetAlert2
   dimensiona cada botao pelo proprio texto (ex.: "Nao, Cancelar!" x "Sim, Continuar!"), ficando
   visualmente desalinhado. Em telas largas o auto-width de cada botao continua natural (nao
   faz sentido esticar um "Ok!" sozinho pra 100% da largura de um modal grande no desktop).
   Botoes lado a lado (flex:1 1 0 numa row) ainda quebravam o TEXTO de cada botao em 2 linhas
   (ex.: "Nao," / "Cancelar!") deixando visual "espremido"/quebrado - o usuario pediu que em
   mobile cada botao fique em SUA PROPRIA LINHA (empilhado, largura total), nao lado a lado.
   `flex-direction:column` + `align-items:stretch` (== width 100% de cada item) resolve isso e
   mantem os botoes com a MESMA largura entre si (todos = 100% do container) e centralizados. */
@media (max-width: 767.98px) {
  .swal2-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%; /* .swal2-actions e ela mesma um flex item de .swal2-popup (column, align-items
      nao-stretch por padrao) - sem isso ela fica do tamanho do proprio conteudo (fit-content),
      nao da largura total do popup, e os botoes "100%" ficam 100% de um container estreito. */
  }

  .swal2-actions button {
    width: 100%;
    margin-left: 0 !important; /* zera o `.swal2-actions button + button { margin-left: 0.375rem }`
      do tema (pensado pra espacamento HORIZONTAL entre botoes lado a lado) - empilhados, esse
      deslocamento so desalinha o botao de baixo pra direita e faz ele vazar do popup. */
  }
}

/* Icone de "expandir" dos grids responsivos (DataTables Responsive, coluna .control - ver
   [[project_bug_grid_responsive_control_column]]): o tema (theme-default.css) estiliza
   ".control:before" como um circulo roxo preenchido com "+" (Courier New). Troca pro icone de
   seta (Remixicon, ja usado no resto do sistema pra indicar expandir/paginar) sem o circulo.
   Precisa de !important pq o vendor (datatables-responsive-bs5/responsive.bootstrap5.css) e
   carregado DEPOIS do site.css e tem a mesma especificidade de seletor. */
table.dataTable.dtr-column > tbody > tr > td.control:before,
table.dataTable.dtr-column > tbody > tr > th.control:before {
  font-family: "remixicon" !important;
  content: "\ea6e" !important; /* ri-arrow-right-s-line */
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: var(--bs-primary, #696cff) !important;
  width: auto !important;
  height: auto !important;
  line-height: 1 !important;
  font-size: 1.1rem !important;
  font-weight: 400 !important;
}

table.dataTable.dtr-column > tbody > tr.parent td.control:before,
table.dataTable.dtr-column > tbody > tr.parent th.control:before {
  content: "\ea4e" !important; /* ri-arrow-down-s-line */
}

/* Modal de detalhe do DataTables Responsive (coluna .control, popup "Detalhes de X" - ver
   [[project_bug_grid_responsive_control_column]]): a tabela gerada pelo renderer customizado
   (copiado em quase todos os grids) nao define table-layout/quebra de linha - textos longos e
   sem espaco (e-mails concatenados, nomes grandes) estouram a largura do modal em vez de
   quebrar, cortando o conteudo (inclusive o de OUTRAS linhas, ja que table-layout:auto
   dimensiona a coluna pelo conteudo mais largo entre todas as celulas da tabela). */
.dtr-bs-modal .modal-body table {
  width: 100%;
  table-layout: fixed;
}
.dtr-bs-modal .modal-body table td {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Calendario de ".dt-calendar" (bootstrap-datepicker, ex.: campo Cinesemana das telas de
   Importacao/MaterialStatus) nao fechava ao "clicar fora" em mobile: o dropdown (~280px,
   position:absolute ancorado no <body>) e mais largo/alto que o proprio input em colunas
   col-sm-6 que nao empilham forçado em telas estreitas, entao ele se sobrepoe ao campo vizinho
   (ex.: Arquivo). Cliques que o usuario acha que sao "fora" do calendario na verdade acertam o
   proprio calendario (que cobre visualmente o campo vizinho), entao o autoclose nunca dispara.
   Combinado com o `container` setado em site.js (ancora o dropdown dentro do wrapper
   .card-widget-1 do proprio campo em vez do body):
   - position:relative no proprio .card-widget-1 e sempre necessario (nao so mobile): sem isso
     o dropdown (position:absolute) usa o ancestral posicionado mais proximo como referencia -
     como nada entre .card-widget-1 e o <body> tem position setado, ele calculava a largura
     contra a viewport inteira em vez do proprio campo (bug reproduzido: calendario ficava
     largo igual a tela toda no desktop).
   - Em telas estreitas, tira o dropdown do position:absolute e solta ele no fluxo normal do
     card - ele passa a nascer logo abaixo do input e empurrar o campo seguinte pra baixo (a
     .row do card-widget-1 ja tem flex-wrap, entao um filho width:100% quebra pra propria linha
     sozinho), sem sobrepor mais nada. */
.card-widget-1 {
  position: relative;
}

@media (max-width: 767.98px) {
  .card-widget-1 .datepicker.dropdown-menu {
    position: static !important;
    transform: none !important;
    width: 100%;
    margin-top: 0.5rem;
  }
}

/* Colunas de valor monetario/percentual (className "text-end", convencao usada em todos os
   relatorios/grids pra dinheiro e percentual - ver helper-config-export.js/RIGHT_COLS) quebram
   o texto em 2 linhas ("R$" numa linha, o valor embaixo) quando a coluna fica mais estreita que
   o conteudo: $.fn.dataTable.render.number(...) usa um espaco normal entre "R$" e o numero, que
   e um ponto de quebra valido pro navegador. Aplica-se ao corpo E ao rodape/totalizador (soma) -
   NAO ao cabecalho, que pode (e deve) continuar quebrando em titulos compridos tipo "Valor Bruto
   Negociado". Os grids ja usam scrollX, entao a coluna so fica mais larga/scrollavel em vez de
   quebrar o valor. */
table.dataTable > tbody > tr > td.text-end,
table.dataTable > tfoot > tr > th.text-end,
table.dataTable > tfoot > tr > td.text-end {
  white-space: nowrap;
}