/* ============================================================
   PBI Monitor — Tabelas (fonte ÚNICA da verdade)
   ============================================================
   Bootstrap 5 define `.table { --bs-table-color: #212529; }` (literal)
   e aplica em `.table > :not(caption) > * > *` (especificidade 0,1,1).
   Para vencer sem !important, sobrescrevemos as VARIÁVEIS `--bs-table-*`
   dentro de cada variante. Bootstrap calcula `color: var(--bs-table-color)`
   nos td/th — mudar a variável arrasta toda a tabela.

   VARIANTES OFICIAIS (HTML escolhe uma):

     .pgo-table-card   → tabela dentro de glass card (dashboard, asbuilt,
                          chamados, watchlist, reports). Adapta dark/light
                          automaticamente via tokens.css.

     .pgo-table-data   → tabela de dados com fundo SEMPRE CLARO (legibilidade
                          focada em listagens administrativas: estoque,
                          campanhas, admin/cadastros, user_manager,
                          requisicoes, estoque_chips). Visual igual em
                          ambos os temas — decisão arquitetural.

     .pgo-table-compact → modificador adicional: linhas mais densas
                          (aplica junto com card ou data).

   USO no HTML:
     <div class="table-responsive pgo-table-card">
         <table class="table table-hover">...</table>
     </div>

     <div class="pgo-table-data">
         <table class="table table-striped">...</table>
     </div>

   Páginas NÃO devem definir regras `.table` próprias. Se uma página
   precisa de algo único, propor nova variante AQUI.
   ============================================================ */


/* ============================================================
   Base — tabela genérica sem variante (fallback tema-aware)
   ============================================================
   Aplica-se a `.table` solto (sem wrapper de variante). Útil para
   tabelas dentro de cards customizados. Tema dark/light via tokens.
   ============================================================ */
[data-theme="dark"] body .table {
    --bs-table-color:         var(--text-gray-3);
    --bs-table-bg:            transparent;
    --bs-table-border-color:  rgba(var(--brand-rgb), 0.15);
    --bs-table-striped-color: var(--text-gray-3);
    --bs-table-striped-bg:    rgba(255, 255, 255, 0.03);
    --bs-table-hover-color:   var(--text-gray-3);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.08);
    color: var(--text-primary);
}

[data-theme="light"] body .table {
    --bs-table-color:         var(--text-primary);
    --bs-table-bg:            transparent;
    --bs-table-border-color:  rgba(15, 23, 42, 0.08);
    --bs-table-striped-color: var(--text-primary);
    --bs-table-striped-bg:    rgba(15, 23, 42, 0.02);
    --bs-table-hover-color:   var(--text-primary);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.06);
    color: var(--text-primary);
}


/* ============================================================
   VARIANTE: .pgo-table-card
   Tabela dentro de glass card. Tema-aware via tokens.css.
   Substitui o legado `.table-container-glass`.
   ============================================================ */
.pgo-table-card .table {
    --bs-table-color:         var(--text-gray-3);
    --bs-table-bg:            transparent;
    --bs-table-border-color:  rgba(var(--brand-rgb), 0.15);
    --bs-table-striped-color: var(--text-gray-3);
    --bs-table-striped-bg:    rgba(255, 255, 255, 0.03);
    --bs-table-hover-color:   var(--text-gray-3);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.08);
    margin: 0;
    color: var(--text-primary);
}

.pgo-table-card .table thead th {
    background: var(--bg-table-head);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-bottom: 2px solid var(--border-table);
    padding: var(--space-md) var(--space-lg);
}

.pgo-table-card .table tbody tr {
    border-bottom: 1px solid var(--border-light);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pgo-table-card .table tbody tr:hover {
    background: var(--bg-hover);
}

.pgo-table-card .table tbody td {
    padding: 0.85rem var(--space-lg);
    vertical-align: middle;
    color: var(--text-gray-3);
}

@media (prefers-reduced-motion: reduce) {
    .pgo-table-card .table tbody tr { transition: none; }
}

/* Tema CLARO sobre .pgo-table-card */
[data-theme="light"] .pgo-table-card .table {
    --bs-table-color:         var(--text-primary);
    --bs-table-border-color:  rgba(15, 23, 42, 0.08);
    --bs-table-striped-bg:    rgba(15, 23, 42, 0.02);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.06);
}
[data-theme="light"] .pgo-table-card .table thead th {
    background: var(--bg-table-head);
    color: var(--text-secondary);
}
[data-theme="light"] .pgo-table-card .table tbody td {
    color: var(--text-primary);
}


