<?php
require_once __DIR__ . '/../config/database.php';
require_once __DIR__ . '/../includes/functions.php';
if (session_status() === PHP_SESSION_NONE) session_start();
if (!isset($_SESSION['user_id'])) redirect('../login.php');
$userId = $_SESSION['user_id'];
$conn   = getConnection();
$stmt = $conn->prepare("SELECT * FROM users WHERE id = ?");
$stmt->bind_param("i", $userId); $stmt->execute();
$userData = $stmt->get_result()->fetch_assoc();
if (!$userData) { session_destroy(); redirect('../login.php'); }
if (in_array($userData['status'], ['deleted','suspended'])) {
    session_destroy(); setFlash('error','Your account has been '.$userData['status'].'.'); redirect('../login.php');
}
$currentPage = basename($_SERVER['PHP_SELF']);
$allowedPagesForInactive = ['activate.php','activation_status.php','logout.php'];
if ($userData['status']==='inactive' && !in_array($currentPage,$allowedPagesForInactive)) {
    setFlash('warning','Please activate your account.'); redirect('activate.php');
}
$username  = $userData['username'];
$siteName  = getSiteName();

// ── ADMIN COLOR INJECTION ─────────────────────────────────────────────────
$adminPrimary   = getSetting('theme_color',   '#00e5ff');
$adminSecondary = getSetting('accent_color',  '#8b5cf6');
$adminSuccess   = getSetting('success_color', '#22c55e');
$adminWarning   = getSetting('warning_color', '#ffb800');
$adminDanger    = getSetting('danger_color',  '#ff4f8b');

function toRgb($hex) {
    $hex = ltrim($hex, '#');
    if (strlen($hex) === 3) $hex = $hex[0].$hex[0].$hex[1].$hex[1].$hex[2].$hex[2];
    return hexdec(substr($hex,0,2)).','.hexdec(substr($hex,2,2)).','.hexdec(substr($hex,4,2));
}
$pRgb = toRgb($adminPrimary);
$sRgb = toRgb($adminSecondary);

$siteLogo      = getSetting('site_logo','');
$hasCustomLogo = !empty($siteLogo) && file_exists('../uploads/logos/'.$siteLogo);
$isVerified    = ($userData['verified'] ?? 0) == 1;
$userStatus    = $userData['status'];

$claimableBonuses = 0;
$bChk = $conn->query("SHOW TABLES LIKE 'referral_bonus_tiers'");
if ($bChk && $bChk->num_rows > 0) {
    $cS=$conn->prepare("SELECT c.id FROM users u LEFT JOIN countries c ON u.country=c.name WHERE u.id=?");$cS->bind_param("i",$userId);$cS->execute();
    $cR=$cS->get_result()->fetch_assoc();$uCI=$cR?$cR['id']:null;
    $rS=$conn->prepare("SELECT COUNT(*) as cnt FROM users WHERE referred_by=? AND status='active'");$rS->bind_param("i",$userId);$rS->execute();
    $aR=$rS->get_result()->fetch_assoc()['cnt'];
    $bS=$conn->prepare("SELECT COUNT(*) as cnt FROM referral_bonus_tiers t WHERE t.status='active' AND t.referral_count<=? AND (t.country_id=? OR t.country_id IS NULL) AND t.id NOT IN(SELECT bonus_tier_id FROM user_bonus_claims WHERE user_id=?)");
    $bS->bind_param("iii",$aR,$uCI,$userId);$bS->execute();
    $claimableBonuses=$bS->get_result()->fetch_assoc()['cnt'];
}
$newProducts = 0;
$npChk = $conn->query("SHOW TABLES LIKE 'digital_products'");
if ($npChk && $npChk->num_rows > 0) {
    $npS = $conn->prepare("SELECT COUNT(*) as cnt FROM digital_products WHERE status='active' AND created_at >= DATE_SUB(NOW(), INTERVAL 7 DAY) AND id NOT IN (SELECT product_id FROM product_purchases WHERE user_id=? AND status='completed')");
    $npS->bind_param("i",$userId);$npS->execute();
    $newProducts = intval($npS->get_result()->fetch_assoc()['cnt']);
}
$pendingPurchases = 0;
$ppChk = $conn->query("SHOW TABLES LIKE 'product_purchases'");
if ($ppChk && $ppChk->num_rows > 0) {
    $ppS = $conn->prepare("SELECT COUNT(*) as cnt FROM product_purchases WHERE user_id=? AND status='pending'");
    $ppS->bind_param("i",$userId);$ppS->execute();
    $pendingPurchases = intval($ppS->get_result()->fetch_assoc()['cnt']);
}

