/* leaderboard-styles.css */

/* Use variables from styles.css */
:root {
    /* Inherit base spy theme variables */
    --leaderboard-bg: rgba(25, 35, 55, 0.9); /* Darker, slightly transparent blue */
    --leaderboard-border: rgba(93, 156, 236, 0.3); /* Faint blue border */
    --leaderboard-header-bg: rgba(40, 50, 75, 0.95);
    --leaderboard-row-alt-bg: rgba(0, 0, 0, 0.15);
    --leaderboard-highlight-bg: rgba(255, 215, 0, 0.1); /* Gold highlight */
    --leaderboard-highlight-border: rgba(255, 215, 0, 0.5); /* Gold border for highlight */
    --leaderboard-avatar-bg: rgba(255, 255, 255, 0.1);
}

body {
    /* Ensure background from styles.css shows */
    background-color: transparent;
}

/* --- Page Headers (h1) --- */
/* Style both original header h1 and referral page's .page-header */
header h1,
h1.page-header {
    font-size: 28px;
    color: var(--spy-gold-accent);
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
    margin-top: 0; /* Added */
    margin-bottom: 15px; /* Adjusted */
    font-weight: 700;
    letter-spacing: 1px;
    text-align: center; /* Added */
}

/* Keep original header container style */
header {
    text-align: center;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--leaderboard-border);
    padding-bottom: 15px;
}

.reset-info {
    font-size: 13px;
    color: white; /* Changed from var(--tg-theme-hint-color) */
}

.countdown {
    display: inline-block;
    background: rgba(0, 0, 0, 0.2);
    padding: 3px 7px;
    border-radius: 4px;
    margin-left: 5px;
    font-weight: 600;
    color: white; /* Changed from var(--tg-theme-text-color) */
    min-width: 80px; /* Prevent jitter */
    text-align: center;
}

/* --- Leaderboard Table Styling --- */
.leaderboard-container {
    max-height: 85vh; /* Increased from 65vh for better visibility */
    overflow-y: auto;
    border: 1px solid var(--leaderboard-border);
    border-radius: 8px;
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    /* Added for referral leaderboard flex structure */
    display: flex;
    flex-direction: column;
    background-color: rgba(0,0,0,0.1); /* Add subtle background */
    /* Improve scrolling on mobile */
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    /* Add minimum height to ensure usable area */
    min-height: 400px;
}

/* Custom scrollbar for leaderboard - Make it more visible on mobile */
.leaderboard-container::-webkit-scrollbar {
    width: 12px; /* Increased from 8px for better mobile interaction */
}
.leaderboard-container::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2); /* More visible */
    border-radius: 6px;
}
.leaderboard-container::-webkit-scrollbar-thumb {
    background-color: var(--spy-gold-accent); /* Use gold color for better visibility */
    border-radius: 6px;
    border: 2px solid transparent;
    background-clip: content-box;
    min-height: 40px; /* Ensure thumb is large enough to grab on mobile */
}
.leaderboard-container::-webkit-scrollbar-thumb:hover {
    background-color: #FFD700; /* Brighter gold on hover */
}

/* --- Table Structure (leaderboard.html) --- */
.leaderboard { /* This is the <table> in leaderboard.html */
    width: 100%;
    border-collapse: collapse;
    color: var(--tg-theme-text-color);
}

.leaderboard th,
.leaderboard td {
    padding: 15px 12px; /* Increased padding from 10px for better touch targets */
    text-align: left;
    border-bottom: 1px solid var(--leaderboard-border);
    vertical-align: middle;
    color: white; /* Changed from var(--tg-theme-text-color) */
    /* Add minimum height for better touch targets */
    min-height: 50px;
    line-height: 1.4; /* Better line spacing */
}

/* Table Header */
.leaderboard thead th {
    position: sticky;
    top: 0;
    background-color: var(--leaderboard-header-bg);
    color: var(--spy-gold-accent);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 10;
    border-bottom-width: 2px; /* Thicker bottom border for header */
    border-bottom-color: var(--spy-gold-accent);
}

