/* GERADO por scripts/ui-sync.sh a partir de @jabutee/ui 0.2.0 (v0.2.0). Não edite aqui. */
/* Origem: os@b56335b1 apps/dottery/app/componentes/tabela-calma.css + as regras do quadro e da tabela
   de Domínios em apps/dottery/app/estilo.css (linhas 442-453, 454-457, 479-491, 512-523, 528-533,
   539-544, 546-553, 555-568, 885, 905-908, 914, 941, 990-992, 1012). O prefixo de classe da Dottery
   virou `jb-`, o de token do filipeOS virou `--jb-`, e os tokens da Dottery (`--dt-*` e a fonte de
   texto dela) viraram o token `--jb-` equivalente (lista no relatório da tarefa 6). */
/**
 * 📋 A TABELA CALMA · a folha.
 *
 * Variante da tabela densa: carrega DEPOIS de `@jabutee/ui/css/tabela.css`, e
 * por isso a importa na primeira linha (o app importa só esta). As duas
 * escopam a raiz em `:where()` e pesam o mesmo (`:where(.quadro) .tabela`
 * contra `:where(.jb-quadro) .jb-tabela`), então no empate vence a que vem
 * depois, que é esta: com a ordem trocada, cada `td` ganhava o fio duplo da
 * base (`box-shadow: inset 1px`). A folha do app vem por último e vence as duas (lição de
 * 09/09: a folha do pacote perde da folha do app, e isso é o desenho).
 *
 * 🎨 O acabamento (moldura, densidade, fios, cabeçalho) sai das variáveis
 * `--jb-table-*` de `tokens.css`, com o neutro de padrão; uma pele muda só elas.
 * A cor sai só de token `--jb-`. Para a tinta de "ligado" (seta, véu da
 * coluna ordenada, filete da linha aberta, foco) o app acerta `--jb-accent`
 * no próprio `.jb-quadro`, como a Dottery fazia com o verde.
 */
@import "./tabela.css";


/* ---------- o quadro ---------- */

:where(.jb-quadro) {
  border-radius: var(--jb-table-radius);
  border: 1px solid var(--jb-table-frame);
  background: var(--jb-table-bg);
  --tabela-col-padding: var(--jb-table-pad-x);
}
:where(.jb-quadro.tc-quadro) { max-width: 100%; }

/* ---------- o cabeçalho ---------- */

:where(.jb-quadro) .jb-tabela { width: 100%; }
:where(.jb-quadro) .jb-tabela td { font-size: var(--jb-size-label); }
:where(.jb-quadro) .jb-tabela :is(th, td) { box-shadow: none; padding-inline: var(--tabela-col-padding); }
:where(.jb-quadro) .jb-tabela :is(th, td):not(:last-child):not(:first-child) {
  border-right: 1px solid var(--jb-table-grid);
}

/**
 * Cabeçalho com fundo próprio, um degrau acima do corpo, com a altura de uma
 * linha de dado (48 px) e fio de baixo mais forte que o das linhas. Título em
 * caixa normal, peso médio, tamanho mini. (No original eram três regras sobre
 * o mesmo seletor, a última vencendo: esta é a soma delas.)
 */
:where(.jb-quadro) .jb-tabela thead th {
  position: relative;
  padding-top: 0; padding-bottom: 0;
  height: var(--jb-table-head-h);
  color: var(--jb-table-head-ink);
  font-family: var(--jb-table-head-font);
  font-size: var(--jb-table-head-size);
  font-weight: var(--jb-table-head-weight);
  letter-spacing: var(--jb-table-head-tracking);
  text-transform: var(--jb-table-head-case);
  text-align: left;
  white-space: nowrap;
  background-color: var(--jb-table-head-bg);
  border-bottom: 1px solid var(--jb-table-head-rule);
  box-shadow: 0 1px 0 0 var(--jb-surface-2);
}
/* A base pinta o `th:first-child` com outro fio, num seletor que pesa mais que
   `thead th` sem o prefixo da Dottery: repetir o fio aqui mantém a primeira
   coluna igual às outras, como no original. */
:where(.jb-quadro) .jb-tabela thead th:first-child { box-shadow: 0 1px 0 0 var(--jb-surface-2); border-top-left-radius: var(--jb-table-radius); }
:where(.jb-quadro) .jb-tabela thead th:last-child { border-top-right-radius: var(--jb-table-radius); }
:where(.jb-quadro) .jb-tabela thead th:nth-child(-n+2) { position: sticky; }
:where(.jb-quadro) .jb-tabela thead th.col-principal { padding-left: var(--tabela-col-padding); }
:where(.jb-quadro) .jb-tabela .col-selecao { padding-inline: var(--jb-space-sm); border-inline: 0; }
/* Fonte de dado só no VALOR: o título de uma coluna de número leva `num` para
   se alinhar com o valor, e aqui só se desfaz o mono (`inherit`, a fonte que o
   cabeçalho já tem; na Dottery, a Figtree de `--fos-font-sans`). */
