/* Tabelas: o contrato comum de todas as telas (revisão do front de 09/11/2026: títulos de coluna quebrando e rolagens
 * estranhas). Carregado por último (base.html), depois do CSS de cada tela, para valer igual em todo lugar.
 *
 * 1. Título de coluna numa linha só, em todas as tabelas (revisão de 10/11/2026: as matrizes dos relatórios tinham
 *    títulos e nomes de obra em duas linhas, e a tabela ficava confusa). A unidade (.sub) vai na mesma linha, menor.
 *    O que não couber corta com reticências, e o título inteiro aparece na dica (tabelas.js põe o title de quem cortou).
 *    tabelas.js alarga cada coluna até o título caber (tirando das colunas de texto) e, no nome de obra que não cabe,
 *    corta a cidade e deixa o contrato à vista. Os títulos longos dos relatórios ficaram curtos, com o inteiro na dica.
 *
 * 2. Texto longo numa célula corta com reticências e mostra tudo na dica (title).
 *    max-width numa célula de tabela não faz nada (o navegador ignora), e por isso as regras antigas de corte não
 *    cortavam: a célula crescia até o tamanho do texto e a tabela passava da caixa, rolando de lado. A célula .corta
 *    passa a ter largura máxima 0 e uma fatia da largura da tabela: fica com o espaço que sobra e corta o resto. As
 *    linhas secundárias (.sub) dentro dela cortam do mesmo jeito.
 *
 * 3. Rolagem
 *    - A lista cabe na largura da caixa no computador; não rola de lado.
 *    - Tabela longa de relatório rola dentro de uma caixa da altura da tela (menos a faixa de filtros, que fica presa
 *      no alto): rolando a página até a tabela, ela ocupa a tela toda e a barra de rolagem lateral, quando há, fica à
 *      vista, e não 500 linhas abaixo.
 */

:root { --tabela-alta: calc(100dvh - 96px); }

/* ------------------------------------------------------------------ 1. título de coluna */

.tabela thead th { white-space: nowrap; hyphens: manual; }
.tabela thead th .ordenar { white-space: nowrap; }

