/* ═══════════════════════════════
   TOP EMPLOYEES / LEADERBOARD PAGE
   KMK Munai Design System
   ═══════════════════════════════ */

/* ── Filter button groups ──
   Previously: fixed 350px-wide container + fixed 100px-wide buttons in a
   hardcoded navy (#2F394E) color scheme, unrelated to the red/black/white
   design system used everywhere else. The fixed widths also overflowed
   the ~328px content area on a 360px phone (main-container's 16px side
   padding comes from main_home_style.css), and long labels like
   "За квартал" had no room to breathe inside a rigid 100px box. */
.buttons-groups {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm, 8px);
    width: 100%;
}

.location-buttons,
.filter-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm, 8px);
    width: 100%;
}

.action-btn {
    flex: 1 1 auto;
    min-width: 88px;
    height: 40px;
    padding: 0 var(--space-12, 12px);
    border-radius: var(--radius-full, 999px);
    border: 1.5px solid var(--color-border, #E4E4E7);
    background: var(--color-brand-white, #fff);
    color: var(--color-text-secondary, #52525B);
    font-family: var(--font, 'Montserrat', sans-serif);
    font-size: var(--font-size-sm, 14px);
    font-weight: var(--fw-medium, 500);
    cursor: pointer;
    transition: border-color var(--dur-fast, 0.15s), color var(--dur-fast, 0.15s), background var(--dur-fast, 0.15s), transform var(--dur-fast, 0.1s);
}

.action-btn:hover {
    border-color: var(--color-brand-black, #111);
    color: var(--color-brand-black, #111);
}

.action-btn:active {
    transform: scale(0.96);
}

.action-btn.selected {
    background: var(--color-brand-black, #111);
    border-color: var(--color-brand-black, #111);
    color: var(--color-brand-white, #fff);
}

/* ── Trophy placeholder (shown before a filter has been picked) ── */
@keyframes trophyIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

#trophy-container {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: var(--space-xl, 32px) 0;
}

.trophy-image {
    display: block;
    width: 140px;
    max-width: 45vw;
    animation: trophyIn 0.35s ease both;
}

/* ── Leaderboard table ──
   Previously hardcoded Arial + gray palette (#333/#ddd/#555/#f0f0f0),
   fixed 20px cell padding that left almost no room for the "ФИО" column
   on a 360px screen, and a @media(max-width:768px) breakpoint — this page
   only ever runs full-screen on a phone, so that breakpoint never had a
   chance to do anything useful. Wrapped in a scroll container as a safety
   net for long names instead of relying on shrinking padding alone. */
.table-scroll {
    width: 100%;
    overflow-x: auto;
    border-radius: var(--radius-card, 16px);
    border: 1px solid var(--color-border, #E2E2E2);
    background: var(--color-surface-card, #fff);
    box-shadow: var(--shadow-sm, 0 1px 4px rgba(0,0,0,0.07));
}

#leaderboard {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font, 'Montserrat', sans-serif);
}

#leaderboard thead {
    background: var(--color-surface-page, #F4F4F4);
}

#leaderboard th {
    padding: var(--space-sm, 8px) 10px;
    text-align: left;
    color: var(--color-text-secondary, #52525B);
    font-size: var(--font-size-xs, 12px);
    font-weight: var(--fw-semibold, 600);
    white-space: nowrap;
}

#leaderboard tbody tr {
    border-top: 1px solid var(--color-border, #E2E2E2);
    transition: background 0.15s;
}

#leaderboard tbody tr:hover {
    background: var(--color-surface-page, #F4F4F4);
}

#leaderboard td {
    padding: 8px;
    text-align: left;
    color: var(--color-text-primary, #111);
    font-size: var(--font-size-sm, 13px);
    word-break: break-word;
}

#leaderboard td:first-child {
    font-weight: 600;
    color: var(--color-brand-red, #CC2020);
    white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .trophy-image { animation: none; }
}