/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD ADMIN V2 - Server Admin (Mode 2)
   Styles for server management: stats, tables, logs, config
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN NAVIGATION - Special Styles
   ═══════════════════════════════════════════════════════════════════════ */

/* Admin nav item special style */
.nav-item.admin-nav {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(237, 66, 69, 0.1));
  border: 1px solid rgba(255, 215, 0, 0.3);
}

.nav-item.admin-nav:hover {
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(237, 66, 69, 0.2));
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2);
}

.nav-item.admin-nav.active {
  background: linear-gradient(135deg, var(--legendary), var(--danger));
  color: #000;
  font-weight: 600;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN TABS - Modern Pill Style
   ═══════════════════════════════════════════════════════════════════════ */

.admin-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  padding: var(--space-2);
  background: var(--bg-input);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

@media (max-width: 640px) {
  .admin-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .admin-tabs::-webkit-scrollbar { display: none; }
}

.admin-tab {
  padding: var(--space-3) var(--space-5);
  background: transparent;
  border: none;
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.admin-tab:hover {
  background: var(--bg-card-hover);
  color: var(--text-primary);
}

.admin-tab.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════════════════════════
   STATS CARDS - Modern Glassmorphism
   ═══════════════════════════════════════════════════════════════════════ */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (min-width: 768px) {
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.stat-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  text-align: center;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--success));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.stat-card:hover::before {
  opacity: 1;
}

.stat-card.highlight {
  border-color: var(--primary);
  box-shadow: 0 0 20px var(--primary-glow);
}

.stat-icon {
  font-size: 2rem;
  margin-bottom: var(--space-2);
  opacity: 0.8;
}

.stat-value {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--success));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (min-width: 768px) {
  .stat-value { font-size: 2.5rem; }
}

.stat-label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: var(--space-2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: 0.75rem;
  margin-top: var(--space-2);
  padding: 2px 8px;
  border-radius: var(--radius-full);
}

.stat-trend.up {
  background: var(--success-light);
  color: var(--success);
}

.stat-trend.down {
  background: var(--danger-light);
  color: var(--danger);
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN TABLES - Modern Responsive
   ═══════════════════════════════════════════════════════════════════════ */

.admin-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  min-width: 600px;
}

