<?php

declare(strict_types=1);

/*
|--------------------------------------------------------------------------
| Bootstrap dan session
|--------------------------------------------------------------------------
*/

$bootstrapFile = __DIR__ . '/bootstrap.php';

if (is_file($bootstrapFile)) {
    require_once $bootstrapFile;
}

if (session_status() === PHP_SESSION_NONE) {
    session_name('USERSESSID');
    session_start();
}

if (!function_exists('e')) {
    function e($value)
    {
        return htmlspecialchars(
            (string) $value,
            ENT_QUOTES,
            'UTF-8'
        );
    }
}

/*
|--------------------------------------------------------------------------
| Wajib login
|--------------------------------------------------------------------------
*/

if (empty($_SESSION['user_id'])) {
    header(
        'Location: login.php?next=' .
        rawurlencode('account.php')
    );
    exit;
}

/*
|--------------------------------------------------------------------------
| Informasi halaman
|--------------------------------------------------------------------------
*/

$siteName = isset($siteName)
    ? (string) $siteName
    : 'Platform Online';

$pageTitle = 'Akun Saya';
$activeMenu = 'account';
$isLoggedIn = true;

$userId = (int) $_SESSION['user_id'];

/*
|--------------------------------------------------------------------------
| Koneksi database PDO
|--------------------------------------------------------------------------
*/

$databaseFile = __DIR__ . '/config/database.php';

if (!isset($pdo) || !($pdo instanceof PDO)) {
    if (!is_file($databaseFile)) {
        http_response_code(500);

        exit(
            'File koneksi database tidak ditemukan: ' .
            e($databaseFile)
        );
    }

    require_once $databaseFile;
}

if (!isset($pdo) || !($pdo instanceof PDO)) {
    http_response_code(500);

    exit(
        'Koneksi PDO $pdo tidak tersedia dari config/database.php.'
    );
}

$pdo->setAttribute(
    PDO::ATTR_ERRMODE,
    PDO::ERRMODE_EXCEPTION
);

$pdo->setAttribute(
    PDO::ATTR_DEFAULT_FETCH_MODE,
    PDO::FETCH_ASSOC
);

/*
|--------------------------------------------------------------------------
| Helper
|--------------------------------------------------------------------------
*/

function accountCurrency($value)
{
    return number_format(
        (float) $value,
        0,
        ',',
        '.'
    );
}

function accountDate($value, $withTime = true)
{
    if (empty($value)) {
        return '-';
    }

    $timestamp = strtotime(
        (string) $value
    );

    if ($timestamp === false) {
        return '-';
    }

    $months = [
        1 => 'Jan',
        2 => 'Feb',
        3 => 'Mar',
        4 => 'Apr',
        5 => 'Mei',
        6 => 'Jun',
        7 => 'Jul',
        8 => 'Agu',
        9 => 'Sep',
        10 => 'Okt',
        11 => 'Nov',
        12 => 'Des',
    ];

    $result =
        date('j', $timestamp) .
        ' ' .
        $months[(int) date('n', $timestamp)] .
        ' ' .
        date('Y', $timestamp);

    if ($withTime) {
        $result .=
            ', ' .
            date('H:i', $timestamp);
    }

    return $result;
}

function accountMaskNumber($value)
{
    $value = trim(
        (string) $value
    );

    if ($value === '') {
        return '-';
    }

    $length = strlen($value);

    if ($length <= 4) {
        return str_repeat(
            '*',
            $length
        );
    }

    return
        str_repeat(
            '*',
            max(0, $length - 4)
        ) .
        substr($value, -4);
}

function accountInitial($username)
{
    $username = trim(
        (string) $username
    );

    if ($username === '') {
        return 'U';
    }

    return strtoupper(
        substr($username, 0, 1)
    );
}

function accountStatusLabel($status)
{
    if ($status === 'ACTIVE') {
        return 'AKTIF';
    }

    if ($status === 'SUSPENDED') {
        return 'DITANGGUHKAN';
    }

    if ($status === 'BLOCKED') {
        return 'DIBLOKIR';
    }

    return strtoupper(
        (string) $status
    );
}

function accountTransactionLabel($type)
{
    $type = strtoupper(
        trim((string) $type)
    );

    $labels = [
        'DEPOSIT' => 'Deposit',
        'WITHDRAW' => 'Penarikan',
        'WITHDRAWAL' => 'Penarikan',
        'GAME_TRANSFER' => 'Transfer Game',
        'GAME_RETURN' => 'Pengembalian Game',
        'REFERRAL' => 'Bonus Referral',
        'REFERRAL_COMMISSION' => 'Komisi Referral',
        'BONUS' => 'Bonus',
        'CASHBACK' => 'Cashback',
        'ADJUSTMENT' => 'Koreksi Saldo',
    ];

    if (isset($labels[$type])) {
        return $labels[$type];
    }

    return ucwords(
        strtolower(
            str_replace('_', ' ', $type)
        )
    );
}


function accountDepositStatusLabel($status)
{
    $status = strtoupper(
        trim((string) $status)
    );

    $labels = [
        'PENDING' => 'MENUNGGU',
        'PAID' => 'SUDAH DIBAYAR',
        'APPROVED' => 'DISETUJUI',
        'REJECTED' => 'DITOLAK',
        'CANCELLED' => 'DIBATALKAN',
    ];

    return $labels[$status] ??
        ($status !== '' ? $status : 'BELUM TRANSAKSI');
}

function accountDepositStatusClass($status)
{
    $status = strtoupper(
        trim((string) $status)
    );

    if (in_array($status, ['PAID', 'APPROVED'], true)) {
        return 'is-success';
    }

    if ($status === 'PENDING') {
        return 'is-pending';
    }

    if (in_array($status, ['REJECTED', 'CANCELLED'], true)) {
        return 'is-danger';
    }

    return 'is-empty';
}

function accountReferralPageUrl($page)
{
    $page = max(1, (int) $page);

    return
        'account.php?tab=referral&ref_page=' .
        $page .
        '#referral';
}

/*
|--------------------------------------------------------------------------
| Ambil profil terbaru
|--------------------------------------------------------------------------
*/

$user = null;
$pageError = '';

try {
    $userStatement = $pdo->prepare(
        'SELECT
            u.id,
            u.username,
            u.email,
            u.phone,
            u.payment_method,
            u.account_number,
            u.account_name,
            u.balance_local,
            u.referral_balance,
            u.referral_code,
            u.upline_id,
            u.referred_by_code,
            u.status,
            u.last_login_at,
            u.created_at,
            u.updated_at,
            up.username AS upline_username,
            up.referral_code AS upline_referral_code
         FROM users u
         LEFT JOIN users up
            ON up.id = u.upline_id
         WHERE u.id = :user_id
         LIMIT 1'
    );

    $userStatement->execute([
        ':user_id' => $userId,
    ]);

    $user = $userStatement->fetch();
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT PROFILE ERROR: ' .
        $exception->getMessage()
    );

    $pageError =
        'Data akun belum dapat dimuat.';
}

/*
|--------------------------------------------------------------------------
| Session tidak valid atau akun tidak aktif
|--------------------------------------------------------------------------
*/

if (!$user) {
    $_SESSION = [];

    if (ini_get('session.use_cookies')) {
        $cookieParameters =
            session_get_cookie_params();

        setcookie(
            session_name(),
            '',
            time() - 42000,
            $cookieParameters['path'],
            $cookieParameters['domain'],
            (bool) $cookieParameters['secure'],
            (bool) $cookieParameters['httponly']
        );
    }

    session_destroy();

    header(
        'Location: login.php?session=invalid'
    );
    exit;
}

if (
    (string) $user['status'] !== 'ACTIVE'
) {
    $_SESSION = [];
    session_destroy();

    header(
        'Location: login.php?account=inactive'
    );
    exit;
}

/*
|--------------------------------------------------------------------------
| Sinkronkan session dengan database
|--------------------------------------------------------------------------
*/

$username = (string) $user['username'];
$userInitial = accountInitial($username);

$_SESSION['username'] =
    (string) $user['username'];

$_SESSION['email'] =
    (string) $user['email'];

$_SESSION['phone'] =
    (string) $user['phone'];

$_SESSION['payment_method'] =
    (string) $user['payment_method'];

$_SESSION['account_number'] =
    (string) $user['account_number'];

$_SESSION['account_name'] =
    (string) $user['account_name'];

$_SESSION['balance_local'] =
    (float) $user['balance_local'];

$_SESSION['balance'] =
    (float) $user['balance_local'];

$_SESSION['referral_balance'] =
    (float) $user['referral_balance'];

$_SESSION['referral_code'] =
    (string) $user['referral_code'];

$_SESSION['upline_id'] =
    $user['upline_id'] !== null
        ? (int) $user['upline_id']
        : null;

$userBalance = accountCurrency(
    $user['balance_local']
);

/*
|--------------------------------------------------------------------------
| Ringkasan downline
|--------------------------------------------------------------------------
*/

$downlineCount = 0;
$activeDownlineCount = 0;

