/**
 * Componente: Tables
 * ─────────────────────────────────────────────────────────────────────────────
 * .table-wrap  → container com scroll horizontal e borda arredondada
 * table        → estilos globais de tabela
 */

/* ── Container da tabela ─────────────────────────────────────────────────── */

.table-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: auto;
}

/* ── Tabela ──────────────────────────────────────────────────────────────── */

table {
    border-collapse: collapse;
    min-width: 720px;
    width: 100%;
}

/* ── Células ─────────────────────────────────────────────────────────────── */

th,
td {
    border-bottom: 1px solid var(--surface-soft);
    padding: 12px 16px;
    text-align: left;
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: 0;
}

tbody tr:hover td {
    background: var(--surface-soft);
}

/* ── Cabeçalho ───────────────────────────────────────────────────────────── */

th {
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
    color: var(--ink-light);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* ── Texto auxiliar dentro de células ────────────────────────────────────── */

td b {
    color: var(--ink);
    display: block;
    font-weight: 700;
}

td .muted,
td span.muted {
    color: var(--muted);
    font-size: 12px;
}