// ── Spin wallet balance (for sidebar badge) ───────────────────────────────
$spinBalance = 0;
$spWlt = $conn->prepare("SELECT spin_wallet FROM wallets WHERE user_id=? LIMIT 1");
if ($spWlt) {
    $spWlt->bind_param("i",$userId); $spWlt->execute();
    $spRow = $spWlt->get_result()->fetch_assoc();
    $spinBalance = floatval($spRow['spin_wallet'] ?? 0);
}
?>
<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title><?php echo isset($pageTitle)?htmlspecialchars($pageTitle).' — ':'';?><?php echo htmlspecialchars($siteName);?></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<style>
/* ═══════════════════════════════════════════════════════════════
   EARNOVIX — FINAL: Admin Color Injection + Light/Dark + Responsive
   File: side.php
═══════════════════════════════════════════════════════════════ */

:root {
    --P:    <?= $adminPrimary ?>;
    --S:    <?= $adminPrimary ?>;
    --OK:   #22c55e;
    --WN:   #f59e0b;
    --DN:   #ef4444;
    --Pr:   <?= $pRgb ?>;
    --Sr:   <?= $pRgb ?>;
    --hh:       52px;
    --sw:       240px;
    --sw-open:  240px;
}

:root, [data-theme="dark"] {
    --bg1:  #07060f;
    --bg2:  #0e0c1a;
    --bg3:  #141228;
    --bdr:  rgba(255,255,255,0.07);
    --bdr-p:rgba(var(--Pr),0.22);
    --txt:  rgba(255,255,255,0.90);
    --txt2: rgba(255,255,255,0.50);
    --txt3: rgba(255,255,255,0.22);
    --P-bg: rgba(var(--Pr),0.10);
    --S-bg: rgba(var(--Sr),0.12);
    --OK-bg:rgba(34,197,94,0.10);
    --WN-bg:rgba(255,184,0,0.10);
    --DN-bg:rgba(255,79,139,0.12);
    --hdr-bg: rgba(7,6,15,0.92);
    --sb-bg:  #0e0c1a;
    --card:   #0e0c1a;
    --card2:  #141228;
    --shadow: 0 4px 20px rgba(0,0,0,0.45);
    --scroll-thumb: rgba(var(--Pr),0.25);
    color-scheme: dark;
}

[data-theme="light"] {
    --bg1:  #ffffff;
    --bg2:  #ffffff;
    --bg3:  #f4f4f6;
    --bdr:  rgba(0,0,0,0.09);
    --bdr-p:rgba(var(--Pr),0.30);
    --txt:  #111118;
    --txt2: #5a5a72;
    --txt3: #9898b0;
    --P-bg: rgba(var(--Pr),0.08);
    --S-bg: rgba(var(--Sr),0.08);
    --OK-bg:rgba(22,163,74,0.08);
    --WN-bg:rgba(180,120,0,0.08);
    --DN-bg:rgba(200,30,80,0.08);
    --hdr-bg: rgba(255,255,255,0.95);
    --sb-bg:  #ffffff;
    --card:   #ffffff;
    --card2:  #f4f4f6;
    --shadow: 0 2px 12px rgba(0,0,0,0.08);
    --scroll-thumb: rgba(var(--Pr),0.20);
    color-scheme: light;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
    font-family:system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:13px;background:var(--bg1);color:var(--txt);
    -webkit-font-smoothing:antialiased;overflow-x:hidden;
    transition:background .25s,color .25s;
}
::-webkit-scrollbar{width:4px}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:4px}

