/*
 * A tela virando papel — o "Exportar página em PDF" do menu de opções.
 *
 * Isto NÃO é folha de impressão. Não tem @media print, e não deve voltar a
 * ter: quem gera o PDF é o exportDashToPdf() do ComponentsManager, que
 * fotografa a tela com o html2canvas e monta o arquivo com o jsPDF (as duas
 * em /lib, carregadas sob demanda).
 *
 * ==========================================================================
 * POR QUE O @media print FOI ABANDONADO — não tente de novo
 * ==========================================================================
 *
 * Duas tentativas, duas falhas, e as duas com a mesma raiz: dentro do motor de
 * impressão NÃO RODA JAVASCRIPT.
 *
 *   1. O motor refaz o layout da página do zero, com outra viewport. O dash é
 *      flex com alturas em porcentagem dentro de caixas com `overflow`, e
 *      colapsava: saía o cabeçalho, uma moldura vazia e a lista de produtos
 *      esparramada por cima do resto. A tela e o papel eram dois layouts
 *      diferentes, e só um deles dava para ver enquanto se ajustava.
 *
 *   2. O ECharts desenha num <canvas>, que guarda o bitmap do tamanho que o
 *      container tinha no último chart.resize(). Nenhuma regra de @media print
 *      consegue pedir um redesenho, então o gráfico saía com o desenho da tela
 *      esticado dentro de uma caixa de outra proporção.
 *
 * Fotografar resolve os dois de uma vez: o layout que vai para o arquivo é o
 * mesmo que o navegador já resolveu na tela, e o canvas já está desenhado.
 *
 * ==========================================================================
 * O QUE ESTE ARQUIVO FAZ
 * ==========================================================================
 *
 * A classe `exportando-pdf`, que o exportDashToPdf põe no body por um instante
 * antes da foto e tira logo depois:
 *
 *   - põe o app na proporção exata do A4 paisagem, para a foto caber na folha
 *     sem esticar, seja qual for o tamanho da janela do usuário;
 *   - tira a barra azul, o cinza do fundo e o cinza das caixas;
 *   - põe o logotipo e o nome do painel em preto, e borda preta nos visuais.
 *
 * Os gráficos saem coloridos como estão: são <canvas>, nenhuma regra daqui os
 * alcança.
 *
 * TUDO AQUI É !important, e não é preguiça: o app monta o layout inteiro em
 * `element.style` (estilo inline), que vence qualquer regra de folha de estilo
 * normal. É a mesma razão pela qual os dashN.css do celular são !important.
 */

/* ---------------------------------------------------------------- a folha */

/*
 * A caixa do app vira a área imprimível: A4 paisagem (297 x 210mm) menos as
 * margens de 8mm de cada lado. É a MESMA medida que o exportDashToPdf usa no
 * addImage do jsPDF, então a foto entra inteira, sem esticar e sem sobra.
 *
 * É daqui que sai o rearranjo: o dash é flex com filhos em porcentagem, então
 * mudar esta caixa reflui a tela inteira para a proporção do papel, seja qual
 * for o tamanho da janela do usuário.
 */
body.exportando-pdf #mainComponent {
  width: 281mm !important;
  height: 194mm !important;
  max-width: none !important;
  max-height: none !important;
}

/*
 * Só o fundo. ALTURA NÃO: esta regra pega o #mainComponent por ser filho
 * direto do body, e um `height: auto` aqui derruba a cadeia de porcentagens do
 * dash inteiro — foi o que deixou o PDF em branco uma vez.
 */
body.exportando-pdf {
  background: #ffffff !important;
}

/* ------------------------------------------------------------- cabeçalho */

/*
 * A faixa azul (#252E59) some, mas o conteúdo dela fica. A altura vira fixa em
 * mm porque o header é `container-type: size` e o texto dele usa `cqb`: sem
 * altura resolvida, a fonte do nome do painel viraria zero.
 */
body.exportando-pdf #header {
  background: transparent !important;
  height: 14mm !important;
  min-height: 0 !important;
  flex: none !important;
  justify-content: flex-start !important;
  gap: 6mm !important;
  padding: 0 0 2mm 0 !important;
  border-bottom: 1px solid #000000 !important;
}

/* o botão de menu não tem função nenhuma no papel */
body.exportando-pdf #optionIcon {
  display: none !important;
}

body.exportando-pdf #mainAvanceIcon {
  left: 0 !important;
  height: 100% !important;
  padding: 0 !important;
  background: none !important;
  cursor: default !important;
}

/*
 * "vance claro.png" é a versão CLARA do logotipo, desenhada para o fundo azul
 * escuro: no papel branco ela simplesmente sumiria. O brightness(0) pinta de
 * preto preservando o recorte alfa, então o logotipo sai inteiro, em preto,
 * sem precisar de um arquivo novo.
 */
