/* Sorting indicators */
th.sortable {
    cursor: pointer;
    position: relative;
    padding-right: 20px;
}

th.sortable:after {
    content: '';
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.5;
}

/* Double arrow for unsorted columns */
th.sortable:not(.sort-asc):not(.sort-desc):after {
    content: '';
    position: absolute;
    right: 5px;
    top: 40%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #ccc;
}

th.sortable:not(.sort-asc):not(.sort-desc):before {
    content: '';
    position: absolute;
    right: 5px;
    top: 60%;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
    transform: translateY(-50%);
}

th.sortable.sort-asc:after {
    border-bottom: 5px solid #000;
}

th.sortable.sort-desc:after {
    border-top: 5px solid #000;
}

th.sortable:hover:after,
th.sortable:hover:before {
    opacity: 1;
}

/* Highlight the sorted column */
th.sortable.sort-asc,
th.sortable.sort-desc {
    background-color: #f5f5f5;
}