/* Стили для индикаторов сортировки */
.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background-color 0.2s ease;
    padding-right: 20px;
}

    .sortable:hover {
        background-color: rgba(13, 110, 253, 0.08) !important;
    }

.non-sortable {
    opacity: 0.7;
}

/* Индикатор сортировки */
.sort-indicator {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    line-height: 0.8;
    margin-left: 6px;
    opacity: 0.25;
    transition: opacity 0.2s ease;
    font-size: 11px;
}

    .sort-indicator span {
        display: block;
        line-height: 1;
        margin: 0;
    }

.sortable:hover .sort-indicator {
    opacity: 0.6;
}

/* Активная сортировка */
.sortable.active-sort {
    background-color: rgba(13, 110, 253, 0.1) !important;
    font-weight: 600;
}

    .sortable.active-sort .sort-indicator {
        opacity: 1;
    }

/* При сортировке по возрастанию */
.sortable.sort-asc .sort-arrow-up {
    color: #0d6efd;
    font-weight: bold;
    font-size: 13px;
}

.sortable.sort-asc .sort-arrow-down {
    opacity: 0.3;
    font-size: 10px;
}

/* При сортировке по убыванию */
.sortable.sort-desc .sort-arrow-down {
    color: #0d6efd;
    font-weight: bold;
    font-size: 13px;
}

.sortable.sort-desc .sort-arrow-up {
    opacity: 0.3;
    font-size: 10px;
}

.sortable:active {
    transform: scale(0.98);
}