/* Tabelas do portal: o que `portal.ui.componentes.tabela` monta.

   Revisão visual da operação de teste OPTESTE (27/09/2026). No celular a
   tabela tinha 860 px de largura mínima e rolava de lado dentro do cartão sem
   sinal nenhum: apareciam de 1 a 3 colunas, cortadas no meio da palavra, e
   ficavam escondidas à direita as ações que só existem ali (assinar,
   analisar, enviar a semana, editar, apagar, aprovar, recusar, responder,
   concluir, PDF, cancelar), com Status, prazos e valores. No computador a
   mesma largura fixa passava da borda do cartão do Meu Dia (696 px a 1366).

   Aqui, e não em classe do Tailwind: o CSS do Dash 4 entra sem camada e vence
   as utilidades em camada do Tailwind 4 da imagem, e classe nova só existe no
   ar depois de recompilar o CSS (ver assets/30-campo-data.css). As regras
   têm mais de uma classe para vencer também o CDN do Tailwind 3 do
   desenvolvimento, que entra sem camada. */

/* A caixa não empurra o cartão: se a tabela não couber, ela rola aqui dentro. */
.tabela-caixa {
  position: relative;
  min-width: 0;
  max-width: 100%;
}

.tabela-rolagem {
  overflow-x: auto;
}

/* Sombra na borda que ainda esconde colunas. As classes `mais-a-direita` e
   `mais-a-esquerda` vêm de assets/36-tabela.js, que mede a rolagem; sem
   rolagem nenhuma, a sombra não aparece. */
.tabela-caixa::before,
.tabela-caixa::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2.5rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-out;
  z-index: 1;
}

.tabela-caixa::after {
  right: 0;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  box-shadow: inset -12px 0 10px -10px rgba(12, 26, 51, 0.3);
}

.tabela-caixa::before {
  left: 0;
  background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92));
  box-shadow: inset 12px 0 10px -10px rgba(12, 26, 51, 0.3);
}

.tabela-caixa.mais-a-direita::after,
.tabela-caixa.mais-a-esquerda::before {
  opacity: 1;
}

@media (min-width: 640px) {
  /* 10 px de margem de cada lado, e não os 12 do token: o Registro de
     Atividades do Meu Dia, com o lápis e a lixeira, pedia 698 px num cartão
     de 696 a 1366 px de tela. */
  .tabela > thead > tr > th,
  .tabela > tbody > tr > td {
    padding-left: 0.625rem;
    padding-right: 0.625rem;
  }

  /* A ação da linha (última coluna com botão ou link; a `tabela()` marca)
     fica presa à direita: se a tabela rolar, ela continua à vista. A sombra,
     então, sai na borda dela, e não por cima dela. */
  .tabela.tabela-com-acao > thead > tr > th:last-child,
  .tabela.tabela-com-acao > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    background-color: #ffffff;
  }

  /* O neutral-50 a 60% do `hover` da linha, já sobre o branco. */
  .tabela.tabela-com-acao > tbody > tr:hover > td:last-child {
    background-color: #fcfcfc;
  }

  .tabela-caixa.com-acao::after {
    display: none;
  }

  .tabela-caixa.com-acao.mais-a-direita .tabela-com-acao > thead > tr > th:last-child,
  .tabela-caixa.com-acao.mais-a-direita .tabela-com-acao > tbody > tr > td:last-child {
    box-shadow: -12px 0 10px -10px rgba(12, 26, 51, 0.3);
  }
}

/* A linha escondida por um filtro no navegador (o filtro por linha de serviço
   do Quadro de Colaboradores, 28/10/2026, põe `hidden` na <tr>). No celular a
   linha é cartão com `display: block`, que vence o `[hidden]` do navegador e
   do Tailwind 3 do desenvolvimento: sem esta regra, o cartão continuava lá. */
.tabela-caixa .tabela > tbody > tr[hidden] {
  display: none;
}

/* A última linha à vista sem o traço de baixo, como a última da tabela tem
   (`last:border-0` do `TABELA_LINHA`). O `:last-child` é a última do HTML, e
   com o filtro do Quadro ela pode estar escondida (quem saiu fica no fim):
   sobrava um traço solto embaixo da última linha à vista, no computador e no
   cartão do celular (revisão de 28/10/2026). */
