/* stats-trends.css */
/* Dark dashboard with glassmorphism cards */
body.bg-dark {
  background-color: #0B1020;
  color: #F5F7FA;
  font-family: 'Inter', sans-serif;
}

.hero {
  position: relative;
  padding: 4rem 1rem;
  text-align: center;
  background: radial-gradient(circle at 20% 20%, rgba(0,229,255,0.2), transparent),
              radial-gradient(circle at 80% 80%, rgba(0,255,133,0.2), transparent),
              #0B1020;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 75% 25%, rgba(0,255,133,0.2), transparent),
              radial-gradient(circle at 25% 75%, rgba(0,229,255,0.2), transparent);
  animation: heroPulse 8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes heroPulse {
  from { opacity: 0.35; }
  to   { opacity: 1; }
}
.hero h1 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
  color: #00E5FF;
}
.hero .subheadline {
  font-size: 1.2rem;
  margin-bottom: 1.5rem;
  color: #F5F7FA;
}
.cta-buttons .btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  margin: 0 0.5rem;
  border-radius: 0.5rem;
  font-weight: 600;
  transition: transform 0.2s, background-color 0.2s;
}
.btn-primary {background: #00E5FF; color: #0B1020;}
.btn-secondary {background: #00FF85; color: #0B1020;}
.btn:hover {transform: translateY(-2px); opacity:0.9;}

.section {padding: 2rem 1rem;}
.section h2 {margin-bottom: 1rem; color: #00E5FF;}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.card {
  background: rgba(18,26,47,0.6);
  backdrop-filter: blur(10px);
  border-radius: 0.75rem;
  padding: 1rem;
  text-align: center;
  color: #F5F7FA;
}
.card h3 {margin-bottom: 0.5rem; font-size: 1rem;}
.counter {font-size: 2rem; font-weight: bold; color: #00E5FF;}

.live‑counters {
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center;
}
.live‑item {background: rgba(18,26,47,0.5); padding: 1rem; border-radius:0.5rem; text-align:center; min-width:120px;}
.live‑item .label {display:block; font-size:0.9rem; color:#9AA4B2;}
.live‑item .value {font-size:1.5rem; color:#00FF85;}

.footer {text-align:center; padding:1rem; background:#121A2F; color:#9AA4B2; font-size:0.9rem;}

/* DataTables overrides for dark theme */
.dataTable tbody tr {background-color: rgba(18,26,47,0.4); color:#F5F7FA;}
.dataTable thead {background:#121A2F; color:#00E5FF;}
.dataTable .sorting:after, .dataTable .sorting_asc:after, .dataTable .sorting_desc:after {color:#00E5FF;}