/** Extracted page styles for leaderboard.php; isolated from shared shell components. */
/* =========================================================
   LEADERBOARD - Following style-1.css Light Mode Design
   ========================================================= */

body.asset-page-leaderboard .main-wrapper .leaderboard-container{
    padding: var(--spacing-xl) 0;
    min-height: calc(100vh - 200px);
}

/* Leaderboard Header */
body.asset-page-leaderboard .main-wrapper .leaderboard-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-xl);
    background: var(--bg-primary);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-medium);
    box-shadow: var(--shadow-sm);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-header-content h1{
    font-size: 1.875rem;
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-header-content h1 i{
    color: var(--warning);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-header-content p{
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

body.asset-page-leaderboard .main-wrapper .leaderboard-header-badge{
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--bg-secondary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-full);
    color: var(--text-primary);
    font-weight: 600;
}

body.asset-page-leaderboard .main-wrapper .leaderboard-header-badge i{
    color: var(--primary);
}

/* Leaderboard Grid */
body.asset-page-leaderboard .main-wrapper .leaderboard-grid{
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: var(--spacing-xl);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-main{
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

/* Podium Section - Top 3 */
body.asset-page-leaderboard .main-wrapper .podium-section{
    margin-bottom: var(--spacing-lg);
}

body.asset-page-leaderboard .main-wrapper .podium{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: flex-end;
    padding: var(--spacing-xl);
}

body.asset-page-leaderboard .main-wrapper .podium-item{
    text-align: center;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
    border: 2px solid;
    position: relative;
    transition: var(--transition-base);
}

body.asset-page-leaderboard .main-wrapper .podium-item:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

body.asset-page-leaderboard .main-wrapper .podium-first{
    background: linear-gradient(135deg, #fbbf2415, #f59e0b15);
    border-color: var(--warning);
    order: 2;
}

body.asset-page-leaderboard .main-wrapper .podium-second{
    background: linear-gradient(135deg, #d1d5db15, #9ca3af15);
    border-color: var(--text-muted);
    order: 1;
    margin-top: var(--spacing-xl);
}

body.asset-page-leaderboard .main-wrapper .podium-third{
    background: linear-gradient(135deg, #f97316 15, #ea580c15);
    border-color: #ea580c;
    order: 3;
    margin-top: var(--spacing-xl);
}

body.asset-page-leaderboard .main-wrapper .podium-rank{
    position: absolute;
    top: -16px;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--bg-primary);
    border: 2px solid;
}

body.asset-page-leaderboard .main-wrapper .podium-first .podium-rank{
    border-color: var(--warning);
    color: var(--warning);
}

body.asset-page-leaderboard .main-wrapper .podium-second .podium-rank{
    border-color: var(--text-muted);
    color: var(--text-muted);
}

body.asset-page-leaderboard .main-wrapper .podium-third .podium-rank{
    border-color: #ea580c;
    color: #ea580c;
}

body.asset-page-leaderboard .main-wrapper .podium-avatar{
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    margin: 0 auto var(--spacing-md);
    border: 3px solid;
    object-fit: cover;
}

body.asset-page-leaderboard .main-wrapper .podium-first .podium-avatar{ border-color: var(--warning); }
body.asset-page-leaderboard .main-wrapper .podium-second .podium-avatar{ border-color: var(--text-muted); }
body.asset-page-leaderboard .main-wrapper .podium-third .podium-avatar{ border-color: #ea580c; }

body.asset-page-leaderboard .main-wrapper .podium-name{
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

body.asset-page-leaderboard .main-wrapper .podium-level{
    font-size: 0.8125rem;
    color: var(--text-secondary);
    margin-bottom: var(--spacing-md);
}

body.asset-page-leaderboard .main-wrapper .podium-score{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    background: var(--bg-primary);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-lg);
}

body.asset-page-leaderboard .main-wrapper .podium-score i{
    color: var(--warning);
}

/* Leaderboard Table */
body.asset-page-leaderboard .main-wrapper .leaderboard-table-container{
    padding: 0;
}

body.asset-page-leaderboard .main-wrapper .table-responsive{
    overflow-x: auto;
}

body.asset-page-leaderboard .main-wrapper .leaderboard-table{
    width: 100%;
    border-collapse: collapse;
}

body.asset-page-leaderboard .main-wrapper .leaderboard-table thead{
    background: var(--bg-secondary);
    border-bottom: 2px solid var(--border-medium);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-table th{
    padding: var(--spacing-md) var(--spacing-lg);
    font-weight: 600;
    color: var(--text-primary);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.asset-page-leaderboard .main-wrapper .th-rank{ text-align: center; width: 80px; }
body.asset-page-leaderboard .main-wrapper .th-user{ text-align: left; }
body.asset-page-leaderboard .main-wrapper .th-reputation{ text-align: center; width: 140px; }
body.asset-page-leaderboard .main-wrapper .th-posts{ text-align: center; width: 100px; }
body.asset-page-leaderboard .main-wrapper .th-comments{ text-align: center; width: 100px; }
body.asset-page-leaderboard .main-wrapper .th-action{ text-align: center; width: 100px; }

body.asset-page-leaderboard .main-wrapper .leaderboard-row{
    border-bottom: 1px solid var(--border-light);
    transition: var(--transition-fast);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-row:hover{
    background: var(--bg-secondary);
}

body.asset-page-leaderboard .main-wrapper .leaderboard-table td{
    padding: var(--spacing-lg);
}

/* Rank Badge */
body.asset-page-leaderboard .main-wrapper .td-rank{
    text-align: center;
}

body.asset-page-leaderboard .main-wrapper .rank-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 1rem;
}

body.asset-page-leaderboard .main-wrapper .rank-1{
    background: var(--warning-light);
    color: var(--warning);
    font-size: 1.25rem;
}

body.asset-page-leaderboard .main-wrapper .rank-2,
body.asset-page-leaderboard .main-wrapper .rank-3{
    background: var(--info-light);
    color: var(--info);
    font-size: 1.125rem;
}

body.asset-page-leaderboard .main-wrapper .rank-default{
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* User Cell */
body.asset-page-leaderboard .main-wrapper .user-cell{
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

body.asset-page-leaderboard .main-wrapper .user-avatar{
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    border: 2px solid var(--border-medium);
    object-fit: cover;
    flex-shrink: 0;
}

body.asset-page-leaderboard .main-wrapper .user-info{
    min-width: 0;
}

body.asset-page-leaderboard .main-wrapper .user-name{
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    display: block;
    font-size: 0.9375rem;
    transition: var(--transition-fast);
}

body.asset-page-leaderboard .main-wrapper .user-name:hover{
    color: var(--primary);
}

body.asset-page-leaderboard .main-wrapper .user-level{
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* Reputation Badge */
body.asset-page-leaderboard .main-wrapper .td-reputation{
    text-align: center;
}

body.asset-page-leaderboard .main-wrapper .reputation-badge{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--primary-light);
    color: var(--primary);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-full);
    font-weight: 700;
    font-size: 0.9375rem;
}

body.asset-page-leaderboard .main-wrapper .reputation-badge i{
    color: var(--warning);
}

/* Stat Cell */
body.asset-page-leaderboard .main-wrapper .td-posts,
body.asset-page-leaderboard .main-wrapper .td-comments{
    text-align: center;
}

body.asset-page-leaderboard .main-wrapper .stat-cell{
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

body.asset-page-leaderboard .main-wrapper .stat-cell i{
    color: var(--text-muted);
    font-size: 0.875rem;
}

/* Action Cell */
body.asset-page-leaderboard .main-wrapper .td-action{
    text-align: center;
}

/* Empty State */
body.asset-page-leaderboard .main-wrapper .empty-state{
    text-align: center;
    padding: var(--spacing-3xl) var(--spacing-xl);
}

body.asset-page-leaderboard .main-wrapper .empty-icon{
    font-size: 4rem;
    color: var(--text-muted);
    opacity: 0.5;
    margin-bottom: var(--spacing-lg);
}

body.asset-page-leaderboard .main-wrapper .empty-state h3{
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    font-size: 1.25rem;
}

body.asset-page-leaderboard .main-wrapper .empty-state p{
    color: var(--text-secondary);
    margin: 0;
    font-size: 0.9375rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    body.asset-page-leaderboard .main-wrapper .leaderboard-grid{
        grid-template-columns: 1fr;
    }

    body.asset-page-leaderboard .main-wrapper .podium{
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    body.asset-page-leaderboard .main-wrapper .leaderboard-header{
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
        padding: var(--spacing-lg);
    }

    body.asset-page-leaderboard .main-wrapper .leaderboard-header-content h1{
        font-size: 1.5rem;
        justify-content: center;
    }

    body.asset-page-leaderboard .main-wrapper .podium{
        grid-template-columns: 1fr;
        padding: var(--spacing-lg);
    }

    body.asset-page-leaderboard .main-wrapper .podium-item{
        margin-top: 0 !important;
    }

    body.asset-page-leaderboard .main-wrapper .podium-first{ order: 1; }
    body.asset-page-leaderboard .main-wrapper .podium-second{ order: 2; }
    body.asset-page-leaderboard .main-wrapper .podium-third{ order: 3; }

    body.asset-page-leaderboard .main-wrapper .th-posts,
body.asset-page-leaderboard .main-wrapper .th-comments{ display: none; }
    body.asset-page-leaderboard .main-wrapper .td-posts,
body.asset-page-leaderboard .main-wrapper .td-comments{ display: none; }
}

@media (max-width: 480px) {
    body.asset-page-leaderboard .main-wrapper .leaderboard-header-content h1{
        font-size: 1.25rem;
    }

    body.asset-page-leaderboard .main-wrapper .leaderboard-table th,
body.asset-page-leaderboard .main-wrapper .leaderboard-table td{
        padding: var(--spacing-sm) var(--spacing-md);
    }

    body.asset-page-leaderboard .main-wrapper .user-avatar{
        width: 36px;
        height: 36px;
    }

    body.asset-page-leaderboard .main-wrapper .rank-badge{
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }
}