/* ============================================================
   LEADERBOARD STYLES
   ============================================================ */

.leaderboard-table td, .leaderboard-table th {
  vertical-align: middle;
}

.rank-badge {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.85rem;
  margin: 0 auto;
}

.rank-1 { background: linear-gradient(135deg, #ffd700, #ffb800); color: #5c3d00; box-shadow: 0 0 12px rgba(255,215,0,0.4); font-size: 1rem; }
.rank-2 { background: linear-gradient(135deg, #c0c0c0, #a0a0a0); color: #333; box-shadow: 0 0 8px rgba(192,192,192,0.3); }
.rank-3 { background: linear-gradient(135deg, #cd7f32, #b0692e); color: #fff; box-shadow: 0 0 8px rgba(205,127,50,0.3); }
.rank-other { background: #f0f0f0; color: #666; }

.leaderboard-highlight {
  background: rgba(255,215,0,0.04);
}

.leaderboard-empty {
  padding: 3rem;
  text-align: center;
  color: #999;
}

.type-option.active {
  background: #0b5ed7;
  color: #fff;
  border-color: #0b5ed7;
}

.admin-header .admin-header-row1 {
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
}

.admin-header .admin-header-actions {
  margin-left: auto !important;
  gap: 0.35rem !important;
}

#leaderboard-title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

#leaderboard-title .type-label {
  font-size: 0.7rem;
  font-weight: 400;
  color: #6c757d;
  background: #f0f0f0;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .rank-badge {
    width: 30px; height: 30px;
    font-size: 0.75rem;
  }
  #leaderboard-title .type-label {
    font-size: 0.65rem;
    padding: 0.15rem 0.5rem;
  }
}