<?php
require_once 'includes/auth_check.php';
$page_title = 'Dashboard';

// ── Stats ─────────────────────────────────────────────────────
$total_users    = db_fetch_one("SELECT COUNT(*) AS c FROM users")['c'] ?? 0;
$active_users   = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE status='active'")['c'] ?? 0;
$inactive_users = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE status='inactive'")['c'] ?? 0;
$banned_users   = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE status='banned'")['c'] ?? 0;
$pending_users  = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE status='pending'")['c'] ?? 0;
$total_admins   = db_fetch_one("SELECT COUNT(*) AS c FROM admins")['c'] ?? 0;
$verified_users = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE email_verified=1")['c'] ?? 0;

$new_this_month = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE MONTH(created_at)=MONTH(NOW()) AND YEAR(created_at)=YEAR(NOW())")['c'] ?? 0;
$new_last_month = db_fetch_one("SELECT COUNT(*) AS c FROM users WHERE MONTH(created_at)=MONTH(NOW()-INTERVAL 1 MONTH) AND YEAR(created_at)=YEAR(NOW()-INTERVAL 1 MONTH)")['c'] ?? 1;
$growth = $new_last_month > 0 ? round((($new_this_month - $new_last_month) / $new_last_month) * 100, 1) : 0;

$recent_users = db_fetch_all("SELECT id,full_name,username,email,status,avatar,created_at,email_verified FROM users ORDER BY created_at DESC LIMIT 8");
$recent_activity = db_fetch_all("SELECT al.action,al.details,al.ip_address,al.created_at,al.target_type,a.full_name AS admin_name,a.avatar AS admin_avatar FROM activity_log al JOIN admins a ON a.id=al.admin_id ORDER BY al.created_at DESC LIMIT 10");

// Monthly for sparkline
$monthly = db_fetch_all("SELECT DATE_FORMAT(created_at,'%b') AS month, DATE_FORMAT(created_at,'%Y-%m') AS ym, COUNT(*) AS count FROM users WHERE created_at>=DATE_SUB(NOW(),INTERVAL 6 MONTH) GROUP BY ym,month ORDER BY ym ASC");

require_once 'includes/header.php';
?>

<style>
/* ══ LIGHT MODE FIRST / DARK MODE SUPPORT ════════════════════ */
:root {
  /* Light mode (default) */
  --bg-primary: #f8faff;
  --bg-secondary: #ffffff;
  --text-primary: #1e293b;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --glass-bg: rgba(255, 255, 255, 0.75);
  --glass-bg-hover: rgba(255, 255, 255, 0.9);
  --glass-border: rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.04);
  --card-bg: rgba(255, 255, 255, 0.6);
  --backdrop-blur: blur(12px);
  
  /* Accent colors - Wadata brand */
  --accent: #1A6FE8;
  --accent-2: #4E96F4;
  --accent-glow: rgba(26,111,232,.15);
  --pink: #E8621A;
  --teal: #F0A500;
  --or: #E8621A;
  --or2: #F48340;
  --or-g: rgba(232,98,26,.12);
  --gold: #F0A500;
  --gold-g: rgba(240,165,0,.12);
  
  /* Status colors */
  --success: #10B981;
  --success-glow: rgba(16,185,129,.12);
  --warning: #F0A500;
  --warning-glow: rgba(240,165,0,.12);
  --danger: #EF4444;
  --danger-glow: rgba(239,68,68,.12);
  --info: #8B5CF6;
  --info-glow: rgba(139,92,246,.12);
  --cyan: #06B6D4;
  --cyan-glow: rgba(6,182,212,.12);
  --purple: #EC4899;
  --purple-glow: rgba(236,72,153,.12);
  
  /* Layout */
  --radius-lg: 24px;
  --radius-md: 18px;
  --radius-sm: 14px;
  --gap: 22px;
  --transition: all 0.25s ease;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-primary: #0b1120;
    --bg-secondary: #151f31;
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --glass-bg: rgba(21, 31, 49, 0.7);
    --glass-bg-hover: rgba(30, 41, 59, 0.8);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    --card-bg: rgba(21, 31, 49, 0.5);
  }
}

