/**
 * League Stats Page Styles
 * Page-specific styling for league statistics
 */

/* ========================================
   PAGE HEADER
   ======================================== */

.stats-header {
  margin-bottom: 30px;
}

.stats-intro {
  color: var(--text-secondary);
  font-size: 1em;
  margin-bottom: 10px;
}

.sort-instructions {
  color: var(--text-secondary);
  font-size: 0.9em;
  font-style: italic;
}

/* ========================================
   ALERT MESSAGES
   ======================================== */

.alert {
  padding: 15px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.alert-danger {
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

[data-theme="dark"] .alert-danger {
  background-color: #3a1a1f;
  border-color: #5a2d33;
  color: #f8a5ad;
}

/* ========================================
   RANK INDICATORS
   ======================================== */

.rank-change {
  font-size: 0.85em;
  margin-left: 5px;
  white-space: nowrap;
}

.rank-up {
  color: #28a745;
}

[data-theme="dark"] .rank-up {
  color: #5fd17a;
}

.rank-down {
  color: #dc3545;
}

[data-theme="dark"] .rank-down {
  color: #f56b78;
}

.rank-same {
  color: var(--text-muted);
}

/* ========================================
   TOP 10 LEADERS SECTION
   ======================================== */

.leaders-section {
  margin: 50px 0;
}

.leaders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 25px;
  margin-bottom: 30px;
}

.leader-card {
  background-color: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px var(--shadow-color);
}

.leader-card-header {
  background-color: var(--table-header-bg, var(--bg-secondary));
  padding: 12px 15px;
  border-bottom: 1px solid var(--border-color);
  text-align: center;
}

.leader-card-title {
  font-size: 1.1em;
  font-weight: 600;
  color: var(--table-header-text, var(--text-primary));
  margin: 0;
}

.leader-card-body {
  padding: 0;
}

/* Leader card tables - different style than main tables */
.leader-card .data-table {
  border: none;
  box-shadow: none;
}

.leader-card .data-table th {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  font-size: 0.85em;
  padding: 10px 12px;
}

.leader-card .data-table td {
  padding: 10px 12px;
  font-size: 0.95em;
}

/* ========================================
   TEAM STANDINGS SPECIFIC
   ======================================== */

/* No special styling needed - using sticky-col-2 to freeze team name only */

/* ========================================
   INDIVIDUAL STATS SECTION
   ======================================== */

.individual-section {
  margin-top: 60px;
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 768px) {
  .leaders-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .leader-card-title {
    font-size: 1em;
  }

  .stats-intro {
    font-size: 0.9em;
  }
}