.admin-table th,
.admin-table td {
  padding: var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.admin-table th {
  background: var(--bg-input);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: sticky;
  top: 0;
  z-index: 1;
}

.admin-table tr {
  transition: all var(--transition-fast);
}

.admin-table tbody tr:hover {
  background: var(--primary-light);
}

.admin-table tr:last-child td {
  border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════════════ */

.admin-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.btn-admin {
  padding: var(--space-2) var(--space-3);
  font-size: 0.8rem;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.btn-admin.view {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
}
.btn-admin.edit {
  background: linear-gradient(135deg, var(--warning), #F97316);
  color: #000;
}
.btn-admin.delete {
  background: linear-gradient(135deg, var(--danger), #DC2626);
  color: white;
}
.btn-admin.feature {
  background: linear-gradient(135deg, var(--legendary), #FF8C00);
  color: #000;
}
.btn-admin.ban {
  background: var(--danger);
  color: white;
}
.btn-admin.unban {
  background: var(--success);
  color: #000;
}

.btn-admin:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn-admin:active {
  transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════════
   STATUS BADGES - Modern Pill
   ═══════════════════════════════════════════════════════════════════════ */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.status-badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.status-badge.public { background: var(--success-light); color: var(--success); }
.status-badge.private { background: rgba(168, 85, 247, 0.15); color: var(--epic); }
.status-badge.featured { background: rgba(255, 215, 0, 0.15); color: var(--legendary); }
.status-badge.banned { background: var(--danger-light); color: var(--danger); }
.status-badge.active { background: var(--success-light); color: var(--success); }
.status-badge.pending { background: var(--warning-light); color: var(--warning); }
.status-badge.inactive { background: var(--bg-input); color: var(--text-muted); }
.status-badge.paused { background: rgba(59, 130, 246, 0.15); color: var(--info); }
.status-badge.completed { background: rgba(168, 85, 247, 0.15); color: var(--epic); }
.status-badge.error { background: var(--danger-light); color: var(--danger); }

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN FILTERS - Modern Search Bar
   ═══════════════════════════════════════════════════════════════════════ */

.admin-filters {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
  align-items: flex-end;
  padding: var(--space-4);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.admin-filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex: 1;
  min-width: 150px;
}

.admin-filter-group label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.admin-filter-group select,
.admin-filter-group input {
  padding: var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: all var(--transition-fast);
}

.admin-filter-group select:focus,
.admin-filter-group input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   TOP CREATORS LIST - Modern Leaderboard
   ═══════════════════════════════════════════════════════════════════════ */

.top-list {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  overflow: hidden;
}

.top-list h4 {
  margin-bottom: var(--space-4);
  color: var(--text-muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.top-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-2);
  transition: all var(--transition-fast);
}

.top-item:hover {
  background: var(--bg-input);
  transform: translateX(4px);
}

.top-rank {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  flex-shrink: 0;
}

.top-rank.gold {
  background: linear-gradient(135deg, var(--legendary), #FF8C00);
  color: #000;
  box-shadow: 0 0 12px var(--legendary-glow);
}
.top-rank.silver {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
  color: #000;
}
.top-rank.bronze {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: #000;
}
.top-rank.normal {
  background: var(--bg-input);
  color: var(--text-muted);
}

.top-avatar {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
}

.top-name {
  flex: 1;
  font-weight: 500;
}

.top-value {
  color: var(--text-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════
   LOGS TIMELINE - Modern
   ═══════════════════════════════════════════════════════════════════════ */

.logs-timeline {
  position: relative;
  padding-left: var(--space-6);
}

.logs-timeline::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.log-entry {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  position: relative;
  transition: all var(--transition-fast);
}

.log-entry::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  background: var(--primary);
  border-radius: 50%;
  border: 2px solid var(--bg-primary);
}

.log-entry:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.log-entry.warning::before { background: var(--warning); }
.log-entry.error::before { background: var(--danger); }
.log-entry.success::before { background: var(--success); }
.log-entry.info::before { background: var(--info); }

.log-icon {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.log-content {
  flex: 1;
  min-width: 0;
}

.log-action {
  font-weight: 600;
  margin-bottom: var(--space-1);
  color: var(--text-primary);
}

.log-details {
  font-size: 0.85rem;
  color: var(--text-muted);
  word-break: break-word;
}

.log-time {
  font-size: 0.75rem;
  color: var(--text-disabled);
  white-space: nowrap;
}

.log-user {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--text-secondary);
}

.log-user img {
  width: 20px;
  height: 20px;
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════
   ADMIN IMAGES GRID
   ═══════════════════════════════════════════════════════════════════════ */

.admin-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .admin-images-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

.admin-image-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: all var(--transition-fast);
}

.admin-image-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.admin-image-preview {
  width: 100%;
  height: 110px;
  object-fit: cover;
  transition: transform var(--transition-normal);
}

.admin-image-card:hover .admin-image-preview {
  transform: scale(1.05);
}

.admin-image-info {
  padding: var(--space-3);
  font-size: 0.8rem;
}

.admin-image-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-image-size {
  color: var(--text-muted);
  font-size: 0.75rem;
}

.admin-image-delete {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: var(--danger);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-2);
  cursor: pointer;
  opacity: 0;
  transition: all var(--transition-fast);
}

.admin-image-card:hover .admin-image-delete {
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIG EDITOR - Modern
   ═══════════════════════════════════════════════════════════════════════ */

.config-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  transition: all var(--transition-fast);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .config-item {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

.config-item:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.config-info h4 {
  margin-bottom: var(--space-1);
  font-weight: 600;
}

.config-info p {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.config-value {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

.config-input {
  width: 120px;
  padding: var(--space-3);
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-align: center;
  font-weight: 600;
  font-size: 1rem;
  transition: all var(--transition-fast);
}

.config-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
  outline: none;
}

.config-unit {
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   PAGINATION - Modern
   ═══════════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: var(--space-3);
  background: var(--bg-input);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border);
}

.pagination button {
  padding: var(--space-2) var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.pagination button:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  border-color: var(--primary);
  color: white;
  transform: translateY(-1px);
}

.pagination button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination .page-number {
  padding: var(--space-2) var(--space-4);
  background: var(--primary);
  border-radius: var(--radius-md);
  color: white;
  font-weight: 600;
  min-width: 44px;
  text-align: center;
}

.pagination span {
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   CAMPAIGN MANAGEMENT
   ═══════════════════════════════════════════════════════════════════════ */

.campaign-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  transition: all var(--transition-fast);
}

.campaign-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

.campaign-card.active {
  border-color: var(--success);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.15);
}

.campaign-card.paused {
  border-color: var(--warning);
  opacity: 0.8;
}

.campaign-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: var(--space-4);
}

.campaign-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0 0 var(--space-2) 0;
}

.campaign-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.campaign-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.campaign-progress {
  margin-top: var(--space-4);
}

.campaign-progress-bar {
  height: 8px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.campaign-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary), var(--success));
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}

.campaign-progress-text {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   SUPER BONUS MANAGEMENT
   ═══════════════════════════════════════════════════════════════════════ */

.super-bonus-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.super-bonus-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  transition: all var(--transition-fast);
}

.super-bonus-card:hover {
  border-color: var(--legendary);
  box-shadow: 0 0 15px var(--legendary-glow);
}

.super-bonus-card.disabled {
  opacity: 0.5;
  filter: grayscale(50%);
}

.super-bonus-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.super-bonus-icon {
  font-size: 2rem;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 193, 7, 0.1));
  border-radius: var(--radius-md);
}

.super-bonus-name {
  font-weight: 600;
  font-size: 1rem;
}

.super-bonus-type {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.super-bonus-description {
  font-size: 0.85rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  line-height: 1.5;
}

.super-bonus-stats {
  display: flex;
  gap: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.super-bonus-stat {
  flex: 1;
  text-align: center;
}

.super-bonus-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--legendary);
}

.super-bonus-stat-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   ANNOUNCEMENT SETTINGS
   ═══════════════════════════════════════════════════════════════════════ */

.announcement-category {
  margin-bottom: var(--space-6);
}

.announcement-category h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border);
}

.announcement-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-2);
  transition: all var(--transition-fast);
}

