/*
 * Tables (WP9; UI-Design-Principles Sec. 6). Sticky head, row hover, right-aligned
 * numbers (tabular-nums), a right-hand action column of ghost buttons, a filter bar
 * above, and a designed empty state. Wide tables scroll inside gtx-table__scroll.
 *
 * Class schema: gtx-table__scroll, gtx-table, gtx-table__filters, gtx-table__num,
 * gtx-table__actions, gtx-table__empty.
 */

.gtx-table__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gtx-s2);
    align-items: flex-end;
    padding: var(--gtx-s3);
    background: var(--gtx-surface);
    border: 1px solid var(--gtx-line);
    border-bottom: 0;
    border-radius: var(--gtx-r-m) var(--gtx-r-m) 0 0;
}

.gtx-table__scroll {
    overflow-x: auto;
    border: 1px solid var(--gtx-line);
    border-radius: var(--gtx-r-m);
}

.gtx-table__filters + .gtx-table__scroll {
    border-radius: 0 0 var(--gtx-r-m) var(--gtx-r-m);
}

.gtx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--gtx-fs-ui);
    background: var(--gtx-surface);
}

.gtx-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--gtx-z-sticky);
    background: var(--gtx-surface-2);
    color: var(--gtx-text-dim);
    text-align: left;
    font-weight: 600;
    padding: var(--gtx-s2) var(--gtx-s3);
    border-bottom: 1px solid var(--gtx-line);
    white-space: nowrap;
}

.gtx-table tbody td {
    padding: var(--gtx-s2) var(--gtx-s3);
    border-bottom: 1px solid var(--gtx-line);
    height: 40px; /* compact density (Sec. 5.3) */
    vertical-align: middle;
}

.gtx-table tbody tr:last-child td {
    border-bottom: 0;
}

.gtx-table tbody tr:hover {
    background: var(--gtx-surface-2);
}

/* Right-aligned numbers, tabular (Sec. 4/6). */
.gtx-table__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* A sortable header link (server-side sorting, Sec. 6). */
.gtx-table thead th a {
    color: inherit;
}

/* Action column, right-aligned ghost buttons. */
.gtx-table__actions {
    text-align: right;
    white-space: nowrap;
}

.gtx-table__actions .gtx-btn {
    vertical-align: middle;
}

/* Designed empty state inside the table body (Sec. 6). */
.gtx-table__empty {
    text-align: center;
    color: var(--gtx-text-dim);
    padding: var(--gtx-s6) var(--gtx-s4);
}