body.exportando-pdf #mainImage1,
body.exportando-pdf #mainImage2 {
  filter: brightness(0) !important;
}

body.exportando-pdf #mainHeaderText {
  right: 0 !important;
  color: #000000 !important;
  font-size: 5mm !important;
  font-weight: bold !important;
}

/* --------------------------------------------------------------- visuais */

/*
 * ALTURA EM mm, NUNCA `flex: 1` COM `height: auto`. Esta linha já quebrou duas
 * vezes, e o sintoma é o mesmo nas duas pontas: o dash SOME DA TELA quando a
 * classe entra, e o PDF sai em branco com só o cabeçalho.
 *
 * O motivo é uma regra velha do CSS: porcentagem de altura contra um pai de
 * altura `auto` resolve como `auto`. A raiz do dash é `height: 100%`, e as
 * linhas dentro dela também são porcentagem — com o mainPane em `auto`, a
 * cadeia inteira vira altura de conteúdo e desaba. O `flex: 1` dá ao mainPane
 * uma altura USADA, que a tela desenha, mas não uma altura COMPUTADA, que é a
 * que a porcentagem do filho consulta.
 *
 * 180mm = os 194mm da área imprimível menos os 14mm do cabeçalho. Se mudar um,
 * mude o outro: os dois têm que somar exatamente a altura do #mainComponent,
 * senão sobra faixa branca ou corta o pé do dash.
 */
body.exportando-pdf #mainPane {
  background: #ffffff !important;
  height: 180mm !important;
  min-height: 0 !important;
  flex: none !important;
  overflow: hidden !important;
}

/* a raiz do dash ocupa o mainPane inteiro: agora que ele tem altura em mm,
   este 100% finalmente resolve em alguma coisa */
body.exportando-pdf #mainPane > * {
  height: 100% !important;
  width: 100% !important;
}

/*
 * A LETRA DO DASH VIRA PRETA NO PAPEL (15/10/2026, com o tema escuro).
 *
 * O app é escuro e a letra dele é clara; a folha é branca. O
 * `neutralizeGrays` já tira o fundo das caixas — e, sem esta regra, o que
 * sobrava era letra clara sobre papel branco: o PDF voltava com as molduras
 * certas e NENHUM texto dentro delas.
 *
 * Aqui pode ser `!important` de CSS, ao contrário do fundo (ver o bloco
 * abaixo): ninguém lê a cor do texto de volta por `element.style.color` para
 * copiá-la para dentro de uma opção do ECharts. O texto que está DENTRO do
 * canvas é outro assunto, e quem resolve é o `neutralizeChartBackgrounds`.
 */
body.exportando-pdf #mainPane,
body.exportando-pdf #mainPane * {
  color: #000000 !important;
}

/*
 * AQUI NÃO ENTRA REGRA DE FUNDO PARA AS CAIXAS DO DASH. Quem tira o cinza e
 * põe a borda preta é o neutralizeGrays(), em JavaScript — e tem que ser ele
 * sozinho.
 *
 * Existia aqui uma regra `[id^="dash"] { background: #ffffff !important }`, e
 * ela parecia funcionar: as caixas ficavam brancas. Mas o fundo do TÍTULO dos
 * gráficos continuava cinza, e o motivo é uma diferença que quase nunca
 * aparece:
 *
 *   - `!important` muda o que se VÊ (o estilo computado);
 *   - `element.style.backgroundColor` continua devolvendo o valor INLINE, que
 *     é #CCCCCC.
 *
 * E o updateColors do Charts.js lê justamente o inline, copiando-o para dentro
 * da opção do ECharts (`option.title[0].backgroundColor`). Ou seja: a caixa
 * ficava branca por CSS e o ECharts pintava o título de cinza por dentro do
 * canvas, onde CSS nenhum alcança.
 *
 * Pior: a regra também SABOTAVA o neutralizeGrays, que decide pelo estilo
 * computado. Com o !important, ele lia "branco", concluía que não havia cinza
 * ali e não mexia no inline — os dois mecanismos se anulando.
 *
 * Com a regra fora, o neutralizeGrays lê o cinza de verdade, zera o inline, e
 * o updateColors passa a copiar "transparent" para o título.
 */

/* o botão flutuante de limpar filtros mora no document.body, fora do
   mainPane, então precisa ser escondido por conta própria */
body.exportando-pdf [id$="-filterCleaner"],
body.exportando-pdf [id^="juicePopUpMenu"],
body.exportando-pdf #loadingContainer {
  display: none !important;
}

/*
 * O Chrome descarta fundo na impressão por padrão. Nas células da Tabulator a
 * barrinha colorida É o dado (é o formatter "management-with-bars"), então
 * esta é a exceção que precisa ser pedida explicitamente.
 */
body.exportando-pdf .tabulator-cell,
body.exportando-pdf .tabulator-calcs {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

body.exportando-pdf .tabulator {
  border: none !important;
}