/* DataTable — adaptador responsivo PROVISÓRIO (ADR-009) da onda 1 do DS (bundle ds-onda1, projeto 3f1398fe).
 * Carregado DEPOIS dos widgets (ds/widgets/_styles.html). Só @media canônicas e tokens do DS: cobre o que o
 * tokens/responsive.css não alcança porque os widgets usam as classes dos cards. Sai quando o DS cobrir.
 * Upstream (cada bloco abaixo cita o item que o remove):
 *   U1 brief "data-table × viewport": os 10 designs não estão na matriz do bundle (cartão neutro único, painel night, âncora)
 *   U2 linha clicável: o cartão inteiro abrir o detalhe (DataTable.card + onRowClick); hoje o link da 1ª coluna tem ~20 px, abaixo do piso de 44
 *   U3 cabeçalho fixo (thead sticky) no tablet — fora de escopo da onda 1
 *   U4 barra de seleção em lote: acima da lista e só com seleção (no card ela mora no rodapé e aparece sempre)
 *   U5 onde mora o "Limpar" e como é a folha de filtros (o bundle esconde .sg-toolbar__filters inteiro no celular)
 *   U6 paginação a 360 px (faixa e botões quebram em duas linhas) e os botões de ordenar do thead, focáveis mesmo fora de vista */

/* ── 600–1023 px e celular: âncora e barras no painel escuro ─────────────────────────────────────────────
 * O bundle fixa `--surface`/`--surface-hover`/`--surface-active` na coluna ancorada; no design `night` (painel sempre escuro,
 * --pnl*) isso vira uma coluna branca. `var(--pnl, X)` é neutro nos demais designs: --pnl só existe no night.
 * Upstream: U1 (os 10 designs fora da matriz do bundle) e U3 (sem cabeçalho fixo, a coluna ancorada rola sob um thead comum). */
@media (max-width: 1023px) {
  :root .dt {
    --pnl-hover: color-mix(in srgb, var(--primary) 24%, var(--pnl));
    --pnl-sel: color-mix(in srgb, var(--primary) 32%, var(--pnl));
    --pnl-urg: color-mix(in srgb, var(--urgency-bar) 22%, var(--pnl));
  }
}
@media (min-width: 600px) and (max-width: 1023px) {
  :root .dt .sg-table tr > :first-child:not(.sg-check), :root .dt .sg-table tr > .sg-check, :root .dt .sg-table tr > .sg-check + * { background: var(--pnl, var(--surface)); }
  :root .dt .sg-table thead th:first-child, :root .dt .sg-table thead .sg-check + th { background: var(--pnl-2, var(--surface-sunken)); }
  :root .dt .sg-table tbody tr:hover > :is(:first-child, .sg-check + *) { background: var(--pnl-hover, var(--surface-hover)); }
  :root .dt .sg-table tbody tr.is-selected > :is(:first-child, .sg-check + *) { background: var(--pnl-sel, var(--surface-active)); }
}

/* ── Toque (celular ou ponteiro grosso): alvos de 44 px que os cards da tabela cravam menores ──────────────
 * Upstream: U2 (o alvo do link da linha), U6 (os botões de ordenar do thead). O piso de linha usa `:where()` de propósito: em
 * (0,1,1) ele PERDE para o `:root .sg-table tbody td{height:auto}` do cartão (0,2,2); com `:root .dt` ele valeria (0,3,1), venceria
 * e travaria cada linha do cartão em 44 px (no cartão o td é flex/block e `height` é teto, não piso). */
@media (max-width: 599px), (pointer: coarse) {
  :root .dt .row-act { width: var(--hit-min); height: var(--hit-min); flex: none; } /* flex:none — célula de ações do cartão é flex: sem isso o botão encolhe abaixo do piso (34 px) */
  :root .dt .dt-sort { min-height: var(--hit-min); }
  :where(.dt) .dt-table td { height: var(--hit-min); }
}

/* ── Celular (≤599 px): barra, busca e folha de filtros ───────────────────────────────────────────────────
 * Upstream: U5. `.sg-toolbar__filterbtn/__sort` são <span> do bundle (display:none no desktop, inline-flex aqui, sem regra do repo
 * sobre `display`); as pontas dt__mbfilter/dt__mbsort só dimensionam o item da barra. */
@media (max-width: 599px) {
  :root .dt { overflow: clip; } /* `overflow:hidden` mata o position:sticky da barra de seleção; clip corta igual (raio da borda incluso) */
  :root .dt__filters { flex: 1 1 100%; margin-left: 0; }
  :root .dt__filters input[type="search"] { width: 100%; } /* o piso de 16 px do campo vem do bundle (:root .sg-field), sem regra local */
  :root .dt__mobilebar { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--pnl-bd, var(--border)); background: var(--pnl, transparent); }
  :root .dt__mbfilter { flex: none; }
  :root .dt__mbsort { flex: 1 1 0; min-width: 0; }
  :root .dt__mbsort .sg-selw { min-width: 0; } /* o `.sg-selw` do SelectMenu crava min-width:180px (selectmenu.css), que sobrevive ao --block e passaria da borda do cartão a 320–370 px (o `.dt` corta); o gatilho encolhe com a faixa livre */
  :root .dt .dt-sheet__field { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); }
  :root .dt .dt-sheet__label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-muted); }
}

