/* ==========================================================================
   TNO Leaderboard Styles
   ========================================================================== */

.leaderboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 10px;
}

.leaderboard-header h1 {
    margin-bottom: 0;
}

.leaderboard-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

.leaderboard-controls select {
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 0.9rem;
    background: #fff;
}

.live-indicator {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: #27ae60;
    font-weight: 500;
}

.live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #27ae60;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Leaderboard Table */
.leaderboard-table {
    font-size: 0.85rem;
}

.leaderboard-table th {
    position: sticky;
    top: 0;
    z-index: 10;
    background: #f8f9fa;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: 0.8rem;
}

.leaderboard-table th:hover {
    background: #e8ecf0;
}

.leaderboard-table th.sorted-asc::after { content: ' \25B2'; font-size: 0.65rem; }
.leaderboard-table th.sorted-desc::after { content: ' \25BC'; font-size: 0.65rem; }

.leaderboard-table td {
    text-align: center;
    padding: 8px 6px;
    white-space: nowrap;
}

.leaderboard-table td:nth-child(1),
.leaderboard-table td:nth-child(2) {
    text-align: left;
}

.leaderboard-table td.score-cell {
    font-variant-numeric: tabular-nums;
}

/* Cut line indicator */
.leaderboard-table tr.cut-line {
    border-bottom: 3px solid #c0392b;
}

/* Rank column */
.rank-cell {
    font-weight: 700;
    color: #1a5276;
    min-width: 35px;
}

/* Name column */
.bowler-cell {
    font-weight: 500;
    min-width: 120px;
}

.bowler-cell a {
    color: #333;
}

.bowler-cell a:hover {
    color: #1a5276;
}

/* Total columns */
.total-cell {
    font-weight: 700;
    background: rgba(26,82,118,0.04);
}

.grand-total-cell {
    font-weight: 700;
    background: rgba(26,82,118,0.08);
    font-size: 0.9rem;
}

/* +/- display */
.pm-plus { color: #27ae60; font-weight: 600; }
.pm-minus { color: #c0392b; font-weight: 600; }
.pm-even { color: #888; }

/* Roll-off column */
.rolloff-cell {
    font-style: italic;
    color: #7f8c8d;
}

/* Day separator */
.day-separator th {
    background: #e8f4fd;
    color: #1a5276;
    text-align: center;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px;
}

/* R3 specific */
.win-cell { color: #27ae60; font-weight: 600; }
.loss-cell { color: #c0392b; font-weight: 600; }
.tie-cell { color: #f39c12; font-weight: 600; }

.bonus-cell {
    color: #8e44ad;
    font-weight: 500;
}

/* Lane pair display */
.lane-info {
    font-size: 0.7rem;
    color: #aaa;
    display: block;
}

/* Leaderboard tabs */
.leaderboard-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e8e8e8;
    margin-bottom: 20px;
}

.leaderboard-tab {
    padding: 10px 20px;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.leaderboard-tab:hover {
    color: #1a5276;
    text-decoration: none;
}

.leaderboard-tab.active {
    color: #1a5276;
    border-bottom-color: #1a5276;
}

/* ==========================================================================
   Responsive Leaderboard
   ========================================================================== */

@media (max-width: 768px) {
    .leaderboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .leaderboard-table {
        font-size: 0.78rem;
    }

    .leaderboard-table th,
    .leaderboard-table td {
        padding: 6px 4px;
    }

    .leaderboard-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .leaderboard-tab {
        padding: 8px 14px;
        font-size: 0.85rem;
        white-space: nowrap;
    }
}