<?php
require_once '../connection/db.php';
require_once '../connection/MatrixEngine.php';
requireLogin();

$user = getCurrentUser();
$myId = (int) $user['member_id'];
$db = getDB();
$engine = new MatrixEngine();

/* ── Which member are we viewing? ───────────────────── */
$viewId = isset($_GET['view']) ? (int) $_GET['view'] : $myId;
$fromId = isset($_GET['from']) ? (int) $_GET['from'] : null;

/* ── Viewed user info ────────────────────────────────── */
if ($viewId === $myId) {
  $viewedUser = $user;
} else {
  $stv = $db->prepare("SELECT * FROM meddolic_user_details WHERE member_id=? LIMIT 1");
  $stv->execute([$viewId]);
  $viewedUser = $stv->fetch(PDO::FETCH_ASSOC) ?: $user;
}

/* ── Main tree for viewed member ─────────────────────── */
$wt = $engine->getWorkingMatrixTree($viewId);
$allNodes = $wt['nodes'] ?? [];
$treeNodes = $wt['tree'] ?? [];   // L1 children of $viewId (max 3)
$levelMap = $wt['levelMap'] ?? [];
$totalMembers = (int) ($wt['total'] ?? 0);

/* ── For each L1 child, get THEIR subtree (3→9→27) ─── */
$childTrees = [];
foreach ($treeNodes as $leg => $l1n) {
  $cid = (int) $l1n['member_id'];
  $childTrees[$cid] = $engine->getWorkingMatrixTree($cid);
}

/* ── Global pools, income table (always my own) ──────── */
$matrixPkgs = getMatrixPackages();
$globalTrees = [];
foreach ($matrixPkgs as $mp) {
  $globalTrees[(int) $mp['matrixId']] = $engine->getGlobalMatrixTree($myId, (int) $mp['matrixId']);
}
$curPkgId = (int) ($user['currentPackage'] ?? 0);
$allPkgs = getPoolList();
$incPrev = [];
foreach ($allPkgs as $p) {
  $incPrev[(int) $p['id']] = $engine->calculateIncomePreview((int) $p['id'], (float) $p['upgradePrice']);
}
$poolIncomes = [];
foreach ($matrixPkgs as $mp) {
  $piQ = $db->prepare("SELECT * FROM meddolic_user_pool_income WHERE memberId=? AND poolId=? ORDER BY dateTime ASC");
  $piQ->execute([$myId, $mp['matrixId']]);
  $poolIncomes[(int) $mp['matrixId']] = $piQ->fetchAll();
}

$pageTitle = 'Matrix Tree';
$activePage = 'tree';
require_once 'Include/header.php';

function xe(string $v): string
{
  return htmlspecialchars($v, ENT_QUOTES, 'UTF-8');
}
function pct(int $n, int $max): int
{
  return $max > 0 ? (int) min(100, round($n / $max * 100)) : 0;
}

$selfUrl = strtok($_SERVER['REQUEST_URI'], '?');
$poolColors = [
  1 => '#f59e0b',
  2 => '#94a3b8',
  3 => '#eab308',
  4 => '#8b5cf6',
  5 => '#06b6d4',
  6 => '#64748b',
  7 => '#f43f5e',
  8 => '#10b981'
];

/* ── Build children-of index for a tree ─────────────── */
function childrenOf(array $nodes, int $parentId): array
{
  $kids = [];
  foreach ($nodes as $n) {
    if ((int) $n['parent_id'] === $parentId) {
      $kids[(int) $n['leg_pos']] = $n;
    }
  }
  ksort($kids);
  return $kids;
}