@keyframes spin    {to{filter:hue-rotate(360deg)}}
@keyframes pulse   {0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}
@keyframes slideIn {from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
@keyframes badgePop{0%{transform:scale(.3)}70%{transform:scale(1.2)}100%{transform:scale(1)}}
@keyframes ripple  {0%{transform:scale(0);opacity:.5}100%{transform:scale(4);opacity:0}}

/* ══ HEADER ═════════════════════════════════════════════════════ */
.hdr{
    position:fixed;inset:0 0 auto 0;height:var(--hh);z-index:1000;
    background:var(--hdr-bg);backdrop-filter:blur(20px);
    border-bottom:1px solid var(--bdr);
    display:flex;align-items:center;justify-content:space-between;
    padding:0 12px 0 8px;
    box-shadow:var(--shadow);
    transition:background .25s,border-color .25s;
    gap:8px;overflow:hidden;
}
[data-theme="dark"] .hdr{border-bottom-color:rgba(var(--Pr),.18)}

.hdr-l{display:flex;align-items:center;gap:8px;min-width:0;flex:1;overflow:hidden}

.burger{
    display:none;width:36px;height:36px;border-radius:8px;
    background:var(--bg3);border:1px solid var(--bdr);
    cursor:pointer;color:var(--txt2);
    align-items:center;justify-content:center;
    font-size:14px;transition:all .18s;flex-shrink:0;
}
.burger:hover{color:var(--P);border-color:var(--bdr-p)}

.brand{display:flex;align-items:center;gap:8px;text-decoration:none;min-width:0;overflow:hidden}
.brand-ring{
    width:28px;height:28px;flex-shrink:0;border-radius:50%;
    border:2px solid var(--P);
    display:flex;align-items:center;justify-content:center;
    animation:spin 8s linear infinite;
    box-shadow:0 0 8px rgba(var(--Pr),.3);
}
[data-theme="light"] .brand-ring{box-shadow:0 0 6px rgba(var(--Pr),.2)}
.brand-dot{width:7px;height:7px;border-radius:50%;background:var(--P)}
.brand-nm{font-size:14px;font-weight:800;letter-spacing:.5px;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand-tag{font-size:8px;font-weight:700;letter-spacing:1.5px;color:var(--P);background:var(--P-bg);padding:2px 6px;border-radius:3px;border:1px solid rgba(var(--Pr),.2);white-space:nowrap;flex-shrink:0}

.hdr-r{display:flex;align-items:center;gap:6px;flex-shrink:0}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--OK);animation:pulse 2s ease infinite;flex-shrink:0}
.hdr-clock{font-size:11px;color:var(--txt2);font-variant-numeric:tabular-nums;letter-spacing:.3px;white-space:nowrap;flex-shrink:0}

.theme-btn{
    width:34px;height:34px;border-radius:8px;
    background:var(--bg3);border:1px solid var(--bdr);
    cursor:pointer;color:var(--txt2);
    display:flex;align-items:center;justify-content:center;
    font-size:13px;transition:all .18s;flex-shrink:0;
}
.theme-btn:hover{color:var(--P);border-color:var(--bdr-p)}

.hico{
    width:34px;height:34px;border-radius:8px;flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;font-size:13px;color:var(--txt2);text-decoration:none;
    border:1px solid var(--bdr);background:var(--bg3);
    position:relative;overflow:hidden;transition:all .18s;
}
.hico:hover{color:var(--P);border-color:var(--bdr-p);background:var(--P-bg)}
.hico::after{content:'';position:absolute;width:34px;height:34px;border-radius:50%;background:rgba(var(--Pr),.25);transform:scale(0);opacity:0;pointer-events:none}
.hico:active::after{animation:ripple .4s ease-out forwards}
.hbadge{
    position:absolute;top:-4px;right:-4px;min-width:15px;height:15px;
    border-radius:8px;background:var(--DN);color:#fff;font-size:7px;font-weight:700;
    display:flex;align-items:center;justify-content:center;padding:0 3px;
    border:2px solid var(--bg1);z-index:3;
}