/* Base styles */
body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.2s ease;
}

/* ══ GLASSMORPHISM BASE ════════════════════════════════════ */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
}

.glass-card:hover {
  background: var(--glass-bg-hover);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.08);
}

/* ══ STAT CARDS ════════════════════════════════════════════ */
.wstat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  margin-bottom: var(--gap);
}

.ws-card {
  background: var(--card-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 22px 22px 18px;
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  animation: fadeUp .5s ease both;
  box-shadow: var(--glass-shadow);
}

.ws-card:hover {
  transform: translateY(-4px);
  background: var(--glass-bg-hover);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

/* Gradient accent bar */
.ws-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  opacity: 0.8;
}

.ws-card.c-or::before { background: linear-gradient(90deg, var(--or), var(--or2)); }
.ws-card.c-bl::before { background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.ws-card.c-gd::before { background: linear-gradient(90deg, var(--gold), #FBC344); }
.ws-card.c-gr::before { background: linear-gradient(90deg, #10B981, #34D399); }
.ws-card.c-re::before { background: linear-gradient(90deg, #EF4444, #F87171); }
.ws-card.c-pp::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }
.ws-card.c-cy::before { background: linear-gradient(90deg, #06B6D4, #38BDF8); }
.ws-card.c-pk::before { background: linear-gradient(90deg, #EC4899, #F472B6); }

/* Glow effect */
.ws-card::after {
  content: '';
  position: absolute;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  right: -60px;
  bottom: -60px;
  filter: blur(50px);
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.ws-card:hover::after { opacity: 0.2; }
.ws-card.c-or::after { background: var(--or); }
.ws-card.c-bl::after { background: var(--accent); }
.ws-card.c-gd::after { background: var(--gold); }
.ws-card.c-gr::after { background: #10B981; }
.ws-card.c-re::after { background: #EF4444; }
.ws-card.c-pp::after { background: #8B5CF6; }
.ws-card.c-cy::after { background: #06B6D4; }
.ws-card.c-pk::after { background: #EC4899; }

.ws-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.ws-ico {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 18px;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}

.ws-n {
  font-family: 'Epilogue', var(--font-display), sans-serif;
  font-size: 34px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -1px;
  margin-bottom: 4px;
}

.ws-l {
  font-size: 12.5px;
  color: var(--text-muted);
  font-weight: 500;
  letter-spacing: 0.2px;
}

.ws-d {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 30px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

.ws-d.up { 
  background: var(--success-glow);
  color: var(--success);
}
.ws-d.down { 
  background: var(--danger-glow);
  color: var(--danger);
}
.ws-d.neu { 
  background: var(--glass-bg);
  color: var(--text-muted);
}

/* Sparkline */
.sparkline {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  margin-top: 12px;
  position: relative;
  z-index: 1;
}

.sp-bar {
  flex: 1;
  border-radius: 3px;
  opacity: 0.7;
  transition: opacity 0.2s, transform 0.2s;
  min-width: 3px;
}

.sp-bar:hover {
  opacity: 1;
  transform: scaleY(1.05);
}

/* ══ TWO COLUMN ROW ════════════════════════════════════════ */
.dash-row {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--gap);
  margin-bottom: var(--gap);
}

/* ══ WELCOME BANNER ════════════════════════════════════════ */
.welcome-banner {
  background: linear-gradient(135deg, 
    rgba(232,98,26,0.95) 0%, 
    rgba(244,131,64,0.95) 40%, 
    rgba(26,111,232,0.95) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-lg);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: var(--gap);
  position: relative;
  overflow: hidden;
  animation: fadeUp .45s ease both;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

.welcome-banner::before {
  content: '';
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  right: -80px;
  top: -100px;
  pointer-events: none;
}

.welcome-banner::after {
  content: '';
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  left: 30%;
  bottom: -80px;
  pointer-events: none;
}

.wb-text h2 {
  font-family: 'Epilogue', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.wb-text p {
  font-size: 14px;
  color: rgba(255,255,255,0.9);
  line-height: 1.5;
  text-shadow: 0 1px 5px rgba(0,0,0,0.1);
}

.wb-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  z-index: 1;
}

.wb-btn {
  padding: 12px 24px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.wb-btn.solid {
  background: #fff;
  color: var(--or);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

.wb-btn.solid:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

.wb-btn.ghost {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}

.wb-btn.ghost:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-3px);
}

/* ══ ACTIVITY ICONS ════════════════════════════════════════ */
.act-ico {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 14px;
  flex-shrink: 0;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.1);
}

/* ══ PROGRESS BARS ═════════════════════════════════════════ */
.prog-row {
  margin-bottom: 18px;
}

.prog-hd {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  margin-bottom: 8px;
}

.prog-lbl {
  font-weight: 600;
  color: var(--text-secondary);
}

.prog-val {
  font-weight: 700;
}

.prog-track {
  height: 8px;
  background: var(--glass-bg);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.prog-fill {
  height: 100%;
  border-radius: 20px;
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* ══ QUICK ACTIONS ═════════════════════════════════════════ */
.qa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.qa-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px 10px;
  background: var(--card-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  text-align: center;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}

.qa-btn:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-4px);
  color: var(--text-primary);
  box-shadow: 0 16px 32px rgba(0,0,0,0.1);
}

.qa-btn i {
  font-size: 20px;
}

.nav-badge {
  background: var(--or);
  color: white;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 4px;
}

/* ══ ENROLMENT CHART ═══════════════════════════════════════ */
.chart-wrap {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  height: 90px;
  padding: 0 6px;
}

.ch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}

.ch-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, var(--or), var(--or2));
  transition: height 1s cubic-bezier(.22,1,.36,1);
  min-height: 6px;
  box-shadow: 0 -4px 12px rgba(232,98,26,0.3);
  position: relative;
  overflow: hidden;
}

.ch-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(255,255,255,0.3);
  border-radius: 2px;
}

.ch-lbl {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
}

/* ══ TABLES ════════════════════════════════════════════════ */
.table-wrap {
  overflow-x: auto;
  border-radius: 0;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.admin-table th {
  text-align: left;
  padding: 16px 24px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: rgba(0,0,0,0.02);
}

.admin-table td {
  padding: 16px 24px;
  font-size: 13px;
  border-top: 1px solid var(--glass-border);
}

/* Badges */
.badge {
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 11px;
  font-weight: 700;
  text-transform: capitalize;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.1);
}

.badge-active {
  background: var(--success-glow);
  color: var(--success);
}
.badge-inactive {
  background: var(--info-glow);
  color: var(--info);
}
.badge-pending {
  background: var(--warning-glow);
  color: var(--gold);
}
.badge-banned {
  background: var(--danger-glow);
  color: var(--danger);
}

/* Avatars */
.avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  object-fit: cover;
  border: 2px solid var(--glass-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.avatar-sm {
  width: 30px;
  height: 30px;
  border-radius: 10px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  border: none;
}

.btn-glass {
  background: var(--glass-bg);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: 1px solid var(--glass-border);
  color: var(--text-primary);
  box-shadow: var(--glass-shadow);
}

.btn-glass:hover {
  background: var(--glass-bg-hover);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

.btn-sm {
  padding: 6px 14px;
  font-size: 11px;
}

.btn-icon {
  padding: 8px;
  border-radius: 10px;
}

/* Animations */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ══ RESPONSIVE DESIGN ═════════════════════════════════════ */

/* Tablet */
@media (max-width: 1100px) {
  .wstat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dash-row {
    grid-template-columns: 1fr;
  }
  
  .welcome-banner {
    padding: 24px;
    flex-direction: column;
    text-align: center;
  }
  
  .wb-actions {
    width: 100%;
    justify-content: center;
  }
  
  .qa-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Mobile */
@media (max-width: 768px) {
  :root {
    --gap: 16px;
    --radius-lg: 20px;
    --radius-md: 16px;
  }
  
  .wstat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  
  .ws-card {
    padding: 16px 16px 14px;
  }
  
  .ws-n {
    font-size: 26px;
  }
  
  .ws-ico {
    width: 38px;
    height: 38px;
    font-size: 16px;
  }
  
  .ws-l {
    font-size: 11px;
  }
  
  .welcome-banner {
    padding: 20px;
  }
  
  .wb-text h2 {
    font-size: 18px;
  }
  
  .wb-text p {
    font-size: 12px;
  }
  
  .wb-btn {
    padding: 10px 18px;
    font-size: 12px;
  }
  
  .qa-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .qa-btn {
    padding: 14px 8px;
    font-size: 11px;
  }
  
  .qa-btn i {
    font-size: 18px;
  }
  
  .chart-wrap {
    height: 70px;
    gap: 8px;
  }
  
  .admin-table th,
  .admin-table td {
    padding: 12px 16px;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .wstat-grid {
    grid-template-columns: 1fr;
  }
  
  .qa-grid {
    grid-template-columns: 1fr;
  }
  
  .wb-actions {
    flex-direction: column;
    gap: 8px;
  }
  
  .wb-btn {
    width: 100%;
    justify-content: center;
  }
  
  .chart-wrap {
    gap: 5px;
  }
  
  .ch-lbl {
    font-size: 9px;
  }
  
  [style*="display:flex"]:has(.act-ico) {
    flex-wrap: wrap;
  }
}

/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  .qa-btn,
  .wb-btn,
  .btn {
    padding: 14px 20px;
  }
  
  .ws-card:hover {
    transform: none;
  }
  
  .qa-btn:hover {
    transform: none;
  }
}

/* Dark mode specific adjustments */
@media (prefers-color-scheme: dark) {
  .ws-ico {
    border-color: rgba(255,255,255,0.1);
  }
  
  .badge {
    border-color: rgba(255,255,255,0.05);
  }
  
  .avatar {
    border-color: rgba(255,255,255,0.1);
  }
  
  .admin-table th {
    background: rgba(0,0,0,0.2);
  }
}
</style>

<!-- ══ WELCOME BANNER ═══════════════════════════════════════ -->
<div class="welcome-banner">
  <div class="wb-text">
    <h2>Good <?= date('G') < 12 ? 'morning' : (date('G') < 17 ? 'afternoon' : 'evening') ?>, <?= htmlspecialchars(explode(' ', $current_admin['name'])[0]) ?> 👋</h2>
    <p>Here's what's happening at Wadata today — <?= date('l, d F Y') ?></p>
  </div>
  <div class="wb-actions">
    <?php if($pending_users > 0): ?>
      <a href="users.php?status=pending" class="wb-btn solid">
        <i class="fas fa-user-clock"></i> <?= $pending_users ?> Pending
      </a>
    <?php endif; ?>
    <a href="users.php" class="wb-btn ghost">
      <i class="fas fa-users"></i> All Trainees
    </a>
  </div>
</div>

<!-- ══ STAT CARDS ROW 1 ══════════════════════════════════════ -->
<div class="wstat-grid dash-page">

  <!-- Total Trainees -->
  <div class="ws-card c-or" style="animation-delay:.04s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($total_users) ?></div>
        <div class="ws-l">Total Trainees</div>
      </div>
      <div class="ws-ico" style="background:var(--or-g);color:var(--or)">
        <i class="fas fa-users"></i>
      </div>
    </div>
    <div class="ws-d <?= $growth >= 0 ? 'up' : 'down' ?>">
      <i class="fas fa-arrow-<?= $growth >= 0 ? 'up' : 'down' ?>-right"></i>
      <?= abs($growth) ?>% vs last month
    </div>
  </div>

  <!-- Active -->
  <div class="ws-card c-gr" style="animation-delay:.08s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($active_users) ?></div>
        <div class="ws-l">Active Trainees</div>
      </div>
      <div class="ws-ico" style="background:var(--success-glow);color:var(--success)">
        <i class="fas fa-circle-check"></i>
      </div>
    </div>
    <div class="ws-d neu">
      <i class="fas fa-percent"></i>
      <?= $total_users > 0 ? round($active_users/$total_users*100) : 0 ?>% of total
    </div>
  </div>

  <!-- New this month -->
  <div class="ws-card c-bl" style="animation-delay:.12s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($new_this_month) ?></div>
        <div class="ws-l">New This Month</div>
      </div>
      <div class="ws-ico" style="background:var(--accent-glow);color:var(--accent)">
        <i class="fas fa-user-plus"></i>
      </div>
    </div>
    <?php if ($monthly): ?>
      <div class="sparkline">
        <?php
          $maxC = max(array_column($monthly, 'count') ?: [1]);
          foreach ($monthly as $m):
            $h = max(10, round(($m['count']/$maxC)*100));
        ?>
          <div class="sp-bar" style="height:<?= $h ?>%;background:linear-gradient(to top,var(--accent),var(--accent-2));"
               title="<?= $m['month'] ?>: <?= $m['count'] ?>"></div>
        <?php endforeach; ?>
      </div>
    <?php endif; ?>
  </div>

  <!-- Pending -->
  <div class="ws-card c-gd" style="animation-delay:.16s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($pending_users) ?></div>
        <div class="ws-l">Awaiting Approval</div>
      </div>
      <div class="ws-ico" style="background:var(--warning-glow);color:var(--gold)">
        <i class="fas fa-hourglass-half"></i>
      </div>
    </div>
    <div class="ws-d <?= $pending_users > 0 ? 'down' : 'up' ?>">
      <i class="fas fa-<?= $pending_users > 0 ? 'triangle-exclamation' : 'circle-check' ?>"></i>
      <?= $pending_users > 0 ? 'Needs review' : 'All reviewed' ?>
    </div>
  </div>

  <!-- Verified -->
  <div class="ws-card c-cy" style="animation-delay:.2s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($verified_users) ?></div>
        <div class="ws-l">Verified Emails</div>
      </div>
      <div class="ws-ico" style="background:var(--cyan-glow);color:var(--cyan)">
        <i class="fas fa-envelope-circle-check"></i>
      </div>
    </div>
    <div class="ws-d neu">
      <i class="fas fa-percent"></i>
      <?= $total_users > 0 ? round($verified_users/$total_users*100) : 0 ?>% verified
    </div>
  </div>

  <!-- Inactive -->
  <div class="ws-card c-pp" style="animation-delay:.24s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($inactive_users) ?></div>
        <div class="ws-l">Inactive</div>
      </div>
      <div class="ws-ico" style="background:var(--info-glow);color:var(--info)">
        <i class="fas fa-user-xmark"></i>
      </div>
    </div>
    <div class="ws-d neu">
      <i class="fas fa-percent"></i>
      <?= $total_users > 0 ? round($inactive_users/$total_users*100) : 0 ?>% of total
    </div>
  </div>

  <!-- Banned -->
  <div class="ws-card c-re" style="animation-delay:.28s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($banned_users) ?></div>
        <div class="ws-l">Banned</div>
      </div>
      <div class="ws-ico" style="background:var(--danger-glow);color:var(--danger)">
        <i class="fas fa-ban"></i>
      </div>
    </div>
    <div class="ws-d <?= $banned_users > 0 ? 'down' : 'up' ?>">
      <i class="fas fa-<?= $banned_users > 0 ? 'shield-exclamation' : 'shield-check' ?>"></i>
      <?= $banned_users > 0 ? 'Monitor' : 'All clear' ?>
    </div>
  </div>

  <!-- Admins -->
  <div class="ws-card c-pk" style="animation-delay:.32s">
    <div class="ws-top">
      <div>
        <div class="ws-n"><?= number_format($total_admins) ?></div>
        <div class="ws-l">Admin Accounts</div>
      </div>
      <div class="ws-ico" style="background:var(--purple-glow);color:var(--purple)">
        <i class="fas fa-user-shield"></i>
      </div>
    </div>
    <div class="ws-d neu">
      <i class="fas fa-crown"></i>
      <?= $current_admin['role'] === 'super_admin' ? 'You: Super Admin' : 'You: Admin' ?>
    </div>
  </div>

</div>

<!-- ══ MAIN CONTENT ROW ══════════════════════════════════════ -->
<div class="dash-row">

  <!-- Recent Trainees Table -->
  <div class="glass-card" style="padding:0;overflow:hidden;animation:fadeUp .5s ease both;animation-delay:.18s;">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--glass-border);">
      <div>
        <h2 style="font-family:'Epilogue',var(--font-display),sans-serif;font-size:16px;font-weight:800;color:var(--text-primary);">Recent Trainees</h2>
        <p style="font-size:12px;color:var(--text-muted);margin-top:2px;">Latest 8 enrolments</p>
      </div>
      <a href="users.php" class="btn btn-glass btn-sm">View All <i class="fas fa-arrow-right"></i></a>
    </div>
    <div class="table-wrap" style="border:none;border-radius:0;">
      <table class="admin-table">
        <thead>
          <tr>
            <th>Trainee</th>
            <th>Status</th>
            <th>Verified</th>
            <th>Enrolled</th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <?php if (empty($recent_users)): ?>
            <tr><td colspan="5" style="text-align:center;padding:40px;color:var(--text-muted);">
              <i class="fas fa-users" style="font-size:28px;display:block;margin-bottom:10px;opacity:.2;"></i>
              No trainees yet
            </td></tr>
          <?php else: foreach ($recent_users as $u): ?>
            <tr>
              <td>
                <div style="display:flex;align-items:center;gap:10px;">
                  <img src="assets/images/avatars/<?= htmlspecialchars($u['avatar'] ?? 'Avatar.png') ?>"
                       onerror="this.src='assets/images/Avatar.png'"
                       class="avatar avatar-sm" alt=""/>
                  <div>
                    <div style="font-weight:700;font-size:13px;color:var(--text-primary);"><?= htmlspecialchars($u['full_name']) ?></div>
                    <div style="font-size:11px;color:var(--text-muted);"><?= htmlspecialchars($u['email']) ?></div>
                  </div>
                </div>
              </td>
              <td><span class="badge badge-<?= $u['status'] ?>"><?= ucfirst($u['status']) ?></span></td>
              <td>
                <?php if ($u['email_verified']): ?>
                  <span style="color:var(--success);font-size:12px;font-weight:700;"><i class="fas fa-circle-check"></i> Yes</span>
                <?php else: ?>
                  <span style="color:var(--text-muted);font-size:12px;"><i class="fas fa-circle-xmark"></i> No</span>
                <?php endif; ?>
              </td>
              <td style="font-size:12px;color:var(--text-muted);"><?= date('d M Y', strtotime($u['created_at'])) ?></td>
              <td>
                <div style="display:flex;gap:6px;">
                  <a href="user_view.php?id=<?= $u['id'] ?>" class="btn btn-glass btn-sm btn-icon" title="View"><i class="fas fa-eye"></i></a>
                  <a href="user_edit.php?id=<?= $u['id'] ?>" class="btn btn-glass btn-sm btn-icon" title="Edit"><i class="fas fa-pen"></i></a>
                </div>
              </td>
            </tr>
          <?php endforeach; endif; ?>
        </tbody>
      </table>
    </div>
  </div>

  <!-- Right sidebar -->
  <div style="display:flex;flex-direction:column;gap:18px;">

    <!-- Enrolment chart -->
    <div class="glass-card" style="animation:fadeUp .5s ease both;animation-delay:.22s;padding:20px;">
      <h3 style="font-family:'Epilogue',var(--font-display),sans-serif;font-size:14px;font-weight:800;margin-bottom:16px;color:var(--text-primary);">
        Enrolment Trend <span style="font-size:11px;color:var(--text-muted);font-weight:500;">(6 months)</span>
      </h3>
      <?php if (!empty($monthly)): ?>
        <?php $maxC = max(array_column($monthly, 'count') ?: [1]); ?>
        <div class="chart-wrap">
          <?php foreach ($monthly as $m):
            $h = max(8, round(($m['count']/$maxC)*100));
          ?>
            <div class="ch-col">
              <div class="ch-bar" style="height:<?= $h ?>%;" title="<?= $m['month'] ?>: <?= $m['count'] ?> trainees"></div>
              <div class="ch-lbl"><?= $m['month'] ?></div>
            </div>
          <?php endforeach; ?>
        </div>
      <?php else: ?>
        <div style="text-align:center;padding:20px;color:var(--text-muted);font-size:12px;">No enrolment data yet</div>
      <?php endif; ?>
    </div>

    <!-- Status breakdown -->
    <div class="glass-card" style="animation:fadeUp .5s ease both;animation-delay:.26s;padding:20px;">
      <h3 style="font-family:'Epilogue',var(--font-display),sans-serif;font-size:14px;font-weight:800;margin-bottom:16px;color:var(--text-primary);">Trainee Breakdown</h3>
      <?php
      $breakdown = [
        ['Active',   $active_users,   'linear-gradient(90deg,#10B981,#34D399)', '#10B981'],
        ['Inactive', $inactive_users, 'linear-gradient(90deg,#8B5CF6,#A78BFA)', '#8B5CF6'],
        ['Pending',  $pending_users,  'linear-gradient(90deg,var(--gold),#FBC344)', 'var(--gold)'],
        ['Banned',   $banned_users,   'linear-gradient(90deg,#EF4444,#F87171)', '#EF4444'],
      ];
      foreach ($breakdown as [$lbl, $cnt, $grad, $col]):
        $pct = $total_users > 0 ? round($cnt/$total_users*100) : 0;
      ?>
        <div class="prog-row">
          <div class="prog-hd">
            <span class="prog-lbl"><?= $lbl ?></span>
            <span class="prog-val" style="color:<?= $col ?>;"><?= $cnt ?> <span style="color:var(--text-muted);font-weight:500;">(<?= $pct ?>%)</span></span>
          </div>
          <div class="prog-track">
            <div class="prog-fill" style="width:<?= $pct ?>%;background:<?= $grad ?>;"></div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>

    <!-- Quick actions -->
    <div class="glass-card" style="animation:fadeUp .5s ease both;animation-delay:.3s;padding:20px;">
      <h3 style="font-family:'Epilogue',var(--font-display),sans-serif;font-size:14px;font-weight:800;margin-bottom:14px;color:var(--text-primary);">Quick Actions</h3>
      <div class="qa-grid">
        <a href="users.php?status=pending" class="qa-btn">
          <i class="fas fa-user-clock" style="color:var(--gold);"></i>
          Review<br>Pending
          <?php if($pending_users>0): ?><span class="nav-badge" style="margin-top:2px;"><?= $pending_users ?></span><?php endif; ?>
        </a>
        <a href="users.php" class="qa-btn">
          <i class="fas fa-users" style="color:var(--or);"></i>
          All<br>Trainees
        </a>
        <a href="activity_log.php" class="qa-btn">
          <i class="fas fa-clock-rotate-left" style="color:var(--accent);"></i>
          Activity<br>Log
        </a>
        <a href="settings.php" class="qa-btn">
          <i class="fas fa-sliders" style="color:var(--info);"></i>
          Settings
        </a>
        <a href="profile.php" class="qa-btn">
          <i class="fas fa-circle-user" style="color:var(--cyan);"></i>
          My<br>Profile
        </a>
        <?php if($current_admin['role']==='super_admin'): ?>
        <a href="admins.php" class="qa-btn">
          <i class="fas fa-user-shield" style="color:var(--purple);"></i>
          Admins
        </a>
        <?php endif; ?>
      </div>
    </div>

  </div>
</div>

<!-- ══ ACTIVITY LOG ══════════════════════════════════════════ -->
<div class="glass-card" style="padding:0;overflow:hidden;animation:fadeUp .5s ease both;animation-delay:.34s;">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:20px 24px 16px;border-bottom:1px solid var(--glass-border);">
    <div>
      <h2 style="font-family:'Epilogue',var(--font-display),sans-serif;font-size:16px;font-weight:800;color:var(--text-primary);">Recent Activity</h2>
      <p style="font-size:12px;color:var(--text-muted);margin-top:2px;">Latest admin actions</p>
    </div>
    <a href="activity_log.php" class="btn btn-glass btn-sm">Full Log <i class="fas fa-arrow-right"></i></a>
  </div>

  <?php if (empty($recent_activity)): ?>
    <div style="text-align:center;padding:40px;color:var(--text-muted);">
      <i class="fas fa-clock-rotate-left" style="font-size:28px;display:block;margin-bottom:10px;opacity:.2;"></i>
      No activity recorded yet
    </div>
  <?php else: ?>
    <div style="padding:6px 0;">
      <?php
      $act_icons = [
        'login'    => ['fa-right-to-bracket',  'rgba(16,185,129,.12)',  '#10B981'],
        'logout'   => ['fa-right-from-bracket', 'rgba(239,68,68,.12)',   '#EF4444'],
        'delete'   => ['fa-trash',              'rgba(239,68,68,.12)',   '#EF4444'],
        'password' => ['fa-key',                'rgba(240,165,0,.12)',   'var(--gold)'],
        'avatar'   => ['fa-image',              'rgba(6,182,212,.12)',   '#06B6D4'],
        'edit'     => ['fa-pen-to-square',      'rgba(139,92,246,.12)', '#8B5CF6'],
        'status'   => ['fa-toggle-on',          'rgba(26,111,232,.12)', 'var(--accent)'],
        'create'   => ['fa-circle-plus',        'rgba(16,185,129,.12)', '#10B981'],
        'setting'  => ['fa-sliders',            'rgba(232,98,26,.12)',  'var(--or)'],
      ];
      foreach ($recent_activity as $log):
        $ico = ['fa-circle-dot','rgba(255,255,255,.06)','var(--text-muted)'];
        foreach ($act_icons as $k => $v) {
          if (str_contains($log['action'], $k)) { $ico = $v; break; }
        }
      ?>
        <div style="display:flex;align-items:center;gap:14px;padding:13px 24px;border-bottom:1px solid var(--glass-border);transition:background var(--transition);"
             onmouseover="this.style.background='var(--glass-bg)'" onmouseout="this.style.background=''">
          <div class="act-ico" style="background:<?= $ico[1] ?>;color:<?= $ico[2] ?>;">
            <i class="fas <?= $ico[0] ?>"></i>
          </div>
          <img src="assets/images/avatars/<?= htmlspecialchars($log['admin_avatar'] ?? 'logo.png') ?>"
               onerror="this.src='assets/images/logo.png'"
               class="avatar avatar-sm" alt=""/>
          <div style="flex:1;min-width:0;">
            <div style="font-size:13.5px;color:var(--text-primary);font-weight:600;">
              <?= htmlspecialchars($log['admin_name']) ?>
              <span style="color:var(--text-muted);font-weight:400;"> — <?= htmlspecialchars(ucwords(str_replace('_',' ',$log['action']))) ?></span>
            </div>
            <?php if ($log['details']): ?>
              <div style="font-size:11.5px;color:var(--text-muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;"><?= htmlspecialchars($log['details']) ?></div>
            <?php endif; ?>
          </div>
          <div style="font-size:11px;color:var(--text-muted);flex-shrink:0;text-align:right;">
            <div><?= date('d M', strtotime($log['created_at'])) ?></div>
            <div style="font-weight:700;color:var(--text-secondary);"><?= date('H:i', strtotime($log['created_at'])) ?></div>
          </div>
        </div>
      <?php endforeach; ?>
    </div>
  <?php endif; ?>
</div>

<?php require_once 'includes/footer.php'; ?>