:where(.jb-quadro) .jb-tabela thead th.num { font-family: inherit; font-variant-numeric: normal; }

/* O título que ordena é um botão que ocupa o th inteiro. */
:where(.jb-quadro) .th-bt {
  display: inline-flex; align-items: center; gap: 4px;
  border: 0; background: transparent; padding: 0;
  color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit;
  cursor: pointer;
}
:where(.jb-quadro) .th-bt:hover { color: var(--jb-text); }
:where(.jb-quadro) .jb-tabela .th-bt { justify-content: flex-start; width: 100%; min-width: 0; }
:where(.jb-quadro) .jb-tabela .tabela-cab { justify-content: flex-start; }
:where(.jb-quadro) .jb-tabela .tabela-cab:has(+ .coluna-alca) { min-width: 0; }
:where(.jb-quadro) .jb-tabela th.num .tabela-cab { justify-content: flex-end; }
/* A seta de ordenação é a tinta de "ligado": é forma, e é a mesma cor do
   filete da linha aberta. Um sinal de ligado, uma cor. */
:where(.jb-quadro) .th-seta { color: var(--jb-accent); }

/* ---------- o corpo ---------- */

/* Altura total de 48 px, incluindo padding e fio; o separador horizontal fica,
   mas discreto: metade da tinta do fio. */
:where(.jb-quadro) .jb-tabela tbody td {
  box-sizing: border-box; padding-block: 4px; height: var(--jb-table-row-h); vertical-align: middle;
  border-bottom: 1px solid var(--jb-table-rule);
}
:where(.jb-quadro) .jb-tabela td.num {
  text-align: right;
  font-family: var(--jb-font-mono);
  font-variant-numeric: tabular-nums;
}
:where(.jb-quadro) .jb-tabela tbody tr.ln > td:not(.col-selecao) { overflow: hidden; }

/* Fundos opacos: nada atravessa a coluna presa, inclusive no hover e na linha aberta. */
:where(.jb-quadro) .jb-tabela tbody tr.ln { --linha-fundo: var(--jb-table-row-bg); background: var(--linha-fundo); cursor: pointer; }
:where(.jb-quadro) .jb-tabela tbody tr.ln > td { background: var(--linha-fundo); }
/* O hover é SUPERFÍCIE, não acento, com um fio de tinta na primeira coluna. */
:where(.jb-quadro) .jb-tabela tbody tr.ln:hover { --linha-fundo: var(--jb-table-row-hover); }
:where(.jb-quadro) .jb-tabela tbody tr.ln:hover > td:first-child { box-shadow: inset 2px 0 0 var(--jb-text); }
/* A linha aberta é SUPERFÍCIE mais filete à esquerda: o filete é o que
   sobrevive quando o hover pinta a vizinha com o mesmo cinza. */
:where(.jb-quadro) .jb-tabela tbody tr.ln[data-aberto] { --linha-fundo: var(--jb-table-row-open); }
:where(.jb-quadro) .jb-tabela tbody tr.ln[data-aberto] > td:first-child { box-shadow: inset 3px 0 0 var(--jb-accent); }
/* ⌨️ Quem chega de Tab vê onde está: o anel de foco não pinta `tr` em todo
   navegador, então o foco da linha é contorno mais um véu da mesma tinta. */
:where(.jb-quadro) .jb-tabela tbody tr.ln:focus-visible {
  outline: 2px solid var(--jb-accent);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--jb-accent) 9%, transparent);
}

/* A coluna ordenada ganha um véu da tinta de ligado, no título e no corpo. */
:where(.jb-quadro) .jb-tabela .col-ordenada { --col-tinta: var(--jb-accent); }
:where(.jb-quadro) .jb-tabela tbody tr.ln > .col-ordenada,
:where(.jb-quadro) .jb-tabela thead th.col-ordenada {
  background: color-mix(in srgb, var(--col-tinta) 9%, var(--linha-fundo, var(--jb-surface)));
  border-right-color: color-mix(in srgb, var(--col-tinta) 22%, var(--jb-ground));
}

/* ---------- o que é só da calma ---------- */

:where(.tc-n) { display: block; text-align: right; color: var(--jb-text-3); font-family: var(--jb-font-mono); font-variant-numeric: tabular-nums; }
:where(.tc-oculto) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* ⚖️ Número no CENTRO, no cabeçalho e no valor (contrato da tabela densa, régua 1). */
:where(.jb-quadro.tc-quadro) .jb-tabela td.num { text-align: center; }
:where(.jb-quadro.tc-quadro) .jb-tabela th.num .tabela-cab { justify-content: center; }