/* File: public/css/pp-leaderboard.css */
.pp-leaderboard-container {
    background-color: #0a2745;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    direction: rtl;
}
.pp-leaderboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid #00345e;
    margin-bottom: 15px;
}
.pp-leaderboard-header h2 {
    margin: 0;
    color: white;
    font-size: 1.2em;
}
.pp-leaderboard-tabs {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
    background-color: #00345e;
    border-radius: 5px;
    padding: 5px;
}
.pp-leaderboard-tab {
    flex: 1;
    background: transparent;
    border: none;
    color: #a0c8f0;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}
.pp-leaderboard-tab:not(.active):hover {
    background-color: #0e4c81;
    color: #fff;
}
.pp-leaderboard-tab.active {
    background-color: #007cbe;
    color: #fff;
}
.pp-leaderboard-week-nav-container {
    margin-bottom: 15px;
}
.pp-leaderboard-container .week-navigation {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 5px;
}
.pp-leaderboard-container .week-button {
    background-color: #00345e;
    color: white;
    border: 1px solid #0e4c81;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    white-space: nowrap;
    transition: background-color 0.2s, border-color 0.2s;
}
.pp-leaderboard-container .week-button:hover,
.pp-leaderboard-container .week-button:focus {
    background-color: #005a9e;
    border-color: #007cbe;
    outline: none;
}
.pp-leaderboard-container .week-button.active {
    background-color: #005a9e !important;
    border-color: #007cbe !important;
}
.pp-user-stats-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}
.user-stat-item {
    background-color: #00345e;
    padding: 10px;
    border-radius: 6px;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.user-stat-item .label {
    display: block;
    font-size: 0.8em;
    color: #a0c8f0;
    margin-bottom: 5px;
}
.user-stat-item .value {
    display: block;
    font-size: 1.4em;
    font-weight: bold;
}
.pp-leaderboard-content {
    min-height: 200px;
    position: relative;
    max-height: 500px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #007cbe #0e4c81;
    padding-left: 15px;
}
.pp-leaderboard-content::-webkit-scrollbar {
    width: 8px;
}
.pp-leaderboard-content::-webkit-scrollbar-track {
    background: #00294e;
    border-radius: 10px;
}
.pp-leaderboard-content::-webkit-scrollbar-thumb {
    background-color: #007cbe;
    border-radius: 10px;
    border: 2px solid #00294e;
}
.leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.leaderboard-item {
    display: flex;
    align-items: center;
    padding: 12px 10px;
    background-color: #00294e;
    border-radius: 4px;
    margin-bottom: 8px;
    color: #cde4ff;
}
.leaderboard-item.rank-1 { background-color: #ffc10720; border: 1px solid #ffc107; color: #fff; } /* Gold */
.leaderboard-item.rank-2 { background-color: #c0c0c020; border: 1px solid #c0c0c0; color: #fff; } /* Silver */
.leaderboard-item.rank-3 { background-color: #cd7f3220; border: 1px solid #cd7f32; color: #fff; } /* Bronze */
.leaderboard-item.current-user { background-color: #0095e620; border: 1px solid #0095e6; color: #fff; }
.leaderboard-item .rank { font-weight: bold; width: 60px; flex-shrink: 0; font-size: 1.1em; }
.leaderboard-item .name { flex-grow: 1; font-weight: 500; }
.leaderboard-item .points { font-weight: bold; color: #8bc34a; font-size: 1em; }
.no-results-msg { text-align: center; color: #a0c8f0; padding: 20px 0; }
.pp-leaderboard-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    border: 3px solid #0e4c81;
    border-top-color: #007cbe;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    transform: translate(-50%, -50%);
}
.pp-leaderboard-content:not(.loading) .pp-leaderboard-loader { display: none; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.separator { text-align: center; font-size: 1.5em; color: #0e4c81; margin: 10px 0; letter-spacing: 5px; }

.pp-leaderboard-league-info {
    display: flex;
    align-items: center;
    gap: 10px;
}
.pp-leaderboard-header-logo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
}
.pp-leaderboard-league-name {
    font-size: 0.9em;
    font-weight: normal;
    color: #a0c8f0;
}
.pp-leaderboard-footer {
    text-align: left;
    font-size: 0.8em;
    color: #a0c8f0;
    opacity: 0.7;
    margin-top: 15px;
    padding-top: 10px;
    border-top: 1px solid #00345e;
}