try {
    $downlineStatement = $pdo->prepare(
        'SELECT
            COUNT(*) AS total_count,
            SUM(
                CASE
                    WHEN status = "ACTIVE"
                    THEN 1
                    ELSE 0
                END
            ) AS active_count
         FROM users
         WHERE upline_id = :user_id'
    );

    $downlineStatement->execute([
        ':user_id' => $userId,
    ]);

    $downlineSummary =
        $downlineStatement->fetch();

    $downlineCount = (int) (
        $downlineSummary['total_count'] ??
        0
    );

    $activeDownlineCount = (int) (
        $downlineSummary['active_count'] ??
        0
    );
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT DOWNLINE ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Aktivitas seluruh downline dan semua transaksi deposit
|--------------------------------------------------------------------------
| Satu transaksi menghasilkan satu baris aktivitas.
| Downline yang belum pernah deposit tetap menghasilkan satu baris.
|--------------------------------------------------------------------------
*/

$downlineActivities = [];
$downlineActivityError = '';

$downlineWithTransactionCount = 0;
$downlineWithoutTransactionCount = 0;
$downlineDepositTransactionCount = 0;
$downlineApprovedDepositTotal = 0.0;

$referralActivityPage = max(
    1,
    (int) ($_GET['ref_page'] ?? 1)
);

$referralActivityPerPage = 10;
$referralActivityTotalRows = 0;
$referralActivityTotalPages = 1;

try {
    $activitySummaryStatement =
        $pdo->prepare(
            'SELECT
                COUNT(DISTINCT downline.id)
                    AS total_downlines,

                COUNT(
                    DISTINCT CASE
                        WHEN deposit.id IS NOT NULL
                        THEN downline.id
                        ELSE NULL
                    END
                ) AS transacted_downlines,

                COUNT(
                    DISTINCT CASE
                        WHEN deposit.id IS NULL
                        THEN downline.id
                        ELSE NULL
                    END
                ) AS no_transaction_downlines,

                COUNT(deposit.id)
                    AS transaction_count,

                COALESCE(
                    SUM(
                        CASE
                            WHEN deposit.status IN (
                                "PAID",
                                "APPROVED"
                            )
                            THEN deposit.amount
                            ELSE 0
                        END
                    ),
                    0
                ) AS approved_amount

             FROM users downline

             LEFT JOIN deposit_requests deposit
                ON deposit.user_id = downline.id

             WHERE downline.upline_id = :upline_id'
        );

    $activitySummaryStatement->execute([
        ':upline_id' => $userId,
    ]);

    $activitySummary =
        $activitySummaryStatement->fetch();

    $downlineWithTransactionCount = (int) (
        $activitySummary['transacted_downlines'] ??
        0
    );

    $downlineWithoutTransactionCount = (int) (
        $activitySummary['no_transaction_downlines'] ??
        0
    );

    $downlineDepositTransactionCount = (int) (
        $activitySummary['transaction_count'] ??
        0
    );

    $downlineApprovedDepositTotal = (float) (
        $activitySummary['approved_amount'] ??
        0
    );

    $activityCountStatement =
        $pdo->prepare(
            'SELECT COUNT(*)
             FROM users downline
             LEFT JOIN deposit_requests deposit
                ON deposit.user_id = downline.id
             WHERE downline.upline_id = :upline_id'
        );

    $activityCountStatement->execute([
        ':upline_id' => $userId,
    ]);

    $referralActivityTotalRows =
        (int) $activityCountStatement
            ->fetchColumn();

    $referralActivityTotalPages = max(
        1,
        (int) ceil(
            $referralActivityTotalRows /
            $referralActivityPerPage
        )
    );

    if (
        $referralActivityPage >
        $referralActivityTotalPages
    ) {
        $referralActivityPage =
            $referralActivityTotalPages;
    }

    $referralActivityOffset =
        ($referralActivityPage - 1) *
        $referralActivityPerPage;

    $activityStatement =
        $pdo->prepare(
            'SELECT
                downline.id AS downline_id,
                downline.username AS downline_username,
                downline.status AS downline_status,
                downline.created_at AS registered_at,

                deposit.id AS deposit_id,
                deposit.reference_code,
                deposit.method_name,
                deposit.method_type,
                deposit.amount,
                deposit.status AS deposit_status,
                deposit.created_at AS transaction_at,
                deposit.approved_at,

                (
                    SELECT COUNT(*)
                    FROM deposit_requests all_deposit
                    WHERE all_deposit.user_id =
                        downline.id
                ) AS downline_transaction_count,

                (
                    SELECT COALESCE(
                        SUM(
                            CASE
                                WHEN success_deposit.status IN (
                                    "PAID",
                                    "APPROVED"
                                )
                                THEN success_deposit.amount
                                ELSE 0
                            END
                        ),
                        0
                    )
                    FROM deposit_requests success_deposit
                    WHERE success_deposit.user_id =
                        downline.id
                ) AS downline_approved_total,

                CASE
                    WHEN deposit.id IS NULL
                    THEN NULL
                    ELSE (
                        SELECT COUNT(*)
                        FROM deposit_requests sequence_deposit
                        WHERE sequence_deposit.user_id =
                            deposit.user_id
                          AND (
                                sequence_deposit.created_at <
                                    deposit.created_at
                                OR (
                                    sequence_deposit.created_at =
                                        deposit.created_at
                                    AND sequence_deposit.id <=
                                        deposit.id
                                )
                          )
                    )
                END AS transaction_sequence

             FROM users downline

             LEFT JOIN deposit_requests deposit
                ON deposit.user_id = downline.id

             WHERE downline.upline_id = :upline_id

             ORDER BY
                COALESCE(
                    deposit.created_at,
                    downline.created_at
                ) DESC,
                downline.id DESC,
                deposit.id DESC

             LIMIT ' . $referralActivityPerPage . '
             OFFSET ' . $referralActivityOffset
        );

    $activityStatement->execute([
        ':upline_id' => $userId,
    ]);

    $downlineActivities =
        $activityStatement->fetchAll();
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT DOWNLINE ACTIVITY ERROR: ' .
        $exception->getMessage()
    );

    $downlineActivityError =
        'Aktivitas downline belum dapat dimuat.';
}

/*
|--------------------------------------------------------------------------
| Ringkasan komisi referral
|--------------------------------------------------------------------------
*/

$totalReferralCommission = 0.0;
$pendingReferralCommission = 0.0;

