/**
 * Sortable Table Header Styles
 * Retro-themed sortable column headers for leaderboard
 * 
 * Feature: leaderboard-enhancements
 * Requirements: 3.4
 */

/* ============================================
   Sortable Header Base Styles
   ============================================ */
.leaderboard-table th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: all 0.15s ease;
    padding-right: calc(var(--spacing-md) + 20px); /* Space for sort indicator */
}

.leaderboard-table th.sortable:hover {
    background: rgba(0, 255, 255, 0.15);
    color: var(--neon-green);
}

.leaderboard-table th.sortable:focus {
    outline: 2px solid var(--neon-pink);
    outline-offset: -2px;
}

/* ============================================
   Active Sort Column
   ============================================ */
.leaderboard-table th.sort-active {
    background: rgba(0, 255, 255, 0.25);
    color: var(--neon-cyan);
    border-bottom-color: var(--neon-green);
    box-shadow: inset 0 -2px 0 var(--neon-green);
}

.leaderboard-table th.sort-active:hover {
    background: rgba(0, 255, 255, 0.35);
}

/* ============================================
   Sort Direction Indicators
   ============================================ */
.sort-indicator {
    position: absolute;
    right: var(--spacing-sm);
    top: 50%;
    transform: translateY(-50%);
    font-size: 10px;
    line-height: 1;
}

.sort-indicator-active {
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green);
    animation: sortGlow 1.5s ease-in-out infinite alternate;
}

.sort-indicator-inactive {
    color: var(--cga-white);
    opacity: 0.4;
    font-size: 8px;
}

.leaderboard-table th.sortable:hover .sort-indicator-inactive {
    opacity: 0.8;
    color: var(--neon-cyan);
}

/* ============================================
   Sort Glow Animation
   ============================================ */
@keyframes sortGlow {
    from {
        text-shadow: 0 0 5px var(--neon-green);
    }
    to {
        text-shadow: 0 0 10px var(--neon-green), 0 0 15px var(--neon-cyan);
    }
}

/* ============================================
   Responsive Adjustments
   ============================================ */
@media (max-width: 768px) {
    .leaderboard-table th.sortable {
        padding-right: calc(var(--spacing-sm) + 16px);
    }
    
    .sort-indicator {
        right: var(--spacing-xs);
        font-size: 8px;
    }
    
    .sort-indicator-inactive {
        font-size: 6px;
    }
}

/* ============================================
   Accessibility - Reduced Motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .leaderboard-table th.sortable {
        transition: none;
    }
    
    .sort-indicator-active {
        animation: none;
        text-shadow: 0 0 5px var(--neon-green);
    }
}

/* ============================================
   High Contrast Mode Support
   ============================================ */
@media (prefers-contrast: high) {
    .leaderboard-table th.sortable:hover {
        background: var(--neon-cyan);
        color: var(--bg-primary);
    }
    
    .leaderboard-table th.sort-active {
        background: var(--neon-cyan);
        color: var(--bg-primary);
    }
    
    .sort-indicator-active {
        color: var(--bg-primary);
        text-shadow: none;
    }
}