/* ============================================================
   VARIANTE: .pgo-table-data
   Tabela de DADOS com fundo claro fixo. Visual igual em ambos
   os temas — escolha arquitetural para legibilidade focada em
   listagens administrativas e financeiras.
   ============================================================ */
.pgo-table-data {
    background: var(--table-light-bg);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

/* Quando o mesmo elemento é wrapper de scroll (.table-responsive) E a variante
   .pgo-table-data, o `overflow: hidden` acima anulava o `overflow-x: auto` do
   Bootstrap — em mobile a tabela ficava cortada, sem barra de rolagem horizontal.
   Especificidade 0,2,0 vence ambos sem !important; mantém o clip vertical dos
   cantos arredondados (overflow-y: hidden) e devolve o scroll horizontal. */
.table-responsive.pgo-table-data {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

.pgo-table-data .table {
    --bs-table-color:         var(--table-light-text);
    --bs-table-bg:            var(--table-light-bg);
    --bs-table-border-color:  var(--table-light-row-border);
    --bs-table-striped-color: var(--table-light-text);
    --bs-table-striped-bg:    rgba(15, 23, 42, 0.02);
    --bs-table-hover-color:   var(--table-light-text);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.08);
    margin: 0;
    color: var(--table-light-text);
    background: var(--table-light-bg);
}

.pgo-table-data .table thead {
    background: var(--bg-table-head);
}

.pgo-table-data .table thead th {
    border-bottom: 2px solid var(--border-table);
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: var(--space-md);
}

.pgo-table-data .table tbody tr {
    border-bottom: 1px solid var(--table-light-row-border);
    transition: background-color var(--transition-fast);
}

.pgo-table-data .table tbody tr:hover {
    background: rgba(var(--brand-rgb), 0.08);
}

.pgo-table-data .table tbody td {
    padding: 0.85rem var(--space-md);
    vertical-align: middle;
    color: var(--table-light-text);
}

.pgo-table-data .table tbody td strong {
    color: var(--table-light-text-strong);
}

.pgo-table-data .table td small,
.pgo-table-data .table .text-muted {
    color: var(--table-light-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .pgo-table-data .table tbody tr { transition: none; }
}

/* `.table-light` (utility Bootstrap usada em admin/cadastros, requisicoes)
   dentro de .pgo-table-data: já está claro, garantir contraste do texto. */
.pgo-table-data .table thead.table-light th {
    --bs-table-color:  var(--text-secondary);
    --bs-table-bg:     transparent;
}


/* ============================================================
   MODIFICADOR: .pgo-table-compact
   Reduz padding e font-size. Aplica junto com card ou data.
   ============================================================ */
.pgo-table-compact .table tbody td,
.pgo-table-compact .table thead th {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-sm);
}


/* ============================================================
   Cabeçalhos ordenáveis (.sortable) — fonte ÚNICA p/ TODAS as tabelas
   ------------------------------------------------------------
   O indicador de ordenação só aparece na coluna ATIVA, mostrando a
   direção. Sem ordenação ativa, o cabeçalho exibe APENAS o nome.

   Estados de ícone (definidos pelo JS de cada página):
     neutro → .bi-arrow-down-up  (oculto via CSS — só o nome aparece)
     asc    → .bi-arrow-up       (visível, seta para cima)
     desc   → .bi-arrow-down     (visível, seta para baixo)
   O elemento <i> permanece no DOM em todos os estados: o JS o localiza
   por [data-column] para alternar a classe. Não remover do HTML.
   ============================================================ */
th.sortable {
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
}

/* Espaço entre o nome e a seta direcional (apenas quando ativa) */
th.sortable i {
    margin-left: var(--space-xs);
    font-size: 0.8em;
    vertical-align: baseline;
}

/* Estado neutro: oculta a seta dupla — fica somente o nome da coluna. */
th.sortable i.bi-arrow-down-up {
    display: none;
}


/* ============================================================
   Responsivo — ajuste de densidade em mobile
   ============================================================ */
@media (max-width: 768px) {
    .pgo-table-card .table,
    .pgo-table-data .table {
        font-size: var(--text-sm);
    }
    .pgo-table-card .table thead th,
    .pgo-table-data .table thead th {
        font-size: var(--text-xs);
        white-space: nowrap;
    }
    .pgo-table-card .table td,
    .pgo-table-card .table th,
    .pgo-table-data .table td,
    .pgo-table-data .table th {
        padding: var(--space-sm) var(--space-md);
    }
}

@media (max-width: 480px) {
    .pgo-table-card .table,
    .pgo-table-data .table {
        font-size: var(--text-xs);
    }
    .pgo-table-card .table td,
    .pgo-table-card .table th,
    .pgo-table-data .table td,
    .pgo-table-data .table th {
        padding: var(--space-xs) var(--space-sm);
    }
}


/* ============================================================
   TEMA ESCURO — unificação de cor das tabelas
   ============================================================
   Decisão de produto: no tema ESCURO, TODAS as tabelas usam o
   mesmo visual "glass" da tabela do dashboard (.pgo-table-card),
   inclusive as listagens .pgo-table-data — que no tema CLARO
   permanecem com fundo branco (inalterado). Cabeçalhos de coluna
   em BRANCO + NEGRITO. Sem inline, sem !important.
   (Substitui a antiga regra de "fundo claro fixo nos dois temas"
   para a .pgo-table-data, a pedido do produto.)
   ============================================================ */

/* Cabeçalhos de coluna em branco + negrito no escuro */
[data-theme="dark"] .pgo-table-card .table thead th {
    color: var(--text-inverse);
    font-weight: var(--font-bold);
}

/* .pgo-table-data herda o visual glass do dashboard no escuro */
[data-theme="dark"] .pgo-table-data {
    background: var(--bg-chart-card);
    box-shadow: none;
    border: 1px solid rgba(var(--brand-rgb), 0.15);
}

[data-theme="dark"] .pgo-table-data .table {
    --bs-table-color:         var(--text-gray-3);
    --bs-table-bg:            transparent;
    --bs-table-border-color:  rgba(var(--brand-rgb), 0.15);
    --bs-table-striped-color: var(--text-gray-3);
    --bs-table-striped-bg:    rgba(255, 255, 255, 0.03);
    --bs-table-hover-color:   var(--text-gray-3);
    --bs-table-hover-bg:      rgba(var(--brand-rgb), 0.08);
    background: transparent;
    color: var(--text-primary);
}

[data-theme="dark"] .pgo-table-data .table thead,
[data-theme="dark"] .pgo-table-data .table thead.table-light {
    background: transparent;
}

[data-theme="dark"] .pgo-table-data .table thead th,
[data-theme="dark"] .pgo-table-data .table thead.table-light th {
    --bs-table-color: var(--text-inverse);
    --bs-table-bg:    transparent;
    background: var(--bg-table-head);
    color: var(--text-inverse);
    font-weight: var(--font-bold);
    border-bottom: 2px solid var(--border-table);
}

[data-theme="dark"] .pgo-table-data .table tbody tr {
    border-bottom: 1px solid var(--border-light);
}

[data-theme="dark"] .pgo-table-data .table tbody tr:hover {
    background: var(--bg-hover);
}

[data-theme="dark"] .pgo-table-data .table tbody td {
    color: var(--text-gray-3);
}

[data-theme="dark"] .pgo-table-data .table tbody td strong {
    color: var(--text-primary);
}

[data-theme="dark"] .pgo-table-data .table td small,
[data-theme="dark"] .pgo-table-data .table .text-muted {
    color: var(--text-secondary);
}


/* ============================================================
   Barra de paginação (.pgo-pagination)
   Injetada por pgo-table-paginator.js logo após o wrapper da
   tabela. Layout: total de registros à esquerda, controles à
   direita; empilha em mobile.
   ============================================================ */
.pgo-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding: 0 var(--space-sm);
}
.pgo-pagination[hidden] { display: none; }
.pgo-pagination .pagination { flex-wrap: wrap; }

@media (max-width: 575.98px) {
    .pgo-pagination {
        justify-content: center;
    }
    .pgo-pagination__info { width: 100%; text-align: center; }
}