try {
    $commissionSummaryStatement =
        $pdo->prepare(
            'SELECT
                COALESCE(
                    SUM(
                        CASE
                            WHEN status IN (
                                "APPROVED",
                                "PAID"
                            )
                            THEN commission_amount
                            ELSE 0
                        END
                    ),
                    0
                ) AS approved_total,
                COALESCE(
                    SUM(
                        CASE
                            WHEN status = "PENDING"
                            THEN commission_amount
                            ELSE 0
                        END
                    ),
                    0
                ) AS pending_total
             FROM referral_commissions
             WHERE upline_user_id = :user_id'
        );

    $commissionSummaryStatement->execute([
        ':user_id' => $userId,
    ]);

    $commissionSummary =
        $commissionSummaryStatement->fetch();

    $totalReferralCommission = (float) (
        $commissionSummary['approved_total'] ??
        0
    );

    $pendingReferralCommission = (float) (
        $commissionSummary['pending_total'] ??
        0
    );
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT COMMISSION SUMMARY ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Riwayat saldo
|--------------------------------------------------------------------------
*/

$balanceTransactions = [];

try {
    $transactionStatement = $pdo->prepare(
        'SELECT
            id,
            transaction_type,
            direction,
            amount,
            balance_before,
            balance_after,
            reference_code,
            description,
            created_at
         FROM balance_transactions
         WHERE user_id = :user_id
         ORDER BY id DESC
         LIMIT 12'
    );

    $transactionStatement->execute([
        ':user_id' => $userId,
    ]);

    $balanceTransactions =
        $transactionStatement->fetchAll();
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT TRANSACTION ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Riwayat komisi
|--------------------------------------------------------------------------
*/

$referralCommissions = [];

try {
    $commissionStatement = $pdo->prepare(
        'SELECT
            rc.id,
            rc.referral_level,
            rc.source_reference,
            rc.base_amount,
            rc.commission_percent,
            rc.commission_amount,
            rc.status,
            rc.notes,
            rc.created_at,
            source_user.username AS source_username
         FROM referral_commissions rc
         INNER JOIN users source_user
            ON source_user.id =
                rc.source_user_id
         WHERE rc.upline_user_id = :user_id
         ORDER BY rc.id DESC
         LIMIT 10'
    );

    $commissionStatement->execute([
        ':user_id' => $userId,
    ]);

    $referralCommissions =
        $commissionStatement->fetchAll();
} catch (Throwable $exception) {
    error_log(
        'ACCOUNT COMMISSION LIST ERROR: ' .
        $exception->getMessage()
    );
}

/*
|--------------------------------------------------------------------------
| Susun link referral
|--------------------------------------------------------------------------
*/

$relativeReferralLink =
    'register.php?ref=' .
    rawurlencode(
        (string) $user['referral_code']
    );

$referralLink =
    $relativeReferralLink;

$httpHost = isset($_SERVER['HTTP_HOST'])
    ? trim((string) $_SERVER['HTTP_HOST'])
    : '';

if (
    $httpHost !== '' &&
    preg_match(
        '/^[A-Za-z0-9.-]+(?::[0-9]{1,5})?$/',
        $httpHost
    )
) {
    $scheme = (
        !empty($_SERVER['HTTPS']) &&
        strtolower(
            (string) $_SERVER['HTTPS']
        ) !== 'off'
    )
        ? 'https'
        : 'http';

    $scriptDirectory = str_replace(
        '\\',
        '/',
        dirname(
            (string) (
                $_SERVER['SCRIPT_NAME'] ??
                '/'
            )
        )
    );

    $scriptDirectory = trim(
        $scriptDirectory,
        '/'
    );

    $baseUrl =
        $scheme .
        '://' .
        $httpHost .
        '/';

    if ($scriptDirectory !== '') {
        $baseUrl .=
            $scriptDirectory .
            '/';
    }

    $referralLink =
        $baseUrl .
        $relativeReferralLink;
}

/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

require __DIR__ . '/includes/header.php';

?>

<style>
/*
|--------------------------------------------------------------------------
| Halaman akun
|--------------------------------------------------------------------------
*/

.account-page {
    position: relative;

    width: 100%;
    min-height: calc(100vh - 70px);

    padding: 12px 8px 28px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 50% -6%,
            rgba(0, 139, 255, 0.28),
            transparent 285px
        ),
        radial-gradient(
            circle at 108% 42%,
            rgba(255, 179, 0, 0.11),
            transparent 190px
        ),
        linear-gradient(
            180deg,
            #031431 0%,
            #020a1c 55%,
            #010610 100%
        );
}

.account-page::before,
.account-page::after {
    position: absolute;

    width: 200px;
    height: 200px;

    content: "";

    border-radius: 50%;

    filter: blur(40px);

    pointer-events: none;
}

.account-page::before {
    top: 150px;
    left: -170px;

    background:
        rgba(0, 126, 255, 0.20);
}

.account-page::after {
    right: -175px;
    bottom: 180px;

    background:
        rgba(255, 178, 0, 0.12);
}

.account-shell {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 540px;

    margin: 0 auto;
}

/*
|--------------------------------------------------------------------------
| Breadcrumb
|--------------------------------------------------------------------------
*/

.account-breadcrumb {
    display: flex;

    align-items: center;

    margin-bottom: 9px;

    gap: 5px;

    color: #758ba7;

    font-size: 7px;
}

.account-breadcrumb a {
    color: #8fd5ff;

    text-decoration: none;
}

.account-breadcrumb span {
    color: #ffc943;
}

/*
|--------------------------------------------------------------------------
| Heading
|--------------------------------------------------------------------------
*/

.account-heading {
    display: grid;

    justify-items: center;

    margin-bottom: 11px;

    text-align: center;
}

.account-heading-crown {
    margin-bottom: -4px;

    color: #ffd451;

    font-size: 29px;
    line-height: 1;

    text-shadow:
        0 1px 0 #fff5ac,
        0 3px 0 #713600,
        0 0 10px rgba(255, 194, 39, 0.65);
}

.account-heading h1 {
    margin: 0;

    color: #ffd450;

    background:
        linear-gradient(
            180deg,
            #fff9ba 0%,
            #ffd451 36%,
            #e58b00 72%,
            #fff09a 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    font-size: clamp(24px, 7vw, 34px);
    font-weight: 1000;

    letter-spacing: -0.035em;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(0 2px 0 #713600)
        drop-shadow(0 5px 6px rgba(0, 0, 0, 0.72));
}

.account-heading p {
    max-width: 440px;

    margin: 6px 0 0;

    color: #96aac5;

    font-size: 9px;
    line-height: 1.55;
}

.account-online-state {
    display: inline-flex;

    min-height: 24px;

    align-items: center;

    margin-top: 8px;
    padding: 0 9px;

    gap: 5px;

    border:
        1px solid rgba(70, 222, 150, 0.25);

    border-radius: 999px;

    color: #a9dec4;

    background:
        rgba(4, 48, 32, 0.56);

    font-size: 7px;
    font-weight: 850;
}

.account-online-state i {
    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #50e39a;

    box-shadow:
        0 0 6px rgba(80, 227, 154, 0.70);
}

/*
|--------------------------------------------------------------------------
| Error
|--------------------------------------------------------------------------
*/

.account-error {
    margin-bottom: 10px;
    padding: 9px 10px;

    border:
        1px solid rgba(255, 77, 77, 0.38);

    border-radius: 10px;

    color: #ffd6d6;
    background:
        rgba(102, 12, 17, 0.48);

    font-size: 8px;
    line-height: 1.45;
}

/*
|--------------------------------------------------------------------------
| Profile hero
|--------------------------------------------------------------------------
*/

.account-profile {
    position: relative;

    margin-bottom: 10px;
    padding: 15px;

    overflow: hidden;

    border:
        1px solid rgba(255, 198, 48, 0.42);

    border-radius: 16px;

    background:
        radial-gradient(
            circle at 90% 0,
            rgba(255, 191, 32, 0.15),
            transparent 145px
        ),
        radial-gradient(
            circle at 0 100%,
            rgba(0, 157, 255, 0.17),
            transparent 155px
        ),
        linear-gradient(
            145deg,
            #0a2b5d,
            #04132f
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 9px 24px rgba(0, 0, 0, 0.34);
}

.account-profile::before {
    position: absolute;

    top: 0;
    right: 18px;
    left: 18px;

    height: 1px;

    content: "";

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 239, 157, 0.82),
            transparent
        );
}

.account-profile-main {
    display: grid;

    grid-template-columns:
        58px
        minmax(0, 1fr)
        auto;

    align-items: center;

    gap: 11px;
}

.account-avatar {
    position: relative;

    display: grid;

    width: 58px;
    height: 58px;

    place-items: center;

    border:
        2px solid #ffd24d;

    border-radius: 18px;

    color: #2d1700;

    background:
        linear-gradient(
            145deg,
            #fff6aa,
            #ffc52f 58%,
            #b86900
        );

    font-size: 24px;
    font-weight: 1000;

    box-shadow:
        inset 0 2px 0 rgba(255, 255, 255, 0.65),
        0 0 14px rgba(255, 183, 18, 0.28);
}

.account-avatar::after {
    position: absolute;

    right: -3px;
    bottom: -3px;

    width: 14px;
    height: 14px;

    content: "";

    border:
        3px solid #06214a;

    border-radius: 50%;

    background: #4ae89a;

    box-shadow:
        0 0 8px rgba(74, 232, 154, 0.76);
}

.account-profile-copy {
    min-width: 0;
}

.account-profile-copy small {
    display: block;

    color: #91aac7;

    font-size: 7px;
}

.account-profile-copy h2 {
    margin: 3px 0 0;

    overflow: hidden;

    color: #ffffff;

    font-size: 17px;
    font-weight: 1000;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-profile-copy p {
    margin: 4px 0 0;

    overflow: hidden;

    color: #9db0c7;

    font-size: 7px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-status-badge {
    display: inline-flex;

    min-height: 24px;

    align-items: center;

    padding: 0 8px;

    border:
        1px solid rgba(72, 232, 153, 0.45);

    border-radius: 999px;

    color: #caffe0;
    background:
        rgba(6, 79, 48, 0.64);

    font-size: 6px;
    font-weight: 1000;
}

.account-profile-meta {
    display: grid;

    margin-top: 13px;
    padding-top: 11px;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 6px;

    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.account-profile-meta div {
    display: grid;

    min-height: 44px;

    align-content: center;

    padding: 7px;

    border:
        1px solid rgba(0, 163, 255, 0.18);

    border-radius: 9px;

    background:
        rgba(3, 27, 60, 0.62);
}

.account-profile-meta small {
    color: #7188a5;

    font-size: 6px;
}

.account-profile-meta strong {
    margin-top: 2px;

    overflow: hidden;

    color: #ffffff;

    font-size: 7px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Balance
|--------------------------------------------------------------------------
*/

.account-balance-grid {
    display: grid;

    margin-bottom: 10px;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 8px;
}

.account-balance-card {
    position: relative;

    min-width: 0;

    padding: 12px;

    overflow: hidden;

    border:
        1px solid rgba(0, 159, 255, 0.26);

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(0, 151, 255, 0.12),
            transparent 100px
        ),
        linear-gradient(
            180deg,
            rgba(8, 36, 76, 0.98),
            rgba(2, 14, 34, 0.99)
        );

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 5px 13px rgba(0, 0, 0, 0.24);
}

.account-balance-card.is-referral {
    border-color:
        rgba(255, 197, 43, 0.31);

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255, 184, 22, 0.12),
            transparent 100px
        ),
        linear-gradient(
            180deg,
            rgba(58, 39, 8, 0.95),
            rgba(20, 14, 3, 0.98)
        );
}

.account-balance-card small {
    display: block;

    color: #7d94b0;

    font-size: 7px;
}

.account-balance-card strong {
    display: block;

    margin-top: 5px;

    overflow: hidden;

    color: #ffffff;

    font-size: 18px;
    font-weight: 1000;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-balance-card.is-referral strong {
    color: #ffd34e;
}

.account-balance-card span {
    display: block;

    margin-top: 5px;

    color: #6f87a3;

    font-size: 6px;
}

/*
|--------------------------------------------------------------------------
| Quick actions
|--------------------------------------------------------------------------
*/

.account-quick-actions {
    display: grid;

    margin-bottom: 11px;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap: 6px;
}

.account-quick-link {
    display: grid;

    min-width: 0;
    min-height: 65px;

    align-content: center;
    justify-items: center;

    padding: 7px 4px;

    border:
        1px solid rgba(0, 159, 255, 0.22);

    border-radius: 11px;

    color: #a9bed7;

    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.95),
            rgba(2, 14, 32, 0.98)
        );

    font-size: 6px;
    font-weight: 900;

    text-align: center;
    text-decoration: none;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 4px 10px rgba(0, 0, 0, 0.20);
}

.account-quick-icon {
    display: grid;

    width: 29px;
    height: 29px;

    place-items: center;

    margin-bottom: 5px;

    border:
        1px solid rgba(255, 205, 68, 0.39);

    border-radius: 9px;

    color: #ffd34e;

    background:
        rgba(255, 193, 30, 0.08);

    font-size: 11px;
    font-weight: 1000;
}

/*
|--------------------------------------------------------------------------
| Tab navigation
|--------------------------------------------------------------------------
*/

.account-tabs {
    display: grid;

    margin-bottom: 9px;
    padding: 5px;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;

    border:
        1px solid rgba(0, 159, 255, 0.22);

    border-radius: 11px;

    background:
        rgba(3, 18, 42, 0.85);
}

.account-tab-button {
    min-height: 32px;

    padding: 0 6px;

    border:
        1px solid transparent;

    border-radius: 8px;

    color: #7890ac;
    background: transparent;

    font-family: inherit;
    font-size: 7px;
    font-weight: 1000;

    cursor: pointer;
}

.account-tab-button.is-active {
    border-color:
        rgba(255, 211, 78, 0.62);

    color: #291500;

    background:
        linear-gradient(
            180deg,
            #ffe784,
            #ffb81c
        );

    box-shadow:
        0 0 7px rgba(255, 183, 23, 0.20);
}

.account-tab-panel {
    display: none;
}

.account-tab-panel.is-active {
    display: block;
}

/*
|--------------------------------------------------------------------------
| Section title
|--------------------------------------------------------------------------
*/

.account-section-heading {
    display: flex;

    align-items: center;
    justify-content: space-between;

    margin:
        11px
        1px
        7px;
}

.account-section-heading h2 {
    margin: 0;

    color: #ffffff;

    font-size: 12px;
}

.account-section-heading small {
    color: #758ba7;

    font-size: 7px;
}

/*
|--------------------------------------------------------------------------
| Info list
|--------------------------------------------------------------------------
*/

.account-info-list {
    display: grid;

    gap: 7px;
}

.account-info-row {
    display: grid;

    min-height: 53px;

    grid-template-columns:
        35px
        minmax(0, 1fr);

    align-items: center;

    padding: 9px 10px;

    gap: 9px;

    border:
        1px solid rgba(0, 159, 255, 0.21);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.94),
            rgba(2, 14, 32, 0.98)
        );
}

.account-info-icon {
    display: grid;

    width: 35px;
    height: 35px;

    place-items: center;

    border:
        1px solid rgba(255, 204, 65, 0.42);

    border-radius: 10px;

    color: #ffd24b;
    background:
        rgba(255, 194, 31, 0.08);

    font-size: 10px;
    font-weight: 1000;
}

.account-info-copy {
    min-width: 0;
}

.account-info-copy small {
    display: block;

    color: #778fa9;

    font-size: 6px;
}

.account-info-copy strong {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #ffffff;

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| Referral card
|--------------------------------------------------------------------------
*/

.account-referral-card {
    padding: 12px;

    border:
        1px solid rgba(255, 199, 48, 0.35);

    border-radius: 13px;

    background:
        radial-gradient(
            circle at 100% 0,
            rgba(255, 184, 22, 0.12),
            transparent 115px
        ),
        linear-gradient(
            145deg,
            rgba(59, 40, 8, 0.94),
            rgba(18, 13, 4, 0.98)
        );
}

.account-referral-code {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}

.account-referral-code div {
    min-width: 0;
}

.account-referral-code small {
    display: block;

    color: #a48d63;

    font-size: 6px;
}

.account-referral-code strong {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #ffd34e;

    font-size: 17px;
    font-weight: 1000;

    letter-spacing: 0.08em;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-copy-button {
    min-height: 32px;

    padding: 0 10px;

    border:
        1px solid #ffe07a;

    border-radius: 8px;

    color: #2a1500;

    background:
        linear-gradient(
            180deg,
            #fff08d,
            #ffbd24
        );

    font-family: inherit;
    font-size: 7px;
    font-weight: 1000;

    cursor: pointer;
}

.account-referral-link {
    display: block;

    width: 100%;
    min-height: 39px;

    margin-top: 9px;
    padding: 0 10px;

    border:
        1px solid rgba(255, 202, 56, 0.22);

    border-radius: 9px;

    outline: none;

    color: #e0d1af;
    background:
        rgba(31, 21, 4, 0.72);

    font-family: inherit;
    font-size: 7px;
}

.account-referral-stats {
    display: grid;

    margin-top: 9px;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 5px;
}

.account-referral-stat {
    display: grid;

    min-height: 48px;

    align-content: center;
    justify-items: center;

    border:
        1px solid rgba(255, 205, 70, 0.14);

    border-radius: 8px;

    background:
        rgba(0, 0, 0, 0.16);

    text-align: center;
}

.account-referral-stat strong {
    color: #ffffff;

    font-size: 10px;
    font-weight: 1000;
}

.account-referral-stat small {
    margin-top: 2px;

    color: #9b8968;

    font-size: 5px;
}

/*
|--------------------------------------------------------------------------
| Transactions
|--------------------------------------------------------------------------
*/

.account-transaction-list {
    display: grid;

    gap: 7px;
}

.account-transaction-item {
    display: grid;

    grid-template-columns:
        37px
        minmax(0, 1fr)
        auto;

    align-items: center;

    padding: 9px;

    gap: 8px;

    border:
        1px solid rgba(0, 159, 255, 0.20);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.94),
            rgba(2, 14, 32, 0.98)
        );
}

.account-transaction-icon {
    display: grid;

    width: 37px;
    height: 37px;

    place-items: center;

    border:
        1px solid rgba(77, 231, 152, 0.33);

    border-radius: 10px;

    color: #70edac;
    background:
        rgba(6, 74, 45, 0.34);

    font-size: 15px;
    font-weight: 1000;
}

.account-transaction-icon.is-debit {
    border-color:
        rgba(255, 99, 99, 0.32);

    color: #ff8a8a;
    background:
        rgba(93, 16, 20, 0.34);
}

