/* =========================================
   Custom DataTable Pagination (Circle Style)
   Bootstrap 5 Version
   ========================================= */

/* Pagination container spacing */
.dataTables_wrapper .dataTables_paginate .pagination {
    gap: 6px !important;
}

/* Page buttons */
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link {
    border-radius: 50% !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    font-size: 13px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Active page */
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active > .page-link {
    background-color: #4CAF50 !important;
    border-color: #4CAF50 !important;
    color: #fff !important;
}

/* Hover */
.dataTables_wrapper .dataTables_paginate .pagination .page-item .page-link:hover {
    background-color: #f0f2f5 !important;
}

.dataTables_wrapper div.dataTables_info {
    padding-top: 0 !important;
}

.dataTables_length {
    display: flex;
    align-items: center;
}

.dataTables_length label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
}

.dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.dataTables_filter input {
    width: auto;
}

.dataTables_info {
    font-size: 14px;
    color: #6c757d; /* Bootstrap muted text */
    margin-top: 8px;
}

/* Kill default DataTables sorting icons (background images) */
table.dataTable thead th {
    background-image: none !important;
}

/* Explicitly hide for disabled columns even if sorting classes are present */
table.dataTable thead th.sorting_disabled::before,
table.dataTable thead th.sorting_disabled::after {
    display: none !important;
    content: "" !important;
}

/* Update Base setup to use Flexbox */
table.dataTable thead th {
    display: table-cell; /* Keep table cell behavior for alignment */
    vertical-align: middle;
    white-space: nowrap;
}

/* Create a container-like feel for the content */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
}

/* Position the icon relatively next to the text */
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
    content: "▲▼" !important;
    font-size: 9px;
    color: #cfd4da;
    display: inline-block; /* Change from absolute */
    margin-left: 8px;      /* Space between text and icon */
    vertical-align: middle;
    letter-spacing: -2px;
}

table.dataTable thead th {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

table.dataTable tbody td {
    font-size: 14px;
    text-transform: uppercase;
    text-align: center;
}

table.dataTable tbody td.no-uppercase {
    text-transform: none !important;
}