/* =============================================
   ONLINE LIST PAGE STYLES
   Black Talon / Medieval RPG Theme

   All styles for the online players list page:
   - Scrollable content container with custom scrollbar
   - World information box
   - Status indicators (online/offline)

   Extracted from newStyle.css lines 2739-2808.
   Uses design tokens from base/variables.css.

   Expected HTML:
   <div class="onlinelist-content">
     <div class="world-info-box">
       <h3>World Name</h3>
       <div class="world-info-details">
         <p>Status: <span class="status-online">Online</span></p>
         ...
       </div>
     </div>
     <table class="scoreTable">...</table>
   </div>
   ============================================= */


/* -----------------------------------------
   CONTENT CONTAINER
   ----------------------------------------- */

.onlinelist-content {
    height: 800px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-lg);
}

/* Custom scrollbar */
.onlinelist-content::-webkit-scrollbar {
    width: 8px;
}

.onlinelist-content::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
    border-radius: var(--radius-sm);
}

.onlinelist-content::-webkit-scrollbar-thumb {
    background: var(--btn-red-gradient);
    border-radius: var(--radius-sm);
    border: 1px solid rgba(139, 0, 0, 0.5);
}

.onlinelist-content::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #a50000, #5a0000);
}


/* -----------------------------------------
   WORLD INFORMATION BOX
   ----------------------------------------- */

.world-info-box {
    background: var(--color-bg-dark);
    border: 1px solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-base);
    text-align: center;
}

.world-info-box h3 {
    margin: 0 0 var(--spacing-base) 0;
    color: var(--color-gold-light);
    font-size: 18px;
}

.world-info-details {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-base) var(--spacing-2xl);
}

.world-info-details p {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
}


/* -----------------------------------------
   CLASS DISTRIBUTION BAR
   (same component used on highscores page)
   ----------------------------------------- */

.class-distribution {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 25px;
    padding: 15px 20px;
    background: var(--color-bg-dark, rgba(0, 0, 0, 0.4));
    border-radius: var(--radius-md, 8px);
    border-top: 1px solid rgba(255, 215, 0, 0.2);
    margin-bottom: var(--spacing-base, 15px);
}

.class-distribution .class-item {
    font-size: 13px;
    color: #aaa;
}

.class-distribution .class-item strong {
    color: var(--color-gold-light, #FFD700);
    margin-right: 3px;
}