.account-transaction-copy {
    min-width: 0;
}

.account-transaction-copy strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-transaction-copy small {
    display: block;

    margin-top: 3px;

    overflow: hidden;

    color: #778da7;

    font-size: 6px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-transaction-amount {
    min-width: 70px;

    text-align: right;
}

.account-transaction-amount strong {
    display: block;

    color: #68e9a5;

    font-size: 8px;
}

.account-transaction-amount strong.is-debit {
    color: #ff8686;
}

.account-transaction-amount small {
    display: block;

    margin-top: 3px;

    color: #647b97;

    font-size: 5px;
}

/*
|--------------------------------------------------------------------------
| Commission
|--------------------------------------------------------------------------
*/

.account-commission-list {
    display: grid;

    gap: 7px;
}

.account-commission-item {
    display: grid;

    grid-template-columns:
        37px
        minmax(0, 1fr)
        auto;

    align-items: center;

    padding: 9px;

    gap: 8px;

    border:
        1px solid rgba(255, 199, 48, 0.20);

    border-radius: 11px;

    background:
        linear-gradient(
            180deg,
            rgba(48, 34, 9, 0.91),
            rgba(17, 12, 3, 0.98)
        );
}

.account-commission-rank {
    display: grid;

    width: 37px;
    height: 37px;

    place-items: center;

    border:
        1px solid rgba(255, 206, 72, 0.44);

    border-radius: 50%;

    color: #ffd34e;
    background:
        rgba(255, 194, 31, 0.08);

    font-size: 8px;
    font-weight: 1000;
}

.account-commission-copy {
    min-width: 0;
}

.account-commission-copy strong {
    display: block;

    overflow: hidden;

    color: #ffffff;

    font-size: 8px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-commission-copy small {
    display: block;

    margin-top: 3px;

    color: #9e8c6d;

    font-size: 6px;
}

.account-commission-value {
    text-align: right;
}

.account-commission-value strong {
    display: block;

    color: #ffd34e;

    font-size: 8px;
}

.account-commission-value small {
    display: inline-flex;

    min-height: 17px;

    align-items: center;

    margin-top: 3px;
    padding: 0 5px;

    border-radius: 999px;

    color: #cbd8e8;
    background:
        rgba(255, 255, 255, 0.06);

    font-size: 5px;
}

/*
|--------------------------------------------------------------------------
| Empty
|--------------------------------------------------------------------------
*/

.account-empty {
    padding: 19px 11px;

    border:
        1px dashed rgba(255, 194, 39, 0.28);

    border-radius: 11px;

    color: #8298b2;
    background:
        rgba(4, 18, 42, 0.72);

    font-size: 8px;
    line-height: 1.55;

    text-align: center;
}

/*
|--------------------------------------------------------------------------
| Security dan logout
|--------------------------------------------------------------------------
*/

.account-security {
    display: grid;

    margin-top: 11px;
    padding: 11px;

    grid-template-columns:
        43px
        minmax(0, 1fr);

    align-items: center;

    gap: 10px;

    border:
        1px solid rgba(78, 231, 151, 0.25);

    border-radius: 12px;

    background:
        linear-gradient(
            180deg,
            rgba(6, 67, 42, 0.50),
            rgba(2, 31, 21, 0.76)
        );
}

.account-security-icon {
    display: grid;

    width: 43px;
    height: 43px;

    place-items: center;

    border:
        2px solid #62e7a2;

    border-radius: 50%;

    color: #d6ffe8;
    background:
        rgba(4, 45, 29, 0.85);

    font-size: 13px;
    font-weight: 1000;
}

.account-security strong {
    display: block;

    color: #ffffff;

    font-size: 9px;
}

.account-security p {
    margin: 4px 0 0;

    color: #9bc8b2;

    font-size: 7px;
    line-height: 1.55;
}

.account-actions {
    display: grid;

    margin-top: 12px;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 7px;
}

.account-button {
    display: flex;

    min-height: 40px;

    align-items: center;
    justify-content: center;

    padding: 0 10px;

    border:
        1px solid rgba(0, 166, 255, 0.40);

    border-radius: 9px;

    color: #ffffff;

    background:
        linear-gradient(
            180deg,
            rgba(11, 63, 117, 0.92),
            rgba(3, 26, 59, 0.98)
        );

    font-size: 8px;
    font-weight: 1000;

    text-decoration: none;
}

.account-button--logout {
    border-color:
        rgba(255, 92, 92, 0.47);

    color: #ffe1e1;

    background:
        linear-gradient(
            180deg,
            rgba(139, 31, 38, 0.92),
            rgba(64, 10, 15, 0.98)
        );
}

.account-footer-note {
    margin: 12px 0 0;

    color: #627894;

    font-size: 7px;
    line-height: 1.55;

    text-align: center;
}

@media (max-width: 390px) {
    .account-profile {
        padding: 12px;
    }

    .account-profile-main {
        grid-template-columns:
            52px
            minmax(0, 1fr);
    }

    .account-avatar {
        width: 52px;
        height: 52px;
    }

    .account-status-badge {
        grid-column: 1 / -1;

        width: max-content;

        margin-left: 63px;
    }
}

@media (max-width: 340px) {
    .account-balance-grid,
    .account-actions {
        grid-template-columns: 1fr;
    }

    .account-quick-actions {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .account-referral-stats {
        grid-template-columns: 1fr;
    }
}

/*
|--------------------------------------------------------------------------
| Ukuran teks dibuat lebih nyaman dibaca
|--------------------------------------------------------------------------
*/

.account-breadcrumb {
    font-size: 10px !important;
}

.account-heading p {
    font-size: 12px !important;
}

.account-online-state {
    min-height: 27px !important;
    font-size: 10px !important;
}

.account-error {
    font-size: 11px !important;
}

.account-profile-copy small {
    font-size: 10px !important;
}

.account-profile-copy h2 {
    font-size: 20px !important;
}

.account-profile-copy p {
    font-size: 11px !important;
}

.account-status-badge {
    min-height: 27px !important;
    font-size: 9px !important;
}

.account-profile-meta small {
    font-size: 9px !important;
}

.account-profile-meta strong {
    font-size: 11px !important;
}

.account-balance-card small {
    font-size: 10px !important;
}

.account-balance-card strong {
    font-size: 20px !important;
}

.account-balance-card span {
    font-size: 9px !important;
}

.account-quick-link {
    font-size: 9px !important;
}

.account-quick-icon {
    font-size: 13px !important;
}

.account-tab-button {
    min-height: 37px !important;
    font-size: 10px !important;
}

.account-section-heading h2 {
    font-size: 15px !important;
}

.account-section-heading small {
    font-size: 10px !important;
}

.account-info-copy small {
    font-size: 9px !important;
}

.account-info-copy strong {
    font-size: 12px !important;
}

.account-referral-code small {
    font-size: 9px !important;
}

.account-referral-code strong {
    font-size: 19px !important;
}

.account-copy-button {
    min-height: 36px !important;
    font-size: 10px !important;
}

.account-referral-link {
    min-height: 42px !important;
    font-size: 10px !important;
}

.account-referral-stat strong {
    font-size: 13px !important;
}

.account-referral-stat small {
    font-size: 8px !important;
}

.account-transaction-copy strong,
.account-commission-copy strong {
    font-size: 11px !important;
}

.account-transaction-copy small,
.account-commission-copy small {
    font-size: 9px !important;
}

.account-transaction-amount strong,
.account-commission-value strong {
    font-size: 11px !important;
}

.account-transaction-amount small,
.account-commission-value small {
    font-size: 8px !important;
}

.account-empty {
    font-size: 11px !important;
}

.account-security strong {
    font-size: 12px !important;
}

.account-security p {
    font-size: 10px !important;
}

.account-button {
    min-height: 43px !important;
    font-size: 10px !important;
}

.account-footer-note {
    font-size: 9px !important;
}

/*
|--------------------------------------------------------------------------
| Ringkasan aktivitas downline
|--------------------------------------------------------------------------
*/

.account-downline-summary {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 9px;
}

.account-downline-summary article {
    min-width: 0;
    padding: 10px;
    border:
        1px solid rgba(0, 159, 255, 0.20);
    border-radius: 10px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.94),
            rgba(2, 14, 32, 0.98)
        );
}

.account-downline-summary span,
.account-downline-summary strong,
.account-downline-summary small {
    display: block;
}

.account-downline-summary span {
    color: #7890ac;
    font-size: 9px;
    font-weight: 900;
}

.account-downline-summary strong {
    margin-top: 5px;
    color: #ffffff;
    font-size: 15px;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.account-downline-summary small {
    margin-top: 4px;
    color: #6f87a3;
    font-size: 8px;
    line-height: 1.45;
}

.account-downline-summary .is-success strong {
    color: #68e9a5;
}

.account-downline-summary .is-pending strong {
    color: #ffd34e;
}

/*
|--------------------------------------------------------------------------
| Daftar downline dan setiap transaksi
|--------------------------------------------------------------------------
*/

.account-downline-list {
    display: grid;
    gap: 8px;
}

.account-downline-item {
    padding: 11px;
    border:
        1px solid rgba(0, 159, 255, 0.20);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.95),
            rgba(2, 14, 32, 0.99)
        );
}

.account-downline-item.is-no-transaction {
    border-color:
        rgba(255, 205, 70, 0.22);
    background:
        linear-gradient(
            180deg,
            rgba(48, 34, 9, 0.90),
            rgba(17, 12, 3, 0.98)
        );
}

.account-downline-head {
    display: grid;
    grid-template-columns:
        38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
}

.account-downline-avatar {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border:
        1px solid rgba(255, 205, 68, 0.40);
    border-radius: 10px;
    color: #2d1700;
    background:
        linear-gradient(
            145deg,
            #fff6aa,
            #ffc52f 58%,
            #b86900
        );
    font-size: 15px;
    font-weight: 1000;
}

.account-downline-copy {
    min-width: 0;
}

.account-downline-copy strong,
.account-downline-copy small {
    display: block;
}

.account-downline-copy strong {
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-downline-copy small {
    margin-top: 4px;
    color: #7890ac;
    font-size: 9px;
}

.account-downline-member-status {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    color: #bfe9d1;
    background:
        rgba(6, 79, 48, 0.50);
    font-size: 8px;
    font-weight: 1000;
}

.account-downline-transaction {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    padding-top: 10px;
    border-top:
        1px solid rgba(255, 255, 255, 0.08);
}

.account-downline-transaction-copy {
    min-width: 0;
}

.account-downline-transaction-copy strong,
.account-downline-transaction-copy small {
    display: block;
}

.account-downline-transaction-copy strong {
    color: #ffffff;
    font-size: 12px;
}

.account-downline-transaction-copy small {
    margin-top: 4px;
    overflow-wrap: anywhere;
    color: #7890ac;
    font-size: 9px;
    line-height: 1.45;
}

.account-downline-transaction-value {
    min-width: 108px;
    text-align: right;
}

.account-downline-transaction-value strong {
    display: block;
    color: #68e9a5;
    font-size: 13px;
}

.account-downline-transaction-value small {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    margin-top: 5px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 1000;
}

.account-downline-transaction-value small.is-success {
    color: #8ef0bd;
    background:
        rgba(6, 79, 48, 0.54);
}

.account-downline-transaction-value small.is-pending {
    color: #ffd96b;
    background:
        rgba(103, 72, 7, 0.48);
}

.account-downline-transaction-value small.is-danger {
    color: #ff9b9b;
    background:
        rgba(93, 16, 20, 0.50);
}

.account-downline-transaction-value small.is-empty {
    color: #9cafc4;
    background:
        rgba(255, 255, 255, 0.07);
}

.account-downline-total {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 9px;
    padding-top: 8px;
    border-top:
        1px solid rgba(255, 255, 255, 0.06);
    color: #7890ac;
    font-size: 8px;
    line-height: 1.45;
}

.account-downline-total strong {
    color: #d8e5f3;
    font-size: 9px;
}

.account-downline-no-transaction {
    margin-top: 10px;
    padding: 10px;
    border:
        1px dashed rgba(255, 205, 70, 0.24);
    border-radius: 9px;
    color: #c7b887;
    background:
        rgba(0, 0, 0, 0.14);
    font-size: 10px;
    line-height: 1.55;
}

.account-referral-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 10px;
}

