/* =========================================================
   BLOODMOON ROLEPLAY
   CLAN MEMBERS RANKING
   stats-clan.css
   ========================================================= */

/* Base commune des classements */
@import url("/roleplay/css/stats-all-races.css");

/* =========================================================
   CLAN THEME
   ========================================================= */

.bm-clan-stats-page {
    --clan-gold: #d9b477;
    --clan-gold-light: #f2d5a4;
    --clan-red: #9b4149;
    --clan-red-dark: #532329;
}

/* =========================================================
   PAGE HEADING
   ========================================================= */

.bm-clan-stats-page .bm-stats-eyebrow {
    color: var(--clan-gold);
    letter-spacing: 0.2em;
}

.bm-clan-stats-page .bm-stats-title {
    color: var(--clan-gold-light);
}

.bm-clan-stats-page .bm-stats-heading {
    border-color: rgba(217, 180, 119, 0.22);
}

/* =========================================================
   SUMMARY
   ========================================================= */

.bm-clan-stats-page .bm-stats-summary-card {
    border-color: rgba(217, 180, 119, 0.23);
}

.bm-clan-stats-page .bm-stats-summary-value {
    color: var(--clan-gold-light);
}

/* =========================================================
   LEADERBOARD
   ========================================================= */

.bm-clan-stats-page .bm-stats-board {
    border-color: rgba(217, 180, 119, 0.22);
}

.bm-clan-stats-page .bm-stats-board-eyebrow {
    color: var(--clan-gold);
}

.bm-clan-stats-page .bm-stats-board-heading h2 {
    color: var(--clan-gold-light);
}

/* =========================================================
   THREE COLUMNS:
   RANK | CLAN NAME | MEMBER COUNT
   ========================================================= */

.bm-clan-stats-page .bm-stats-table-heading,
.bm-clan-stats-page .bm-stats-player-row {
    grid-template-columns:
        minmax(70px, 110px)
        minmax(0, 1fr)
        minmax(130px, 190px);
}

.bm-clan-stats-page .bm-stats-table-heading {
    border-bottom-color: rgba(217, 180, 119, 0.25);
}

.bm-clan-stats-page .bm-stats-table-heading span:last-child {
    text-align: right;
}

/* =========================================================
   CLAN ROWS
   ========================================================= */

.bm-clan-stats-page .bm-clan-player-row {
    border-color: rgba(217, 180, 119, 0.14);
    transition:
        background 0.2s ease,
        border-color 0.2s ease;
}

.bm-clan-stats-page .bm-clan-player-row:hover {
    background: rgba(155, 65, 73, 0.11);
    border-color: rgba(217, 180, 119, 0.42);
}

/* =========================================================
   RANK
   ========================================================= */

.bm-clan-stats-page .bm-stats-rank-number {
    color: var(--clan-gold);
}

/* =========================================================
   CLAN NAME
   ========================================================= */

.bm-clan-stats-page .bm-clan-name {
    min-width: 0;
}

.bm-clan-stats-page .bm-clan-name a {
    overflow-wrap: anywhere;
    transition: color 0.2s ease;
}

.bm-clan-stats-page .bm-clan-name a:hover {
    color: var(--clan-gold-light);
}

/* =========================================================
   MEMBER COUNT
   ========================================================= */

.bm-clan-stats-page .bm-clan-member-count {
    text-align: right;
    justify-self: end;
}

.bm-clan-stats-page .bm-clan-member-count strong {
    color: var(--clan-gold-light);
}

.bm-clan-stats-page .bm-clan-member-count small {
    color: var(--clan-gold);
    letter-spacing: 0.1em;
}

/* =========================================================
   TOP THREE
   ========================================================= */

.bm-clan-stats-page .bm-clan-player-row.rank-first {
    border-color: rgba(242, 213, 164, 0.5);
    background: rgba(217, 180, 119, 0.09);
}

.bm-clan-stats-page .bm-clan-player-row.rank-second {
    border-color: rgba(190, 190, 190, 0.3);
}

.bm-clan-stats-page .bm-clan-player-row.rank-third {
    border-color: rgba(180, 117, 65, 0.35);
}

/* =========================================================
   PAGINATION
   ========================================================= */

.bm-clan-stats-page .bm-stats-pagination-link:hover {
    border-color: var(--clan-gold);
    color: var(--clan-gold-light);
}

.bm-clan-stats-page .bm-stats-pagination-current {
    border-color: var(--clan-gold);
    background: rgba(217, 180, 119, 0.17);
    color: var(--clan-gold-light);
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .bm-clan-stats-page .bm-stats-table-heading,
    .bm-clan-stats-page .bm-stats-player-row {
        grid-template-columns:
            minmax(42px, 65px)
            minmax(0, 1fr)
            minmax(82px, 110px);

        gap: 10px;
    }

    .bm-clan-stats-page .bm-clan-member-count small {
        font-size: 0.65rem;
    }

}

@media (max-width: 480px) {

    .bm-clan-stats-page .bm-stats-table-heading,
    .bm-clan-stats-page .bm-stats-player-row {
        grid-template-columns:
            42px
            minmax(0, 1fr)
            76px;

        gap: 8px;
    }

    .bm-clan-stats-page .bm-clan-name a {
        font-size: 0.9rem;
    }

    .bm-clan-stats-page .bm-clan-member-count strong {
        font-size: 1rem;
    }

}