/* --- Div Structure Header (referral_leaderboard.html) --- */
.leaderboard-header { /* This is the header div in referral_leaderboard.html */
    display: flex;
    padding: 10px 12px; /* Match table header padding */
    background-color: var(--leaderboard-header-bg); /* Match table header background */
    color: var(--spy-gold-accent); /* Match table header color */
    font-weight: 600; /* Match table header weight */
    font-size: 14px; /* Match table header size */
    text-transform: uppercase; /* Match table header transform */
    letter-spacing: 0.5px; /* Match table header spacing */
    border-bottom: 2px solid var(--spy-gold-accent); /* Match table header border */
    flex-shrink: 0;
}
.header-rank { width: 60px; text-align: center; }
.header-username { flex: 1; padding-left: 10px; }
.header-invites { width: 90px; text-align: right; }

/* --- List/Scroll Area (referral_leaderboard.html) --- */
/* Target the div container holding the items in referral leaderboard */
#allTimeLeaderboard {
    flex: 1; /* Allow scrolling */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* --- Table Row Styling (leaderboard.html) --- */
.leaderboard tbody tr:nth-child(even) {
    background-color: var(--leaderboard-row-alt-bg);
}

/* Add hover effect for better interaction feedback */
.leaderboard tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
    transition: background-color 0.2s ease;
}

/* Prevent hover effect from interfering with highlight */
.leaderboard tbody tr.highlight:hover {
    background-color: var(--leaderboard-highlight-bg);
}

/* --- Div Item Styling (referral_leaderboard.html) --- */
.leaderboard-item { /* Style like a table row */
    display: flex;
    align-items: center;
    padding: 10px 12px; /* Match td padding */
    border-bottom: 1px solid var(--leaderboard-border); /* Match td border */
    color: white; /* Changed from var(--tg-theme-text-color) */
}
.leaderboard-item:last-child {
    border-bottom: none;
}
#allTimeLeaderboard .leaderboard-item:nth-child(even) { /* Alternating background for div items */
     background-color: var(--leaderboard-row-alt-bg);
}

/* Highlighted Row (Current User) - Apply to both table row and div item */
.leaderboard tbody tr.highlight,
.leaderboard-item.current-user {
    background-color: var(--leaderboard-highlight-bg);
    border-left: 3px solid var(--leaderboard-highlight-border);
    border-right: 3px solid var(--leaderboard-highlight-border);
    font-weight: 600;
}
.leaderboard tbody tr.highlight td,
.leaderboard-item.current-user { /* Also adjust border for div items */
    border-bottom-color: var(--leaderboard-highlight-border);
    /* Remove left/right border for contained divs */
    border-left-style: none;
    border-right-style: none;
}
/* Need to apply padding to the inner divs of .current-user to account for outer border */
.leaderboard-item.current-user .rank,
.leaderboard-item.current-user .username,
.leaderboard-item.current-user .invites {
    padding-left: 3px; /* Adjust as needed */
    padding-right: 3px;
}


/* --- Column/Cell Styling --- */

/* Specific Column Styling (Table - leaderboard.html) */
.leaderboard td.rank { /* More specific selector for table */
    width: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--spy-gold-accent);
}

.leaderboard td.avatar { /* More specific selector for table */
    width: 60px;
    text-align: center;
}

