/* Shared table look: DataTables (table.dataTable) and plain tables with class vw-table, plus their paging */
:root {
    --vw-table-head-bg: var(--vw-paper);
    --vw-table-head-border: var(--vw-border);
    --vw-table-head-text: var(--vw-muted);
}

table.dataTable, table.vw-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 0 !important; }

/* Header: light rounded bar */
table.dataTable > thead > tr > th, table.vw-table > thead > tr > th {
    background: var(--vw-table-head-bg); color: var(--vw-table-head-text); font-size: .85rem; font-weight: 600;
    padding: 1rem; border-top: 1px solid var(--vw-table-head-border); border-bottom: 1px solid var(--vw-table-head-border); white-space: nowrap; vertical-align: middle;
}
table.dataTable > thead > tr > th:first-child, table.vw-table > thead > tr > th:first-child { border-left: 1px solid var(--vw-table-head-border); border-radius: var(--vw-radius-sm) 0 0 var(--vw-radius-sm); }
table.dataTable > thead > tr > th:last-child, table.vw-table > thead > tr > th:last-child { border-right: 1px solid var(--vw-table-head-border); border-radius: 0 var(--vw-radius-sm) var(--vw-radius-sm) 0; }

/* Rows: airy, thin divider, subtle hover */
table.dataTable > tbody > tr > td, table.vw-table > tbody > tr > td { padding: 1rem; border-top: 0; border-bottom: 1px solid var(--vw-border); vertical-align: middle; background: transparent; }
table.dataTable > tbody > tr:last-child > td, table.vw-table > tbody > tr:last-child > td { border-bottom: 0; }
table.dataTable > tbody > tr:hover > td, table.vw-table > tbody > tr:hover > td { background: var(--vw-bg); }
table.dataTable th.dt-type-numeric, table.dataTable td.dt-type-numeric { text-align: left; }
table.dataTable th.dt-type-numeric div.dt-column-header { flex-direction: row; }

/* Sort indicators: small and grey, the active one in the primary colour */
table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order { opacity: .5; transform: scale(.75); }
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order { opacity: 1; color: var(--vw-primary); }
table.dataTable thead > tr > th.dt-ordering-asc, table.dataTable thead > tr > th.dt-ordering-desc { color: var(--vw-text); }
.sort-header { border: 0; background: none; padding: 0; font: inherit; color: inherit; white-space: nowrap; }
.sort-header i { color: var(--vw-muted); font-size: .75rem; margin-left: .25rem; opacity: .6; }
.sort-header.active { color: var(--vw-text); }
.sort-header.active i { color: var(--vw-primary); opacity: 1; }

/* Footer: info left, page length + paging right */
div.dt-container .dt-layout-row:last-child { margin-top: 1rem; align-items: center; }
div.dt-container .dt-info { color: var(--vw-muted); font-size: .9rem; padding: 0; }
div.dt-container .dt-length { color: var(--vw-muted); font-size: .9rem; white-space: nowrap; }
div.dt-container .dt-length select { border: 1px solid var(--vw-border); border-radius: var(--vw-radius-sm); padding: .35rem .5rem; margin-right: .4rem; background: var(--vw-surface); }
div.dt-container .dt-layout-end { display: flex; align-items: center; gap: 1rem; }
div.dt-container .dt-processing { box-shadow: var(--vw-shadow); border-radius: var(--vw-radius-sm); }

/* Paging buttons: square, bordered; current filled */
div.dt-container .dt-paging .dt-paging-button,
.vw-pagination .page-link {
    min-width: 2.25rem; height: 2.25rem; padding: 0 .6rem; margin-left: .35rem !important; display: inline-grid; place-items: center;
    border: 1px solid var(--vw-border) !important; border-radius: var(--vw-radius-sm) !important; background: var(--vw-surface); color: var(--vw-text) !important; font-weight: 600; font-size: .9rem; line-height: 1;
}
div.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current),
.vw-pagination .page-item:not(.disabled):not(.active) .page-link:hover { background: var(--vw-primary-soft) !important; border-color: var(--vw-primary-soft) !important; color: var(--vw-primary) !important; }
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover,
.vw-pagination .page-item.active .page-link { background: var(--vw-primary) !important; border-color: var(--vw-primary) !important; color: #fff !important; }
div.dt-container .dt-paging .dt-paging-button.disabled,
.vw-pagination .page-item.disabled .page-link { color: #c9bfae !important; background: var(--vw-surface) !important; }
.vw-pagination .page-link:focus { box-shadow: none; }