.account-referral-pagination a,
.account-referral-pagination span {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    border:
        1px solid rgba(0, 159, 255, 0.24);
    border-radius: 8px;
    color: #8fd5ff;
    background:
        rgba(3, 27, 60, 0.70);
    font-size: 9px;
    font-weight: 900;
    text-decoration: none;
}

.account-referral-pagination span {
    color: #ffd34e;
    border-color:
        rgba(255, 205, 70, 0.25);
}

@media (max-width: 390px) {
    .account-downline-head {
        grid-template-columns:
            36px minmax(0, 1fr);
    }

    .account-downline-member-status {
        grid-column: 2;
        width: max-content;
    }

    .account-downline-transaction {
        grid-template-columns: 1fr;
    }

    .account-downline-transaction-value {
        text-align: left;
    }

    .account-downline-total {
        flex-direction: column;
    }
}


/*
|--------------------------------------------------------------------------
| Tabel aktivitas downline
|--------------------------------------------------------------------------
*/

.account-downline-table-section {
    position: relative;
    left: 50%;
    width: min(
        1040px,
        calc(100vw - 16px)
    );
    margin-left: -50vw;
    transform: translateX(
        calc(50vw - 50%)
    );
}

.account-downline-table-wrap {
    width: 100%;
    overflow-x: auto;
    border:
        1px solid rgba(0, 159, 255, 0.22);
    border-radius: 12px;
    background:
        linear-gradient(
            180deg,
            rgba(8, 33, 69, 0.96),
            rgba(2, 14, 32, 0.99)
        );
    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.22);
}

.account-downline-table {
    width: 100%;
    min-width: 980px;
    border-collapse: collapse;
}

.account-downline-table th,
.account-downline-table td {
    padding: 11px 10px;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
    text-align: left;
    vertical-align: top;
}

.account-downline-table th {
    position: sticky;
    top: 0;
    z-index: 2;
    color: #8fd5ff;
    background: #082653;
    font-size: 10px;
    font-weight: 1000;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.account-downline-table td {
    color: #dce8f5;
    font-size: 11px;
    line-height: 1.5;
}

.account-downline-table tbody tr:last-child td {
    border-bottom: 0;
}

.account-downline-table tbody tr:hover td {
    background:
        rgba(0, 159, 255, 0.055);
}

.account-downline-table tbody tr.is-no-transaction td {
    background:
        rgba(255, 193, 30, 0.035);
}

.account-downline-table td strong,
.account-downline-table td small {
    display: block;
}

.account-downline-table td strong {
    color: #ffffff;
    font-size: 11px;
    line-height: 1.45;
}

.account-downline-table td small {
    margin-top: 4px;
    color: #7890ac;
    font-size: 9px;
    line-height: 1.45;
}

.account-downline-table-username {
    color: #ffd34e !important;
    font-size: 12px !important;
}

.account-downline-reference {
    max-width: 170px;
    overflow-wrap: anywhere;
}

.account-downline-table-amount {
    color: #68e9a5 !important;
    white-space: nowrap;
}

.account-downline-table-empty {
    color: #9cafc4 !important;
}

.account-downline-table-status {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 1000;
    white-space: nowrap;
}

.account-downline-table-status.is-success {
    color: #8ef0bd;
    background:
        rgba(6, 79, 48, 0.54);
}

.account-downline-table-status.is-pending {
    color: #ffd96b;
    background:
        rgba(103, 72, 7, 0.48);
}

.account-downline-table-status.is-danger {
    color: #ff9b9b;
    background:
        rgba(93, 16, 20, 0.50);
}

.account-downline-table-status.is-empty {
    color: #c5d1dd;
    background:
        rgba(255, 255, 255, 0.07);
}

.account-downline-detail-button {
    min-height: 34px;
    padding: 0 10px;
    border:
        1px solid rgba(0, 159, 255, 0.38);
    border-radius: 8px;
    color: #8fd5ff;
    background:
        rgba(4, 42, 76, 0.72);
    font-family: inherit;
    font-size: 9px;
    font-weight: 1000;
    cursor: pointer;
}

/*
|--------------------------------------------------------------------------
| Modal detail downline
|--------------------------------------------------------------------------
*/

.account-downline-modal[hidden] {
    display: none;
}

.account-downline-modal {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 14px;
}

.account-downline-modal-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background:
        rgba(0, 5, 15, 0.82);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.account-downline-modal-card {
    position: relative;
    z-index: 2;
    width: min(520px, 100%);
    max-height: calc(100vh - 28px);
    overflow: auto;
    padding: 16px;
    border:
        1px solid rgba(0, 159, 255, 0.32);
    border-radius: 15px;
    background:
        linear-gradient(
            180deg,
            #0a2b5d,
            #031329
        );
    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.52);
}

.account-downline-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 13px;
}

.account-downline-modal-head small {
    color: #8fd5ff;
    font-size: 9px;
    font-weight: 1000;
    letter-spacing: 1px;
}

.account-downline-modal-head h3 {
    margin: 6px 0 0;
    color: #ffd34e;
    font-size: 20px;
}

.account-downline-modal-head > button {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border:
        1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9px;
    color: #ffffff;
    background:
        rgba(255, 255, 255, 0.06);
    font-size: 20px;
    cursor: pointer;
}

.account-downline-detail-list {
    display: grid;
    margin: 0;
}

.account-downline-detail-list > div {
    display: grid;
    grid-template-columns:
        155px minmax(0, 1fr);
    gap: 10px;
    padding: 10px 0;
    border-bottom:
        1px solid rgba(255, 255, 255, 0.07);
}

.account-downline-detail-list > div:last-child {
    border-bottom: 0;
}

.account-downline-detail-list dt {
    color: #7890ac;
    font-size: 10px;
}

.account-downline-detail-list dd {
    margin: 0;
    overflow-wrap: anywhere;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.account-downline-modal-close-button {
    width: 100%;
    min-height: 40px;
    margin-top: 13px;
    border:
        1px solid rgba(255, 205, 70, 0.42);
    border-radius: 9px;
    color: #2a1500;
    background:
        linear-gradient(
            180deg,
            #fff08d,
            #ffbd24
        );
    font-family: inherit;
    font-size: 10px;
    font-weight: 1000;
    cursor: pointer;
}

body.is-downline-modal-open {
    overflow: hidden;
}

@media (max-width: 560px) {
    .account-downline-table th,
    .account-downline-table td {
        padding: 10px 8px;
    }

    .account-downline-detail-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }
}


/*
|--------------------------------------------------------------------------
| Perbaikan scroll tabel downline
|--------------------------------------------------------------------------
*/

.account-downline-table-section {
    position: relative !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    transform: none !important;
}

.account-downline-scroll-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 7px;
    padding: 8px 9px;
    border:
        1px solid rgba(0, 159, 255, 0.20);
    border-radius: 9px;
    color: #8fd5ff;
    background:
        rgba(3, 27, 60, 0.72);
    font-size: 9px;
    line-height: 1.4;
}

.account-downline-scroll-controls > div {
    display: flex;
    gap: 6px;
}

.account-downline-scroll-controls button {
    min-height: 31px;
    padding: 0 9px;
    border:
        1px solid rgba(255, 205, 70, 0.30);
    border-radius: 7px;
    color: #2a1500;
    background:
        linear-gradient(
            180deg,
            #fff08d,
            #ffbd24
        );
    font-family: inherit;
    font-size: 8px;
    font-weight: 1000;
    cursor: pointer;
    white-space: nowrap;
}

.account-downline-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: scroll !important;
    overflow-y: hidden !important;
    padding-bottom: 5px;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color:
        #ffbd24
        rgba(255, 255, 255, 0.08);
}

.account-downline-table-wrap::-webkit-scrollbar,
.account-downline-bottom-scroll::-webkit-scrollbar {
    height: 12px;
}

.account-downline-table-wrap::-webkit-scrollbar-track,
.account-downline-bottom-scroll::-webkit-scrollbar-track {
    border-radius: 999px;
    background:
        rgba(255, 255, 255, 0.08);
}

.account-downline-table-wrap::-webkit-scrollbar-thumb,
.account-downline-bottom-scroll::-webkit-scrollbar-thumb {
    border: 2px solid #06162f;
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            #ffd451,
            #ff9f1a
        );
}

.account-downline-bottom-scroll {
    width: 100%;
    height: 20px;
    overflow-x: scroll;
    overflow-y: hidden;
    margin-top: 7px;
    border:
        1px solid rgba(0, 159, 255, 0.18);
    border-radius: 999px;
    background:
        rgba(3, 27, 60, 0.62);
    scrollbar-width: auto;
    scrollbar-color:
        #ffbd24
        rgba(255, 255, 255, 0.08);
}

.account-downline-bottom-scroll > div {
    width: 980px;
    height: 1px;
}