.tabela-caixa .tabela > tbody > tr:nth-last-child(1 of :not([hidden])) {
  border-bottom-width: 0;
}

/* O valor curto numa linha só (`componentes.LETRAS_DA_CELULA_CURTA`): data,
   nome, valor em reais, horas, "BM 2", "sem anexo". A tabela dava a essas
   colunas só a largura da maior palavra, e o valor quebrava no meio ("R$ /
   7.020.000,00", "80h / 00m", o nome em três linhas), com a sobra indo para
   as colunas de texto longo (revisão OPTESTE, 28/09/2026). No celular a linha
   é cartão, e o valor quebra como precisar. */
@media (min-width: 640px) {
  .tabela > tbody > tr > td.celula-curta {
    white-space: nowrap;
  }

  /* O texto mais longo com largura para caber em duas linhas: o nome não sai
     mais em três ("TESTE / OPERACAO / TRES"), nem as Condições do Quadro em
     cinco. A largura vem da `tabela()`, pela letra de cada célula, com teto;
     os 1.25rem são a margem da célula. Se a tabela não couber no cartão com
     essas larguras, assets/36-tabela.js diminui o `--aperto` até caber (o
     Quadro de Colaboradores, com 9 colunas, a 1366 px), e só no fim solta a
     linha única do valor curto (`tabela-sem-folga`), se isso a fizer caber;
     se nem assim, ela rola com o valor curto numa linha. */
  /* `balance`: as linhas saem do mesmo tamanho, e a quebra não deixa uma
     palavra sozinha embaixo ("170h 15m de 168h / 00m"). */
  .tabela > tbody > tr > td.celula-longa {
    min-width: calc(var(--largura-minima) * var(--aperto, 1) + 1.25rem);
    text-wrap: balance;
  }

  .tabela.tabela-compacta > tbody > tr > td.celula-longa {
    min-width: calc(var(--largura-minima) * var(--aperto, 1) + 0.75rem);
  }

  /* Soltar o valor curto é o último recurso para a tabela caber, e o número
     com a unidade (`celula-valor`) fica fora: "BM / 2", "R$ / 18.000,00" e
     "0 de / 30" no Histórico e no Consumo a 1024 px. */
  .tabela.tabela-sem-folga > tbody > tr > td.celula-curta:not(.celula-valor) {
    white-space: normal;
  }

  /* A tabela que não coube: 8 px de margem na célula, e não 10, e letra de
     13 px. No Meu Dia (cartão de 696 px a 1366) o Registro de Atividades tem 9
     colunas, e "1.3 - Técnicos de Suporte" saía em três linhas. */
  .tabela.tabela-apertada:not(.tabela-compacta) {
    font-size: 0.8125rem;
    line-height: 1.25rem;
  }

  .tabela.tabela-apertada:not(.tabela-compacta) > thead > tr > th,
  .tabela.tabela-apertada:not(.tabela-compacta) > tbody > tr > td {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .tabela.tabela-apertada:not(.tabela-compacta) > tbody > tr > td.celula-longa {
    min-width: calc(var(--largura-minima) * var(--aperto, 1) + 1rem);
  }

  /* As tabelas da mesma tela que alinham as colunas (`tabela(..., alinhar=...)`,
     Horas extras e Meus documentos) não têm regra aqui: assets/36-tabela.js
     mede o conteúdo das tabelas do grupo e dá a cada coluna, no <col>, a
     largura que a mais exigente pede. A primeira versão fixava porcentagens
     com `table-layout: fixed` e `overflow-wrap: anywhere`, e a coluna estreita
     partia a data e o nome no meio ("22/09/202 / 6", "OPERACA / O DOIS"). */

  /* O nome da pessoa (com o avatar) é o último a encolher: é ele que diz de
     quem é a linha. */
  .tabela > tbody > tr > td.celula-longa.celula-pessoa,
  .tabela.tabela-apertada:not(.tabela-compacta) > tbody > tr > td.celula-longa.celula-pessoa {
    min-width: calc(var(--largura-minima) * var(--aperto-pessoa, 1) + 1.25rem);
  }
}

/* A miniatura da selfie na célula (Horas extras, "última saída às 23:00")
   ocupa a largura dela. O `max-width: 100%` que o Tailwind põe em toda
   imagem faz o navegador contar a foto como encolhível ao medir a coluna: a
   1024 px a coluna Pedido ficava com 65 px, e a foto de 40 px com o texto ao
   lado passava 14 px para cima da Justificativa. No celular a célula é a
   largura do cartão, e a regra do Tailwind fica. */
@media (min-width: 640px) {
  .tabela > tbody > tr > td img {
    max-width: none;
  }
}

/* O traço do valor que não existe, igual em toda tabela: cinza claro. Em Meus
   documentos o da Validade saía escuro e o do Prazo claro, na mesma linha. */
.tabela > tbody > tr > td.celula-vazia,
.tabela > tbody > tr > td.celula-vazia * {
  color: #a3a3a3;
}

/* Muitas colunas (Execução Mensal de Relatórios, com 14): letra e margem
   menores do `sm` para cima, para caber no cartão a 1366 px. */
@media (min-width: 640px) {
  .tabela.tabela-compacta {
    font-size: 0.75rem;
    line-height: 1.125rem;
  }

  .tabela.tabela-compacta > thead > tr > th,
  .tabela.tabela-compacta > tbody > tr > td {
    padding-left: 0.375rem;
    padding-right: 0.375rem;
  }
}

/* Texto longo de referência (a Especificação Técnica na Execução Mensal):
   no computador, 4 linhas e reticências, com o texto inteiro no `title`. Ele
   passava de 20 linhas por registro na coluna estreita. No celular a linha
   vira cartão e o texto sai inteiro. */
@media (min-width: 640px) {
  .tabela .texto-resumido {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
  }
}

/* --------------------------------------------------------------------------
   Celular: cada linha vira um cartão
   --------------------------------------------------------------------------
   O nome da coluna vai ao lado de cada valor, pelo `data-rotulo` que a
   `tabela()` põe em cada célula. Nada rola de lado e nada fica escondido: a
   ação da linha (coluna sem nome) ocupa a largura toda, embaixo dos dados.
   O cabeçalho sai da tela, mas continua para o leitor de tela. */
@media (max-width: 639px) {
  .tabela-caixa .tabela,
  .tabela-caixa .tabela > tbody,
  .tabela-caixa .tabela > tbody > tr {
    display: block;
    width: 100%;
  }

  .tabela-caixa .tabela > colgroup {
    display: none;
  }

  /* A largura que o alinhamento do computador deixou na tabela não vale no
     cartão (o script também a tira ao estreitar a janela). */
  .tabela-caixa .tabela[data-alinhar] {
    width: 100% !important;
  }

  .tabela-caixa .tabela > thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tabela-caixa .tabela > tbody > tr {
    padding: 0.625rem 0;
  }

  /* `flow-root` segura o rótulo flutuante dentro da célula: rótulo de duas
     linhas ao lado de valor de uma não invade a célula de baixo. */
  .tabela-caixa .tabela > tbody > tr > td {
    display: flow-root;
    padding: 0.25rem 0 0.25rem 7.75rem;
    overflow-wrap: break-word;
  }

  .tabela-caixa .tabela > tbody > tr > td::before {
    content: attr(data-rotulo);
    float: left;
    width: 7.25rem;
    margin-left: -7.75rem;
    font-size: 0.75rem;
    line-height: 1.25rem;
    color: #737373;
  }

  .tabela-caixa .tabela > tbody > tr > td[data-rotulo=""] {
    padding-left: 0;
  }

  .tabela-caixa .tabela > tbody > tr > td[data-rotulo=""]::before {
    content: none;
  }

  /* Célula sem nada (a ação de um período já fechado, por exemplo) não deixa
     rótulo solto no cartão. */
  .tabela-caixa .tabela > tbody > tr > td:empty {
    display: none;
  }
}