/* — 1. Align Show entries and Search side by side at the top — */
.wpDataTablesWrapper .dataTables_wrapper .top {
display: flex !important;
flex-wrap: nowrap !important;
justify-content: space-between;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}

/* Show entries and search get flex sizing */
.wpDataTablesWrapper .dataTables_length,
.wpDataTablesWrapper .dataTables_filter {
flex: 0 0 auto;
}

/* Optional: limit search input width */
.wpDataTablesWrapper .dataTables_filter input {
max-width: 200px;
}

/* — 2. Hide dt-buttons from the top container — */
.wpDataTablesWrapper .dt-buttons {
display: block !important; /* keep buttons visible */
margin: 10px 0 0 0;
/* We’ll reposition them with JS or by moving in DOM */
}

/* — 3. Force buttons below the table using flex order — */
.wpDataTablesWrapper .dataTables_wrapper {
display: flex;
flex-direction: column;
}

/* Move buttons to bottom */
.wpDataTablesWrapper .dt-buttons {
order: 2; /* place buttons after table */
}

/* Table itself order 1 */
.wpDataTablesWrapper .wpDataTable {
order: 1;
}

/* Show entries and search on top container */
.wpDataTablesWrapper .dataTables_wrapper .top {
order: 0;
}

/* — 4. Wrapper full width — */
.wpDataTablesWrapper,
.wpDataTablesWrapper .dataTables_wrapper {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto;
box-sizing: border-box;
}

/* — 5. Wide table styling — */
.wpDataTablesWrapper .wpDataTable {
width: 100% !important;
margin: 0 auto;
}

/* — 6. Font settings — */
table.dataTable,
table.dataTable tbody td,
table.dataTable thead th {
font-family: ‘Inter’, sans-serif !important;
font-size: 13px !important;
font-weight: 200;
}

/* — 7. Hide any SVG icons — */
.wpDataTablesWrapper svg {
display: none !important;
}

/* — 8. Make all table data uppercase — */
.wpDataTablesWrapper .wpDataTable td {
text-transform: uppercase;
}