/* ============================================================
   bolda. — Tabelas
   Manual de Marca, seção 04. Um arquivo só, sem dependências.

   Fontes: Poppins (300, 400, 600) e JetBrains Mono (400, 500).
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&family=JetBrains+Mono:wght@400;500&display=swap">

   Estrutura:
   <div class="tb-wrap">
     <table class="tb">
       <caption>Título <span>contexto</span></caption>
       <thead><tr><th>…</th><th class="tb__num">…</th></tr></thead>
       <tbody><tr><td>…</td><td class="tb__num">…</td></tr></tbody>
       <tfoot><tr><td>Total</td><td class="tb__num">…</td></tr></tfoot>
     </table>
   </div>
   <p class="tb__fonte">Fonte: …</p>

   Escuro por padrão. Fundo claro: <table class="tb tb--claro">.
   Modificadores: tb--zebra, tb--compacta, tb--fixa (1ª coluna fixa ao rolar).
   Peças: tb__num, tb__destaque (UMA coluna ou linha por tabela),
          tb__tag (--ok, --espera, --alerta), tb__var (--sobe, --desce),
          tb__check (--nao).
   Interação (com tabelas-bolda.js): tb__btn (--primario, --icone),
          tb__ordenar, tb__marca, tb-barra, tb-rodape, tb__abrir, tb__detalhe,
          tb__acoes, tb__oculto.
   ============================================================ */

/* tokens: troque aqui para adaptar (valem para a tabela e para o contorno,
   que também guarda a barra de ações e o rodapé de botões) */
.tb-wrap,
.tb{
  --tb-bg:#111111;
  --tb-bg-2:#171717;
  --tb-borda:rgba(255,255,255,.10);
  --tb-linha:rgba(255,255,255,.10);
  --tb-linha-forte:rgba(255,255,255,.28);
  --tb-texto:#FFFFFF;
  --tb-suave:rgba(255,255,255,.62);
  --tb-lima:#80DC10;
  --tb-lima-texto:#80DC10;
  --tb-lima-fundo:rgba(128,220,16,.10);
  --tb-magenta:#A6036D;
  --tb-magenta-texto:#FF5DB8;
  --tb-f-texto:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tb-f-num:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
.tb--claro,
.tb-wrap:has(.tb--claro){
  --tb-bg:#FFFFFF;
  --tb-bg-2:#F5F5F3;
  --tb-borda:rgba(21,21,21,.14);
  --tb-linha:rgba(21,21,21,.12);
  --tb-linha-forte:rgba(21,21,21,.40);
  --tb-texto:#151515;
  --tb-suave:rgba(21,21,21,.62);
  --tb-lima-texto:#437707;     /* lima escuro: legível sobre branco */
  --tb-lima-fundo:rgba(128,220,16,.16);
  --tb-magenta-texto:#A6036D;
}

.tb-wrap{
  position:relative;             /* prende o .tb__oculto dentro da rolagem */
  max-width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--tb-borda);
  border-radius:14px;
  background:var(--tb-bg);
  color:var(--tb-texto);
  font-family:var(--tb-f-texto);
}

.tb{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--tb-bg);
  color:var(--tb-texto);
  font-family:var(--tb-f-texto);
  font-size:14px;
  font-weight:300;
  line-height:1.5;
  text-align:left;
}

/* título */
.tb caption{
  caption-side:top;
  text-align:left;
  padding:16px 16px 14px;
  font-weight:600;
  font-size:15px;
  letter-spacing:-.01em;
  color:var(--tb-texto);
  border-bottom:1px solid var(--tb-linha);
}
.tb caption span{display:block;margin-top:2px;font-weight:300;font-size:12.5px;letter-spacing:0;color:var(--tb-suave)}

