/* ═══════════════════════════════════════════════════════════════════
   TABLES — tabela de dados genérica para listagens admin
   Inclui variantes .ia-table--compact (dashboards) e helpers de cell/col.
   Extraído de base.css na Sessão 5.
   ═══════════════════════════════════════════════════════════════════ */

.ia-table-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow-x: auto;
}
/* O texto só de leitor de tela é absoluto e o wrapper não é posicionado (position: relative
   cortaria menus dentro das linhas): sem left ele fica na posição estática horizontal, na coluna
   da direita de uma tabela larga, e alarga a página inteira em tela estreita. Só o left é fixado:
   o top continua automático, para o texto ficar na linha dele (um top: 0 o levaria ao topo do
   documento e o leitor de tela rolaria a página de volta ao topo ao chegar nele). */
.ia-table-wrapper .ia-sr-only {
    left: 0;
}
.ia-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.ia-table th {
    text-align: left;
    padding: 12px 14px;
    font-weight: 600;
    color: var(--text-secondary);
    border-bottom: 1px solid var(--border-color);
    white-space: nowrap;
    font-size: .78rem;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.ia-table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    vertical-align: middle;
}
.ia-table tr:last-child td { border-bottom: none; }
.ia-table tr:hover td { background: var(--bg-elevated); }
[data-theme="light"] .ia-table tr:hover td { background: #EDE8DF; }
.ia-table-cell-mono {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: .85rem;
}
.ia-table-cell-strong { font-weight: 500; }
.ia-table-cell-strong a {
    color: var(--text-primary);
    text-decoration: none;
}
.ia-table-cell-strong a:hover,
.ia-table-cell-strong a:focus-visible { color: var(--accent-hover); }
.ia-table-cell-muted { color: var(--text-secondary); font-style: italic; }
.ia-table-cell-wide { min-width: 14rem; }

.ia-table-col-actions {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}
.ia-table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--text-secondary);
    text-decoration: none;
    transition: background .12s, color .12s;
}
.ia-table-action:hover {
    background: rgba(239, 68, 68, 0.12);
    color: var(--color-red);
}
.ia-table-action--neutral:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}
/* Ação que é <button> (exclusão via POST dentro de <form>): sem o visual nativo. */
button.ia-table-action {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ─── Tabela compacta (dashboards) ─── */
.ia-table--compact { font-size: 12px; }
.ia-table--compact th,
.ia-table--compact td { padding: 6px 8px; }

/* ─── Tabela aninhada (ex.: requisitos por regra na memória de cálculo, #287) ─── */
.ia-table-nested-row > td {
    padding: 0 14px 14px 28px;
    background: transparent;
}
.ia-table-nested-row:hover > td { background: transparent; }
.ia-table--nested {
    font-size: .82rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}
.ia-table--nested th { font-size: .7rem; padding: 8px 12px; }
.ia-table--nested td { padding: 7px 12px; }

/* ─── Cabeçalhos com o nome como foi gravado (memória de cálculo: ficha e comparações) ───
   `.ia-table--rotulos-de-linha`: o th de linha (ou de grupo de linhas) é o nome do registro,
   sem a caixa alta dos cabeçalhos de coluna, no alto da linha; grupos de linhas (`tbody`)
   separados por uma borda. `.ia-table-th-nome`: o th de coluna que leva um nome por extenso
   (a regra, na comparação de regras). ─── */
.ia-table--rotulos-de-linha tbody th:is([scope="row"], [scope="rowgroup"]) {
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    font-size: inherit;
    color: var(--text-primary);
    vertical-align: top;
}
.ia-table--rotulos-de-linha tr:last-child th,
.ia-table--rotulos-de-linha th[scope="rowgroup"] { border-bottom: none; }
.ia-table--rotulos-de-linha tbody + tbody { border-top: 1px solid var(--border-color); }
.ia-table th.ia-table-th-nome {
    vertical-align: top;
    white-space: normal;
    text-transform: none;
    letter-spacing: normal;
    font-size: .9rem;
    color: var(--text-primary);
}

/* ── Seletor de colunas (shared/tabela-colunas.js) ── */
.ia-colunas {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin: 0 0 6px;
}
.ia-colunas-painel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    width: min(560px, 92vw);
    padding: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.ia-colunas-painel[hidden] { display: none; }
.ia-colunas-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ia-colunas-acoes {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
}
.ia-colunas-retorno {
    display: block;
    margin-top: 8px;
    font-size: .82rem;
    color: var(--text-secondary);
}
.ia-colunas-retorno.is-ok { color: var(--color-green); }
.ia-colunas-retorno.is-erro { color: var(--color-red); }
.ia-table .ia-col-oculta { display: none; }

/* ─── Tabela empilhada no celular: cada linha vira um bloco com o rótulo de cada célula
   (`data-rotulo`). Nenhuma coluna some; a ordem das colunas é a ordem de leitura. ─── */
@media (max-width: 600px) {
    .ia-table--empilhada thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
    .ia-table--empilhada,
    .ia-table--empilhada tbody,
    .ia-table--empilhada tr,
    .ia-table--empilhada td {
        display: block;
        width: 100%;
    }
    .ia-table--empilhada tr {
        padding: 8px 0;
        border-bottom: 1px solid var(--border-color);
    }
    .ia-table--empilhada td {
        padding: 4px 14px;
        border-bottom: none;
    }
    .ia-table--empilhada td[data-rotulo]::before {
        content: attr(data-rotulo);
        display: block;
        font-size: .7rem;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }
}