.ppill{
    display:flex;align-items:center;gap:6px;
    padding:3px 10px 3px 3px;border-radius:20px;
    background:var(--P-bg);border:1px solid rgba(var(--Pr),.2);
    text-decoration:none;color:var(--txt);transition:all .2s;
    max-width:150px;flex-shrink:0;height:34px;
}
.ppill:hover{border-color:rgba(var(--Pr),.38);background:rgba(var(--Pr),.14)}
.pav{width:26px;height:26px;border-radius:50%;flex-shrink:0;background:var(--P);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:#fff}
.pname{font-size:11px;font-weight:600;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
.pver{font-size:9px;color:var(--OK)}

/* ══ SIDEBAR ══════════════════════════════════════════════════ */
.sb{
    position:fixed;left:0;top:var(--hh);
    width:var(--sw);height:calc(100vh - var(--hh));
    background:var(--sb-bg);border-right:1px solid var(--bdr);
    display:flex;flex-direction:column;align-items:stretch;
    padding:10px 9px 70px;gap:2px;z-index:999;
    overflow-y:auto;overflow-x:hidden;
    transition:transform .3s cubic-bezier(.4,0,.2,1),background .25s,border-color .25s;
    scrollbar-width:thin;scrollbar-color:var(--scroll-thumb) transparent;
    box-shadow:var(--shadow);
}
.sb::-webkit-scrollbar{width:3px}
.sb::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:3px}

.sdiv{height:1px;background:var(--bdr);margin:5px 0;flex-shrink:0}

.sb-section{
    font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
    color:rgba(var(--Pr),.5);padding:10px 10px 3px;display:block;white-space:nowrap;
}
[data-theme="light"] .sb-section{color:rgba(var(--Pr),.55)}

.nl{
    width:100%;min-height:40px;border-radius:9px;
    display:flex;align-items:center;gap:10px;padding:0 10px;
    color:var(--txt2);text-decoration:none;font-size:12.5px;font-weight:500;
    border:1px solid transparent;transition:all .18s;
    position:relative;flex-shrink:0;
    animation:slideIn .3s ease both;
    white-space:nowrap;overflow:hidden;
}
.nl:hover{background:var(--P-bg);color:var(--P);border-color:rgba(var(--Pr),.15);transform:translateX(2px)}
.nl.on{background:var(--P-bg);color:var(--P);border-color:rgba(var(--Pr),.28);font-weight:700}
.nl.on::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--P);border-radius:0 3px 3px 0}
.nl i{font-size:14px;flex-shrink:0;width:18px;text-align:center}
.nl-lbl{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.nl-badge{
    flex-shrink:0;min-width:16px;height:16px;padding:0 4px;
    border-radius:8px;background:var(--DN);color:#fff;font-size:8px;font-weight:700;
    display:flex;align-items:center;justify-content:center;
}
.nl-tag{flex-shrink:0;padding:1px 6px;border-radius:3px;font-size:8px;font-weight:700}
.nl-tag.g{background:var(--OK-bg);color:var(--OK)}
.nl-tag.a{background:var(--WN-bg);color:var(--WN)}
.nl-tag.p{background:var(--P-bg);color:var(--P)}

/* Spin wallet balance mini-badge in sidebar */
.nl-spin-bal{
    flex-shrink:0;padding:1px 7px;border-radius:10px;
    font-size:8px;font-weight:800;
    background:rgba(245,158,11,.12);color:#f59e0b;
    border:1px solid rgba(245,158,11,.2);
    white-space:nowrap;
}

.ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:998}
.ov.on{display:block}

/* ══ MAIN CONTENT AREA ═══════════════════════════════════════ */
.mc{
    margin-left:var(--sw);margin-top:var(--hh);
    min-height:calc(100vh - var(--hh));
    position:relative;z-index:1;
    transition:margin .3s cubic-bezier(.4,0,.2,1);
}

