/* Sortable Tables Styling */

/* Sortable header styling */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    white-space: nowrap;
}

th.sortable a.sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
}

th.sortable a.sort-link:hover {
    color: #0078d4;
}

/* Sort indicator styling */
th.sortable .sort-indicator {
    display: inline-block;
    font-size: 10px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
    line-height: 1;
    min-width: 10px;
    text-align: center;
    margin-left: 4px;
}

/* Sorted state - ascending */
th.sortable.sorted-asc .sort-indicator {
    opacity: 1;
    color: #0078d4;
}

/* Sorted state - descending */
th.sortable.sorted-desc .sort-indicator {
    opacity: 1;
    color: #0078d4;
}

/* Hover effect on sortable headers */
th.sortable:hover {
    background-color: rgba(0, 120, 212, 0.05);
}

/* Focus state for accessibility */
th.sortable a.sort-link:focus {
    outline: 2px solid #0078d4;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Mobile responsive - reduce padding on small screens */
@media (max-width: 768px) {
    th.sortable a.sort-link {
        gap: 4px;
        font-size: 0.9em;
    }
    
    th.sortable .sort-indicator {
        font-size: 9px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    th.sortable:hover {
        background-color: rgba(0, 120, 212, 0.1);
    }
    
    th.sortable a.sort-link:hover {
        color: #4fc3f7;
    }
    
    th.sortable.sorted-asc .sort-indicator,
    th.sortable.sorted-desc .sort-indicator {
        color: #4fc3f7;
    }
}