.announcement-toggle:hover {
  border-color: var(--primary);
}

.announcement-toggle-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.announcement-toggle-icon {
  font-size: 1.25rem;
}

.announcement-toggle-name {
  font-weight: 500;
}

.announcement-toggle-desc {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   PROGRESSION ROLES
   ═══════════════════════════════════════════════════════════════════════ */

.progression-role-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  transition: all var(--transition-fast);
}

.progression-role-card:hover {
  border-color: var(--primary);
  transform: translateX(4px);
}

.progression-threshold {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  background: var(--bg-input);
  border-radius: var(--radius-md);
  flex-shrink: 0;
}

.progression-threshold-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary);
}

.progression-threshold-label {
  font-size: 0.65rem;
  color: var(--text-muted);
  text-transform: uppercase;
}

.progression-role-info {
  flex: 1;
}

.progression-role-name {
  font-weight: 600;
  margin-bottom: var(--space-1);
}

.progression-role-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   EMPTY STATE - Admin Version
   ═══════════════════════════════════════════════════════════════════════ */

.empty-state-admin {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px dashed var(--border);
  border-radius: var(--radius-xl);
}

.empty-state-icon {
  font-size: 5rem;
  margin-bottom: var(--space-5);
  opacity: 0.5;
  filter: grayscale(30%);
}

.empty-state-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
}

