/* §321 — modo planilha da tabela de relatório (camada report-grid.js).
   Carregado pelo Tomate (base.html) e pelo SabeTudo (ui.html): uma camada só.
   Veste a <table> existente: grade, letras de coluna (upper-alpha) e número de linha
   por contador CSS, cabeçalho e números congelados (o wrap vira a rolagem), seleção.
   Cor = tinta corrente / variáveis da folha (`--rpt-*`) e acento da skin (`--acc-rgb`,
   §147) — sem tingir status. */

.rpt-grid { position: relative; max-height: 72vh; overflow: auto; outline: none; }
.rpt-grid:focus-visible { box-shadow: 0 0 0 2px rgba(var(--acc-rgb, 37,99,235), .45); }
.rpt-grid > table { border-collapse: separate; border-spacing: 0; counter-reset: rg-row; }
.rpt-grid > table th, .rpt-grid > table td {
  border-right: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent);
}
.rpt-grid > table tbody { user-select: none; -webkit-user-select: none; }

/* cabeçalho congelado + letras de coluna (A, B, C… AA) */
/* Fundo OPACO: o preenchimento do tema pode ser translúcido (SabeTudo: `--rpt-fill-2` é
   rgba sobre a bolha) e as linhas apareciam por baixo do título. O preenchimento vai por
   cima do papel medido pela camada (`--rg-paper`, report-grid.js `paperOf`). */
.rpt-grid > table thead th {
  position: sticky; top: 0; z-index: 3;
  background-color: var(--rg-paper, var(--bubble, Canvas));
  background-image: linear-gradient(var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb)),
                                    var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb)));
  color: var(--rpt-ink-header, inherit);
  box-shadow: inset 0 -1px 0 color-mix(in srgb, currentColor 22%, transparent);
}
.rpt-grid > table thead tr:first-child { counter-reset: rg-col; }
.rpt-grid > table thead tr:first-child > th { counter-increment: rg-col; }
.rpt-grid > table thead tr:first-child > th::before {
  content: counter(rg-col, upper-alpha);
  display: block; font-size: .72em; font-weight: 400; letter-spacing: .06em;
  opacity: .62; line-height: 1.1; text-transform: none;
}

/* número de linha: coluna fixa à esquerda, dentro da 1ª célula.
   `:first-of-type` (não `:first-child`): o <template x-for> do Alpine fica dentro do <tr>. */
.rpt-grid > table tbody > tr { counter-increment: rg-row; }
.rpt-grid > table tbody > tr > td:first-of-type,
.rpt-grid > table thead tr:first-child > th:first-of-type { padding-left: 3.1em !important; }
.rpt-grid > table tbody > tr > td:first-of-type::before {
  content: counter(rg-row);
  position: absolute; left: 0; top: 0; bottom: 0; width: 2.5em;
  display: flex; align-items: center; justify-content: flex-end; padding-right: .35em;
  font-size: .78em; font-weight: 400; font-variant-numeric: tabular-nums;
  color: var(--rpt-ink-detail, currentColor); opacity: .75;
  background: var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb));
  border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.rpt-grid > table tbody > tr > td:first-of-type { position: relative; }
.rpt-grid > table thead tr:first-child > th:first-of-type::after {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2.5em;
  background: var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb));
  border-right: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}

/* seleção (acento da skin, nunca cor de status) */
.rpt-grid > table td.rg-sel { background: rgba(var(--acc-rgb, 37,99,235), .16) !important; }
.rpt-grid > table td.rg-focus { outline: 2px solid rgba(var(--acc-rgb, 37,99,235), .9); outline-offset: -2px; }

/* barra de status: fixa no pé do wrap */
.rg-status {
  position: sticky; bottom: 0; left: 0; z-index: 4;
  padding: .3rem .6rem; font-size: .78em; font-variant-numeric: tabular-nums;
  background-color: var(--rg-paper, var(--bubble, Canvas));
  background-image: linear-gradient(var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb)),
                                    var(--rpt-fill-header, var(--rpt-fill-2, #e5e7eb)));
  color: var(--rpt-ink-header, inherit);
  border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.rg-status.is-empty { opacity: .7; font-style: italic; }

/* botão ☰/⊞ (a tela só põe `data-rg-toggle`; o texto/título vem da camada) */
[data-rg-toggle] {
  font: inherit; line-height: 1; padding: .15rem .45rem; border-radius: .35rem;
  border: 1px solid color-mix(in srgb, currentColor 25%, transparent);
  background: transparent; color: inherit; cursor: pointer;
}
[data-rg-toggle][aria-pressed="true"] { background: rgba(var(--acc-rgb, 37,99,235), .16); }
[data-rg-toggle]:hover { background: rgba(var(--acc-rgb, 37,99,235), .1); }

@media print {
  .rpt-grid { max-height: none; overflow: visible; }
  .rg-status, [data-rg-toggle] { display: none; }
}