/*
 * Orena One — Tabelas & Admin (DS-04). Doc: docs/orena/design-system/16-tables-admin.md
 *
 * Só o que a DS-04 acrescenta a orena.components.css (.o-table, .o-pagination…):
 * toolbar, tipos de célula, estado de carregamento, tabela empilhada no mobile
 * e densidade touch. Carrega DEPOIS de orena.components.css. Só tokens
 * --orena-*, só seletores .o-* e [data-orena-density], sem cor fixa, sem
 * import/url (Edge offline) e sem animação ou :hover.
 */

/* Toolbar: busca + filtros acima da tabela; quebra linha em tela estreita. */
.o-table-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--orena-space-3);
    align-items: flex-start;
    justify-content: space-between;
}
.o-table-toolbar .o-search { flex: 1 1 360px; }

/* Tipos de célula (número/moeda: .o-num, ações: .o-actions já existem). */
.o-table .o-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.o-table .o-cell-muted { color: var(--orena-text-secondary); }
.o-table .o-cell-code {
    font-family: var(--orena-font-mono);
    font-size: var(--orena-font-size-xs);
    color: var(--orena-text-secondary);
    white-space: nowrap;
}
.o-table .o-cell-strong { font-weight: var(--orena-font-weight-bold); color: var(--orena-text-primary); }

/* Carregando: a região continua visível (e legível), só esmaecida. */
.o-table-wrap[aria-busy="true"] { opacity: 0.7; }

.o-pagination__resumo { margin: 0; }
.o-table__empty .o-state { padding: 0; }

/* Tabela empilhada (opt-in, `stack=True`): ≤640px cada linha vira um cartão
   "rótulo: valor". O <thead> sai da vista mas continua na árvore de
   acessibilidade; cada <td> precisa de data-label. */
@media (max-width: 640px) {
    .o-table--stack thead {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
    .o-table--stack,
    .o-table--stack tbody,
    .o-table--stack tr,
    .o-table--stack td { display: block; width: 100%; }
    .o-table--stack tr { padding: var(--orena-space-3) var(--orena-space-4); border-bottom: 1px solid var(--orena-border); }
    .o-table--stack tbody tr:last-child { border-bottom: 0; }
    .o-table--stack td {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--orena-space-1) var(--orena-space-3);
        padding: var(--orena-space-1) 0;
        border-bottom: 0;
        text-align: right;
        white-space: normal;
    }
    .o-table--stack td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 45%;
        font-size: var(--orena-font-size-xs);
        font-weight: var(--orena-font-weight-semibold);
        text-align: left;
        color: var(--orena-text-secondary);
    }
    .o-table--stack td.o-actions { justify-content: flex-end; padding-top: var(--orena-space-2); }
    .o-table--stack .o-table__empty td { justify-content: center; }
}

/* Densidade touch (PDV/tablet): linhas, ações e paginação a 44px. */
[data-orena-density="touch"] .o-table th,
[data-orena-density="touch"] .o-table td { padding-top: var(--orena-space-3); padding-bottom: var(--orena-space-3); }
[data-orena-density="touch"] .o-table .o-btn,
[data-orena-density="touch"] .o-pagination__link,
[data-orena-density="touch"] .o-filter {
    min-height: var(--orena-density-touch);
    min-width: var(--orena-density-touch);
}