/* Impressão dos relatórios.
   A estratégia é montar um documento próprio em #printArea (ver
   js/views/print.js) e, na hora de imprimir, esconder o app inteiro e
   mostrar só ele. É mais previsível do que tentar "imprimir a tela": a
   sidebar, os filtros, os botões e os gráficos SVG não têm o que fazer no
   papel, e o WebView não precisa abrir uma segunda janela (window.open é
   bloqueado dentro do Tauri). */

#printArea {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    /* Margens generosas — o conteúdo não encosta na borda da folha. */
    margin: 18mm 15mm 20mm;
  }

  /* Retrospecto: a matriz departamento × 12 meses + total tem 14 colunas e
     não cabe em A4 retrato — usa uma página nomeada em paisagem só para
     esse documento (ver #printArea.pr-landscape logo abaixo e o
     `opts.landscape` de printDocument em js/print.js). Os demais
     relatórios continuam na página padrão (retrato) declarada acima. */
  @page pr-wide {
    size: A4 landscape;
    margin: 14mm 12mm 16mm;
  }
  #printArea.pr-landscape {
    page: pr-wide;
  }

  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff;
    font-size: 10pt;
  }

  .app-shell,
  .startup-error,
  #toast,
  #vizTip,
  .overlay {
    display: none !important;
  }

  #printArea {
    display: block !important;
    color: var(--ink-primary);
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Cabeçalho do documento — faixa cheia de azul institucional, mais forte
     que um simples texto colorido: é o primeiro elemento visto na folha. */
  .pr-head {
    background: var(--accent);
    color: var(--ink-on-accent);
    padding: 8pt 10pt;
    margin: 0 0 10pt;
    border-radius: 3pt;
  }
  /* Logo da FL (Configurações › canto da barra lateral) — flutua à direita
     do cabeçalho colorido, em TODO relatório impresso (pedido do usuário:
     "essa foto deve aparecer sempre na barra superior dos relatórios"). */
  .pr-head .pr-logo {
    float: right;
    max-height: 28pt;
    max-width: 90pt;
    background: #fff;
    border-radius: 2pt;
    padding: 2pt 4pt;
  }
  .pr-head h1 {
    font-size: 15pt;
    margin: 0;
    color: var(--ink-on-accent);
  }
  .pr-head .pr-sub {
    font-size: 9pt;
    margin-top: 2pt;
    color: var(--ink-on-accent);
  }
  .pr-head .pr-meta {
    font-size: 8pt;
    margin-top: 4pt;
    color: var(--accent-soft);
  }

  /* Volta a ser texto colorido + linha, sem preenchimento cheio: diferente
     do banner do topo (uma vez por relatório), .pr-sec se repete várias
     vezes por página em relatórios longos — um retângulo de tinta a cada
     seção soma bastante área colorida e deixa a impressão mais lenta em
     máquinas físicas (print-color-adjust:exact, logo abaixo, força TODO
     fundo colorido a ser mandado pra impressora). */
  .pr-sec {
    font-size: 10pt;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    padding-bottom: 2pt;
    margin: 12pt 0 5pt;
  }
  /* Nenhum bloco começa uma página deixando só o título na anterior */
  .pr-sec,
  .pr-keep {
    break-after: avoid;
    page-break-after: avoid;
  }
  .pr-break {
    break-before: page;
    page-break-before: always;
  }

  #printArea table {
    width: 100%;
    border-collapse: collapse;
    font-size: 8.5pt;
  }
  /* Cabeçalho de tabela repete no topo de TODA página do relatório (ver
     #printArea thead mais abaixo) — preenchimento cheio aqui multiplica pela
     quantidade de páginas, o maior peso de tinta/toner do documento inteiro.
     Volta ao estilo leve: fundo suave + texto na cor da marca. */
  #printArea th {
    background: var(--accent-soft);
    color: var(--accent);
    border-bottom: 1px solid var(--accent);
    text-align: left;
    padding: 3pt 4pt;
    font-size: 7.5pt;
    text-transform: uppercase;
    /* Na tela o `th` é nowrap (components.css) porque a tabela rola na
       horizontal; no papel não existe rolagem — um cabeçalho que não quebra
       linha simplesmente invade a coluna vizinha (era o que embaralhava os
       nomes dos fornecedores no Mapa de Cotação). */
    white-space: normal;
    overflow-wrap: break-word;
  }
  #printArea td {
    border-bottom: 0.5pt solid var(--border-strong);
    padding: 3pt 4pt;
    vertical-align: top;
  }
  #printArea tfoot td {
    border-top: 1pt solid var(--accent);
    font-weight: 700;
  }
  /* Por padrão um <tfoot> tem display:table-footer-group, que faz o
     navegador REPETIR a linha de total no fim de CADA página que a tabela
     ocupa (o mesmo mecanismo que repete o <thead> no topo) — numa tabela
     de várias páginas isso mostra "TOTAL" errado (parcial) em toda página
     menos a última, e duplicado na última. table-row-group desliga esse
     comportamento: o total passa a se comportar como uma linha normal,
     aparecendo só uma vez, no fim de verdade dos dados.
     https://www.w3.org/TR/CSS22/tables.html#table-display (repetição de
     thead/tfoot em "paged media" é comportamento do UA, não do spec). */
  #printArea tfoot {
    display: table-row-group;
  }
  /* A linha de total nunca fica sozinha numa página nova, separada do
     corpo da tabela que ela soma. */
  #printArea tfoot tr {
    break-before: avoid;
    break-inside: avoid;
    page-break-before: avoid;
    page-break-inside: avoid;
  }
  /* Uma linha de tabela nunca é partida entre duas páginas, e o cabeçalho se
     repete no alto de cada página — senão a segunda folha vira uma lista de
     números sem título de coluna. */
  #printArea tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea thead {
    display: table-header-group;
  }
  #printArea .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Matriz do Retrospecto (departamento × 12 meses + total = 14 colunas):
     largura fixa com a 1ª coluna (departamento) maior e as demais divididas
     igualmente, fonte e preenchimento mais compactos. Combinado com a
     página em paisagem acima, é o que evita que os últimos meses caiam
     fora da área impressa. */
  #printArea table.pr-matrix {
    table-layout: fixed;
    font-size: 7.5pt;
  }
  #printArea table.pr-matrix th,
  #printArea table.pr-matrix td {
    padding: 2pt 3pt;
  }
  #printArea table.pr-matrix th:first-child,
  #printArea table.pr-matrix td:first-child {
    width: 15%;
    word-break: break-word;
  }

  /* Mapa de Cotação (orçamentos): mesma ideia da matriz do Retrospecto —
     largura fixa em paisagem, uma empresa ao lado da outra. Texto compacto
     porque as colunas de empresa ficam estreitas quando há 3+ propostas. */
  #printArea table.pr-mapa {
    table-layout: fixed;
    font-size: 7.5pt;
  }
  #printArea table.pr-mapa th,
  #printArea table.pr-mapa td {
    padding: 2.5pt 4pt;
    word-break: break-word;
  }
  /* Faixa colorida por fornecedor (mesma cor estável de corDoFornecedor em
     print.js) — é o que deixa cada empresa reconhecível de relance, o
     pedido explícito do usuário. */
  #printArea table.pr-mapa th.pr-mapa-empresa {
    color: #fff;
    text-align: center;
    font-size: 8pt;
    text-transform: none;
  }
  /* Razão social embaixo do nome fantasia: presente para conferência, mas
     visivelmente secundária — quem lê o mapa procura o nome que conhece. */
  #printArea table.pr-mapa .pr-mapa-razao {
    font-size: 6pt;
    font-weight: 400;
    text-transform: none;
    margin-top: 1pt;
    opacity: 0.85;
  }
  #printArea table.pr-mapa .pr-mapa-rec {
    font-size: 6.5pt;
    font-weight: 400;
    margin-top: 1pt;
    opacity: 0.92;
  }
  /* Linha de total: única linha do rodapé que continua em destaque — as
     demais (forma de pagamento, validade, escopo, CNPJ...) são só dados de
     apoio e não devem competir visualmente com o total, senão o rodapé
     inteiro parece "tudo em negrito" (a poluição visual que o pedido do
     usuário pedia pra evitar). */
  #printArea table.pr-mapa tfoot tr.pr-mapa-total td {
    font-weight: 700;
    font-size: 8pt;
  }
  #printArea table.pr-mapa tfoot tr.pr-mapa-detalhe td {
    font-weight: 400;
    font-size: 7pt;
    color: var(--ink-secondary);
  }
  /* Linha vertical discreta entre o bloco de cada fornecedor — numa fileira
     de vários pares "R$ Unit./R$ Total" iguais, é o que evita perder de vista
     onde uma empresa termina e a próxima começa. Sobre o cabeçalho colorido
     (fundo muda a cada fornecedor) uma linha cinza sumiria, então ali ela é
     branca translúcida; no corpo da tabela (fundo claro) volta a ser a
     borda cinza padrão do documento. */
  #printArea table.pr-mapa .pr-mapa-divisor {
    border-left: 0.75pt solid var(--border-strong);
  }
  #printArea table.pr-mapa th.pr-mapa-empresa.pr-mapa-divisor {
    border-left-color: rgba(255, 255, 255, 0.45);
  }

  /* Solicitação de Cotação: ficha em branco pro fornecedor preencher à mão
     (ou digitar antes de devolver por e-mail) — as células de valor ficam
     vazias de propósito, e os "campos" abaixo da tabela são só um rótulo
     mais uma linha, sem caixa de texto (isto é papel, não formulário HTML). */
  #printArea .pr-sol-preencher {
    min-height: 16pt;
  }
  #printArea .pr-sol-campo {
    display: flex;
    align-items: flex-end;
    gap: 6pt;
    margin: 10pt 0 2pt;
    font-size: 8.5pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-sol-rotulo {
    white-space: nowrap;
    font-weight: 700;
    color: var(--accent);
  }
  #printArea .pr-sol-linha {
    flex: 1;
    border-bottom: 0.75pt solid var(--ink-primary);
    min-height: 12pt;
  }

  /* Cabeçalho de grupo (departamento) dentro da tabela de detalhamento do
     relatório de custo mensal — mesma linha, sem quebrar antes das primeiras
     linhas do grupo que ela abre. */
  #printArea .pr-group td {
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: 700;
    padding-top: 5pt;
  }
  #printArea .pr-group {
    break-after: avoid;
    page-break-after: avoid;
  }
  /* Cada departamento é um <tbody> próprio (ver buildCustoDeptoDoc em
     js/print.js): impede que a última linha de um grupo continue sozinha
     na página seguinte, sem o cabeçalho do departamento a que pertence —
     um <tr> isolado não pode ser protegido assim, um <tbody> pode. Só tem
     efeito quando o grupo inteiro cabe numa página; um departamento maior
     que uma página quebra normalmente (o cabeçalho não se repete nesse
     caso raro, mas nenhuma linha some). */
  #printArea tbody.pr-group-body {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Gráfico embutido no relatório de custo por departamento */
  #printArea .pr-chart {
    margin: 4pt 0 8pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-chart svg {
    width: 100%;
    height: auto;
  }

  /* Grade de indicadores: 3 por linha, fundo neutro (economia de tinta) com
     um filete de acento à esquerda para reforçar a identidade visual */
  #printArea .pr-kpis {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 4pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-kpi {
    background: var(--page-bg);
    border: 0.5pt solid var(--border-strong);
    border-left: 2pt solid var(--accent);
    padding: 4pt 6pt;
  }
  #printArea .pr-kpi .k {
    font-size: 7pt;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--ink-secondary);
  }
  #printArea .pr-kpi .v {
    font-size: 11pt;
    font-weight: 700;
    color: var(--accent);
  }
  #printArea .pr-kpi .f {
    font-size: 7pt;
    color: var(--ink-secondary);
  }
  /* % distribuído: verde dentro do limite combinado, vermelho acima. Numa
     impressora preto e branco a cor vira cinza, por isso o rodapé do quadro
     também diz "dentro do limite" / "ACIMA do limite" por escrito (ver
     kpiDistribuido em js/print.js) — no papel a informação não pode depender
     só da cor. */
  #printArea .pr-kpi-dentro {
    border-left-color: var(--success);
  }
  #printArea .pr-kpi-dentro .v {
    color: var(--success);
  }
  #printArea .pr-kpi-acima {
    border-left-color: var(--danger);
  }
  #printArea .pr-kpi-acima .v {
    color: var(--danger);
  }

  #printArea .pr-note {
    border: 0.5pt solid var(--border-strong);
    padding: 4pt 6pt;
    font-size: 8.5pt;
    margin-bottom: 6pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-alert {
    border: 1pt solid var(--danger);
    background: var(--danger-soft);
    color: var(--danger);
    padding: 4pt 6pt;
    font-size: 8.5pt;
    font-weight: 700;
    margin-bottom: 6pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-alert-warn {
    border-color: var(--warning);
    background: var(--warning-soft);
    color: var(--warning);
  }

  /* Situação / status: mesma semântica de cor usada na tela (pill/flag) */
  #printArea .pr-st-critical {
    color: var(--danger);
    font-weight: 700;
  }
  #printArea .pr-st-warn {
    color: var(--warning);
    font-weight: 700;
  }
  #printArea .pr-st-good {
    color: var(--success);
    font-weight: 700;
  }
  #printArea .pr-st-serious {
    color: var(--accent-secondary);
    font-weight: 700;
  }
  #printArea .pr-abc {
    font-weight: 800;
  }
  #printArea .pr-abc-A {
    color: var(--chart-abc-a);
  }
  #printArea .pr-abc-B {
    color: var(--chart-abc-b);
  }
  #printArea .pr-abc-C {
    color: var(--chart-abc-c);
  }

  #printArea .pr-foot {
    margin-top: 10pt;
    padding-top: 4pt;
    border-top: 0.5pt solid var(--border-strong);
    font-size: 7.5pt;
    color: var(--ink-secondary);
  }
  #printArea .pr-sign {
    margin-top: 22pt;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24pt;
    font-size: 8pt;
    text-align: center;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-sign div {
    border-top: 0.5pt solid var(--ink-primary);
    padding-top: 3pt;
  }

  /* Rodapé discreto, ao final de todo relatório impresso */
  #printArea .pr-copy {
    margin-top: 14pt;
    font-size: 6.5pt;
    color: var(--ink-muted);
    text-align: center;
  }

  /* ---------------------------------------- lista de separação (picking) */

  /* Quadradinho para marcar à caneta. É um quadrado desenhado por borda, e
     não o caractere ☐: caractere depende da fonte instalada e some (ou vira
     tofu) em impressora que não a tenha. */
  #printArea .pr-check {
    display: inline-block;
    width: 9pt;
    height: 9pt;
    border: 0.75pt solid var(--ink-primary);
    border-radius: 1pt;
    vertical-align: middle;
  }
  #printArea .pr-nota {
    font-size: 7.5pt;
    color: var(--ink-secondary);
    margin: -2pt 0 5pt;
  }
  #printArea .pr-vazio {
    padding: 14pt;
    text-align: center;
    font-size: 9pt;
    color: var(--ink-secondary);
    border: 0.5pt dashed var(--border-strong);
    border-radius: 3pt;
  }
  /* Um pedido nunca é partido entre duas folhas: metade da lista numa página
     e metade na outra é o jeito mais fácil de esquecer um item na separação. */
  #printArea .pr-pedido {
    margin-bottom: 7pt;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  #printArea .pr-pedido-cab {
    font-size: 8.5pt;
    padding: 3pt 5pt;
    background: var(--accent-soft);
    border-left: 2.5pt solid var(--accent);
  }
  #printArea .pr-pedido-obs {
    font-size: 7.5pt;
    color: var(--ink-secondary);
    margin-top: 1pt;
  }
}