@media (max-width: 560px) {
    .account-downline-scroll-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .account-downline-scroll-controls > div {
        display: grid;
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .account-downline-scroll-controls button {
        width: 100%;
        min-height: 34px;
        font-size: 9px;
    }
}

</style>

<section class="account-page">
    <div class="account-shell">

        <nav
            class="account-breadcrumb"
            aria-label="Breadcrumb"
        >
            <a href="index.php">
                Home
            </a>

            <span>›</span>

            <strong>
                Akun Saya
            </strong>
        </nav>

        <header class="account-heading">
            <span
                class="account-heading-crown"
                aria-hidden="true"
            >
                ♛
            </span>

            <h1>
                AKUN SAYA
            </h1>

            <p>
                Kelola informasi akun, saldo, referral,
                serta riwayat transaksi Anda.
            </p>

            <span class="account-online-state">
                <i></i>
                Sesi login aktif
            </span>
        </header>

        <?php if ($pageError !== ''): ?>

            <div class="account-error">
                <?= e($pageError); ?>
            </div>

        <?php endif; ?>

        <section class="account-profile">

            <div class="account-profile-main">

                <span class="account-avatar">
                    <?= e($userInitial); ?>
                </span>

                <div class="account-profile-copy">
                    <small>
                        Selamat datang kembali
                    </small>

                    <h2>
                        <?= e($user['username']); ?>
                    </h2>

                    <p>
                        <?= e($user['email']); ?>
                    </p>
                </div>

                <span class="account-status-badge">
                    <?= e(
                        accountStatusLabel(
                            $user['status']
                        )
                    ); ?>
                </span>

            </div>

            <div class="account-profile-meta">

                <div>
                    <small>
                        Member sejak
                    </small>

                    <strong>
                        <?= e(
                            accountDate(
                                $user['created_at'],
                                false
                            )
                        ); ?>
                    </strong>
                </div>

                <div>
                    <small>
                        Login terakhir
                    </small>

                    <strong>
                        <?= e(
                            accountDate(
                                $user['last_login_at']
                            )
                        ); ?>
                    </strong>
                </div>

            </div>

        </section>

        <section class="account-balance-grid">

            <article class="account-balance-card">
                <small>
                    Saldo Utama
                </small>

                <strong>
                    IDR <?= e(
                        accountCurrency(
                            $user['balance_local']
                        )
                    ); ?>
                </strong>

                <span>
                    Saldo lokal akun
                </span>
            </article>

            <article
                class="account-balance-card is-referral"
            >
                <small>
                    Saldo Referral
                </small>

                <strong>
                    IDR <?= e(
                        accountCurrency(
                            $user['referral_balance']
                        )
                    ); ?>
                </strong>

                <span>
                    Pendapatan referral
                </span>
            </article>

        </section>

        <nav
            class="account-quick-actions"
            aria-label="Menu cepat akun"
        >

            <a
                class="account-quick-link"
                href="deposit.php"
            >
                <span class="account-quick-icon">
                    +
                </span>

                DEPOSIT
            </a>

            <a
                class="account-quick-link"
                href="promo.php"
            >
                <span class="account-quick-icon">
                    ★
                </span>

                PROMO
            </a>

            <a
                class="account-quick-link"
                href="event.php"
            >
                <span class="account-quick-icon">
                    ♛
                </span>

                EVENT
            </a>

            <a
                class="account-quick-link"
                href="bantuan.php"
            >
                <span class="account-quick-icon">
                    ?
                </span>

                BANTUAN
            </a>

        </nav>

        <nav
            class="account-tabs"
            aria-label="Bagian akun"
        >

            <button
                class="account-tab-button is-active"
                type="button"
                data-account-tab="overview"
            >
                PROFIL
            </button>

            <button
                class="account-tab-button"
                type="button"
                data-account-tab="transactions"
            >
                TRANSAKSI
            </button>

            <button
                class="account-tab-button"
                type="button"
                data-account-tab="referral"
            >
                REFERRAL
            </button>

        </nav>

        <!-- PROFIL -->
        <section
            class="account-tab-panel is-active"
            data-account-panel="overview"
        >

            <div class="account-section-heading">
                <h2>
                    Informasi Pribadi
                </h2>

                <small>
                    Data akun terdaftar
                </small>
            </div>

            <div class="account-info-list">

                <article class="account-info-row">
                    <span class="account-info-icon">
                        U
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Username
                        </small>

                        <strong>
                            <?= e($user['username']); ?>
                        </strong>
                    </div>
                </article>

                <article class="account-info-row">
                    <span class="account-info-icon">
                        @
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Email
                        </small>

                        <strong>
                            <?= e($user['email']); ?>
                        </strong>
                    </div>
                </article>

                <article class="account-info-row">
                    <span class="account-info-icon">
                        HP
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Nomor handphone
                        </small>

                        <strong>
                            <?= e($user['phone']); ?>
                        </strong>
                    </div>
                </article>

            </div>

            <div class="account-section-heading">
                <h2>
                    Rekening Transaksi
                </h2>

                <small>
                    Data pembayaran
                </small>
            </div>

            <div class="account-info-list">

                <article class="account-info-row">
                    <span class="account-info-icon">
                        BK
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Bank atau e-wallet
                        </small>

                        <strong>
                            <?= e($user['payment_method']); ?>
                        </strong>
                    </div>
                </article>

                <article class="account-info-row">
                    <span class="account-info-icon">
                        #
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Nomor rekening
                        </small>

                        <strong>
                            <?= e(
                                accountMaskNumber(
                                    $user['account_number']
                                )
                            ); ?>
                        </strong>
                    </div>
                </article>

                <article class="account-info-row">
                    <span class="account-info-icon">
                        ✓
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Nama pemilik rekening
                        </small>

                        <strong>
                            <?= e($user['account_name']); ?>
                        </strong>
                    </div>
                </article>

                <article class="account-info-row">
                    <span class="account-info-icon">
                        UP
                    </span>

                    <div class="account-info-copy">
                        <small>
                            Upline
                        </small>

                        <strong>
                            <?= e(
                                !empty($user['upline_username'])
                                    ? $user['upline_username']
                                    : 'Tidak ada upline'
                            ); ?>
                        </strong>
                    </div>
                </article>

            </div>

        </section>

        <!-- TRANSAKSI -->
        <section
            class="account-tab-panel"
            data-account-panel="transactions"
        >

            <div class="account-section-heading">
                <h2>
                    Riwayat Saldo
                </h2>

                <small>
                    12 transaksi terakhir
                </small>
            </div>

            <?php if (
                empty($balanceTransactions)
            ): ?>

                <div class="account-empty">
                    Belum ada riwayat perubahan saldo.
                </div>

            <?php else: ?>

                <div class="account-transaction-list">

                    <?php foreach (
                        $balanceTransactions
                        as $transaction
                    ): ?>

                        <?php
                        $isDebit =
                            (string) $transaction['direction'] ===
                            'DEBIT';
                        ?>

                        <article class="account-transaction-item">

                            <span
                                class="account-transaction-icon <?= $isDebit
                                    ? 'is-debit'
                                    : ''; ?>"
                            >
                                <?= $isDebit ? '−' : '+'; ?>
                            </span>

                            <div class="account-transaction-copy">

                                <strong>
                                    <?= e(
                                        accountTransactionLabel(
                                            $transaction[
                                                'transaction_type'
                                            ]
                                        )
                                    ); ?>
                                </strong>

                                <small>
                                    <?= e(
                                        !empty(
                                            $transaction[
                                                'description'
                                            ]
                                        )
                                            ? $transaction[
                                                'description'
                                            ]
                                            : (
                                                $transaction[
                                                    'reference_code'
                                                ] ??
                                                'Transaksi saldo'
                                            )
                                    ); ?>
                                </small>

                            </div>

                            <div class="account-transaction-amount">

                                <strong
                                    class="<?= $isDebit
                                        ? 'is-debit'
                                        : ''; ?>"
                                >
                                    <?= $isDebit ? '−' : '+'; ?>
                                    IDR <?= e(
                                        accountCurrency(
                                            $transaction['amount']
                                        )
                                    ); ?>
                                </strong>

                                <small>
                                    <?= e(
                                        accountDate(
                                            $transaction[
                                                'created_at'
                                            ]
                                        )
                                    ); ?>
                                </small>

                            </div>

                        </article>

                    <?php endforeach; ?>

                </div>

            <?php endif; ?>

        </section>

        <!-- REFERRAL -->
        <section
            class="account-tab-panel"
            data-account-panel="referral"
        >

            <div class="account-section-heading">
                <h2>
                    Kode Referral
                </h2>

                <small>
                    Bagikan kepada teman
                </small>
            </div>

            <section class="account-referral-card">

                <div class="account-referral-code">

                    <div>
                        <small>
                            Kode referral Anda
                        </small>

                        <strong id="accountReferralCode">
                            <?= e($user['referral_code']); ?>
                        </strong>
                    </div>

                    <button
                        class="account-copy-button"
                        type="button"
                        data-copy-target="accountReferralCode"
                    >
                        SALIN KODE
                    </button>

                </div>

                <input
                    class="account-referral-link"
                    id="accountReferralLink"
                    type="text"
                    value="<?= e($referralLink); ?>"
                    readonly
                    aria-label="Link referral"
                >

                <button
                    class="account-copy-button"
                    type="button"
                    data-copy-target="accountReferralLink"
                    style="width: 100%; margin-top: 7px;"
                >
                    SALIN LINK REFERRAL
                </button>

                <div class="account-referral-stats">

                    <div class="account-referral-stat">
                        <strong>
                            <?= $downlineCount; ?>
                        </strong>

                        <small>
                            TOTAL DOWNLINE
                        </small>
                    </div>

                    <div class="account-referral-stat">
                        <strong>
                            <?= $activeDownlineCount; ?>
                        </strong>

                        <small>
                            DOWNLINE AKTIF
                        </small>
                    </div>

                    <div class="account-referral-stat">
                        <strong>
                            IDR <?= e(
                                accountCurrency(
                                    $totalReferralCommission
                                )
                            ); ?>
                        </strong>

                        <small>
                            KOMISI DISETUJUI
                        </small>
                    </div>

                </div>

            </section>

            <div
                class="account-section-heading"
                id="referral"
            >
                <h2>
                    Aktivitas Downline
                </h2>

                <small>
                    Semua pendaftaran dan deposit
                </small>
            </div>

            <div class="account-downline-summary">

                <article>
                    <span>
                        SUDAH TRANSAKSI
                    </span>

                    <strong>
                        <?= $downlineWithTransactionCount; ?>
                    </strong>

                    <small>
                        Downline yang memiliki deposit
                    </small>
                </article>

                <article class="is-pending">
                    <span>
                        BELUM TRANSAKSI
                    </span>

                    <strong>
                        <?= $downlineWithoutTransactionCount; ?>
                    </strong>

                    <small>
                        Sudah daftar, belum deposit
                    </small>
                </article>

                <article>
                    <span>
                        TOTAL TRANSAKSI
                    </span>

                    <strong>
                        <?= $downlineDepositTransactionCount; ?>
                    </strong>

                    <small>
                        Seluruh transaksi downline
                    </small>
                </article>

                <article class="is-success">
                    <span>
                        TOTAL BERHASIL
                    </span>

                    <strong>
                        IDR <?= e(
                            accountCurrency(
                                $downlineApprovedDepositTotal
                            )
                        ); ?>
                    </strong>

                    <small>
                        Deposit PAID dan APPROVED
                    </small>
                </article>

            </div>

            <?php if (
                $downlineActivityError !== ''
            ): ?>

                <div class="account-error">
                    <?= e($downlineActivityError); ?>
                </div>

            <?php elseif (
                empty($downlineActivities)
            ): ?>

                <div class="account-empty">
                    Belum ada downline yang terdaftar.
                </div>

            <?php else: ?>

                <section class="account-downline-table-section">

                    <div class="account-downline-scroll-controls">
                        <span>
                            ← Geser tabel untuk melihat kolom lainnya →
                        </span>

                        <div>
                            <button
                                type="button"
                                data-table-scroll="left"
                                aria-label="Geser tabel ke kiri"
                            >
                                ← KIRI
                            </button>

                            <button
                                type="button"
                                data-table-scroll="right"
                                aria-label="Geser tabel ke kanan"
                            >
                                KANAN →
                            </button>
                        </div>
                    </div>

                    <div
                        class="account-downline-table-wrap"
                        id="accountDownlineTableWrap"
                    >

                        <table class="account-downline-table">

                            <thead>
                                <tr>
                                    <th>No</th>
                                    <th>Downline</th>
                                    <th>Tanggal Daftar</th>
                                    <th>Transaksi</th>
                                    <th>Metode / Referensi</th>
                                    <th>Nominal</th>
                                    <th>Status</th>
                                    <th>Waktu Transaksi</th>
                                    <th>Aksi</th>
                                </tr>
                            </thead>

                            <tbody>

                                <?php
                                $activityNumber =
                                    (($referralActivityPage - 1) *
                                    $referralActivityPerPage) + 1;
                                ?>

                                <?php foreach (
                                    $downlineActivities
                                    as $activity
                                ): ?>

                                    <?php
                                    $hasTransaction =
                                        !empty(
                                            $activity[
                                                'deposit_id'
                                            ]
                                        );

                                    $depositStatus =
                                        $hasTransaction
                                            ? (string) $activity[
                                                'deposit_status'
                                            ]
                                            : '';

                                    $statusClass =
                                        accountDepositStatusClass(
                                            $depositStatus
                                        );

                                    $methodLabel =
                                        $hasTransaction
                                            ? (
                                                $activity[
                                                    'method_name'
                                                ] ?:
                                                $activity[
                                                    'method_type'
                                                ] ?:
                                                'Metode deposit'
                                            )
                                            : '-';

                                    $referenceLabel =
                                        $hasTransaction
                                            ? (
                                                $activity[
                                                    'reference_code'
                                                ] ?:
                                                'Tanpa referensi'
                                            )
                                            : '-';

                                    $transactionLabel =
                                        $hasTransaction
                                            ? 'Deposit ke-' .
                                                (int) (
                                                    $activity[
                                                        'transaction_sequence'
                                                    ] ?? 1
                                                )
                                            : 'Belum transaksi';
                                    ?>

                                    <tr class="<?= !$hasTransaction
                                        ? 'is-no-transaction'
                                        : ''; ?>">

                                        <td>
                                            <strong>
                                                <?= $activityNumber++; ?>
                                            </strong>
                                        </td>

                                        <td>
                                            <strong class="account-downline-table-username">
                                                <?= e(
                                                    $activity[
                                                        'downline_username'
                                                    ]
                                                ); ?>
                                            </strong>

                                            <small>
                                                ID #<?= (int) $activity[
                                                    'downline_id'
                                                ]; ?>
                                                ·
                                                <?= e(
                                                    accountStatusLabel(
                                                        $activity[
                                                            'downline_status'
                                                        ]
                                                    )
                                                ); ?>
                                            </small>
                                        </td>

                                        <td>
                                            <strong>
                                                <?= e(
                                                    accountDate(
                                                        $activity[
                                                            'registered_at'
                                                        ],
                                                        false
                                                    )
                                                ); ?>
                                            </strong>

                                            <small>
                                                <?= e(
                                                    accountDate(
                                                        $activity[
                                                            'registered_at'
                                                        ]
                                                    )
                                                ); ?>
                                            </small>
                                        </td>

                                        <td>
                                            <strong>
                                                <?= e(
                                                    $transactionLabel
                                                ); ?>
                                            </strong>

                                            <small>
                                                Total:
                                                <?= (int) $activity[
                                                    'downline_transaction_count'
                                                ]; ?>
                                                transaksi
                                            </small>
                                        </td>

                                        <td>
                                            <strong>
                                                <?= e(
                                                    $methodLabel
                                                ); ?>
                                            </strong>

                                            <small class="account-downline-reference">
                                                <?= e(
                                                    $referenceLabel
                                                ); ?>
                                            </small>
                                        </td>

                                        <td>
                                            <?php if (
                                                $hasTransaction
                                            ): ?>

                                                <strong class="account-downline-table-amount">
                                                    IDR <?= e(
                                                        accountCurrency(
                                                            $activity[
                                                                'amount'
                                                            ]
                                                        )
                                                    ); ?>
                                                </strong>

                                                <small>
                                                    Total berhasil:
                                                    IDR <?= e(
                                                        accountCurrency(
                                                            $activity[
                                                                'downline_approved_total'
                                                            ]
                                                        )
                                                    ); ?>
                                                </small>

                                            <?php else: ?>

                                                <strong class="account-downline-table-empty">
                                                    -
                                                </strong>

                                                <small>
                                                    Belum ada deposit
                                                </small>

                                            <?php endif; ?>
                                        </td>

                                        <td>
                                            <span
                                                class="account-downline-table-status <?= e(
                                                    $statusClass
                                                ); ?>"
                                            >
                                                <?= e(
                                                    accountDepositStatusLabel(
                                                        $depositStatus
                                                    )
                                                ); ?>
                                            </span>
                                        </td>

                                        <td>
                                            <strong>
                                                <?= $hasTransaction
                                                    ? e(
                                                        accountDate(
                                                            $activity[
                                                                'transaction_at'
                                                            ]
                                                        )
                                                    )
                                                    : '-'; ?>
                                            </strong>

                                            <?php if (
                                                $hasTransaction &&
                                                !empty(
                                                    $activity[
                                                        'approved_at'
                                                    ]
                                                )
                                            ): ?>

                                                <small>
                                                    Approved:
                                                    <?= e(
                                                        accountDate(
                                                            $activity[
                                                                'approved_at'
                                                            ]
                                                        )
                                                    ); ?>
                                                </small>

                                            <?php endif; ?>
                                        </td>

                                        <td>
                                            <button
                                                class="account-downline-detail-button"
                                                type="button"
                                                data-downline-detail
                                                data-username="<?= e(
                                                    $activity[
                                                        'downline_username'
                                                    ]
                                                ); ?>"
                                                data-user-id="<?= (int) $activity[
                                                    'downline_id'
                                                ]; ?>"
                                                data-member-status="<?= e(
                                                    accountStatusLabel(
                                                        $activity[
                                                            'downline_status'
                                                        ]
                                                    )
                                                ); ?>"
                                                data-registered-at="<?= e(
                                                    accountDate(
                                                        $activity[
                                                            'registered_at'
                                                        ]
                                                    )
                                                ); ?>"
                                                data-transaction="<?= e(
                                                    $transactionLabel
                                                ); ?>"
                                                data-deposit-id="<?= $hasTransaction
                                                    ? (int) $activity[
                                                        'deposit_id'
                                                    ]
                                                    : ''; ?>"
                                                data-method="<?= e(
                                                    $methodLabel
                                                ); ?>"
                                                data-reference="<?= e(
                                                    $referenceLabel
                                                ); ?>"
                                                data-amount="<?= $hasTransaction
                                                    ? 'IDR ' . e(
                                                        accountCurrency(
                                                            $activity[
                                                                'amount'
                                                            ]
                                                        )
                                                    )
                                                    : '-'; ?>"
                                                data-deposit-status="<?= e(
                                                    accountDepositStatusLabel(
                                                        $depositStatus
                                                    )
                                                ); ?>"
                                                data-transaction-at="<?= $hasTransaction
                                                    ? e(
                                                        accountDate(
                                                            $activity[
                                                                'transaction_at'
                                                            ]
                                                        )
                                                    )
                                                    : '-'; ?>"
                                                data-approved-at="<?= !empty(
                                                    $activity[
                                                        'approved_at'
                                                    ]
                                                )
                                                    ? e(
                                                        accountDate(
                                                            $activity[
                                                                'approved_at'
                                                            ]
                                                        )
                                                    )
                                                    : '-'; ?>"
                                                data-total-transactions="<?= (int) $activity[
                                                    'downline_transaction_count'
                                                ]; ?>"
                                                data-total-approved="IDR <?= e(
                                                    accountCurrency(
                                                        $activity[
                                                            'downline_approved_total'
                                                        ]
                                                    )
                                                ); ?>"
                                            >
                                                DETAIL
                                            </button>
                                        </td>

                                    </tr>

                                <?php endforeach; ?>

                            </tbody>

                        </table>

                    </div>

                    <div
                        class="account-downline-bottom-scroll"
                        id="accountDownlineBottomScroll"
                        aria-label="Scrollbar horizontal tabel downline"
                    >
                        <div></div>
                    </div>

                </section>

                <div
                    class="account-downline-modal"
                    id="accountDownlineModal"
                    hidden
                    aria-hidden="true"
                >
                    <button
                        class="account-downline-modal-backdrop"
                        type="button"
                        data-downline-modal-close
                        aria-label="Tutup detail"
                    ></button>

                    <section
                        class="account-downline-modal-card"
                        role="dialog"
                        aria-modal="true"
                        aria-labelledby="accountDownlineModalTitle"
                    >
                        <div class="account-downline-modal-head">
                            <div>
                                <small>
                                    DETAIL DOWNLINE
                                </small>

                                <h3 id="accountDownlineModalTitle">
                                    -
                                </h3>
                            </div>

                            <button
                                type="button"
                                data-downline-modal-close
                                aria-label="Tutup"
                            >
                                ×
                            </button>
                        </div>

                        <dl class="account-downline-detail-list">
                            <div>
                                <dt>User ID</dt>
                                <dd data-detail-user-id>-</dd>
                            </div>

                            <div>
                                <dt>Status member</dt>
                                <dd data-detail-member-status>-</dd>
                            </div>

                            <div>
                                <dt>Tanggal daftar</dt>
                                <dd data-detail-registered-at>-</dd>
                            </div>

                            <div>
                                <dt>Transaksi</dt>
                                <dd data-detail-transaction>-</dd>
                            </div>

                            <div>
                                <dt>Deposit ID</dt>
                                <dd data-detail-deposit-id>-</dd>
                            </div>

                            <div>
                                <dt>Metode</dt>
                                <dd data-detail-method>-</dd>
                            </div>

                            <div>
                                <dt>Reference</dt>
                                <dd data-detail-reference>-</dd>
                            </div>

                            <div>
                                <dt>Nominal</dt>
                                <dd data-detail-amount>-</dd>
                            </div>

                            <div>
                                <dt>Status deposit</dt>
                                <dd data-detail-deposit-status>-</dd>
                            </div>

                            <div>
                                <dt>Waktu transaksi</dt>
                                <dd data-detail-transaction-at>-</dd>
                            </div>

                            <div>
                                <dt>Waktu approved</dt>
                                <dd data-detail-approved-at>-</dd>
                            </div>

                            <div>
                                <dt>Total transaksi</dt>
                                <dd data-detail-total-transactions>-</dd>
                            </div>

                            <div>
                                <dt>Total deposit berhasil</dt>
                                <dd data-detail-total-approved>-</dd>
                            </div>
                        </dl>

                        <button
                            class="account-downline-modal-close-button"
                            type="button"
                            data-downline-modal-close
                        >
                            TUTUP
                        </button>
                    </section>
                </div>

                <?php if (
                    $referralActivityTotalPages > 1
                ): ?>

                    <nav class="account-referral-pagination">

                        <?php if (
                            $referralActivityPage > 1
                        ): ?>

                            <a href="<?= e(
                                accountReferralPageUrl(
                                    $referralActivityPage - 1
                                )
                            ); ?>">
                                ← SEBELUMNYA
                            </a>

                        <?php endif; ?>

                        <span>
                            <?= $referralActivityPage; ?>
                            /
                            <?= $referralActivityTotalPages; ?>
                        </span>

                        <?php if (
                            $referralActivityPage <
                            $referralActivityTotalPages
                        ): ?>

                            <a href="<?= e(
                                accountReferralPageUrl(
                                    $referralActivityPage + 1
                                )
                            ); ?>">
                                BERIKUTNYA →
                            </a>

                        <?php endif; ?>

                    </nav>

                <?php endif; ?>

            <?php endif; ?>

            <div class="account-section-heading">
                <h2>
                    Komisi Terakhir
                </h2>

                <small>
                    Pending IDR <?= e(
                        accountCurrency(
                            $pendingReferralCommission
                        )
                    ); ?>
                </small>
            </div>

            <?php if (
                empty($referralCommissions)
            ): ?>

                <div class="account-empty">
                    Belum ada riwayat komisi referral.
                </div>

            <?php else: ?>

                <div class="account-commission-list">

                    <?php foreach (
                        $referralCommissions
                        as $commission
                    ): ?>

                        <article class="account-commission-item">

                            <span class="account-commission-rank">
                                L<?= (int) $commission[
                                    'referral_level'
                                ]; ?>
                            </span>

                            <div class="account-commission-copy">

                                <strong>
                                    Dari <?= e(
                                        $commission[
                                            'source_username'
                                        ]
                                    ); ?>
                                </strong>

                                <small>
                                    <?= e(
                                        accountDate(
                                            $commission[
                                                'created_at'
                                            ]
                                        )
                                    ); ?>
                                </small>

                            </div>

                            <div class="account-commission-value">

                                <strong>
                                    IDR <?= e(
                                        accountCurrency(
                                            $commission[
                                                'commission_amount'
                                            ]
                                        )
                                    ); ?>
                                </strong>

                                <small>
                                    <?= e(
                                        $commission['status']
                                    ); ?>
                                </small>

                            </div>

                        </article>

                    <?php endforeach; ?>

                </div>

            <?php endif; ?>

        </section>

        <section class="account-security">

            <span class="account-security-icon">
                ✓
            </span>

            <div>
                <strong>
                    Jaga keamanan akun
                </strong>

                <p>
                    Jangan bagikan password, kode OTP, atau
                    informasi akses akun kepada siapa pun.
                </p>
            </div>

        </section>

        <div class="account-actions">

            <a
                class="account-button"
                href="bantuan.php"
            >
                HUBUNGI BANTUAN
            </a>

            <a
                class="account-button account-button--logout"
                href="logout.php"
                onclick="
                    return confirm(
                        'Apakah Anda yakin ingin keluar dari akun?'
                    );
                "
            >
                LOGOUT
            </a>

        </div>

        <p class="account-footer-note">
            Data saldo pada halaman ini dibaca langsung
            dari database setiap kali halaman dimuat.
        </p>

    </div>
