﻿.club-events-leaderboard {
    margin: 32px auto;
}

    .club-events-leaderboard .row {
        padding-left: 16px;
        padding-right: 16px;
    }

.club-events-leaderboard__info {
    margin-bottom: 16px;
}

.club-events-leaderboard__info .select {
    width: 100%;
}

.club-events-leaderboard__info-group {
    display: flex;
    flex-direction: row;
}

@media (max-width: 768px) {
    .club-events-leaderboard__info-group.mobile-hidden {
        display: none;
    }
}

    .club-events-leaderboard__info-group div {
        padding: 0.5rem 1rem;
    }

    .club-events-leaderboard__info-group div:nth-of-type(2) {
        width: 75%;
    }

    .club-events-leaderboard__info-group .btn {
        margin-left: 8px;
    }

.club-events-leaderboard__info-group-label {
    background-color: #e9ecef;
    color: #333;
    width: 25%;
    border-bottom: 1px solid #ddd;
}

    .club-events-leaderboard__info-group-points {
        list-style: none;
        margin-bottom: 8px;
    }

.club-events-leaderboard__scroll-wrapper {
    overflow-x: auto;
    width: 100%;
}

.club-events-leaderboard__table {
    display: flex;
    flex-direction: column;
    min-width: 600px; /* Or however wide the full layout needs to be */
}

.club-events-leaderboard__player {
    border-bottom: 1px solid #ccc;
}

    .club-events-leaderboard__player:nth-child(odd) .club-events-leaderboard__row.main-row {
        background-color: #F9FAFB;
    }


.club-events-leaderboard__row {
    display: flex;
    padding: 10px;
}

    .club-events-leaderboard__row.main-row:hover {
        background-color: #F3F4F5 !important;
    }

.club-events-leaderboard__header {
    background: #e9ecef;
    font-weight: bold;
}

.club-events-leaderboard__cell {
    flex: 1;
    padding: 8px;
    box-sizing: border-box;
}

    .club-events-leaderboard__cell.pos-column {
        flex: 0 0 50px;
        max-width: 50px;
        width: 50px;
    }

    .club-events-leaderboard__cell.name-column {
        flex: 0 0 215px;
        max-width: 215px;
        width: 215px;
    }

    .club-events-leaderboard__cell .fa-solid {
        margin-left: 4px;
    }

    .club-events-leaderboard__cell .fa-arrow-up {
        color: green;
    }

    .club-events-leaderboard__cell .fa-arrow-down {
        color: red;
    }

    .club-events-leaderboard__cell .expand-icon .fa-solid {
        color: #ccc;
        font-size: 12px;
    }

.center {
    text-align: center;
}

.club-events-leaderboard__results {
    padding: 10px 20px;
    background: #f8f9fa;
    font-size: 1.3rem;
}

.club-events-leaderboard__result-header,
.club-events-leaderboard__result-row {
    display: grid;
    grid-template-columns: 0.5fr 3.5fr 1fr 1fr;
    padding: 6px 0;
}

@media (max-width: 768px) {
    .club-events-leaderboard__result-header,
    .club-events-leaderboard__result-row {
        grid-template-columns: 0.5fr 1fr 1fr 1fr;
    }
}

.club-events-leaderboard__result-header {
    font-weight: bold;
    border-bottom: 1px solid #ccc;
    margin-bottom: 6px;
}


/*.club-events-leaderboard__leaderboard-item {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
}

.club-events-leaderboard__row {
    display: flex;
    flex-wrap: wrap;
    background: #f9f9f9;
    border-bottom: 1px solid #ddd;
}

    .club-events-leaderboard__row:hover {
        background-color: #F3F4F5;
    }

.club-events-leaderboard__cell {
    flex: 1;
    padding: 8px 10px;
    min-width: 90px;
    box-sizing: border-box;
    word-break: break-word;
}

.club-events-leaderboard__rank {
    flex: 0 0 60px;
}

    .club-events-leaderboard__rank i {
        margin-left: 4px
    }

    .club-events-leaderboard__rank .fa-arrow-up {
        color: green;
    }

    .club-events-leaderboard__rank .fa-arrow-down {
        color: red;
    }

.club-events-leaderboard__name {
    flex: 2;
}

.center {
    text-align: center;
}

.club-events-leaderboard__label {
    display: block;
    font-size: 1.2rem;
    color: #888;
}

.club-events-leaderboard__results {
    padding: 8px 16px;
    background-color: #fff;
    font-size: 1.5rem;
}

.club-events-leaderboard__results-header {
    background: #e9ecef;
    font-weight: 500;
}

.club-events-leaderboard__results-row:nth-child(even) {
    background: #fdfdfd;
}

.club-events-leaderboard__results-row:nth-child(odd) {
    background: #f5f5f5;
}

@media (max-width: 768px) {
    .club-events-leaderboard__cell {
        flex: 1 1 100%;
    }

    .club-events-leaderboard__row {
        flex-direction: column;
    }

    .club-events-leaderboard__label {
        display: inline;
        margin-left: 4px;
    }
}*/

.club-events-leaderboard__row,
.club-events-leaderboard__row * {
    cursor: pointer;
}

.club-events-leaderboard__loader {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px;
}