/* células */
.tb th,
.tb td{
  padding:12px 16px;
  border:0;
  border-bottom:1px solid var(--tb-linha);
  vertical-align:middle;
  text-align:left;
  background:var(--tb-bg);
}
.tb thead th{
  font-family:var(--tb-f-texto);
  font-size:11px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--tb-suave);
  white-space:nowrap;
  border-bottom-color:var(--tb-linha-forte);
}
.tb tbody th{font-weight:400;color:var(--tb-texto)}
.tb tbody tr:last-child > *{border-bottom:0}
.tb tbody td,
.tb tbody th{transition:background-color .2s cubic-bezier(.22,1,.36,1)}
.tb tbody tr:hover > *{background:var(--tb-bg-2)}

/* rodapé: totais */
.tb tfoot td,
.tb tfoot th{
  border-bottom:0;
  font-weight:600;
  color:var(--tb-texto);
}

.tb tfoot tr:first-child > *{border-top:2px solid var(--tb-linha-forte)}

/* números: mono, largura fixa, à direita */
.tb .tb__num{
  text-align:right;
  font-family:var(--tb-f-num);
  font-size:.93em;
  font-weight:400;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.tb thead .tb__num{font-family:var(--tb-f-texto);font-size:11px;font-weight:600}
.tb tfoot .tb__num{font-weight:500}
.tb .tb__centro{text-align:center}

/* destaque: uma coluna (células) ou uma linha (tr) por tabela */
.tb .tb__destaque,
.tb tr.tb__destaque > *{background:var(--tb-lima-fundo)}
.tb thead .tb__destaque{color:var(--tb-lima-texto);box-shadow:inset 0 3px 0 var(--tb-lima)}
.tb tr.tb__destaque > :first-child{box-shadow:inset 3px 0 0 var(--tb-lima)}
.tb tbody tr:hover > .tb__destaque,
.tb tbody tr.tb__destaque:hover > *{background:var(--tb-lima-fundo)}

/* zebra */
.tb--zebra tbody tr:nth-child(even) > *{background:var(--tb-bg-2)}
.tb--zebra tbody tr > *{border-bottom-color:transparent}

/* compacta */
.tb--compacta{font-size:13px}
.tb--compacta th,
.tb--compacta td{padding:8px 12px}

/* primeira coluna fixa ao rolar */
.tb--fixa th:first-child,
.tb--fixa td:first-child{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--tb-linha)}
.tb--fixa tr.tb__destaque > :first-child{box-shadow:inset 3px 0 0 var(--tb-lima),1px 0 0 var(--tb-linha)}