.empty-state-description {
  font-size: 0.9rem;
  color: var(--text-muted);
  max-width: 400px;
  margin: 0 auto var(--space-6) auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONFIG BOT TAB - Server Configuration View
   ═══════════════════════════════════════════════════════════════════════ */

.config-bot-container {
  padding: var(--space-4);
  min-height: calc(100vh - 80px);
}

/* Empty State - No Server Selected */
.no-server-selected {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}

.no-server-selected .empty-state {
  text-align: center;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-xl);
  max-width: 400px;
}

.no-server-selected .empty-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.no-server-selected h3 {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.no-server-selected p {
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* Config Bot Layout */
.config-bot-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-5);
  max-width: 1400px;
  margin: 0 auto;
}

@media (max-width: 1024px) {
  .config-bot-layout {
    grid-template-columns: 1fr;
  }
}

/* Config Sidebar */
.config-sidebar {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  height: fit-content;
  position: sticky;
  top: 100px;
}

.config-server-info {
  text-align: center;
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-4);
}

.server-icon-large {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin: 0 auto var(--space-3);
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--border);
}

.server-icon-large img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.server-initial-xl {
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-muted);
}

.config-server-info h3 {
  margin: 0 0 var(--space-2);
  font-size: 1.1rem;
}

.premium-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: linear-gradient(135deg, var(--legendary), #FF8C00);
  color: #000;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
}

/* Config Navigation */
.config-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.config-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--text-secondary);
}

.config-nav-item:hover {
  background: var(--bg-input);
  color: var(--text-primary);
}

.config-nav-item.active {
  background: linear-gradient(135deg, var(--primary), var(--primary-hover));
  color: white;
}

.config-nav-item .icon {
  font-size: 1.1rem;
}

.config-nav-item .badge {
  margin-left: auto;
  background: var(--bg-input);
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 600;
}

.config-nav-item.active .badge {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

/* Config Main Content */
.config-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
}

.config-content h2 {
  margin: 0 0 var(--space-6);
  font-size: 1.5rem;
  color: var(--text-primary);
}

/* Stats Grid Override for Config */
.config-content .stats-grid {
  margin-bottom: var(--space-8);
}

.config-content .stat-card {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  text-align: left;
  padding: var(--space-4);
}

