/* 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.data-table--no-hover tbody tr:hover { background: transparent; }
.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .center { text-align: center; 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; }
/* Grouped dropdowns + quick toggle (ADR-061), shared by the dashboard table and the projects register:
   a wide search box with the "My projects only" toggle beside it, then a row of filter chips with Clear
   beside them and the sort pushed to the right by the spacer. Both rows wrap on a narrow window. */
.table-toolbar--stacked { flex-direction: column; align-items: stretch; gap: var(--spacing-4); }
.table-toolbar__row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--spacing-3); }

.table-search { position: relative; display: flex; align-items: center; flex: 1 1 18rem; min-width: 0; }
.table-search .icon { position: absolute; left: var(--spacing-4); color: var(--color-text-muted); pointer-events: none; }
.table-search input {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4) var(--spacing-3) calc(var(--spacing-4) + 28px);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface-alt); color: var(--color-text);
    font-size: var(--font-size-md);
}
.table-search input:focus { background: var(--color-surface); border-color: var(--color-primary); outline: none; }

.toggle-box {
    display: inline-flex; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-4);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-surface); color: var(--color-text);
    font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
    white-space: nowrap; cursor: pointer; user-select: none;
}
.toggle-box:hover { background: var(--color-surface-alt); }
.toggle-box input { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: var(--color-primary); cursor: pointer; }
.toggle-box:has(input:checked) { border-color: var(--color-primary-soft-border, var(--color-primary)); }

.table-toolbar__clear {
    padding: var(--spacing-2) var(--spacing-1); border: 0; background: none; cursor: pointer;
    color: var(--color-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
}
.table-toolbar__clear:hover { text-decoration: underline; }
.table-toolbar__clear[hidden] { display: none; }
.table-toolbar__sort-label { font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (max-width: 640px) {
    .table-toolbar__spacer { display: none; }
    .toggle-box { flex: 1 1 100%; }
}

/* Projects register quick edit (ADR-055): the tick column only exists while the mode is on. */
.quick-edit-col { display: none; width: 2.5rem; padding-right: 0 !important; }
.is-quick-edit .quick-edit-col { display: table-cell; }
.quick-edit-tick { width: 1rem; height: 1rem; accent-color: var(--color-primary); cursor: pointer; }
.is-quick-edit .data-table tbody tr { cursor: pointer; }
.is-quick-edit .data-table tbody tr.is-selected { background: var(--color-primary-soft, var(--color-surface-alt)); }

.batch-bar {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-3);
    padding: var(--spacing-3) var(--spacing-5);
    border-bottom: 1px solid var(--color-border);
    background: var(--color-primary-soft, var(--color-surface-alt));
}
.batch-bar[hidden] { display: none; }
.batch-bar__count { font-weight: var(--font-weight-semibold); color: var(--color-primary); min-width: 6.5rem; }
.batch-bar__field { display: inline-flex; align-items: center; gap: var(--spacing-2); }
.batch-bar__field[hidden] { display: none; }
.batch-bar__label { font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.batch-bar .select, .batch-bar .input { min-width: 14rem; padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
.batch-bar__new-client { min-width: 16rem; }
.batch-bar__message { flex-basis: 100%; margin: 0; font-size: var(--font-size-sm); }
.batch-bar__message--ok { color: var(--color-success); }
.batch-bar__message--error { color: var(--color-danger); }

/* 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, .pagination__btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
/* A server-rendered pager (Notifications) links page to page; the page count sits beside the current page. */
a.pagination__btn { text-decoration: none; }
.pagination__info-pages { font-size: var(--font-size-sm); color: var(--color-text-muted); }

/* Column widths for <data-table widths="…"> — whole percentages, one class per value. */
.col-w-1 { width: 1%; }
.col-w-2 { width: 2%; }
.col-w-3 { width: 3%; }
.col-w-4 { width: 4%; }
.col-w-5 { width: 5%; }
.col-w-6 { width: 6%; }
.col-w-7 { width: 7%; }
.col-w-8 { width: 8%; }
.col-w-9 { width: 9%; }
.col-w-10 { width: 10%; }
.col-w-11 { width: 11%; }
.col-w-12 { width: 12%; }
.col-w-13 { width: 13%; }
.col-w-14 { width: 14%; }
.col-w-15 { width: 15%; }
.col-w-16 { width: 16%; }
.col-w-17 { width: 17%; }
.col-w-18 { width: 18%; }
.col-w-19 { width: 19%; }
.col-w-20 { width: 20%; }
.col-w-21 { width: 21%; }
.col-w-22 { width: 22%; }
.col-w-23 { width: 23%; }
.col-w-24 { width: 24%; }
.col-w-25 { width: 25%; }
.col-w-26 { width: 26%; }
.col-w-27 { width: 27%; }
.col-w-28 { width: 28%; }
.col-w-29 { width: 29%; }
.col-w-30 { width: 30%; }
.col-w-31 { width: 31%; }
.col-w-32 { width: 32%; }
.col-w-33 { width: 33%; }
.col-w-34 { width: 34%; }
.col-w-35 { width: 35%; }
.col-w-36 { width: 36%; }
.col-w-37 { width: 37%; }
.col-w-38 { width: 38%; }
.col-w-39 { width: 39%; }
.col-w-40 { width: 40%; }
.col-w-41 { width: 41%; }
.col-w-42 { width: 42%; }
.col-w-43 { width: 43%; }
.col-w-44 { width: 44%; }
.col-w-45 { width: 45%; }
.col-w-46 { width: 46%; }
.col-w-47 { width: 47%; }
.col-w-48 { width: 48%; }
.col-w-49 { width: 49%; }
.col-w-50 { width: 50%; }
.col-w-51 { width: 51%; }
.col-w-52 { width: 52%; }
.col-w-53 { width: 53%; }
.col-w-54 { width: 54%; }
.col-w-55 { width: 55%; }
.col-w-56 { width: 56%; }
.col-w-57 { width: 57%; }
.col-w-58 { width: 58%; }
.col-w-59 { width: 59%; }
.col-w-60 { width: 60%; }
.col-w-61 { width: 61%; }
.col-w-62 { width: 62%; }
.col-w-63 { width: 63%; }
.col-w-64 { width: 64%; }
.col-w-65 { width: 65%; }
.col-w-66 { width: 66%; }
.col-w-67 { width: 67%; }
.col-w-68 { width: 68%; }
.col-w-69 { width: 69%; }
.col-w-70 { width: 70%; }
.col-w-71 { width: 71%; }
.col-w-72 { width: 72%; }
.col-w-73 { width: 73%; }
.col-w-74 { width: 74%; }
.col-w-75 { width: 75%; }
.col-w-76 { width: 76%; }
.col-w-77 { width: 77%; }
.col-w-78 { width: 78%; }
.col-w-79 { width: 79%; }
.col-w-80 { width: 80%; }
.col-w-81 { width: 81%; }
.col-w-82 { width: 82%; }
.col-w-83 { width: 83%; }
.col-w-84 { width: 84%; }
.col-w-85 { width: 85%; }
.col-w-86 { width: 86%; }
.col-w-87 { width: 87%; }
.col-w-88 { width: 88%; }
.col-w-89 { width: 89%; }
.col-w-90 { width: 90%; }
.col-w-91 { width: 91%; }
.col-w-92 { width: 92%; }
.col-w-93 { width: 93%; }
.col-w-94 { width: 94%; }
.col-w-95 { width: 95%; }
.col-w-96 { width: 96%; }
.col-w-97 { width: 97%; }
.col-w-98 { width: 98%; }
.col-w-99 { width: 99%; }
.col-w-100 { width: 100%; }