<style>
    /* Add padding to header cells */
    table.dataTable > thead > tr > th:not(.sorting_disabled),
    table.dataTable > thead > tr > td:not(.sorting_disabled) {
        padding-right: 45px !important;
        position: relative;
    }

    /* Basic sorting styles */
    table.dataTable > thead .sorting,
    table.dataTable > thead .sorting_asc,
    table.dataTable > thead .sorting_desc {
        cursor: pointer;
        position: relative;
    }

    /* Clear default content */
    table.dataTable > thead .sorting:before,
    table.dataTable > thead .sorting:after,
    table.dataTable > thead .sorting_asc:before,
    table.dataTable > thead .sorting_asc:after,
    table.dataTable > thead .sorting_desc:before,
    table.dataTable > thead .sorting_desc:after {
        content: "" !important;
    }

    /* Inactive columns - up arrow (top) */
    table.dataTable > thead .sorting:before {
        content: "" !important;
        position: absolute;
        display: block !important;
        right: -5px;
        width: 18px !important;
        height: 18px !important;
        top: calc(50% - 10px) !important; /* Position above center */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 15 12 9 18 15"%3E%3C/polyline%3E%3C/svg%3E') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        opacity: 0.5;
    }

    /* Inactive columns - down arrow (bottom) */
    table.dataTable > thead .sorting:after {
        content: "" !important;
        position: absolute;
        display: block !important;
        right: -5px;
        width: 18px !important;
        height: 18px !important;
        top: calc(50% + 2px) !important; /* Position below center */
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        opacity: 0.5;
    }

    /* Active ascending state - single up arrow */
    table.dataTable > thead .sorting_asc:after {
        content: "" !important;
        position: absolute;
        display: block !important;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px !important;
        height: 20px !important;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 15 12 9 18 15"%3E%3C/polyline%3E%3C/svg%3E') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        opacity: 1;
    }

    /* Active descending state - single down arrow */
    table.dataTable > thead .sorting_desc:after {
        content: "" !important;
        position: absolute;
        display: block !important;
        right: 2px;
        top: 50%;
        transform: translateY(-50%);
        width: 20px !important;
        height: 20px !important;
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpolyline points="6 9 12 15 18 9"%3E%3C/polyline%3E%3C/svg%3E') !important;
        background-repeat: no-repeat !important;
        background-size: contain !important;
        opacity: 1;
    }

    /* Hide additional icons in active states */
    table.dataTable > thead .sorting_asc:before {
        display: none !important;
    }

    table.dataTable > thead .sorting_desc:before {
        display: none !important;
    }

    /* Handle scrolling tables */
    div.dataTables_scrollBody > table > thead .sorting:before,
    div.dataTables_scrollBody > table > thead .sorting:after,
    div.dataTables_scrollBody > table > thead .sorting_asc:before,
    div.dataTables_scrollBody > table > thead .sorting_asc:after,
    div.dataTables_scrollBody > table > thead .sorting_desc:before,
    div.dataTables_scrollBody > table > thead .sorting_desc:after {
        display: none !important;
    }
</style>