/* Tables: .app-table for data lists. Wrap in .app-table-wrap for horizontal scrolling.
   Add data-label="Column" to every <td> to get the stacked card view on phones
   (.app-table--stack). */
.app-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--app-border);
    border-radius: var(--app-radius);
    background: var(--app-surface);
}

.app-table {
    width: 100%;
    border-collapse: collapse;
}

.app-table th,
.app-table td {
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid var(--app-border);
    text-align: left;
    vertical-align: middle;
}

.app-table th {
    color: var(--app-muted);
    font-size: var(--app-text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background: rgba(8, 5, 3, 0.25);
}

.app-table tbody tr:last-child td {
    border-bottom: none;
}

.app-table tbody tr:hover td {
    background: rgba(214, 178, 120, 0.05);
}

.app-table--compact th,
.app-table--compact td {
    padding: 0.4rem 0.6rem;
}

.app-table .is-numeric {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.app-table tr.is-active td {
    background: var(--app-primary-glow);
}

@media (max-width: 575.98px) {
    .app-table--stack thead {
        display: none;
    }

    .app-table--stack tbody tr {
        display: block;
        margin-bottom: var(--app-space-3);
        padding: var(--app-space-1) var(--app-space-2);
        border: 1px solid var(--app-border);
        border-radius: var(--app-radius);
        background: var(--app-surface);
    }

    .app-table--stack td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: var(--app-space-2);
        padding: 0.45rem 0.5rem;
    }

    .app-table--stack td:last-child {
        border-bottom: none;
    }

    .app-table--stack td::before {
        flex-shrink: 0;
        content: attr(data-label);
        color: var(--app-muted);
        font-size: var(--app-text-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .app-table-wrap:has(.app-table--stack) {
        border: none;
        background: transparent;
    }
}