.tabela.fr-tab thead th,
.rel-topo .recolhe .tabela thead th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 40px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 6px;
  padding-right: 6px;
  line-height: 1.25;
  letter-spacing: .02em;
  vertical-align: middle;
}
/* o botão de ordenar ocupa o título inteiro e corta junto (sem ele, o texto passaria por cima da coluna ao lado) */
.tabela thead th .ordenar { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela thead th.num .ordenar { margin-left: auto; }
/* a unidade na mesma linha, menor e sem maiúsculas ("Frenagens por 1.000 km") */
.tabela.fr-tab thead th .sub { display: inline; margin: 0 0 0 .3em; font: 400 11px/14px var(--fonte); letter-spacing: 0; text-transform: none; color: var(--texto-3); }
/* matrizes densas (Uso da Frota, Mão de obra): colunas de ~55 px, o título aperta um pouco a letra para caber */
.tabela.us-tab thead th { letter-spacing: .01em; }
/* a cor da série numa faixa embaixo do título, no lugar da bolinha antes do texto (que ocupava largura) */
.tabela thead th.th-cor { box-shadow: inset 0 -3px 0 var(--th-cor); }
/* título que pode ser longo (nome de obra como coluna): uma linha, com reticências; o nome inteiro na dica */
.tabela thead th .th-2l { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Cabeçalho em duas linhas (o grupo em cima, como Ligado e Desligado no Uso da Frota): o cabeçalho inteiro fica preso
   no alto, e não cada linha, para a de baixo não passar por cima da de cima. */
.tabela thead:has(> tr.fr-grupo) { position: sticky; top: 0; z-index: 2; }
.tabela thead:has(> tr.fr-grupo) > tr > * { position: static; }
.tabela thead tr.fr-grupo > * {
  height: 28px;
  min-height: 0;
  padding-top: 6px;
  padding-bottom: 4px;
  background: var(--superficie-2);
  border-bottom: 0;
}
.tabela thead tr.fr-grupo > th {
  text-align: center;
  vertical-align: bottom;
  color: var(--texto-2);
  box-shadow: inset 0 -2px 0 var(--borda-forte), inset 1px 0 0 var(--superficie-2), inset -1px 0 0 var(--superficie-2);
}

/* ------------------------------------------------------------------ 2. texto longo corta */

.tabela td.corta, .tabela td.corta-curto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabela td.corta .sub, .tabela td.corta-curto .sub {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Só nas tabelas que não dizem a largura de cada coluna. As dos relatórios trazem um colgroup (e várias têm
   table-layout: fixed): a largura vem dele, e largura 0 na primeira linha fecharia a coluna. */
.tabela:not(:has(> colgroup), .us-tab, .au-tab, .sg-tab, .mo-tipos) td.corta { max-width: 0; width: 40%; }
.tabela:not(:has(> colgroup), .us-tab, .au-tab, .sg-tab, .mo-tipos) td.corta-curto { max-width: 0; width: 22%; }
/* nas de colgroup, o corte vem da largura da coluna: a célula só precisa não crescer além dela */
.tabela:has(> colgroup) td.corta, .tabela:has(> colgroup) td.corta-curto { max-width: 0; }

/* Matrizes dos relatórios: cada linha numa linha só. O nome da obra ou da família (a linha que abre os equipamentos)
   corta com reticências, como as outras células; a linha de apoio (.sub, small) vai ao lado, depois de um ponto. */
.tabela.fr-tab tbody td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tabela.fr-tab tbody td .corta { display: inline-block; max-width: 100%; vertical-align: bottom; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela.us-tab tbody td.us-nome .corta { max-width: calc(100% - 36px); }
.tabela.us-tab tr.us-pai td, .tabela.us-tab tr.us-pai td.us-nome, .tabela.us-tab td.us-nome-eq { white-space: nowrap; line-height: 1.25; }
.tabela.us-tab tr.us-pai td.us-nome .corta { white-space: nowrap; overflow: hidden; }
.tabela.fr-tab tbody td :is(.sub, small.sub) { display: inline; margin-left: 0; }
.tabela.fr-tab tbody td .sub::before { content: " · "; }
/* nome de obra que não cabe: corta a cidade e deixa o contrato à vista (tabelas.js separa as duas partes) */
.tabela .nm { display: inline-flex; max-width: 100%; min-width: 0; vertical-align: bottom; }
.tabela .nm-ini { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .nm-fim { flex: none; white-space: nowrap; margin-left: .3em; }
/* a frase de explicação (O que é, Motivo) continua quebrando: é texto, não rótulo */
.tabela.fr-tab tbody td:is(.quebra, .mo-quebra) { white-space: normal; }

/* No celular a tabela .responsiva vira cartões (app.css): ali a célula é um bloco da grade do cartão, e largura 0 a
   apagaria. O texto volta a quebrar linha, como antes. */
@media (max-width: 767px) {
  .tabela.responsiva td.corta, .tabela.responsiva td.corta-curto { max-width: none !important; width: auto !important; white-space: normal; }
  .tabela.responsiva td.corta .sub, .tabela.responsiva td.corta-curto .sub { white-space: normal; }
}

/* tabela numa coluna estreita (metade da tela, como os preços do modelo): espaço menor entre as colunas */
.tabela.estreita th, .tabela.estreita td { padding-left: 8px; padding-right: 8px; }
.tabela.estreita th:first-child, .tabela.estreita td:first-child { padding-left: 14px; }
.tabela.estreita th:last-child, .tabela.estreita td:last-child { padding-right: 14px; }

/* frase numa célula (aviso, explicação): quebra linha em vez de alargar a tabela */
.tabela td.quebra, .tabela td.num.quebra { white-space: normal; min-width: 12ch; height: auto; padding-block: 8px; line-height: 18px; }

/* número, data e selo não quebram e não cortam: a coluna fica do tamanho deles */
.tabela td.num, .tabela th.num { white-space: nowrap; }

/* ------------------------------------------------------------------ 3. rolagem */

.tabela-caixa, .rq-tabela, .rolagem-x { overscroll-behavior-x: contain; }

/* O texto só para leitor de tela fica onde o texto da célula termina; numa célula cortada isso é fora da caixa, e a
   caixa ganhava uma barra de rolagem lateral de poucos pixels (Relatório de Frota, 09/11). Preso no canto, não vaza. */
.tabela :is(.oculto-visual, .so-leitor) { left: 0; top: 0; }

/* caixas de relatório que rolam no alto: todas da altura da tela */
#fr-eq .rq-tabela,
#fr-sol .fr-sol-tabela,
.us-rola, .au-rola, .cb-rola, .sg-rola, .mo-rola,
#mo0 .us-tab-caixa, #mo1 .us-tab-caixa, #mp3 .us-tab-caixa {
  max-height: var(--tabela-alta);
}