/* ══ RESPONSIVE ══════════════════════════════════════════════ */
@media(max-width:1023px) and (min-width:769px){
    :root{--sw:200px}
}

@media(max-width:768px){
    :root{--sw:0px;--sw-open:240px}
    .burger{display:flex}
    .mc{margin-left:0}
    .sb{width:var(--sw-open);transform:translateX(calc(-100% - 1px));z-index:1001}
    .sb.on{transform:translateX(0);box-shadow:6px 0 40px rgba(0,0,0,.35)}
    .ov{z-index:1000}
    .hdr-clock{display:none}
}

@media(max-width:480px){
    :root{--sw-open:230px;--hh:50px}
    .hdr{padding:0 10px 0 8px;gap:6px}
    .brand-tag{display:none}
    .hico,.theme-btn{width:32px;height:32px;font-size:12px;border-radius:7px}
    .ppill{padding:3px;max-width:34px;border-radius:50%}
    .pname{display:none}
    .hdr-r{gap:5px}
    .hdr-l{gap:6px}
    .brand-nm{font-size:13px;max-width:120px}
    .burger{width:34px;height:34px}
}

@media(max-width:360px){
    :root{--sw-open:210px;--hh:48px}
    .hdr{padding:0 8px;gap:4px}
    .hico,.theme-btn{width:30px;height:30px;font-size:11px}
    .hdr-r{gap:4px}
    .brand-nm{font-size:12px;max-width:90px}
    .burger{width:30px;height:30px;font-size:13px}
    .nl{padding:0 8px;gap:8px;min-height:38px}
    .nl i{font-size:13px}
    .nl-lbl{font-size:12px}
}
</style>
</head>
<body>

<div class="ov" id="ov" onclick="sbToggle()"></div>

<!-- ════ HEADER ════ -->
<header class="hdr">
  <div class="hdr-l">
    <button class="burger" type="button" onclick="sbToggle()" aria-label="Toggle menu">
      <i id="bico" class="fa-solid fa-grip-lines"></i>
    </button>
    <a href="dashboard.php" class="brand">
      <div class="brand-ring">
        <?php if($hasCustomLogo):?>
          <img src="../uploads/logos/<?php echo htmlspecialchars($siteLogo);?>" alt="" style="width:100%;height:100%;border-radius:50%;object-fit:contain">
        <?php else:?>
          <div class="brand-dot"></div>
        <?php endif;?>
      </div>
      <span class="brand-nm"><?php echo htmlspecialchars($siteName);?></span>
      <span class="brand-tag">ANALYTICS</span>
    </a>
  </div>
  <div class="hdr-r">
    <div class="live-dot" title="Live"></div>
    <span class="hdr-clock" id="hdr-clock">--:-- --</span>
    <button class="theme-btn" id="theme-btn" onclick="toggleTheme()" title="Toggle theme" aria-label="Toggle light/dark mode">
      <i id="theme-ico" class="fa-solid fa-moon"></i>
    </button>
    <a href="store.php" class="hico" title="Store">
      <i class="fa-solid fa-bag-shopping"></i>
      <?php if($newProducts>0):?><span class="hbadge"><?php echo $newProducts;?></span><?php endif;?>
    </a>
    <a href="notifications.php" class="hico" title="Notifications">
      <i class="fa-solid fa-inbox"></i>
    </a>
    <a href="profile.php" class="ppill">
      <div class="pav"><?php echo strtoupper(substr($username,0,1));?></div>
      <span class="pname">
        <?php echo htmlspecialchars($username);?>
        <?php if($isVerified):?><i class="fa-solid fa-shield-halved pver"></i><?php endif;?>
      </span>
    </a>
  </div>
</header>

