/* Statistics page — scoped so dashboard tables stay untouched */

.stats-page {
    color: #3a342b;
}

.stats-title-block {
    overflow: visible;
    padding: 0;
    margin: 0 0 22px;
    border: none;
    background: none;
}

.stats-title-block::before,
.stats-title-block::after {
    display: none;
}

.stats-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(124, 107, 78, 0.18);
    border-radius: 14px;
    box-shadow: 0 8px 22px rgba(58, 47, 36, 0.06);
}

.stats-menu li {
    margin: 0 !important;
    padding: 0;
    list-style: none;
}

.stats-menu li a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 8px 18px;
    border-radius: 10px;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #a9845c;
    background: transparent;
}

.stats-menu li a:hover {
    color: #3a2f24;
    background: rgba(251, 211, 122, 0.35);
}

.stats-menu li.active a {
    color: #3a2f24;
    background: #fbd37a;
    padding: 8px 18px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(58, 47, 36, 0.12);
}

.stats-content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.stat-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.stat-kpi {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 22px 24px 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(124, 107, 78, 0.16);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(58, 47, 36, 0.05);
}

.stat-kpi__value {
    font-family: "Angelus Medieval", serif;
    font-size: 42px;
    line-height: 1;
    color: #6f6551;
}

.stat-kpi__label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8a7358;
}

.stat-card {
    padding: 22px 24px 20px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(124, 107, 78, 0.16);
    border-radius: 16px;
    box-shadow: 0 10px 24px rgba(58, 47, 36, 0.05);
}

.stat-card__title {
    margin: 0 0 16px;
    font-family: "Angelus Medieval", serif;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6f6551;
    text-align: left;
}

.gender-split__bar {
    display: flex;
    height: 14px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(124, 107, 78, 0.12);
}

.gender-split__male {
    background: #e0a84a;
}

.gender-split__female {
    background: #8f6a4a;
}

.gender-split__legend {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-top: 12px;
    font-size: 15px;
    color: #6f6763;
}

.gender-split__legend strong {
    color: #3a342b;
    font-weight: 700;
}

.gender-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 8px;
    border-radius: 50%;
    vertical-align: middle;
}

.gender-dot--male { background: #e0a84a; }
.gender-dot--female { background: #8f6a4a; }

.race-bars {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.race-bars__row {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) 110px;
    align-items: center;
    gap: 14px;
}

.race-bars__name {
    font-weight: 700;
    font-size: 15px;
    color: #3a342b;
}

.race-bars__track {
    display: block;
    height: 10px;
    border-radius: 999px;
    background: rgba(124, 107, 78, 0.12);
    overflow: hidden;
}

.race-bars__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #d49600, #fbd37a);
}

.race-bars__meta {
    text-align: right;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: #6f6763;
}

.stats-page .lin2Table {
    border-radius: 16px;
    overflow: auto;
    border: 1px solid rgba(124, 107, 78, 0.16);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 10px 24px rgba(58, 47, 36, 0.05);
}

.stats-page table.omg {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.stats-page tr.glav td,
.stats-page .catbg2 {
    background: transparent !important;
    color: #8a7358 !important;
    font-size: 12px !important;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 14px 12px !important;
    border: none !important;
    border-bottom: 1px solid rgba(124, 107, 78, 0.18) !important;
}

.stats-page tbody tr td {
    background: transparent !important;
    color: #3a342b !important;
    padding: 12px !important;
    border: none !important;
    border-bottom: 1px solid rgba(124, 107, 78, 0.1) !important;
    font-size: 15px;
}

.stats-page tbody tr:last-child td {
    border-bottom: none !important;
}

.stats-page tbody tr:hover td {
    background: rgba(251, 211, 122, 0.22) !important;
}

.stats-page tbody tr:nth-child(1) td:first-child,
.stats-page tbody tr:nth-child(2) td:first-child,
.stats-page tbody tr:nth-child(3) td:first-child {
    font-weight: 800;
}

.stats-page tbody tr:nth-child(1) td:first-child { color: #b8860b !important; }
.stats-page tbody tr:nth-child(2) td:first-child { color: #7d746c !important; }
.stats-page tbody tr:nth-child(3) td:first-child { color: #a15c38 !important; }

.stats-page .char_name {
    justify-content: flex-start;
}

.stats-page font[color="red"] {
    color: #b42318 !important;
}

.online-chart {
    width: 100%;
    min-height: 420px;
}

@media (max-width: 760px) {
    .stat-kpis {
        grid-template-columns: 1fr;
    }

    .stat-kpi__value {
        font-size: 34px;
    }

    .gender-split__legend {
        flex-direction: column;
        gap: 6px;
    }

    .race-bars__row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "name meta"
            "track track";
    }

    .race-bars__name { grid-area: name; }
    .race-bars__meta { grid-area: meta; }
    .race-bars__track { grid-area: track; }

    .stats-menu li a {
        font-size: 13px;
        padding: 8px 12px;
    }
}