/* =====================================================================
   Histórico: tabela de alterações (vira lista no celular), filtros e detalhe antes × depois
   Fonte: /mockup/css/style.css (seção 16) e /mockup/js/pages/historico.js. Views: app/views/historico
   ===================================================================== */

/* No mockup, style="grid-template-columns:repeat(auto-fit, minmax(150px, 1fr))" na linha dos filtros */
.filtros-linha.filtros-linha-auto { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

.hist-tabela tbody tr { cursor: pointer; }
.hist-tabela td { font-size: var(--tamanho-md); }
.hist-data { white-space: nowrap; color: var(--texto-2); font-variant-numeric: tabular-nums; font-size: var(--tamanho-sm); }
.hist-resumo { min-width: 240px; }
/* No mockup, o resumo é um <button class="btn-link" style="font-weight:500;color:var(--texto);text-align:left"> */
.hist-resumo .btn-link { display: inline-block; font-weight: var(--peso-medio); color: var(--texto); text-align: left; }
@media (max-width: 760px) {
  .hist-tabela thead { display: none; }
  .hist-tabela, .hist-tabela tbody, .hist-tabela tr, .hist-tabela td { display: block; width: 100%; }
  .hist-tabela tr { padding: var(--espaco-3) var(--espaco-3-5); border-bottom: 1px solid var(--borda); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--espaco-1) var(--espaco-2-5); }
  .hist-tabela tr:last-child { border-bottom: 0; }
  .hist-tabela td { border: 0; padding: 0; }
  .hist-tabela td.hist-usuario { grid-column: 1; grid-row: 1 / span 2; width: auto; }
  .hist-tabela td.hist-resumo { min-width: 0; grid-column: 2; grid-row: 1; }
  .hist-tabela td.hist-meta { grid-column: 2; grid-row: 2; font-size: var(--tamanho-xs); }
  .hist-tabela td.hist-col-acao, .hist-tabela td.hist-col-entidade { display: none; }
  .hist-usuario .usuario-nome { display: none; }
}

/* Detalhe: no mockup, os valores da faixa têm style="font-size:14px" */
.historico-detalhe .resumo-item strong { font-size: var(--tamanho-md); }

.diff-tabela td, .diff-tabela th { font-size: 13.5px; vertical-align: top; }
.diff-tabela td:first-child { font-weight: var(--peso-semibold); color: var(--texto-2); width: 28%; }
.diff-tabela td { overflow-wrap: anywhere; }
.diff-tabela tr.mudou { background: var(--alerta-suave); }
.diff-tabela tr.mudou td:first-child { color: var(--alerta-texto); }
.diff-tabela tr.mudou td:first-child::after { content: " • alterado"; font-weight: var(--peso-medio); font-size: 11.5px; }
.diff-antes { color: var(--texto-2); }
.diff-tabela tr.mudou .diff-antes { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--despesa) 60%, transparent); }
.diff-tabela tr.mudou .diff-depois { font-weight: var(--peso-semibold); }

/* Rails: "Mostrar só os campos alterados" esconde as demais linhas (no mockup, o JS redesenhava a tabela).
   As alteradas vêm primeiro; a última delas perde a borda, como a última linha da tabela. */
.diff-tabela .diff-vazio { display: none; }
.historico-detalhe:has(.so-alterados:checked) .diff-tabela tbody tr:not(.mudou, .diff-vazio) { display: none; }
.historico-detalhe:has(.so-alterados:checked) .diff-tabela .diff-vazio { display: table-row; }
.historico-detalhe:has(.so-alterados:checked) .diff-tabela tr.mudou:not(:has(~ tr.mudou)) td { border-bottom: 0; }

.carregar-mais { display: flex; justify-content: center; padding: var(--espaco-4); }