/* status */
.tb__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;
  font-family:var(--tb-f-num);font-size:11px;font-weight:500;letter-spacing:.04em;
  white-space:nowrap;
  border:1px solid var(--tb-linha-forte);color:var(--tb-texto);
}
.tb__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.tb__tag--ok{background:var(--tb-lima);border-color:var(--tb-lima);color:#151515}
.tb__tag--espera{color:var(--tb-suave)}
.tb__tag--alerta{background:var(--tb-magenta);border-color:var(--tb-magenta);color:#FFFFFF}

/* variação */
.tb__var{font-family:var(--tb-f-num);font-variant-numeric:tabular-nums;white-space:nowrap}
.tb__var--sobe{color:var(--tb-lima-texto)}
.tb__var--sobe::before{content:"▲ ";font-size:.75em}
.tb__var--desce{color:var(--tb-magenta-texto)}
.tb__var--desce::before{content:"▼ ";font-size:.75em}

/* sim / não */
.tb__check{font-weight:600;color:var(--tb-lima-texto)}
.tb__check--nao{font-weight:300;color:var(--tb-suave)}

/* fonte, abaixo da tabela */
.tb__fonte{
  margin:8px 2px 0;
  font-family:var(--tb-f-texto);font-size:12px;font-weight:300;
  color:inherit;opacity:.7;
}

/* ---------- interação ---------- */

/* botões */
.tb__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:30px;padding:0 12px;border-radius:999px;
  border:1px solid var(--tb-linha-forte);background:transparent;color:var(--tb-texto);
  font:500 12px/1 var(--tb-f-texto);letter-spacing:0;text-transform:none;white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s cubic-bezier(.22,1,.36,1),border-color .2s cubic-bezier(.22,1,.36,1),color .2s cubic-bezier(.22,1,.36,1);
}
.tb__btn svg{width:16px;height:16px;flex:none}
.tb__btn:hover:not(:disabled){border-color:var(--tb-lima)}
.tb__btn:focus-visible,
.tb__ordenar:focus-visible,
.tb__marca:focus-visible{outline:2px solid var(--tb-lima);outline-offset:2px}
.tb__btn--primario,
.tb__btn[aria-pressed="true"]{background:var(--tb-lima);border-color:var(--tb-lima);color:#151515}
.tb__btn--primario:hover:not(:disabled),
.tb__btn[aria-pressed="true"]:hover:not(:disabled){filter:brightness(1.08)}
.tb__btn--icone{width:30px;padding:0;border-color:transparent;color:var(--tb-suave)}
.tb__btn--icone:hover:not(:disabled){border-color:var(--tb-linha-forte);color:var(--tb-texto)}
.tb__btn:disabled{opacity:.4;cursor:not-allowed}

/* coluna de ações, à direita */
.tb .tb__acoes{width:1%;text-align:right;white-space:nowrap}
.tb__acoes .tb__btn + .tb__btn{margin-left:4px}

/* texto só para leitor de tela */
.tb__oculto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ordenar: o botão fica no <th>; o estado vem de aria-sort */
.tb__ordenar{
  display:inline-flex;align-items:center;gap:6px;
  margin:0;padding:0;border:0;background:none;border-radius:3px;
  font:inherit;letter-spacing:inherit;text-transform:inherit;color:inherit;cursor:pointer;
}
.tb__ordenar::after{content:"↕";font-size:11px;letter-spacing:0;opacity:.45}
.tb__ordenar:hover{color:var(--tb-texto)}
.tb th[aria-sort="ascending"] .tb__ordenar,
.tb th[aria-sort="descending"] .tb__ordenar{color:var(--tb-lima-texto)}
.tb th[aria-sort="ascending"] .tb__ordenar::after{content:"▲";opacity:1;font-size:9px}
.tb th[aria-sort="descending"] .tb__ordenar::after{content:"▼";opacity:1;font-size:9px}

/* selecionar linhas */
.tb .tb__col-marca{width:1%;padding-right:0}
.tb__marca{width:16px;height:16px;margin:0;vertical-align:middle;accent-color:var(--tb-lima);cursor:pointer}
.tb tbody tr.tb__sel > *,
.tb tbody tr.tb__sel:hover > *{background:var(--tb-lima-fundo)}

/* barra de ações em lote e rodapé de botões: dentro do .tb-wrap, presos à esquerda ao rolar */
.tb-barra,
.tb-rodape{
  position:sticky;left:0;
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 16px;
  border-top:1px solid var(--tb-linha);
}
.tb-barra__conta{margin-right:auto;font:400 12px/1.4 var(--tb-f-num);color:var(--tb-suave)}
.tb-rodape{justify-content:flex-end}

/* linha de detalhes */
.tb__abrir svg{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.tb__abrir[aria-expanded="true"]{color:var(--tb-lima-texto)}
.tb__abrir[aria-expanded="true"] svg{transform:rotate(180deg)}
.tb tbody tr.tb__detalhe > *,
.tb tbody tr.tb__detalhe:hover > *{background:var(--tb-bg-2);color:var(--tb-suave);font-size:13px;white-space:normal}
.tb tbody tr:has(+ tr.tb__detalhe[hidden]:last-child) > *{border-bottom:0}

@media (prefers-reduced-motion:reduce){
  .tb tbody td,.tb tbody th,.tb__btn,.tb__abrir svg{transition:none}
}