/* Data table */
/* Scroll area the <data-table> tag helper wraps every table in — a wide table scrolls inside its card
   rather than pushing the page sideways. The card's own overflow keeps the rounded corners clean. */
.data-table__scroll { overflow-x: auto; }

.data-table { width: 100%; font-size: var(--font-size-sm); }
.data-table thead th {
    text-align: left;
    padding: var(--spacing-3) var(--spacing-5);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}
.data-table tbody td {
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-surface-alt); }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .table-empty { text-align: center; color: var(--color-text-muted); padding: var(--spacing-6); }

/* Client-side paged tables (clients / sub-contractors): fix the layout so column widths stay put as you
   page — otherwise each page auto-sizes to its own content and the columns jump. Long values wrap. */
[data-simple-table] .data-table { table-layout: fixed; }
[data-simple-table] .data-table td { overflow-wrap: anywhere; }

/* Primary cell — title + sub id */
.cell-primary { display: flex; align-items: center; gap: var(--spacing-3); }
.cell-primary__icon {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    background: var(--color-primary-soft); color: var(--color-primary);
    display: grid; place-items: center; flex-shrink: 0;
}
.cell-primary__title { font-weight: var(--font-weight-semibold); color: var(--color-text); }
.cell-primary__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); }

/* Progress within a cell */
.cell-progress { display: flex; align-items: center; gap: var(--spacing-3); min-width: 120px; }
.cell-progress .progress { flex: 1; }
.cell-progress__val { font-size: var(--font-size-xs); color: var(--color-text-secondary); width: 34px; text-align: right; }

/* Toolbar above table */
.table-toolbar {
    display: flex; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-4) var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
}
.table-toolbar__spacer { flex: 1; }

/* Pagination */
.pagination { display: flex; align-items: center; gap: var(--spacing-2); justify-content: flex-end; padding: var(--spacing-4) var(--spacing-5); }
.pagination__info { margin-right: auto; font-size: var(--font-size-sm); color: var(--color-text-muted); }
.pagination__btn {
    min-width: 34px; height: 34px; padding: 0 var(--spacing-2);
    display: grid; place-items: center;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    color: var(--color-text-secondary); font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}
.pagination__btn:hover { background: var(--color-surface-alt); }
.pagination__btn.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; }