.avatar-img {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    background-color: var(--leaderboard-avatar-bg);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: inline-flex; /* Use flex for centering */
    align-items: center;
    justify-content: center;
    font-size: 18px; /* For initials */
    font-weight: bold;
    color: white;
    vertical-align: middle; /* Added */
}
.avatar-img img { /* Ensure image inside fits */
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.leaderboard td.score { /* More specific selector for table */
    width: 90px; /* Slightly narrower */
    text-align: right;
    font-weight: 600;
    font-size: 15px;
}

.leaderboard td.username {
    font-weight: 500;
    color: white;
    max-width: 150px; /* Prevent overly long usernames from breaking layout */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Highlight username in current user row */
.leaderboard tbody tr.highlight td.username {
    font-weight: 600;
    color: var(--spy-gold-accent);
}

/* Specific Div Styling (Divs - referral_leaderboard.html) */
.leaderboard-item .rank { /* Style the inner rank div */
    width: 60px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
    color: var(--spy-gold-accent);
    flex-shrink: 0;
}
.leaderboard-item .username { /* Style the inner username div */
    flex: 1;
    padding-left: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.leaderboard-item .invites { /* Style the inner invites div */
    width: 90px;
    text-align: right;
    font-weight: 600;
    font-size: 15px;
    flex-shrink: 0;
}


/* --- Back Button --- */
/* Style both the ID and the class */
#back-button,
.button.back-button {
    /* Use styles from styles.css but maybe add specifics */
    margin: 25px auto 10px auto; /* Center and add margin */
    min-width: 150px;
    /* Make it gold like primary actions */
    background-color: var(--spy-gold-accent);
    color: #111; /* Dark text on gold */
    border-color: transparent;
    font-weight: 700;
}

#back-button:hover,
.button.back-button:hover {
    background-color: #fffacd; /* Lighter gold */
    color: #000;
    filter: brightness(1); /* Override base hover */
    box-shadow: 0 0 10px var(--spy-gold-glow);
}

#back-button:active,
.button.back-button:active {
    transform: scale(0.96);
    filter: brightness(0.9);
}

/* --- Loading State --- */
#loading,
.loading { /* Target both ID and class */
    /* Inherits from styles.css, keep it simple */
    min-height: 100px; /* Ensure it takes some space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 20px; /* Add consistent padding */
    color: var(--tg-theme-hint-color);
    font-weight: 600;
    letter-spacing: 0.5px;
    width: 100%; /* Ensure it takes full width */
}
/* Re-add the pulse animation definition if loading style was removed */
.loading::after {
    content: ' 📡'; /* Radar emoji */
    display: inline-block;
    font-size: 18px;
    animation: pulse 1.5s ease-in-out infinite;
    margin-left: 5px;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}


/* --- Responsive Adjustments --- */
@media (max-width: 480px) {
    /* Increase container height on mobile for better usability */
    .leaderboard-container {
        max-height: 90vh; /* Even more space on mobile */
        min-height: 350px; /* Smaller minimum on mobile */
    }
    
    header h1, h1.page-header {
        font-size: 24px; /* Slightly smaller on mobile */
        margin-bottom: 10px;
    }
    
    .leaderboard th,
    .leaderboard td {
        padding: 12px 8px; /* Adjusted for mobile */
        font-size: 14px; /* Ensure readability */
    }
    
    .leaderboard td.rank { width: 40px; font-size: 14px; }
    .leaderboard td.avatar { width: 50px; }
    .avatar-img { width: 36px; height: 36px; font-size: 16px; } /* Slightly larger avatars */
    .leaderboard td.score { width: 80px; font-size: 14px; } /* More space for scores */

     /* Adjust referral leaderboard responsive styles */
     .leaderboard-header { padding: 10px 8px; font-size: 13px; }
     .leaderboard-item { padding: 12px 8px; font-size: 14px; }
     .header-rank, .leaderboard-item .rank { width: 40px; font-size: 14px; }
     .header-invites, .leaderboard-item .invites { width: 80px; font-size: 14px; }

    #back-button, .button.back-button { 
        min-width: 140px; 
        padding: 12px 20px; 
        font-size: 16px; /* Better touch target */
        margin-top: 15px;
    }
}

/* Specific container width for referral leaderboard page */
body.referral-page > .container {
    width: 90%;
    max-width: 1200px; /* Override base 600px */
    margin: 20px auto; /* Re-apply specific margin if needed, otherwise it inherits */
    /* Other container styles like background, border, etc. are inherited */
}