</section>

<script>
(function () {
    'use strict';

    /*
    |--------------------------------------------------------------------------
    | Tab akun
    |--------------------------------------------------------------------------
    */

    var tabButtons =
        document.querySelectorAll(
            '[data-account-tab]'
        );

    var tabPanels =
        document.querySelectorAll(
            '[data-account-panel]'
        );

    Array.prototype.forEach.call(
        tabButtons,
        function (button) {
            button.addEventListener(
                'click',
                function () {
                    var selectedTab =
                        button.getAttribute(
                            'data-account-tab'
                        );

                    Array.prototype.forEach.call(
                        tabButtons,
                        function (item) {
                            item.classList.remove(
                                'is-active'
                            );
                        }
                    );

                    Array.prototype.forEach.call(
                        tabPanels,
                        function (panel) {
                            var panelName =
                                panel.getAttribute(
                                    'data-account-panel'
                                );

                            panel.classList.toggle(
                                'is-active',
                                panelName === selectedTab
                            );
                        }
                    );

                    button.classList.add(
                        'is-active'
                    );
                }
            );
        }
    );


    /*
    |--------------------------------------------------------------------------
    | Pertahankan tab saat pagination referral
    |--------------------------------------------------------------------------
    */

    var requestedTab =
        new URLSearchParams(
            window.location.search
        ).get('tab');

    if (
        requestedTab === 'overview' ||
        requestedTab === 'transactions' ||
        requestedTab === 'referral'
    ) {
        var requestedButton =
            document.querySelector(
                '[data-account-tab="' +
                requestedTab +
                '"]'
            );

        if (requestedButton) {
            requestedButton.click();
        }
    }

    /*
    |--------------------------------------------------------------------------
    | Geser tabel downline
    |--------------------------------------------------------------------------
    */

    var downlineTableWrap =
        document.getElementById(
            'accountDownlineTableWrap'
        );

    var downlineBottomScroll =
        document.getElementById(
            'accountDownlineBottomScroll'
        );

    var syncingDownlineScroll = false;

    function syncDownlineBottomWidth() {
        if (
            !downlineTableWrap ||
            !downlineBottomScroll
        ) {
            return;
        }

        var spacer =
            downlineBottomScroll
                .firstElementChild;

        if (spacer) {
            spacer.style.width =
                downlineTableWrap
                    .scrollWidth +
                'px';
        }
    }

    if (
        downlineTableWrap &&
        downlineBottomScroll
    ) {
        syncDownlineBottomWidth();

        downlineTableWrap.addEventListener(
            'scroll',
            function () {
                if (syncingDownlineScroll) {
                    return;
                }

                syncingDownlineScroll = true;

                downlineBottomScroll.scrollLeft =
                    downlineTableWrap.scrollLeft;

                syncingDownlineScroll = false;
            },
            {
                passive: true
            }
        );

        downlineBottomScroll.addEventListener(
            'scroll',
            function () {
                if (syncingDownlineScroll) {
                    return;
                }

                syncingDownlineScroll = true;

                downlineTableWrap.scrollLeft =
                    downlineBottomScroll.scrollLeft;

                syncingDownlineScroll = false;
            },
            {
                passive: true
            }
        );

        window.addEventListener(
            'resize',
            syncDownlineBottomWidth
        );
    }

    var downlineScrollButtons =
        document.querySelectorAll(
            '[data-table-scroll]'
        );

    Array.prototype.forEach.call(
        downlineScrollButtons,
        function (button) {
            button.addEventListener(
                'click',
                function () {
                    if (!downlineTableWrap) {
                        return;
                    }

                    var direction =
                        button.getAttribute(
                            'data-table-scroll'
                        );

                    var distance =
                        Math.max(
                            240,
                            Math.floor(
                                downlineTableWrap
                                    .clientWidth *
                                0.75
                            )
                        );

                    downlineTableWrap.scrollBy({
                        left:
                            direction === 'left'
                                ? -distance
                                : distance,
                        behavior: 'smooth'
                    });
                }
            );
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Detail downline
    |--------------------------------------------------------------------------
    */

    var downlineModal =
        document.getElementById(
            'accountDownlineModal'
        );

    function setDownlineDetail(
        selector,
        value
    ) {
        if (!downlineModal) {
            return;
        }

        var element =
            downlineModal.querySelector(
                selector
            );

        if (element) {
            element.textContent =
                value || '-';
        }
    }

    function closeDownlineModal() {
        if (!downlineModal) {
            return;
        }

        downlineModal.hidden = true;

        downlineModal.setAttribute(
            'aria-hidden',
            'true'
        );

        document.body.classList.remove(
            'is-downline-modal-open'
        );
    }

    var downlineDetailButtons =
        document.querySelectorAll(
            '[data-downline-detail]'
        );

    Array.prototype.forEach.call(
        downlineDetailButtons,
        function (button) {
            button.addEventListener(
                'click',
                function () {
                    if (!downlineModal) {
                        return;
                    }

                    setDownlineDetail(
                        '#accountDownlineModalTitle',
                        button.dataset.username
                    );

                    setDownlineDetail(
                        '[data-detail-user-id]',
                        button.dataset.userId
                    );

                    setDownlineDetail(
                        '[data-detail-member-status]',
                        button.dataset.memberStatus
                    );

                    setDownlineDetail(
                        '[data-detail-registered-at]',
                        button.dataset.registeredAt
                    );

                    setDownlineDetail(
                        '[data-detail-transaction]',
                        button.dataset.transaction
                    );

                    setDownlineDetail(
                        '[data-detail-deposit-id]',
                        button.dataset.depositId
                    );

                    setDownlineDetail(
                        '[data-detail-method]',
                        button.dataset.method
                    );

                    setDownlineDetail(
                        '[data-detail-reference]',
                        button.dataset.reference
                    );

                    setDownlineDetail(
                        '[data-detail-amount]',
                        button.dataset.amount
                    );

                    setDownlineDetail(
                        '[data-detail-deposit-status]',
                        button.dataset.depositStatus
                    );

                    setDownlineDetail(
                        '[data-detail-transaction-at]',
                        button.dataset.transactionAt
                    );

                    setDownlineDetail(
                        '[data-detail-approved-at]',
                        button.dataset.approvedAt
                    );

                    setDownlineDetail(
                        '[data-detail-total-transactions]',
                        button.dataset.totalTransactions
                    );

                    setDownlineDetail(
                        '[data-detail-total-approved]',
                        button.dataset.totalApproved
                    );

                    downlineModal.hidden = false;

                    downlineModal.setAttribute(
                        'aria-hidden',
                        'false'
                    );

                    document.body.classList.add(
                        'is-downline-modal-open'
                    );
                }
            );
        }
    );

    var downlineModalCloseButtons =
        document.querySelectorAll(
            '[data-downline-modal-close]'
        );

    Array.prototype.forEach.call(
        downlineModalCloseButtons,
        function (button) {
            button.addEventListener(
                'click',
                closeDownlineModal
            );
        }
    );

    document.addEventListener(
        'keydown',
        function (event) {
            if (
                event.key === 'Escape' &&
                downlineModal &&
                !downlineModal.hidden
            ) {
                closeDownlineModal();
            }
        }
    );

    /*
    |--------------------------------------------------------------------------
    | Salin referral
    |--------------------------------------------------------------------------
    */

    function copyValue(element) {
        if (!element) {
            return Promise.reject();
        }

        var value =
            element.value !== undefined
                ? element.value
                : element.textContent;

        value = String(value || '').trim();

        if (
            navigator.clipboard &&
            window.isSecureContext
        ) {
            return navigator.clipboard.writeText(
                value
            );
        }

        return new Promise(function (
            resolve,
            reject
        ) {
            var textarea =
                document.createElement(
                    'textarea'
                );

            textarea.value = value;
            textarea.style.position = 'fixed';
            textarea.style.opacity = '0';

            document.body.appendChild(
                textarea
            );

            textarea.focus();
            textarea.select();

            try {
                var copied =
                    document.execCommand(
                        'copy'
                    );

                document.body.removeChild(
                    textarea
                );

                if (copied) {
                    resolve();
                } else {
                    reject();
                }
            } catch (error) {
                document.body.removeChild(
                    textarea
                );

                reject(error);
            }
        });
    }

    var copyButtons =
        document.querySelectorAll(
            '[data-copy-target]'
        );

    Array.prototype.forEach.call(
        copyButtons,
        function (button) {
            var originalText =
                button.textContent;

            button.addEventListener(
                'click',
                function () {
                    var targetId =
                        button.getAttribute(
                            'data-copy-target'
                        );

                    var target =
                        document.getElementById(
                            targetId
                        );

                    copyValue(target)
                        .then(function () {
                            button.textContent =
                                'BERHASIL DISALIN';

                            window.setTimeout(
                                function () {
                                    button.textContent =
                                        originalText;
                                },
                                1600
                            );
                        })
                        .catch(function () {
                            button.textContent =
                                'GAGAL MENYALIN';

                            window.setTimeout(
                                function () {
                                    button.textContent =
                                        originalText;
                                },
                                1600
                            );
                        });
                }
            );
        }
    );
})();
</script>

<?php require __DIR__ . '/includes/footer.php'; ?>
