/* ============================================
   LEADERBOARD STYLES (Date: 2025-11-10)
   ============================================

   Scope: Leaderboard page, rank displays, user rankings
   Related JS: leaderboardSystem.js
   Related Pages: Leaderboard page

   BEFORE EDITING:
   - Leaderboard styles belong HERE, not elsewhere
   - Shared components belong in components/
   - Theme colors belong in themes/
   - Check CLAUDE.md Section 2d for architecture

   ============================================ */

/* Leaderboard Container and Layout */

/* Hide view tabs on leaderboard page */
#leaderboard-content .view-tabs {
    display: none;
}

/* Add top padding to leaderboard container when tabs are hidden */
#leaderboard-content .leaderboard-container {
    padding-top: 8px;
}

/* Leaderboard Entries and Rankings */


/* Rank Badges and Displays */


/* User Highlight (My Rank) */
/* Admin Leaderboard View */
#admin-leaderboard-view {
    padding: 0;
    overflow: hidden;
    border-radius: 8px;
    background: var(--theme-bg-primary);
    height: auto;
}

#leaderboard-button-overlay {
    overflow: auto;
    border: 1px solid var(--theme-border-light);
    border-radius: 8px;
    background: var(--theme-bg-primary);
    min-height: 200px;
    max-height: none;
    height: auto;
}

/* Leaderboard page container - matches forum/messages/support/admin */
.leaderboard-container {
    margin: 0;
    /* padding removed - inherits from .content-section */
}
/* Leaderboard content - setup container hierarchy */
#leaderboard-content {
    overflow: hidden !important;
    height: 100%;
    display: flex;
    flex-direction: column;
}

#leaderboard-content .leaderboard-container {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Leaderboard standalone container - make it flex to control header and entries */
#leaderboard-standalone-container {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

/* Leaderboard list - flex container to hold header and entries */
#leaderboard-list.messages-list {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    min-height: 0 !important;
    padding: 0 !important;
}

/* Leaderboard sort header wrapper - static, stays above scrolling entries */
.leaderboard-sort-header-wrapper {
    /* background: var(--theme-bg-primary); */
    padding-top: 0;
    padding-bottom: 0;
    padding-right: 8px;
    flex-shrink: 0 !important;
    overflow: visible !important;
}

/* Leaderboard entries container - scrollable like forum posts */
#leaderboard-entries-container {
    overflow-y: auto !important;
    flex: 1 !important;
    min-height: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.leaderboard-button-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    pointer-events: none !important; /* Allow clicks to pass through */
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Re-enable pointer events for the leaderboard button itself */
.leaderboard-button-overlay .leaderboard-tab {
    pointer-events: auto !important;
}

.leaderboard-timespan-dropdown:focus {
    outline: none;
    border-color: var(--theme-badge-warning-bg);
    box-shadow: 0 0 0 2px var(--theme-purple-overlay-light);
}

.leaderboard-entry {
    position: relative;
    background: rgba(0, 0, 0, var(--opacity-20));
}

/* Resizable box utility */
.resizable-box {
    resize: vertical;
    overflow: auto;
    position: relative;
    background: var(--theme-bg-primary);
}

.resizable-box::-webkit-resizer {
    background: transparent;
}

.resizable-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 16px;
    height: 16px;
    cursor: ns-resize;
    background: linear-gradient(135deg, transparent 50%, var(--theme-text-secondary) 50%);
    pointer-events: none;
}

.leaderboard-entry:last-child {
    border-bottom: none !important;
}

/* Leaderboard stat icons and colors */
.leaderboard-entry .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
}

/* Responsive leaderboard stats */
@media (max-width: 768px) {
    .leaderboard-entry {
        padding: 10px !important;
    }
    
    .leaderboard-entry > div:last-child {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    
    .leaderboard-entry > div:last-child > div:first-child {
        width: 100%;
    }
    
    .leaderboard-entry > div:last-child > div:last-child {
        width: 100%;
        justify-content: space-between !important;
        gap: 10px !important;
    }
}

.forum-tab.leaderboard-tab {
    background: var(--theme-bg-secondary) !important;
    color: var(--theme-text-secondary) !important;
    font-weight: 600 !important;
    /* Padding inherited from .menu-base */
    border-radius: 20px !important;
    border: 2px solid transparent !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 0.5px !important;
    position: relative !important; /* Now relative since container handles positioning */
}

.forum-tab.leaderboard-tab:hover {
    background: var(--theme-bg-secondary) !important;
    box-shadow: 0 4px 12px var(--theme-shadow) !important;
    /* Removed scale transform to prevent overflow */
}

.forum-tab.leaderboard-tab.active {
    background: var(--theme-btn-primary-bg) !important;
    border-color: transparent !important;
    color: white !important;
}
/* Light red header for pinned posts */
.pinned-indicator {
    background: var(--theme-badge-danger-bg) !important; /* Light red */
    color: var(--theme-badge-danger-bg) !important; /* Dark red text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important;
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important;
    border-bottom: 1px solid var(--theme-badge-danger-bg) !important; /* Red bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}

/* Yellow header for context posts (parent/thread posts) - .context-indicator-top MOVED TO layouts.css (shared UI element) */
.context-indicator-reply {
    background: var(--theme-badge-warning-bg) !important; /* Light yellow */
    color: var(--theme-btn-warning-bg) !important; /* Dark amber text for contrast */
    padding: 2px 12px !important; /* Just 2px top and bottom */
    font-size: 11px !important;
    font-weight: 500 !important;
    display: block !important;
    margin: 0 !important;
    position: relative !important; /* Changed from absolute */
    border: none !important;
    border-radius: 10px 10px 0 0 !important; /* Match post's top radius */
    z-index: 2 !important;
    text-align: left !important; /* Changed from center to left */
    border-bottom: 1px solid var(--theme-btn-warning-bg) !important; /* Add subtle bottom border */
    line-height: 1 !important; /* Minimize line height to reduce extra space */
}

/* Ensure forum post is positioned for indicator */
.forum-post:has(.highlight-indicator),
.forum-post:has(.pinned-indicator),
.forum-post:has(.context-indicator-reply),
.forum-post:has(.context-indicator-top) {
    position: relative !important;
    overflow: visible !important;
}

/* Resizable Referral History Cards */
.profile-referral-history-card {
    position: relative;
    overflow: auto;
}

/* Add top padding to leaderboard and admin user list headers to match forum/messages spacing */
#leaderboard-entries-container > div.leaderboard-sort-header-wrapper > div {
    padding-top: 16px !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
}

#admin-user-list-container > div.user-sort-header-wrapper > div {
    padding-top: 0;
}