.config-content .stat-icon {
  font-size: 2rem;
  margin-bottom: 0;
  background: var(--bg-input);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.config-content .stat-info {
  display: flex;
  flex-direction: column;
}

.config-content .stat-value {
  font-size: 1.5rem;
}

.config-content .stat-label {
  margin-top: 0;
}

/* Config Sections */
.config-section {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}

.config-section h3 {
  margin: 0 0 var(--space-4);
  font-size: 1.1rem;
  color: var(--text-primary);
}

.config-section.empty-theme {
  text-align: center;
  padding: var(--space-8);
}

.config-section.empty-theme p {
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* Theme Details Grid */
.theme-details-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

@media (max-width: 768px) {
  .theme-details-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.detail-item {
  text-align: center;
  padding: var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-md);
}

.detail-label {
  display: block;
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.detail-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

/* Quick Actions */
.quick-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* Top Players List */
.top-players-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.player-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-card);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
}

.player-row:hover {
  transform: translateX(4px);
  background: var(--bg-input);
}

.player-rank {
  width: 28px;
  height: 28px;
  background: var(--bg-input);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.player-row:nth-child(1) .player-rank {
  background: linear-gradient(135deg, var(--legendary), #FF8C00);
  color: #000;
}

.player-row:nth-child(2) .player-rank {
  background: linear-gradient(135deg, #C0C0C0, #A0A0A0);
  color: #000;
}

.player-row:nth-child(3) .player-rank {
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  color: #000;
}

.player-name {
  flex: 1;
  font-weight: 500;
}

.player-score {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Loading State
   ═══════════════════════════════════════════════════════════════════ */

.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  color: var(--text-muted);
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: var(--space-4);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Empty State (Generic)
   ═══════════════════════════════════════════════════════════════════ */

.empty-state {
  text-align: center;
  padding: var(--space-8);
  background: var(--bg-card);
  border: 2px dashed var(--border);
  border-radius: var(--radius-xl);
  max-width: 500px;
  margin: var(--space-6) auto;
}

.empty-state .empty-icon {
  font-size: 4rem;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.6;
}

.empty-state h3 {
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}

.empty-state p {
  color: var(--text-muted);
  margin-bottom: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Search Bar
   ═══════════════════════════════════════════════════════════════════ */

.search-bar {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.search-input {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.search-input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(88, 101, 242, 0.2);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Players Table
   ═══════════════════════════════════════════════════════════════════ */

.players-table {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.players-table table {
  width: 100%;
  border-collapse: collapse;
}

.players-table th,
.players-table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.players-table th {
  background: var(--bg-secondary);
  font-weight: 600;
  color: var(--text-secondary);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.players-table tbody tr:hover {
  background: var(--bg-hover);
}

.players-table .player-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.players-table .player-cell .player-name {
  font-weight: 500;
}

.players-table .player-cell .player-id {
  color: var(--text-muted);
  font-size: 0.8rem;
}

.btn-small {
  padding: var(--space-1) var(--space-3);
  font-size: 0.85rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Pagination
   ═══════════════════════════════════════════════════════════════════ */

.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: var(--space-4);
  border-top: 1px solid var(--border);
}

.pagination-info {
  color: var(--text-muted);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Toggles Grid (Announcements)
   ═══════════════════════════════════════════════════════════════════ */

.toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-4);
}

.toggle-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: all 0.2s ease;
}

.toggle-item:hover {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.toggle-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.toggle-label span {
  font-weight: 500;
}

.toggle-label small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.toggle-switch {
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--bg-card);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-switch.active {
  background: var(--success-bg);
  border-color: var(--success);
}

.toggle-switch span {
  font-size: 1.2rem;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Settings (Parametres)
   ═══════════════════════════════════════════════════════════════════ */

.settings-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.setting-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}

.setting-label span {
  font-weight: 500;
}

.setting-label small {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.setting-input,
.setting-select {
  width: 200px;
  padding: var(--space-2) var(--space-3);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-size: 0.95rem;
}

.setting-input:disabled,
.setting-select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.info-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  background: rgba(88, 101, 242, 0.1);
  border: 1px solid rgba(88, 101, 242, 0.3);
  border-radius: var(--radius-md);
  margin-top: var(--space-5);
}

.info-box .info-icon {
  font-size: 1.2rem;
}

.info-box p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Theme Details (Active Theme Section)
   ═══════════════════════════════════════════════════════════════════ */

.theme-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.status-badge {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.8rem;
  font-weight: 600;
}

.status-badge.active {
  background: var(--success-bg);
  color: var(--success);
}

.config-subsection {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
}

.config-subsection h4 {
  margin-bottom: var(--space-4);
  color: var(--text-secondary);
}

.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.item-card {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  text-align: center;
  transition: all 0.2s ease;
}

.item-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.item-card.legendary {
  border-color: var(--legendary);
  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), transparent);
}

.item-card.epic {
  border-color: var(--epic);
  background: linear-gradient(135deg, rgba(163, 53, 238, 0.1), transparent);
}

.item-card.rare {
  border-color: var(--rare);
  background: linear-gradient(135deg, rgba(52, 152, 219, 0.1), transparent);
}

.item-card.common {
  border-color: var(--common);
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-info .item-name {
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-info .item-rarity {
  font-size: 0.75rem;
  color: var(--text-muted);
  text-transform: capitalize;
}

.traps-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.trap-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}

.trap-item .trap-name {
  flex: 1;
  font-weight: 500;
}

.trap-item .trap-effect {
  color: var(--text-muted);
  font-size: 0.85rem;
}

.trap-item .trap-status {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  font-weight: 600;
  background: var(--bg-card);
  color: var(--text-muted);
}

.trap-item .trap-status.active {
  background: var(--success-bg);
  color: var(--success);
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION: Section description
   ═══════════════════════════════════════════════════════════════════ */

.section-desc {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}