<!-- ════ SIDEBAR ════ -->
<nav class="sb" id="sb" role="navigation" aria-label="Main navigation">

  <div class="sb-section">Main</div>
  <a href="dashboard.php"       class="nl <?php echo $currentPage==='dashboard.php'?'on':'';?>"       style="animation-delay:.03s"><i class="fa-solid fa-house-chimney"></i><span class="nl-lbl">Dashboard</span></a>
  <a href="downlines.php"       class="nl <?php echo $currentPage==='downlines.php'?'on':'';?>"       style="animation-delay:.06s"><i class="fa-solid fa-sitemap"></i><span class="nl-lbl">Team Members</span></a>
  <a href="tournament.php"      class="nl <?php echo $currentPage==='tournament.php'?'on':'';?>"      style="animation-delay:.09s"><i class="fa-solid fa-ranking-star"></i><span class="nl-lbl">Tournament</span></a>

  <div class="sdiv"></div>
  <div class="sb-section">Earn &amp; Play</div>
  <a href="chat_foreigners.php" class="nl <?php echo $currentPage==='chat_foreigners.php'?'on':'';?>" style="animation-delay:.12s">
    <i class="fa-solid fa-satellite-dish"></i>
    <span class="nl-lbl">Chat Foreigners</span>
  </a>
  

  <div class="sdiv"></div>
  <div class="sb-section">Store</div>
  <a href="store.php"           class="nl <?php echo $currentPage==='store.php'?'on':'';?>"           style="animation-delay:.16s">
    <i class="fa-solid fa-shop"></i><span class="nl-lbl">Products</span>
    <?php if($newProducts>0):?><span class="nl-badge"><?php echo $newProducts;?></span><span class="nl-tag p"><?php echo $newProducts;?> NEW</span><?php endif;?>
  </a>
  <a href="my_purchases.php"    class="nl <?php echo $currentPage==='my_purchases.php'?'on':'';?>"    style="animation-delay:.18s">
    <i class="fa-solid fa-box-open"></i><span class="nl-lbl">Downloads</span>
    <?php if($pendingPurchases>0):?><span class="nl-badge"><?php echo $pendingPurchases;?></span><span class="nl-tag a"><?php echo $pendingPurchases;?></span><?php endif;?>
  </a>

  <div class="sdiv"></div>
  <div class="sb-section">Finance</div>
  <a href="withdraw.php"           class="nl <?php echo $currentPage==='withdraw.php'?'on':'';?>"           style="animation-delay:.20s"><i class="fa-solid fa-paper-plane"></i><span class="nl-lbl">Withdraw</span></a>
  <a href="recharge.php"           class="nl <?php echo $currentPage==='recharge.php'?'on':'';?>"           style="animation-delay:.22s"><i class="fa-solid fa-battery-full"></i><span class="nl-lbl">Recharge</span></a>
  <a href="withdrawal_history.php" class="nl <?php echo $currentPage==='withdrawal_history.php'?'on':'';?>" style="animation-delay:.24s"><i class="fa-solid fa-clock-rotate-left"></i><span class="nl-lbl">History</span></a>
  <a href="bonus.php"              class="nl <?php echo $currentPage==='bonus.php'?'on':'';?>"              style="animation-delay:.26s">
    <i class="fa-solid fa-coins"></i><span class="nl-lbl">Bonuses</span>
    <?php if($claimableBonuses>0):?><span class="nl-badge"><?php echo $claimableBonuses;?></span><span class="nl-tag a"><?php echo $claimableBonuses;?> NEW</span><?php endif;?>
  </a>

  <?php
  $sbt=$conn->query("SELECT id,title,reward,task_type FROM tasks WHERE show_in_sidebar=1 AND status='active' ORDER BY created_at DESC");
  if($sbt&&$sbt->num_rows>0):
    $im=['video'=>'fa-film','survey'=>'fa-square-poll-vertical','trivia'=>'fa-bolt','quiz'=>'fa-flask','meme'=>'fa-masks-theater','chat'=>'fa-comments','transcription'=>'fa-wave-square','ads'=>'fa-bullhorn','blog'=>'fa-newspaper','spin'=>'fa-hurricane','external'=>'fa-up-right-from-square'];
  ?>
  <div class="sdiv"></div>
  <div class="sb-section">Live Tasks</div>
  <?php $d=.28; while($t=$sbt->fetch_assoc()):
    $ti=$im[$t['task_type']]??'fa-circle-play';
    $tt=mb_strlen($t['title'])>20?mb_substr($t['title'],0,20).'…':$t['title'];
    $d+=.03;
  ?>
  <a href="tasks.php?open=<?php echo $t['id'];?>" class="nl" data-tip="<?php echo htmlspecialchars($t['title']);?>" style="animation-delay:<?php echo $d;?>s">
    <i class="fa-solid <?php echo $ti;?>"></i>
    <span class="nl-lbl"><?php echo htmlspecialchars($tt);?></span>
    <span class="nl-tag g"><?php echo number_format($t['reward'],0);?></span>
  </a>
  <?php endwhile;endif;?>

  <div class="sdiv"></div>
  <div class="sb-section">Account</div>
  <a href="pay.php"     class="nl <?php echo $currentPage==='pay.php'?'on':'';?>"     style="animation-delay:.30s"><i class="fa-solid fa-hand-holding-dollar"></i><span class="nl-lbl">Pay for Client</span></a>
  <?php $waLink=getSetting('whatsapp_group_link','https://chat.whatsapp.com/');?>
  <a href="<?php echo htmlspecialchars($waLink);?>" target="_blank" rel="noopener" class="nl" style="animation-delay:.33s"><i class="fa-brands fa-whatsapp"></i><span class="nl-lbl">WhatsApp Group</span></a>
  <a href="profile.php" class="nl <?php echo $currentPage==='profile.php'?'on':'';?>" style="animation-delay:.36s"><i class="fa-solid fa-fingerprint"></i><span class="nl-lbl">Profile</span></a>
  <a href="logout.php"  class="nl" style="animation-delay:.38s;margin-top:auto"><i class="fa-solid fa-power-off"></i><span class="nl-lbl">Sign Out</span></a>