/* ── Celular (≤599 px): UM cartão neutro para os 10 designs ───────────────────────────────────────────────
 * Cada design decora o <td> (fundo, raio, sombra, pseudo-elementos, borda tracejada, vidro) pensando em tabela; no cartão do
 * bundle isso colide. O adaptador devolve o <td> ao neutro e deixa a decoração para a linha (tr), que o bundle estiliza.
 * Layout (largura, ancoragem, padding das pontas) é neutralizado; cor, fonte e a malha do contêiner ficam. Upstream: U1 (os 10
 * designs fora da matriz), U6 (a paginação a 360 px). */
@media (max-width: 599px) {
  :root .dt .dt__wrap { padding: 0; }
  :root .dt .sg-table tbody tr.dt-row > td { border-radius: 0; box-shadow: none; background: none; backdrop-filter: none; overflow: visible; }
  :root .dt .sg-table tbody tr.dt-row > td::after, :root .dt .sg-table tbody td.sg-check::before { content: none; } /* brilho do vidro, ponto do compacto, rótulo vazio do check */
  :root .dt .sg-table tbody td:first-child { padding-left: 0; }
  :root .dt .sg-table tbody td:last-child { padding-right: 0; }
  :root .dt .sg-table tbody td.sg-cell--actions { width: auto; } /* o `:where(.dt) .c-act{width:46px}` do shell é a coluna da TABELA; no cartão (célula flex, padding-left do bundle) prendia o botão de 44 px em 34 px */
  :root .dt .sg-table tbody tr.dt-row { transform: none; }
  :root .dt .sg-table tbody tr:is(.dt-row, .dt-empty):not(.is-urgent) { background: var(--pnl, var(--surface)); box-shadow: none; }
  :root .dt .sg-table tbody tr.dt-row.is-selected:not(.is-urgent) { background: var(--pnl-sel, var(--surface-active)); }
  :root .dt .sg-table tbody tr.dt-row.is-urgent { background: var(--pnl-urg, var(--urgency-bg)); } /* no night o tom claro da urgência sumiria */
  :root .dt .sg-table tbody tr.dt-row.is-urgent > td { box-shadow: none; } /* a barra de urgência é da linha (bundle); a do <td> (extras.css) dobraria */
  :root .dt .sg-table tbody td::before { color: var(--pnl-sub, var(--text-muted)); }
  :root .dt .sg-table tbody td.sg-cell--demoted:not(.sg-check) { grid-column: body / end; grid-row: auto; justify-content: space-between; text-align: right; font-size: inherit; font-weight: inherit; padding-bottom: 0; } /* Column(title) em outra coluna: a 1ª deixa de ser título */
  :root .dt .sg-table tbody td.sg-cell--demoted:not(.sg-check)::before { content: attr(data-label); }
  :root .dt .sg-table tbody tr.dt-empty > td { display: block; text-align: center; }
  :root .dt .sg-table tbody tr.dt-empty > td::before { content: none; }
  :root .dt__pager { flex: 1 1 100%; margin-left: 0; } /* sg-pager centraliza os botões (bundle) */
  :root .dt .dt__range { margin-right: 0; } /* a faixa "1–25 de N" ocupa a linha e fica centrada pelo `.sg-table__range` do bundle (vem ao lado de .dt__range no _foot.html); só falta zerar os 6 px de margem do card, que a descentralizariam */
}

/* ── Celular (≤599 px): barra de seleção fixa no topo da lista ────────────────────────────────────────────
 * No card a barra (.dt__bulk) mora no RODAPÉ e aparece sempre; o bundle assume uma barra acima da lista só com seleção.
 * Só com `.has-sel`: o rodapé vira `display:contents` (a barra e a paginação passam a filhos do miolo, que vira coluna) e a
 * barra sobe com `order` e fica sticky (já vem de `.sg-table__bulk`). Sem seleção nada muda; "Exportar" continua no rodapé. Upstream: U4. */
@media (max-width: 599px) {
  :root .dt.has-sel .dt__content { display: flex; flex-direction: column; background: var(--pnl, transparent); }
  :root .dt.has-sel .dt__foot { display: contents; }
  :root .dt.has-sel .dt__bulk { order: -1; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--pnl-bd, var(--border)); background: var(--pnl-2, var(--surface-elevated)); box-shadow: var(--shadow-sm); }
  :root .dt.has-sel .dt__pager { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--pnl-bd, var(--border)); }
}