/* ── Get all children for a specific parent ─────────── */
function getChildrenByParent(array $nodes, int $parentId): array
{
  $children = [];
  foreach ($nodes as $node) {
    if ((int) $node['parent_id'] === $parentId) {
      $children[(int) $node['leg_pos']] = $node;
    }
  }
  ksort($children);
  return $children;
}
?>
<style>
  /* ========== CORE RESET & VARIABLES ========== */
  .mtp *,
  .mtp *::before,
  .mtp *::after {
    box-sizing: border-box;
  }

  /* Tabs */
  .mtp-tabs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    margin-bottom: 14px;
  }

  .mtp-tabs::-webkit-scrollbar {
    display: none;
  }

  .mtp-tab {
    flex: 0 0 auto;
    padding: 8px 18px;
    border-radius: 24px;
    border: 1px solid var(--border, #222);
    background: var(--dark3, #1a1a1a);
    font-size: 12px;
    color: #555;
    cursor: pointer;
    white-space: nowrap;
    transition: .15s;
    user-select: none;
  }

  .mtp-tab.active {
    background: rgba(241, 145, 7, .12);
    border-color: rgba(241, 145, 7, .5);
    color: #f19107;
    font-weight: 600;
  }

  .mtp-pane {
    display: none;
  }

  .mtp-pane.on {
    display: block;
  }

  /* Card */
  .mt-card {
    background: var(--dark2, #111);
    border: 1px solid var(--border, #222);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
  }

  .mt-card-title {
    font-size: 13px;
    padding: 12px;
    font-weight: 600;
    color: #666;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  /* Back button */
  .tree-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(241, 145, 7, .08);
    border: 1px solid rgba(241, 145, 7, .3);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 12px;
    color: #f19107;
    text-decoration: none;
    margin-bottom: 14px;
    transition: .15s;
  }

  .tree-back:hover {
    background: rgba(241, 145, 7, .16);
  }

  /* Tree scroll wrapper */
  .tree-scroll {
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    /* margin: 0 -16px; */
    padding: 0 16px;
    width: 100%;
  }

  .tree-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100%;
    padding: 8px 12px 20px;
  }

  /* ROOT NODE */
  .root-card {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: rgba(241, 145, 7, .08);
    border: 2px solid rgba(241, 145, 7, .65);
    border-radius: 16px;
    padding: 14px 26px;
    text-align: center;
  }

  .root-av {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(241, 145, 7, .2);
    border: 2px solid rgba(241, 145, 7, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }

  .root-uid {
    font-family: 'Orbitron', monospace;
    font-size: 17px;
    font-weight: 700;
    color: #f19107;
    letter-spacing: 1px;
  }

  .root-sub {
    font-size: 11px;
    color: #666;
    margin-top: 3px;
  }

  /* LEVEL PILL */
  .lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dark3, #1a1a1a);
    border: 1px solid #2a2a2a;
    border-radius: 20px;
    padding: 5px 18px;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #555;
  }

  .lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
    font-size: 14px;
  }

  .v-stem {
    width: 2px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .l1-outer {
    overflow-x: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  /* ========== L1 ROW - MOBILE FIRST ========== */
  .l1-nodes-wrap {
    display: flex;
    gap: 30px;
    width: 100%;
    position: relative;
  }

  .l1-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 100%;
  }

  /* Connector lines - hidden on mobile */
  .l1-col::before,
  .l1-nodes-wrap::before,
  .l1-row-connector {
    display: none;
  }

  /* L1 NODE CARD */
  .nd1 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .4);
    border-radius: 12px;
    padding: 10px 14px;
    min-width: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
    text-align: center;
  }

  .nd1:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    border-color: rgba(34, 197, 94, .75);
  }

  .nd1.inactive {
    border-color: rgba(107, 114, 128, .35);
    opacity: .75;
  }

  .nd1.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd1.empty-slot {
    border-style: dashed;
    border-color: #222;
    opacity: .22;
    cursor: default;
  }

  .nd1.empty-slot:hover {
    transform: none;
    box-shadow: none;
  }

  .nd1-arr {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 10px;
    color: #2a2a2a;
  }

  .nd1-av {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .14);
    border: 1.5px solid rgba(34, 197, 94, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
    color: #22c55e;
  }

  .nd1.inactive .nd1-av {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .35);
    color: #6b7280;
  }

  .nd1.empty-slot .nd1-av {
    background: rgba(255, 255, 255, .02);
    border: 1.5px dashed #222;
    color: #222;
  }

  .nd1-uid {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 4px;
  }

  .nd1-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .35);
    margin-bottom: 4px;
  }

  .nd1.inactive .nd1-chk {
    background: rgba(107, 114, 128, .1);
    border-color: rgba(107, 114, 128, .3);
  }

  .nd1-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* EXPANDED SUBTREE PANEL */
  .sub-panel {
    background: rgba(0, 0, 0, .35);
    border: 1px solid #1e1e1e;
    border-radius: 12px;
    padding: 12px 10px 10px;
    margin-top: 10px;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  .sub-panel-title {
    font-size: 11px;
    font-weight: 700;
    color: #888;
    letter-spacing: .8px;
    text-transform: uppercase;
    margin-bottom: 8px;
    text-align: center;
  }

  .sub-lvl-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255, 255, 255, .03);
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #444;
    margin: 6px auto;
  }

  .sub-lvl-pill b {
    color: #f19107;
    font-family: 'Orbitron', monospace;
  }

  /* SUB NODES - Horizontal scroll on mobile */
  .sub-node-row {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: relative;
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 100%;
  }

  .sub-node-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }

  /* L2 cards */
  .nd2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1.5px solid rgba(34, 197, 94, .35);
    border-radius: 10px;
    padding: 7px 9px;
    min-width: 72px;
    max-width: 84px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s, border-color .12s;
    text-align: center;
    position: relative;
  }

  .nd2:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .7);
  }

  .nd2.inactive {
    border-color: rgba(107, 114, 128, .3);
    opacity: .7;
  }

  .nd2.inactive:hover {
    border-color: rgba(107, 114, 128, .65);
  }

  .nd2.empty-slot {
    border-style: dashed;
    border-color: #1e1e1e;
    opacity: .2;
    cursor: default;
  }

  .nd2.empty-slot:hover {
    transform: none;
  }

  .nd2-arr {
    position: absolute;
    top: 4px;
    right: 5px;
    font-size: 9px;
    color: #2a2a2a;
  }

  .nd2-av {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .12);
    border: 1px solid rgba(34, 197, 94, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
    color: #22c55e;
  }

  .nd2-uid {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 3px;
  }

  .nd2-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .3);
    margin-bottom: 3px;
  }

  .nd2-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 9px;
    font-weight: 700;
    color: #3b82f6;
  }

  /* L3 nodes row */
  .l3-row {
    display: flex;
    overflow-x: auto;
    justify-content: flex-start;
    gap: 6px;
    position: relative;
    padding: 10px 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    scrollbar-width: auto;
  }

  .l3-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex-shrink: 0;
  }

  /* tiny L3 card */
  .nd3 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--dark3, #1a1a1a);
    border: 1px solid rgba(34, 197, 94, .28);
    border-radius: 8px;
    padding: 5px 6px;
    min-width: 52px;
    max-width: 62px;
    cursor: pointer;
    text-decoration: none;
    transition: transform .12s;
    text-align: center;
  }

  .nd3:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, .6);
  }

  .nd3.inactive {
    border-color: rgba(107, 114, 128, .22);
    opacity: .65;
  }

  .nd3-av {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(34, 197, 94, .1);
    border: 1px solid rgba(34, 197, 94, .35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    color: #22c55e;
  }

  .nd3.inactive .nd3-av {
    background: rgba(107, 114, 128, .07);
    border-color: rgba(107, 114, 128, .25);
    color: #6b7280;
  }

  .nd3-uid {
    font-family: 'Orbitron', monospace;
    font-size: 7.5px;
    font-weight: 700;
    color: #f19107;
    word-break: break-all;
    line-height: 1.2;
    margin-bottom: 3px;
  }

  .nd3-chk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    background: rgba(34, 197, 94, .08);
    border: 1px solid rgba(34, 197, 94, .28);
    margin-bottom: 2px;
  }

  .nd3-pkg {
    font-family: 'Orbitron', monospace;
    font-size: 8px;
    font-weight: 700;
    color: #3b82f6;
  }

  .sub-v {
    width: 1.5px;
    height: 12px;
    background: #1e1e1e;
    margin: 0 auto;
    display: none;
  }

  /* LEVEL SUMMARY BOXES */
  .lvl-sum {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 16px;
    flex-wrap: wrap;
  }

  .lvl-box {
    background: var(--dark3, #1a1a1a);
    border: 1px solid #222;
    border-radius: 10px;
    padding: 10px 18px;
    text-align: center;
    min-width: 76px;
    flex: 1 1 auto;
    max-width: 120px;
  }

  .lvl-box-lbl {
    font-size: 10px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  .lvl-box-num {
    font-family: 'Orbitron', monospace;
    font-size: 22px;
    font-weight: 700;
    margin: 4px 0 2px;
  }

  .lvl-box-of {
    font-size: 10px;
    color: #444;
  }

  .pbar-bg {
    height: 4px;
    border-radius: 4px;
    background: #1a1a1a;
    overflow: hidden;
    margin-top: 6px;
  }

  .pbar {
    height: 100%;
    border-radius: 4px;
    transition: width .5s;
  }

  /* POOL CARDS */
  .pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 14px;
  }

  .pool-card {
    background: var(--dark3, #1a1a1a);
    border: 1px solid var(--border, #222);
    border-radius: 14px;
    padding: 14px;
  }

  .pool-card.enrolled {
    border-color: rgba(241, 145, 7, .3);
  }

  .ph {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pname {
    font-family: 'Orbitron', monospace;
    font-size: 13px;
    font-weight: 700;
  }

  .pprice {
    font-size: 11px;
    color: #555;
    margin-top: 2px;
  }

  .badge-a {
    background: rgba(34, 197, 94, .12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, .3);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 700;
  }

  .badge-n {
    font-size: 10px;
    color: #2a2a2a;
    background: #111;
    border-radius: 4px;
    padding: 2px 8px;
  }

  .pt {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    width: 100%;
    overflow: hidden;
  }

  .pt-rb {
    background: rgba(241, 145, 7, .15);
    border: 2px solid rgba(241, 145, 7, .5);
    border-radius: 8px;
    padding: 3px 16px;
    font-family: 'Orbitron', monospace;
    font-size: 11px;
    font-weight: 700;
    color: #f19107;
    display: inline-block;
    margin-bottom: 4px;
  }

  .pstem {
    width: 2px;
    height: 8px;
    background: #2a2a2a;
    margin: 0 auto;
  }

  .ptlbl {
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #555;
    margin-bottom: 4px;
    text-align: center;
  }

  .pl1r {
    display: flex;
    gap: 4px;
    justify-content: center;
  }

  .pl2r {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
  }

  .pl2g {
    display: flex;
    gap: 3px;
  }

  .pl3r {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .pl3g {
    display: flex;
    flex-direction: column;
    gap: 3px;
  }

  .pl3i {
    display: flex;
    gap: 3px;
  }

  .ps {
    border-radius: 6px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    border: 1px solid #1a1a1a;
    background: rgba(255, 255, 255, .02);
    color: #2a2a2a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: .15s;
  }

  .psl1 {
    width: 76px;
    height: 24px;
    line-height: 24px;
    font-size: 10px;
    padding: 0 4px;
  }

  .psl2 {
    width: 28px;
    height: 20px;
    line-height: 20px;
  }

  .psl3 {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    padding: 0;
  }

  .ps.f1 {
    background: rgba(34, 197, 94, .1);
    border-color: rgba(34, 197, 94, .35);
    color: #22c55e;
  }

  .ps.f2 {
    background: rgba(59, 130, 246, .1);
    border-color: rgba(59, 130, 246, .3);
    color: #3b82f6;
  }

  .ps.f3 {
    background: rgba(168, 85, 247, .15);
    border-color: rgba(168, 85, 247, .35);
  }

  .mprog {
    display: flex;
    gap: 4px;
    margin-top: 12px;
  }

  .mi {
    flex: 1;
    text-align: center;
  }

  .mv {
    font-size: 10px;
    font-weight: 700;
    margin-bottom: 3px;
  }

  .mb {
    height: 4px;
    border-radius: 4px;
    background: #1a1a1a;
    overflow: hidden;
  }

  .mf {
    height: 100%;
    border-radius: 4px;
    transition: width .4s;
  }

  .ml {
    font-size: 9px;
    color: #333;
    margin-top: 2px;
  }

  /* Fix vertical spacing between root and L1 children */
  @media (max-width: 767px) {

    /* Reduce stem height between root and level pill */
    .v-stem {
      height: 12px !important;
    }

    /* Reduce gap after level pill */
    .l1-outer .v-stem {
      height: 8px !important;
    }

    /* Compact the root card spacing */
    .root-card {
      padding: 8px 12px !important;
      margin-bottom: 0;
    }

    .root-av {
      width: 36px !important;
      height: 36px !important;
    }

    .root-uid {
      font-size: 12px !important;
    }

    /* Make level pill more compact */
    .lvl-pill {
      padding: 3px 12px !important;
      font-size: 9px !important;
      margin: 2px 0;
    }

    /* Reduce margin on l1-outer */
    .l1-outer {
      margin-top: -4px;
    }

    /* Adjust L1 nodes wrap for tighter layout */
    .l1-nodes-wrap {
      gap: 20px !important;
      margin-top: 4px;
    }
  }

  /* Even tighter for extra small screens */
  @media (max-width: 480px) {
    .v-stem {
      height: 8px !important;
    }

    .l1-outer .v-stem {
      height: 6px !important;
    }

    .root-card {
      padding: 6px 10px !important;
    }

    .root-av {
      width: 32px !important;
      height: 32px !important;
      margin-bottom: 4px !important;
    }

    .lvl-pill {
      padding: 2px 10px !important;
      font-size: 8px !important;
    }

    .l1-nodes-wrap {
      gap: 15px !important;
    }
  }

  .pir {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 3px;
    padding: 2px 0;
  }

  .pit {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 700;
    border-top: 1px solid rgba(255, 255, 255, .06);
    margin-top: 6px;
    padding-top: 6px;
  }

  /* ========== TABLET STYLES (768px and up) ========== */
  @media (min-width: 768px) {
    .l1-nodes-wrap {
      flex-direction: row;
      /* justify-content: center; */
      gap: 20px;
    }

    .l1-col {
      flex: 1;
      min-width: 280px;
      max-width: 400px;
    }

    .sub-node-row,
    .l3-row {
      /* overflow-x: visible; */
    }

    .sub-node-row {
      justify-content: center;
      gap: 15px;
    }

    .l3-row {
      gap: 8px;
    }

    .sub-v {
      display: block;
    }
  }

  /* ========== DESKTOP STYLES (1024px and up) ========== */
  @media (min-width: 1024px) {
    .l1-nodes-wrap {
      gap: 30px;
    }

    .sub-node-row {
      gap: 20px;
    }

    .l3-row {
      gap: 10px;
    }
  }

  /* ========== MOBILE STYLES (below 768px) ========== */
  @media (max-width: 767px) {
    .mt-card {
      padding: 0px;
    }

    .tree-scroll {
      /* margin: 0 -12px; */
      padding: 0 0px;
    }

    .root-card {
      padding: 10px 16px;
    }

    .root-av {
      width: 44px;
      height: 44px;
    }

    .root-uid {
      font-size: 14px;
    }

    .nd1 {
      min-width: 90px;
      padding: 8px 10px;
    }

    .nd1-uid {
      font-size: 10px;
    }

    .nd1-av {
      width: 30px;
      height: 30px;
    }

    .nd2 {
      min-width: 65px;
      max-width: 75px;
      padding: 6px 7px;
    }

    .nd2-uid {
      font-size: 8px;
    }

    .nd2-av {
      width: 24px;
      height: 24px;
    }

    .nd3 {
      min-width: 48px;
      max-width: 58px;
      padding: 4px 5px;
    }

    .nd3-uid {
      font-size: 7px;
    }

    .nd3-av {
      width: 18px;
      height: 18px;
    }

    .sub-panel {
      padding: 10px 8px;
    }

    .sub-lvl-pill {
      font-size: 9px;
      padding: 2px 10px;
    }

    .lvl-pill {
      font-size: 10px;
      padding: 4px 14px;
    }

    .lvl-box-num {
      font-size: 18px;
    }

    .lvl-box-lbl,
    .lvl-box-of {
      font-size: 9px;
    }

    .pool-grid {
      grid-template-columns: 1fr;
    }
  }

  /* ========== EXTRA SMALL MOBILE (below 480px) ========== */
  @media (max-width: 480px) {
    .nd1 {
      min-width: 80px;
      padding: 7px 8px;
    }

    .nd1-uid {
      font-size: 9px;
    }

    .nd2 {
      min-width: 58px;
      max-width: 68px;
      padding: 5px 6px;
    }

    .nd2-uid {
      font-size: 7.5px;
    }

    .nd3 {
      min-width: 42px;
      max-width: 52px;
      padding: 4px 4px;
    }

    .nd3-uid {
      font-size: 6.5px;
    }

    .sub-node-row {
      gap: 8px;
    }

    .l3-row {
      gap: 5px;
    }
  }

  /* ========== CUSTOM SCROLLBAR STYLES ========== */
  .sub-node-row::-webkit-scrollbar,
  .l3-row::-webkit-scrollbar {
    height: 4px;
  }

  .sub-node-row::-webkit-scrollbar-track,
  .l3-row::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 4px;
  }

  .sub-node-row::-webkit-scrollbar-thumb,
  .l3-row::-webkit-scrollbar-thumb {
    background: #f19107;
    border-radius: 4px;
  }

  .sub-node-row::-webkit-scrollbar-thumb:hover,
  .l3-row::-webkit-scrollbar-thumb:hover {
    background: #f1a23d;
  }
</style>
<div class="layout mtp">
  <?php require_once 'Include/menu.php'; ?>
  <div class="main-content">
    <?php require_once 'Include/topbar.php'; ?>
    <div class="page-content">

      <div class="page-header">
        <div class="breadcrumb">
          <i class="fas fa-home"></i> <i class="fas fa-chevron-right"></i> Matrix Tree
        </div>
        <h3>Matrix Tree &amp; Pool Status</h3>
        <div class="subtitle">Working 3×3 plan · Global auto-pools · Income calculator</div>
      </div>

      <!-- TABS -->
      <div class="mtp-tabs">
        <div class="mtp-tab active" onclick="mtpTab('tree',this)"><i class="fas fa-sitemap"></i> Working Tree</div>
        <div class="mtp-tab" onclick="mtpTab('pools',this)"><i class="fas fa-th"></i> Global Pools</div>
      </div>

      <!-- PANE 1 — WORKING TREE -->
      <div id="pane-tree" class="mtp-pane on">
        <div class="mt-card">
          <div class="mt-card-title">
            <i class="fas fa-sitemap"></i> Working Matrix Tree
            <span style="font-size:11px;color:#444;font-weight:400">3×3 BFS &nbsp;·&nbsp; <?= $totalMembers ?>
              members</span>
            <?php if ($viewId !== $myId): ?>
                <a class="tree-back" href="<?= xe($selfUrl) ?>" style="margin-left:auto;font-size:11px;padding:4px 12px">
                  <i class="fas fa-arrow-left"></i> My Tree
                </a>
            <?php endif; ?>
          </div>

          <?php if ($viewId !== $myId && $fromId): ?>
              <a class="tree-back" href="<?= xe($selfUrl) ?>?view=<?= $fromId ?>">
                <i class="fas fa-arrow-left"></i> Back to <?= xe($viewedUser['user_id'] ?? '') ?>
              </a>
          <?php endif; ?>

          <div class="tree-scroll">
            <div class="tree-inner">

              <!-- ROOT NODE -->
              <div class="root-card">
                <div class="root-av">
                  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#f19107" stroke-width="2"
                    stroke-linecap="round">
                    <circle cx="12" cy="8" r="4" />
                    <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                  </svg>
                </div>
                <div class="root-uid"><?= xe($viewedUser['user_id'] ?? 'YOU') ?></div>
                <div class="root-sub">
                  <?= $viewId === $myId ? 'YOU' : 'Member' ?>
                  &nbsp;·&nbsp; <?= $totalMembers ?> downline
                </div>
              </div>

              <?php if (empty($treeNodes)): ?>
                  <div style="text-align:center;padding:40px 16px;color:#444;font-size:13px">
                    <i class="fas fa-users" style="font-size:36px;color:#222;display:block;margin-bottom:14px"></i>
                    No team members yet.
                  </div>
              <?php else: ?>

                  <!-- stem + level pill -->
                  <!-- stem + level pill with responsive height -->
                  <div class="v-stem" style="height:20px" id="root-stem"></div>
                  <div style="text-align:center">
                    <span class="lvl-pill">LEVEL 1 &nbsp;<b><?= count($treeNodes) ?></b>&nbsp;<span>/ 3</span></span>
                  </div>

                  <!-- L1 ROW -->
                  <div class="v-stem" style="height:14px" id="l1-stem"></div>
                  <div class="l1-outer" style="width:100%">

                    <div class="l1-nodes-wrap">
                      <?php
                      /* Pad to always 3 columns */
                      $l1list = array_values($treeNodes);
                      while (count($l1list) < 3) {
                        $l1list[] = null;
                      }

                      foreach ($l1list as $idx => $l1n):
                        $isEmpty = $l1n === null;
                        $cid = $isEmpty ? 0 : (int) $l1n['member_id'];
                        $cuid = $isEmpty ? '' : xe($l1n['user_id'] ?? '');
                        $cActive = $isEmpty ? false : (bool) (int) ($l1n['topup_flag'] ?? 0);
                        $cPkg = $isEmpty ? 0 : (int) ($l1n['currentPackage'] ?? 0);

                        /* this L1's subtree */
                        $ct = $isEmpty ? [] : ($childTrees[$cid] ?? []);
                        $ctNodes = $ct['nodes'] ?? [];   // All nodes in this subtree
                        $ctLvlMap = $ct['levelMap'] ?? [];

                        $cl1 = count($ctLvlMap[1] ?? []);
                        $cl2 = count($ctLvlMap[2] ?? []);
                        $cl3 = count($ctLvlMap[3] ?? []);

                        /* URL for clicking this L1 node */
                        $nodeUrl = xe($selfUrl) . '?view=' . $cid . '&from=' . $viewId;
                        ?>
                          <div class="l1-col">

                            <!-- L1 NODE CARD -->
                            <?php if (!$isEmpty): ?>
                                <a class="nd1 <?= $cActive ? '' : 'inactive' ?>" href="<?= $nodeUrl ?>">
                                  <i class="nd1-arr fas fa-chevron-right"></i>
                                  <div class="nd1-av">
                                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                      stroke-width="2" stroke-linecap="round">
                                      <circle cx="12" cy="8" r="4" />
                                      <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                                    </svg>
                                  </div>
                                  <div class="nd1-uid"><?= $cuid ?></div>
                                  <div class="nd1-chk">
                                    <?php if ($cActive): ?>
                                        <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="#22c55e" stroke-width="3"
                                          stroke-linecap="round">
                                          <polyline points="20 6 9 17 4 12" />
                                        </svg>
                                    <?php else: ?>
                                        <svg width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="#6b7280" stroke-width="2">
                                          <circle cx="12" cy="12" r="8" />
                                        </svg>
                                    <?php endif; ?>
                                  </div>
                                  <?php if ($cPkg > 0): ?>
                                      <div class="nd1-pkg">S<?= $cPkg ?></div><?php endif; ?>
                                </a>
                            <?php else: ?>
                                <div class="nd1 empty-slot">
                                  <div class="nd1-av">
                                    <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="#222" stroke-width="2">
                                      <line x1="12" y1="5" x2="12" y2="19" />
                                      <line x1="5" y1="12" x2="19" y2="12" />
                                    </svg>
                                  </div>
                                  <div style="font-size:10px;color:#222;margin-top:6px">Empty</div>
                                </div>
                            <?php endif; ?>

                            <!-- EXPANDED SUBTREE PANEL (3 levels deep) -->
                            <?php if (!$isEmpty): ?>
                                <div class="sub-panel">
                                  <?php if (empty($ctNodes)): ?>
                                      <div style="text-align:center;padding:12px;color:#333;font-size:11px">No downline</div>
                                  <?php else: ?>

                                      <!-- LEVEL 2 (Direct children of this L1) -->
                                      <?php
                                      $l2Children = getChildrenByParent($ctNodes, $cid);
                                      $l2Count = count($l2Children);
                                      ?>

                                      <div style="text-align:center">
                                        <span class="sub-lvl-pill">Level 2 &nbsp;<b><?= $l2Count ?></b>&nbsp;<span style="color:#444">/
                                            3</span></span>
                                      </div>

                                      <div class="sub-node-row">
                                        <?php for ($leg = 1; $leg <= 3; $leg++):
                                          $l2Node = $l2Children[$leg] ?? null;
                                          $isEmptyL2 = $l2Node === null;
                                          $l2Mid = $isEmptyL2 ? 0 : (int) $l2Node['member_id'];
                                          $l2Uid = $isEmptyL2 ? '' : xe($l2Node['user_id'] ?? '');
                                          $l2Active = $isEmptyL2 ? false : (bool) (int) ($l2Node['topup_flag'] ?? 0);
                                          $l2Pkg = $isEmptyL2 ? 0 : (int) ($l2Node['currentPackage'] ?? 0);
                                          $l2Url = xe($selfUrl) . '?view=' . $l2Mid . '&from=' . $cid;
                                          ?>
                                            <div class="sub-node-col">
                                              <?php if (!$isEmptyL2): ?>
                                                  <a class="nd2 <?= $l2Active ? '' : 'inactive' ?>" href="<?= $l2Url ?>">
                                                    <i class="nd2-arr fas fa-chevron-right"></i>
                                                    <div class="nd2-av">
                                                      <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                                                        stroke-width="2" stroke-linecap="round">
                                                        <circle cx="12" cy="8" r="4" />
                                                        <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                                                      </svg>
                                                    </div>
                                                    <div class="nd2-uid"><?= $l2Uid ?></div>
                                                    <div class="nd2-chk">
                                                      <?php if ($l2Active): ?>
                                                          <svg width="9" height="9" viewBox="0 0 24 24" fill="none" stroke="#22c55e"
                                                            stroke-width="3" stroke-linecap="round">
                                                            <polyline points="20 6 9 17 4 12" />
                                                          </svg>
                                                      <?php else: ?>
                                                          <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#6b7280"
                                                            stroke-width="2">
                                                            <circle cx="12" cy="12" r="8" />
                                                          </svg>
                                                      <?php endif; ?>
                                                    </div>
                                                    <?php if ($l2Pkg > 0): ?>
                                                        <div class="nd2-pkg">S<?= $l2Pkg ?></div><?php endif; ?>
                                                  </a>
                                              <?php else: ?>
                                                  <div class="nd2 empty-slot">
                                                    <div class="nd2-av"><svg width="10" height="10" viewBox="0 0 24 24" fill="none"
                                                        stroke="#1e1e1e" stroke-width="2">
                                                        <line x1="12" y1="5" x2="12" y2="19" />
                                                        <line x1="5" y1="12" x2="19" y2="12" />
                                                      </svg></div>
                                                    <div style="font-size:8px;color:#1e1e1e;margin-top:4px">─</div>
                                                  </div>
                                              <?php endif; ?>
                                            </div>
                                        <?php endfor; ?>
                                      </div>

                                      <!-- LEVEL 3 (Children of L2 nodes) -->
                                      <?php
                                      $l3Nodes = [];
                                      foreach ($l2Children as $leg => $l2Node) {
                                        $l3Children = getChildrenByParent($ctNodes, (int) $l2Node['member_id']);
                                        foreach ($l3Children as $l3Leg => $l3Node) {
                                          $l3Nodes[] = $l3Node;
                                        }
                                      }
                                      $l3Count = count($l3Nodes);
                                      ?>

                                      <?php if ($l3Count > 0): ?>
                                          <div class="sub-v" style="height:10px"></div>
                                          <div style="text-align:center">
                                            <span class="sub-lvl-pill">Level 3 &nbsp;<b><?= $l3Count ?></b>&nbsp;<span style="color:#444">/
                                                9</span></span>
                                          </div>

                                          <div class="l3-row">
                                            <?php for ($i = 0; $i < 9; $i++):
                                              $l3Node = $l3Nodes[$i] ?? null;
                                              $isEmptyL3 = $l3Node === null;
                                              $l3Mid = $isEmptyL3 ? 0 : (int) $l3Node['member_id'];
                                              $l3Uid = $isEmptyL3 ? '' : xe($l3Node['user_id'] ?? '');
                                              $l3Active = $isEmptyL3 ? false : (bool) (int) ($l3Node['topup_flag'] ?? 0);
                                              $l3Pkg = $isEmptyL3 ? 0 : (int) ($l3Node['currentPackage'] ?? 0);
                                              $l3Url = xe($selfUrl) . '?view=' . $l3Mid . '&from=' . $cid;
                                              ?>
                                                <div class="l3-col">
                                                  <?php if (!$isEmptyL3): ?>
                                                      <a class="nd3 <?= $l3Active ? '' : 'inactive' ?>" href="<?= $l3Url ?>">
                                                        <div class="nd3-av"><svg width="10" height="10" viewBox="0 0 24 24" fill="none"
                                                            stroke="currentColor" stroke-width="2" stroke-linecap="round">
                                                            <circle cx="12" cy="8" r="4" />
                                                            <path d="M4 20c0-4 3.6-7 8-7s8 3 8 7" />
                                                          </svg></div>
                                                        <div class="nd3-uid"><?= $l3Uid ?></div>
                                                        <div class="nd3-chk">
                                                          <?php if ($l3Active): ?>
                                                              <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="#22c55e"
                                                                stroke-width="3" stroke-linecap="round">
                                                                <polyline points="20 6 9 17 4 12" />
                                                              </svg>
                                                          <?php else: ?>
                                                              <svg width="7" height="7" viewBox="0 0 24 24" fill="none" stroke="#6b7280"
                                                                stroke-width="2">
                                                                <circle cx="12" cy="12" r="8" />
                                                              </svg>
                                                          <?php endif; ?>
                                                        </div>
                                                        <?php if ($l3Pkg > 0): ?>
                                                            <div class="nd3-pkg">S<?= $l3Pkg ?></div><?php endif; ?>
                                                      </a>
                                                  <?php else: ?>
                                                      <div class="nd3 empty-slot">
                                                        <div class="nd3-av"><svg width="8" height="8" viewBox="0 0 24 24" fill="none"
                                                            stroke="#1a1a1a" stroke-width="2">
                                                            <line x1="12" y1="5" x2="12" y2="19" />
                                                            <line x1="5" y1="12" x2="19" y2="12" />
                                                          </svg></div>
                                                      </div>
                                                  <?php endif; ?>
                                                </div>
                                            <?php endfor; ?>
                                          </div>
                                      <?php endif; ?>

                                  <?php endif; ?>
                                </div><!-- /sub-panel -->
                            <?php else: ?>
                                <div class="sub-panel" style="opacity:.12;min-height:60px"></div>
                            <?php endif; ?>

                          </div><!-- /l1-col -->
                      <?php endforeach; ?>
                    </div><!-- /l1-nodes-wrap -->
                  </div><!-- /l1-outer -->

              <?php endif; ?>

            </div><!-- /tree-inner -->
          </div><!-- /tree-scroll -->

          <!-- Level summary -->
          <div class="lvl-sum">
            <?php
            $l1c = count($levelMap[1] ?? []);
            $l2c = count($levelMap[2] ?? []);
            $l3c = count($levelMap[3] ?? []);
            ?>
            <div class="lvl-box">
              <div class="lvl-box-lbl">L1</div>
              <div class="lvl-box-num" style="color:#22c55e"><?= $l1c ?></div>
              <div class="lvl-box-of">of 3</div>
              <div class="pbar-bg">
                <div class="pbar" style="width:<?= pct($l1c, 3) ?>%;background:#22c55e"></div>
              </div>
            </div>
            <div class="lvl-box">
              <div class="lvl-box-lbl">L2</div>
              <div class="lvl-box-num" style="color:#f59e0b"><?= $l2c ?></div>
              <div class="lvl-box-of">of 9</div>
              <div class="pbar-bg">
                <div class="pbar" style="width:<?= pct($l2c, 9) ?>%;background:#f59e0b"></div>
              </div>
            </div>
            <div class="lvl-box">
              <div class="lvl-box-lbl">L3</div>
              <div class="lvl-box-num" style="color:#f43f5e"><?= $l3c ?></div>
              <div class="lvl-box-of">of 27</div>
              <div class="pbar-bg">
                <div class="pbar"
                  style="width:<?= pct($l3c, 27) ?>%;background:<?= $l3c >= 27 ? '#22c55e' : '#f43f5e' ?>">
                </div>
              </div>
            </div>
          </div>
        </div><!-- /mt-card -->
      </div><!-- /pane-tree -->

      <!-- PANE 2 — GLOBAL POOLS (same as before) -->
      <div id="pane-pools" class="mtp-pane">
        <div class="mt-card">
          <div class="mt-card-title">
            <i class="fas fa-th"></i> Global Matrix Pools
            <span style="font-size:11px;color:#444;font-weight:400">3×3 BFS — Auto-Pool &amp; Re-Entry</span>
          </div>
          <div class="pool-grid">
            <?php foreach ($matrixPkgs as $mp):
              $mid = (int) $mp['matrixId'];
              $gt = $globalTrees[$mid] ?? ['entry' => null, 'levels' => [], 're_entries' => 0];
              $enrolled = $gt['entry'] !== null;
              $l1n2 = array_values($gt['levels'][1] ?? []);
              $l2n2 = array_values($gt['levels'][2] ?? []);
              $l3n2 = array_values($gt['levels'][3] ?? []);
              $color = $poolColors[$mid] ?? '#f19107';
              $ip = $poolIncomes[$mid] ?? [];
              $ji = array_filter($ip, fn($r) => (int) $r['poolLevel'] === 0);
              $b1 = array_filter($ip, fn($r) => (int) $r['poolLevel'] === 1);
              $b2 = array_filter($ip, fn($r) => (int) $r['poolLevel'] === 2);
              $b3 = array_filter($ip, fn($r) => (int) $r['poolLevel'] === 3);
              $jt = array_sum(array_column(array_values($ji), 'poolIncome'));
              $a1 = array_sum(array_column(array_values($b1), 'poolIncome'));
              $a2 = array_sum(array_column(array_values($b2), 'poolIncome'));
              $a3 = array_sum(array_column(array_values($b3), 'poolIncome'));
              $tot = $jt + $a1 + $a2 + $a3;
              $c1 = count($l1n2);
              $c2 = count($l2n2);
              $c3 = count($l3n2);
              ?>
                <div class="pool-card <?= $enrolled ? 'enrolled' : '' ?>"
                  style="<?= $enrolled ? "border-color:{$color}44" : '' ?>">
                  <div class="ph">
                    <div>
                      <div class="pname" style="color:<?= $color ?>"><?= xe($mp['poolName'] ?? '') ?>
                        <?php if ($gt['re_entries'] > 0): ?>
                            <span
                              style="color:#3b82f6;font-size:10px;background:rgba(59,130,246,.1);border-radius:4px;padding:1px 6px;margin-left:4px">↻
                              <?= $gt['re_entries'] ?></span>
                        <?php endif; ?>
                      </div>
                      <div class="pprice">$<?= number_format((float) ($mp['poolPrice'] ?? 0), 0) ?></div>
                    </div>
                    <?= $enrolled ? '<span class="badge-a">ACTIVE</span>' : '<span class="badge-n">Not enrolled</span>' ?>
                  </div>
                  <?php if ($enrolled): ?>
                      <div class="pt">
                        <span class="pt-rb">YOU</span>
                        <div class="pstem"></div>
                        <div class="ptlbl">Level 1 &nbsp;<span style="color:#22c55e;font-weight:700"><?= $c1 ?></span>/3</div>
                        <?php $lb2 = [];
                        foreach ($l1n2 as $n)
                          $lb2[(int) $n['legPos']] = $n; ?>
                        <div class="pl1r">
                          <?php for ($s = 1; $s <= 3; $s++):
                            $n = $lb2[$s] ?? null;
                            $u = $n ? xe(substr($n['user_id'] ?? '', 0, 7)) : ''; ?>
                              <div class="ps psl1 <?= $n ? 'f1' : '' ?>"><?= $n ? $u : '<span style="color:#1e1e1e">─</span>' ?>
                              </div>
                          <?php endfor; ?>
                        </div>
                        <div class="pstem"></div>
                        <div class="ptlbl">Level 2 &nbsp;<span style="color:#3b82f6;font-weight:700"><?= $c2 ?></span>/9</div>
                        <?php $l2arr2 = array_values($l2n2); ?>
                        <div class="pl2r">
                          <?php for ($g = 0; $g < 3; $g++): ?>
                              <div class="pl2g">
                                <?php for ($s = 0; $s < 3; $s++):
                                  $n = $l2arr2[$g * 3 + $s] ?? null;
                                  $u = $n ? xe(substr($n['user_id'] ?? '', 0, 4)) : ''; ?>
                                    <div class="ps psl2 <?= $n ? 'f2' : '' ?>"><?= $n ? $u : '─' ?></div>
                                <?php endfor; ?>
                              </div>
                          <?php endfor; ?>
                        </div>
                        <div class="pstem"></div>
                        <div class="ptlbl">Level 3 &nbsp;<span style="color:#a855f7;font-weight:700"><?= $c3 ?></span>/27</div>
                        <?php $l3arr2 = array_values($l3n2); ?>
                        <div class="pl3r">
                          <?php for ($mg = 0; $mg < 3; $mg++): ?>
                              <div class="pl3g">
                                <?php for ($rg = 0; $rg < 3; $rg++): ?>
                                    <div class="pl3i">
                                      <?php for ($s = 0; $s < 3; $s++):
                                        $n = $l3arr2[$mg * 9 + $rg * 3 + $s] ?? null; ?>
                                          <div class="ps psl3 <?= $n ? 'f3' : '' ?>" title="<?= $n ? xe($n['user_id'] ?? '') : 'Empty' ?>">
                                          </div>
                                      <?php endfor; ?>
                                    </div>
                                <?php endfor; ?>
                              </div>
                          <?php endfor; ?>
                        </div>
                      </div>
                      <div class="mprog">
                        <div class="mi">
                          <div class="mv" style="color:#22c55e"><?= $c1 ?>/3</div>
                          <div class="mb">
                            <div class="mf" style="width:<?= pct($c1, 3) ?>%;background:#22c55e"></div>
                          </div>
                          <div class="ml">L1</div>
                        </div>
                        <div class="mi">
                          <div class="mv" style="color:#3b82f6"><?= $c2 ?>/9</div>
                          <div class="mb">
                            <div class="mf" style="width:<?= pct($c2, 9) ?>%;background:#3b82f6"></div>
                          </div>
                          <div class="ml">L2</div>
                        </div>
                        <div class="mi">
                          <div class="mv" style="color:#a855f7"><?= $c3 ?>/27</div>
                          <div class="mb">
                            <div class="mf" style="width:<?= pct($c3, 27) ?>%;background:#a855f7"></div>
                          </div>
                          <div class="ml">L3</div>
                        </div>
                      </div>
                      <?php if ($tot > 0): ?>
                          <div style="border-top:1px solid rgba(255,255,255,.05);margin-top:12px;padding-top:10px">
                            <?php if ($jt > 0): ?>
                                <div class="pir"><span style="color:#555">Join Income</span><span
                                    style="color:<?= $color ?>;font-weight:700">$<?= number_format($jt, 2) ?></span></div>
                            <?php endif; ?>
                            <?php if ($a1 > 0): ?>
                                <div class="pir"><span style="color:#22c55e">L1 Bonus</span><span
                                    style="color:#22c55e;font-weight:700">$<?= number_format($a1, 2) ?></span></div><?php endif; ?>
                            <?php if ($a2 > 0): ?>
                                <div class="pir"><span style="color:#3b82f6">L2 Bonus</span><span
                                    style="color:#3b82f6;font-weight:700">$<?= number_format($a2, 2) ?></span></div><?php endif; ?>
                            <?php if ($a3 > 0): ?>
                                <div class="pir"><span style="color:#a855f7">L3 Bonus</span><span
                                    style="color:#a855f7;font-weight:700">$<?= number_format($a3, 2) ?></span></div><?php endif; ?>
                            <div class="pit"><span style="color:#888">Total Earned</span><span
                                style="color:var(--success,#22c55e)">$<?= number_format($tot, 2) ?></span></div>
                          </div>
                      <?php endif; ?>
                  <?php else: ?>
                      <div style="padding:20px 0;text-align:center">
                        <div style="font-size:28px;opacity:.1;margin-bottom:8px">◎</div>
                        <div style="font-size:11px;color:#2a2a2a;line-height:1.6">Auto-entered when you reach<br>the required
                          working step</div>
                      </div>
                  <?php endif; ?>
                </div>
            <?php endforeach; ?>
          </div>
        </div>
      </div><!-- /pane-pools -->

    </div><!-- /page-content -->
  </div><!-- /main-content -->
</div><!-- /layout.mtp -->

<script>
  function mtpTab(name, el) {
    document.querySelectorAll('.mtp-pane').forEach(function (p) { p.classList.remove('on'); });
    document.querySelectorAll('.mtp-tab').forEach(function (t) { t.classList.remove('active'); });
    document.getElementById('pane-' + name).classList.add('on');
    el.classList.add('active');
  }
  // Add this function after your mtpTab function
  function adjustSpacing() {
    const isMobile = window.innerWidth <= 767;
    const rootStem = document.getElementById('root-stem');
    const l1Stem = document.getElementById('l1-stem');

    if (rootStem && l1Stem) {
      if (isMobile) {
        rootStem.style.height = '8px';
        l1Stem.style.height = '6px';
      } else {
        rootStem.style.height = '20px';
        l1Stem.style.height = '14px';
      }
    }
  }

  // Call on load and resize
  window.addEventListener('load', adjustSpacing);
  window.addEventListener('resize', adjustSpacing);
</script>

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