</nav>
<div class="mc" id="mc">

<script>
/* ── Theme engine ─────────────────────────────────────────── */
(function(){
    var saved = localStorage.getItem('ev_theme') || 'dark';
    applyTheme(saved, false);
})();

function applyTheme(t, animate){
    var html = document.documentElement;
    if(animate){ html.style.transition='background .25s,color .25s'; }
    html.setAttribute('data-theme', t);
    localStorage.setItem('ev_theme', t);
    var ico = document.getElementById('theme-ico');
    if(ico) ico.className = t === 'dark' ? 'fa-solid fa-sun' : 'fa-solid fa-moon';
}

window.toggleTheme = function(){
    var cur = document.documentElement.getAttribute('data-theme') || 'dark';
    applyTheme(cur === 'dark' ? 'light' : 'dark', true);
};

/* ── Sidebar toggle ───────────────────────────────────────── */
window.sbToggle = function(){
    var s=document.getElementById('sb'),o=document.getElementById('ov'),i=document.getElementById('bico');
    var op=s.classList.toggle('on');
    op ? o.classList.add('on') : o.classList.remove('on');
    i.className = op ? 'fa-solid fa-xmark' : 'fa-solid fa-grip-lines';
    document.body.style.overflow = op ? 'hidden' : '';
};

/* Close sidebar on nav link click (mobile) */
document.querySelectorAll('.nl').forEach(function(l){
    l.addEventListener('click', function(){
        if(window.innerWidth <= 768){
            document.getElementById('sb').classList.remove('on');
            document.getElementById('ov').classList.remove('on');
            document.getElementById('bico').className='fa-solid fa-grip-lines';
            document.body.style.overflow='';
        }
    });
});

/* ── Live clock ───────────────────────────────────────────── */
(function tick(){
    var n=new Date(),h=n.getHours(),m=n.getMinutes(),s=n.getSeconds();
    var ap=h>=12?'PM':'AM'; h=h%12||12;
    var el=document.getElementById('hdr-clock');
    if(el) el.textContent=(h<10?'0':'')+h+':'+(m<10?'0':'')+m+':'+(s<10?'0':'')+s+' '+ap;
    setTimeout(tick,1000);
})();
</script>