/* ══ A TABELA RICA — o CSS do kit, num arquivo só (16/09/2026) ══════════════
 *
 * O kit de tabela (`rich_filter` · `table_xcols` · `card_fields` ·
 * `table_cards` · `card_filter`) é o PILAR das duas visualizações desta casa:
 * no computador o filtro mora no cabeçalho da coluna; no celular, a linha vira
 * card e o filtro vira o painel "🔍 Filtros".
 *
 * ⚠️⚠️ **O CSS DELE MORAVA EM TRÊS LUGARES, E NENHUM ALCANÇAVA O HUB.** Um
 * `<style>` dentro do `layouts/base.html` (o filtro por coluna) e dois blocos
 * no meio do `app.css` (o modo Cards e o painel de filtros). O hub tem layout e
 * `:root` próprios e não carrega nenhum dos dois — e por isso a lista de
 * Usuários do hub nasceu com os atributos do kit (`data-richfilter`,
 * `data-cardable`…) e **nunca teve filtro nenhum**: nem o JS era carregado.
 * Ninguém viu, porque atributo sem script não dá erro.
 *
 * Mesma lição dos carregadores do portal e do `card_wizard.css`: componente é
 * JS, CSS **e** markup, e a camada que o usa precisa dos três. Uma fonte, dois
 * `<link>` — o do `base.html` (no MESMO ponto da cascata em que o `<style>`
 * estava, depois do `app.css`) e o do `hub/_layout.html`.
 *
 * ⚠️ Token do app usado aqui leva fallback em CADEIA (app → hub → literal): no
 * hub não existe `--brand-grad`, e `var()` sem fallback de token inexistente é
 * a aba ativa BRANCA sobre fundo branco, sem erro nenhum.
 * `test_tabela_rica_em_toda_camada.py` cobra.
 */

/* ── 1 · o filtro por coluna (rich_filter.js) ─────────────────────────────── */
/* ── rich_filter.js — tabela + cabeçalho por coluna (rótulo em cima · operador+input NA MESMA LINHA) ── */
table[data-richfilter] { border-collapse: separate; border-spacing: 0; }
table[data-richfilter] thead th.rf-th {
    vertical-align: top; padding: 9px 10px 8px; background: #f5f8fb;
    border-bottom: 1px solid #e6ecf2; }
.rf-label {
    display: inline-flex; align-items: center; gap: 4px; user-select: none; white-space: nowrap;
    font-weight: 700; font-size: 0.68rem; letter-spacing: 0.03em; text-transform: uppercase;
    color: #7c8ba0; margin-bottom: 7px; }
.rf-label:hover { color: var(--primary, #11ADB4); }
.rf-sort { color: var(--primary, #11ADB4); font-size: 0.9em; }
/* operador + input LADO A LADO (mesma linha), quebra só se a coluna for muito estreita */
.rf-fwrap { display: flex; flex-flow: row wrap; align-items: center; gap: 4px; min-width: 0; }
.rf-op {
    flex: 0 0 auto; font-size: 0.66rem; padding: 3px 5px; border: 1px solid #dbe2ea; border-radius: 6px;
    background: #fff; color: #64748b; max-width: 100%; cursor: pointer; }
.rf-in {
    flex: 1 1 64px; font-size: 0.74rem; padding: 4px 7px; border: 1px solid #dbe2ea; border-radius: 6px;
    min-width: 0; box-sizing: border-box; background: #fff; }
.rf-in2 { flex: 1 1 56px; margin: 0; }
.rf-in::placeholder { color: #aab4c0; }
.rf-in:focus, .rf-op:focus { outline: none; border-color: var(--primary, #11ADB4); box-shadow: 0 0 0 3px rgba(17,173,180,0.13); }
/* Corpo: alinha ao topo (linhas que quebram) + zebra + hover + separadores suaves */
table[data-richfilter] tbody td { vertical-align: top; line-height: 1.45; border-bottom: 1px solid #f1f4f8; }
table[data-richfilter] tbody tr:nth-child(even) td { background: #fcfdff; }
table[data-richfilter] tbody tr:hover td { background: #eef8f9; }
table[data-richfilter] tbody tr:last-child td { border-bottom: none; }
/* Toolbar + paginação */
.rf-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 8px; font-size: 0.8rem; }
/* "filtro lembrado" — chamado #28: a tabela com `data-rf-lembra` restaurou um
   filtro da última ação nesta sessão e DIZ isso, senão a linha que não aparece
   parece venda sumida. Some no "Limpar", junto com a memória. */
.rf-lembrado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600; color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; white-space: nowrap; }
.rf-toolbar .rf-btn { padding: 5px 12px; border-radius: 7px; border: 1px solid #dbe2ea; background: #fff; color: #55627a; cursor: pointer; font-size: 0.78rem; font-weight: 600; transition: background .12s; }
.rf-toolbar .rf-btn:hover { background: #f1f5f9; }
.rf-toolbar .rf-btn.rf-csv { background: #0f766e; color: #fff; border: none; }
.rf-toolbar .rf-btn.rf-csv:hover { background: #0e6b63; }
/* ⚠️ **O ESPAÇADOR `flex:1` DAVA UMA LINHA INTEIRA AO CSV.** No celular ele
   come todo o espaço que sobra depois de "Campos" e "Limpar", e o CSV, que
   não cabe mais na linha, embrulha sozinho: *"1 linha inteira só pra um
   botão de CSV"* (Marcos, 01/09/2026). Fora do desktop o espaçador some e
   os três botões ficam juntos, à direita da contagem. */
.rf-toolbar .rf-toolbar-gap { flex: 1; }
@media (max-width: 680px) {
  /* ⚠️ `nowrap` + rolagem lateral: com `wrap`, bastava faltar 20px pro CSV
     cair sozinho numa linha inteira — e dentro de um `.card` (que tem
     padding) faltava sempre. Uma faixa que rola cabe em qualquer largura e
     não empurra a lista pra baixo. */
  .rf-toolbar { gap: 6px; flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch; }
  .rf-toolbar .rf-toolbar-gap { flex: 0 0 auto; }
  .rf-toolbar > span:first-child { flex: 0 0 auto; white-space: nowrap; }
  .rf-toolbar .rf-btn { flex: 0 0 auto; padding: 5px 10px; white-space: nowrap; }
}
.rf-pager { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 12px 6px 4px; font-size: 0.8rem; }
.rf-pager .rf-pg-btn { padding: 5px 14px; border-radius: 7px; border: 1px solid #dbe2ea; background: #fff; color: #55627a; cursor: pointer; font-size: 0.78rem; font-weight: 600; }
.rf-pager .rf-pg-btn:hover:not(:disabled) { background: #f1f5f9; }
.rf-pager .rf-pg-btn:disabled { opacity: 0.4; cursor: default; }
.rf-pager .rf-pg-info { color: #7c8ba0; font-variant-numeric: tabular-nums; font-weight: 600; }

/* ── 2 · Tabela × Cards (table_cards.js) ──────────────────────────────────── */
/* ── O card empilhado (table_cards.js) — o modo "Cards" do seletor de três vistas.
   O alternador de duas opções (`.tbl-view-toggle`) que morava aqui saiu em
   16/09/2026: quem troca o modo é o `.vistas`, logo abaixo.
   Card-view NÃO depende de media query: vale em qualquer largura (o usuário
   escolhe). Os !important vencem as regras mobile genéricas de tabela. */
.tbl-cards { display: block !important; width: 100% !important; min-width: 0 !important; }
.tbl-cards thead { display: none !important; }
.tbl-cards tbody { display: block; width: 100%; }
.tbl-cards tbody tr { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px; padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 12px;
  margin-bottom: 10px; background: #fff; }
/* Linha escondida pelo rich_filter (inline `display:none`) tem que VENCER o grid
   !important acima — senão, no modo Cards, o filtro conta certo mas o card continua
   aparecendo. Vale pra toda tabela turbinada (rich_filter + cards). */
.tbl-cards tbody tr[style*="display: none"] { display: none !important; }
/* Célula estrutural vazia (ex.: coluna do botão ➕ do table_xcols) não é dado —
   no modo Cards ela viraria um rótulo solto ("+"). Some com ela. */
.tbl-cards tbody tr td:empty { display: none !important; }
.tbl-cards tbody tr td {
  display: flex !important; flex-direction: column; gap: 2px; padding: 0 !important; border: none !important;
  min-width: 0 !important; max-width: none !important; white-space: normal !important;
  position: static !important; box-shadow: none !important; text-align: left !important; height: auto !important;
}
.tbl-cards tbody tr td::before {
  content: attr(data-label); font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-soft, #94a3b8);
}
.tbl-cards tbody tr td:first-child { grid-column: 1 / -1; font-weight: 700; font-size: .95rem; }
/* a 1ª célula É o título do card — não repetir o rótulo da coluna ("Linha" etc.) */
.tbl-cards tbody tr td:first-child::before { display: none; }
/* célula sem rótulo (ações) ocupa a linha toda e não mostra label vazio */
.tbl-cards tbody tr td:not([data-label])::before { display: none; }
.tbl-cards tbody tr td:not([data-label]) { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; gap: 6px; }

/* ── 3 · o painel de filtros do modo Cards (card_filter.js) ────────────────── */
/* ── Construtor de filtros de cards (card_filter.js) — mesmo visual do deck de
   Pagamentos do Fluxo de Caixa. Usado em tabelas rich_filter[data-card-filter]. ── */
.cf-host { margin: 8px 0 10px; }
.fcfilter { border: 1px solid #e2e8ed; border-radius: 12px; background: #fff; margin-bottom: 10px; }
.fcfilter-sum { cursor: pointer; padding: 9px 12px; font-size: .85rem; font-weight: 700; color: #1c3040; list-style: none; display: flex; align-items: center; gap: 6px; }
.fcfilter-sum::-webkit-details-marker { display: none; }
.fcfilter-count { color: #2563eb; font-weight: 700; }
.fcfilter-body { padding: 0 12px 12px; }
.fcfilter-rows { display: flex; flex-direction: column; gap: 8px; }
.fcfilter-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fcfilter-field, .fcfilter-op, .fcfilter-val { padding: 6px 8px; border: 1px solid #d1d9e0; border-radius: 8px; font-size: .8rem; min-width: 0; }
.fcfilter-field { flex: 1 1 130px; } .fcfilter-op { flex: 1 1 120px; }
.fcfilter-vals { display: flex; gap: 6px; flex: 2 1 160px; }
.fcfilter-val { flex: 1 1 80px; width: 100%; }
.fcfilter-rm { border: 1px solid #fecaca; background: #fee2e2; color: #991b1b; border-radius: 8px; width: 30px; height: 32px; cursor: pointer; font-size: 1rem; flex: 0 0 auto; }
.fcfilter-tools { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ── 4 · as TRÊS visualizações (vistas.js) ─────────────────────────────────
   Tabela · Cards · Deck num seletor só. Controle segmentado: a vista da vez é o
   gradiente da marca no trilho — o mesmo desenho das abas de seção do hub,
   porque é a mesma pergunta ("de que jeito eu quero ver isto?"). */
.vistas { display: flex; gap: 3px; background: #e8edf1; border-radius: 11px; padding: 3px; margin: 6px 0 10px;
  width: fit-content; max-width: 100%; }
.vistas button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0;
  background: transparent; color: #526070; border-radius: 8px; padding: 6px 12px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; min-width: 0; }
.vistas button svg { width: 15px; height: 15px; flex: 0 0 auto; }
.vistas button:hover { color: var(--ink, var(--text, #1b2733)); }
/* ⚠️ TEXTO BRANCO SOBRE O GRADIENTE DA MARCA — o "switcher padrão" da casa
   (`.tbl-view-toggle button.active`, a aba ativa do wizard). *"traga a parte
   colorida com texto branco do switcher padrão pra ele"* (Marcos, 16/09/2026). */
.vistas button.on { background: var(--brand-grad, var(--grad, linear-gradient(118deg, #8fcb3a, #11adb4)));
  color: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); }
.vistas button.on:hover { color: #fff; }
@media (max-width: 680px) {
  .vistas { width: 100%; }
  .vistas button { flex: 1 1 0; }
}

/* O painel de filtros das três vistas: a contagem e o "filtro lembrado" moram no
   RESUMO (lê-se sem abrir), e a barra da lista mora nas ferramentas. */
.vistas-filtros { margin: 0 0 10px; }
.vistas-filtros .fcfilter { margin-bottom: 0; }
.vistas-filtros .fcfilter-sum { flex-wrap: wrap; }
.vistas-total { margin-left: auto; font-weight: 600; color: #627385; font-size: .8rem; display: inline-flex; gap: 6px; align-items: center; }
.vistas-total + .vistas-total { margin-left: 0; }
.vistas-filtros .fcfilter-tools .rf-btn { padding: 6px 12px; border-radius: 8px; border: 1px solid #dbe2ea; background: #fff;
  color: #55627a; cursor: pointer; font-size: .8rem; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.vistas-filtros .fcfilter-tools .rf-btn.rf-csv { background: #0f766e; color: #fff; border: none; }
/* "Campos" é do card (empilhado ou do baralho); no modo Tabela quem escolhe
   coluna é o ➕ do cabeçalho. A regra acima dá `display` ao botão e ganharia do
   `.cf-fields-btn{display:none}` do card_fields — por isso ela é repetida aqui. */
html:not(.tblview-cards) .vistas-filtros .fcfilter-tools .cf-fields-btn { display: none; }

/* O envelope que o seletor cria quando a tabela não tem um — é ele (e só ele) que
   o Deck esconde. Rola de lado como qualquer tabela larga desta casa. */
.vistas-envolve { overflow-x: auto; min-width: 0; max-width: 100%; }