<?php
// === INCLUDES ===
require_once 'includes/config.php';
require_once 'includes/functions.php';

// === AUTH CHECK ===
session_start();
if (empty($_SESSION['authenticated'])) {
    header("Location: signin.php");
    exit();
}
require_once __DIR__ . '/db.php';
require_once __DIR__ . '/includes/settings_helpers.php';
require_once __DIR__ . '/includes/tax_forms_module.php';

// === DATA LOADING ===
settings_ensure_tables($conn);

$org = settings_get_current_org($conn);
$orgId = (int) ($org['id'] ?? 0);
$orgName = $_SESSION['org_name'] ?? ($org['organisation_name'] ?? 'demo');
$displayName = $_SESSION['username'] ?? $orgName;
$trialStatus = strtoupper($_SESSION['org_status'] ?? ($org['status'] ?? 'TRIAL'));
$userEmail = $_SESSION['user'] ?? 'user@example.com';

$taxDetails = tax_details_get($conn, (string) ($org['id'] ?? ($_SESSION['org_id'] ?? '')));
$paySchedule = settings_get_pay_schedule($conn, $orgId);
$epfSettings = settings_get_statutory_component($conn, $orgId, 'epf');
$esiSettings = settings_get_statutory_component($conn, $orgId, 'esi');
$lwfSettings = settings_get_statutory_component($conn, $orgId, 'lwf');
$salaryTemplate = settings_get_salary_template($conn, $orgId);
$zohoApps = settings_get_zoho_app_integrations($conn, $orgId);
$payrunNotifications = settings_get_payrun_notifications($conn, $orgId, $orgName);
$salaryHoldNotifications = settings_get_salary_hold_notifications($conn, $orgId);

$employeeCount = 0;
$employeeCountStmt = $conn->prepare("SELECT COUNT(*) AS total FROM employees WHERE organization_id = ? AND COALESCE(is_deleted, 0) = 0");
if ($employeeCountStmt) {
    $employeeCountStmt->bind_param('i', $orgId);
    $employeeCountStmt->execute();
    $employeeCountResult = $employeeCountStmt->get_result();
    if ($employeeCountResult && ($employeeCountRow = $employeeCountResult->fetch_assoc())) {
        $employeeCount = (int) ($employeeCountRow['total'] ?? 0);
    }
    $employeeCountStmt->close();
}

$payrunCount = 0;
$payrunCountStmt = $conn->prepare("SELECT COUNT(*) AS total FROM payruns WHERE org_id = ?");
if ($payrunCountStmt) {
    $payrunCountStmt->bind_param('s', $orgName);
    $payrunCountStmt->execute();
    $payrunCountResult = $payrunCountStmt->get_result();
    if ($payrunCountResult && ($payrunCountRow = $payrunCountResult->fetch_assoc())) {
        $payrunCount = (int) ($payrunCountRow['total'] ?? 0);
    }
    $payrunCountStmt->close();
}

$profileComplete = trim((string) ($org['organisation_name'] ?? '')) !== '' && trim((string) ($org['address_line1'] ?? '')) !== '' && trim((string) ($org['state'] ?? '')) !== '';
$taxComplete = trim((string) ($taxDetails['pan'] ?? '')) !== '' && trim((string) ($taxDetails['deductor_name'] ?? '')) !== '';
$payScheduleComplete = !empty($paySchedule['pay_frequency']) && !empty($paySchedule['first_pay_date']);
$statutorySubitems = [
    ['label' => "Employees' Provident Fund", 'href' => 'statutory_components.php?component=epf&mode=view', 'complete' => !empty($epfSettings['enabled'])],
    ['label' => "Employees' State Insurance", 'href' => 'statutory_components.php?component=esi&mode=view', 'complete' => !empty($esiSettings['enabled'])],
    ['label' => 'Labour Welfare Fund', 'href' => 'statutory_components.php?component=lwf&mode=view', 'complete' => !empty($lwfSettings['enabled'])],
    ['label' => 'Professional Tax', 'href' => 'statutory_components.php?component=pt&mode=view', 'complete' => $taxComplete],
];
$statutoryComplete = count(array_filter($statutorySubitems, static function (array $item): bool {
    return !empty($item['complete']);
})) === count($statutorySubitems);
$salaryManualComplete = settings_get_setup_step_state($conn, $orgId, 'salary_components');
$statutoryManualComplete = settings_get_setup_step_state($conn, $orgId, 'statutory_components');
$zohoBooksComplete = false;
foreach ($zohoApps as $app) {
    if (($app['code'] ?? '') === 'zoho_books' && ($app['status'] ?? 'inactive') === 'active') {
        $zohoBooksComplete = true;
        break;
    }
}

$statutoryComplete = $statutoryComplete || $statutoryManualComplete;
$salaryComplete = (float) ($salaryTemplate['annual_ctc'] ?? 0) > 0 || $salaryManualComplete;
$employeesComplete = $employeeCount > 0;
$priorPayrollComplete = $payrunCount > 0;

$setupSteps = [
    ['label' => '1. Add Organisation Details', 'href' => 'orgprofile.php', 'completed' => $profileComplete],
    ['label' => '2. Provide your Tax Details', 'href' => 'tax_details.php', 'completed' => $taxComplete],
    ['label' => '3. Configure your Pay Schedule', 'href' => 'pay_schedule.php', 'completed' => $payScheduleComplete],
    [
        'label' => '4. Set up Statutory Components',
        'href' => 'statutory_components.php',
        'completed' => $statutoryComplete,
        'subitems' => $statutorySubitems,
    ],
    [
        'label' => '5. Set up Salary Components',
        'href' => 'salary_components.php',
        'completed' => $salaryComplete,
    ],
    ['label' => '6. Add Employees', 'href' => 'employees.php', 'completed' => $employeesComplete],
    ['label' => '7. Configure Prior Payroll', 'href' => 'payruns.php', 'completed' => $priorPayrollComplete],
    ['label' => '8. Connect with Zoho Books', 'href' => 'zoho_apps.php', 'completed' => $zohoBooksComplete],
];

$completedSetupSteps = count(array_filter($setupSteps, static function (array $step): bool {
    return !empty($step['completed']);
}));
$setupStepCount = count($setupSteps);
$setupProgress = $setupStepCount > 0 ? (int) round(($completedSetupSteps / $setupStepCount) * 100) : 0;
$allSetupComplete = $setupStepCount > 0 && $completedSetupSteps === $setupStepCount;

if ($allSetupComplete) {
    header('Location: organc.php?setup=complete&step=8');
    exit();
}

date_default_timezone_set('Asia/Kolkata');
$nowTime = date('h:i A');
$activeDrawer = $_GET['drawer'] ?? '';
$activeModal = $_GET['modal'] ?? '';
$validDrawers = ['org', 'notif', 'apps', 'profile'];
if (!in_array($activeDrawer, $validDrawers, true)) {
    $activeDrawer = '';
}
$activeModal = $activeModal === 'upgrade' ? 'upgrade' : '';
$bodyClasses = 'dash-page';
if ($activeDrawer === 'org') {
    $bodyClasses .= ' org-drawer--open';
}
if ($activeModal === 'upgrade') {
    $bodyClasses .= ' modal-open';
}
$bodyClasses .= $allSetupComplete ? ' dashboard-complete' : '';

$notificationCards = [];
foreach ($payrunNotifications as $notification) {
    if (($notification['status_key'] ?? '') !== 'pending') {
        continue;
    }

    $notificationCards[] = [
        'title' => (string) ($notification['title'] ?? 'Payroll Pending'),
        'status_label' => (string) ($notification['status_label'] ?? 'Pending'),
        'message' => (string) ($notification['message'] ?? ''),
        'meta' => [
            'Pay date: ' . (string) ($notification['pay_date_label'] ?? '-'),
            'Component: ' . ((string) ($notification['component'] ?? '') !== '' ? (string) $notification['component'] : 'Payroll'),
        ],
        'icon' => (string) ($notification['icon'] ?? 'fa-solid fa-hourglass-half'),
        'status_key' => (string) ($notification['status_key'] ?? 'pending'),
    ];
}

if (empty($notificationCards) && !empty($salaryHoldNotifications)) {
    $salaryHold = $salaryHoldNotifications[0];
    $holdDetails = settings_salary_hold_notification_details($salaryHold);
    $notificationCards[] = [
        'title' => (string) ($holdDetails['title'] ?? 'Salary Hold'),
        'status_label' => (string) ($holdDetails['status_label'] ?? 'Pending'),
        'message' => (string) ($holdDetails['message'] ?? ''),
        'meta' => [
            'Period: ' . (string) ($holdDetails['period_label'] ?? '-'),
            'Release: ' . (string) ($holdDetails['release_label'] ?? '-'),
        ],
        'icon' => (string) ($holdDetails['icon'] ?? 'fa-solid fa-hourglass-half'),
        'status_key' => (string) ($holdDetails['status_key'] ?? 'pending'),
    ];
}

if (empty($notificationCards)) {
    $notificationCards[] = [
        'title' => 'Payroll Pending',
        'status_label' => 'Pending',
        'message' => 'One time payout for Bonus is pending.',
        'meta' => [
            'Pay date: 11 Mar 2026',
            'Component: Bonus',
        ],
        'icon' => 'fa-solid fa-hourglass-half',
        'status_key' => 'pending',
    ];
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="<?php echo billing_escape(billing_base_href()); ?>">
<title>Dashboard | Payroll</title>
<link rel="stylesheet" href="dashboard.css">
<link rel="stylesheet" href="assets/font-inter.css"><link rel="stylesheet" href="assets/fontawesome/css/all.min.css">
</head>
<body class="<?php echo htmlspecialchars($bodyClasses); ?>">
<div class="dash-layout">
    <aside class="dash-sidebar">
        <div class="sidebar-brand">
            <img src="images/zoho-payroll-logo.svg" class="logo" alt="Zoho Payroll">
        </div>

        <div class="sidebar-scroll">
            <div class="sidebar-section">
                <div class="getting-started">
                    <div class="gs-top">
                        <i class="fa-solid fa-rocket-launch"></i>
                        <span>Getting Started</span>
                    </div>
                    <div class="progress-bar">
                        <div class="progress-fill" style="width: <?php echo (int) $setupProgress; ?>%;"></div>
                    </div>
                </div>
            </div>
            <nav class="sidebar-nav">
<a class="nav-item active" href="dashboard.php"><i class="fa-solid fa-gauge-high"></i><span>Dashboard</span></a>
<a class="nav-item" href="employees.php"><i class="fa-solid fa-users"></i><span>Employees</span></a>
                <a class="nav-item" href="payruns.php"><i class="fa-solid fa-money-bill-wave"></i><span>Pay Runs</span></a>
                <div class="nav-group">
                    <button class="nav-item btn" type="button" data-nav-toggle><i class="fa-regular fa-square-check"></i><span>Approvals</span></button>
                    <div class="nav-sub">
                        <a class="nav-sub-item" href="reimbursements.php">Reimbursements</a>
                        <a class="nav-sub-item" href="proof_of_investments.php">Proof Of Investments</a>
                        <a class="nav-sub-item" href="salary_revision.php">Salary Revision</a>
                    </div>
                </div>
                <a class="nav-item" href="form16.php"><i class="fa-regular fa-file-lines"></i><span>Form 16</span></a>
                <a class="nav-item" href="loans.php"><i class="fa-solid fa-hand-holding-dollar"></i><span>Loans</span></a>
                <a class="nav-item" href="giving.php"><i class="fa-solid fa-gift"></i><span>Giving</span></a>
                <a class="nav-item" href="documents.php"><i class="fa-regular fa-folder-open"></i><span>Documents</span></a>
                <a class="nav-item" href="reports.php"><i class="fa-solid fa-chart-pie"></i><span>Reports</span></a>
                <a class="nav-item" href="settings.php"><i class="fa-solid fa-gear"></i><span>Settings</span></a>
            </nav>
        </div>

        <div class="sidebar-footer">
            <a class="support-link" href="support.php">Contact Support</a>
        </div>
        <div class="support-tile">
            <div class="support-title">Track TDS Liabilities and Generate Form 24Q</div>
            <a class="support-action" href="support.php?promo=tds">View Details</a>
        </div>
    </aside>

    <main class="dash-main">
        <header class="dash-topbar">
            <div class="search-box">
                <i class="fa-solid fa-magnifying-glass search-icon"></i>
                <input type="text" placeholder="Search in Employee">
            </div>
            <div class="topbar-actions">
                <span class="trial">Your trial expires in 7 day(s). <a href="dashboard.php?modal=upgrade" class="upgrade-link">Upgrade</a></span>
                <a class="pill ghost org-toggle" href="dashboard.php?drawer=org" data-tooltip="Organisation menu"><span class="pill-label"><?php echo htmlspecialchars($orgName ?: 'demo'); ?></span><i class="fa-solid fa-angle-down"></i></a>
                <a class="top-icon icon-btn" href="dashboard.php?drawer=notif" data-tooltip="Notifications"><i class="fa-regular fa-bell"></i></a>
                <a class="top-icon top-link" href="settings.php" data-tooltip="Settings"><i class="fa-solid fa-gear"></i></a>
                <a class="top-icon icon-btn app-menu" href="dashboard.php?drawer=apps" data-tooltip="Apps"><i class="fa-solid fa-table-cells-large"></i></a>
                <a class="top-icon icon-btn top-avatar" href="dashboard.php?drawer=profile" data-tooltip="Profile"><i class="fa-regular fa-circle-user"></i></a>
                <span class="avatar" data-tooltip="Profile"><?php echo strtoupper(substr($orgName, 0, 1)); ?></span>
            </div>
        </header>

        <section class="dash-content">
            <div class="hero-card confetti-bg">
                <div class="hero-confetti"></div>
                <h1>Welcome <?php echo htmlspecialchars($displayName); ?>!</h1>
                <p class="hero-sub">Set up your organisation before you run your first payroll.</p>
                <img src="includes/image.png" alt="Dashboard Image" class="hero-image">
                <div class="hero-contact">Need help? Call us Mon-Fri, 9 AM-7 PM at 18005726671 (toll-free).</div>
            </div>

            <div class="webinar-bar">
                <span class="webinar-icon"><i class="fa-solid fa-display"></i></span> Live webinar: An overview of Zoho Payroll
                <span class="calendar">Tuesday or Thursday @3:30PM IST</span>
                <button class="secondary-btn small">Register Now</button>
            </div>

            <div class="progress-card">
                <header class="progress-head">
                    <div>
                        <div class="label">Get started with Zoho Payroll</div>
                        <div class="sub">Complete the following steps to have a hassle-free payroll experience</div>
                    </div>
                    <div class="progress-indicator">
                        <span class="bar"><span class="fill" style="width: <?php echo (int) $setupProgress; ?>%;"></span></span>
                        <span class="count"><?php echo (int) $completedSetupSteps; ?>/<?php echo (int) $setupStepCount; ?> Completed</span>
                    </div>
                </header>
                <?php if ($allSetupComplete): ?>
                    <div class="setup-complete-note">All <?php echo (int) $setupStepCount; ?> setup steps are completed. Your organisation is ready.</div>
                <?php endif; ?>
                <div class="steps">
                    <?php foreach ($setupSteps as $setupStep): ?>
                        <div class="step <?php echo !empty($setupStep['completed']) ? 'done' : ''; ?>" data-step-href="<?php echo htmlspecialchars($setupStep['href']); ?>">
                            <span class="check <?php echo !empty($setupStep['completed']) ? '' : 'hollow'; ?>"><i class="fa-solid fa-check"></i></span>
                            <a class="step-text" href="<?php echo htmlspecialchars($setupStep['href']); ?>"><?php echo htmlspecialchars($setupStep['label']); ?></a>
                            <span class="arrow">&rsaquo;</span>
                            <?php if (!empty($setupStep['completed'])): ?>
                                <a class="status status-link" href="<?php echo htmlspecialchars($setupStep['href']); ?>">COMPLETED</a>
                            <?php else: ?>
                                <a class="pill ghost" href="<?php echo htmlspecialchars($setupStep['href']); ?>">Complete Now</a>
                            <?php endif; ?>
                        </div>
                        <?php if (!empty($setupStep['subitems'])): ?>
                            <div class="step-sublist">
                                <?php foreach ($setupStep['subitems'] as $subitem): ?>
                                    <div class="step-subitem">
                                        <span class="subcheck <?php echo !empty($subitem['complete']) ? 'complete' : ''; ?>"><i class="fa-solid fa-check"></i></span>
                                        <?php if (!empty($subitem['href'])): ?>
                                            <a class="subtext sub-link" href="<?php echo htmlspecialchars((string) $subitem['href']); ?>"><?php echo htmlspecialchars((string) $subitem['label']); ?></a>
                                        <?php else: ?>
                                            <span class="subtext sub-link"><?php echo htmlspecialchars((string) $subitem['label']); ?></span>
                                        <?php endif; ?>
                                    </div>
                                <?php endforeach; ?>
                            </div>
                        <?php endif; ?>
                    <?php endforeach; ?>
                </div>
            </div>

            <div class="section-eyebrow">Additional Notable Features</div>
            <div class="features-grid">
                <div class="feature-card">
                    <div class="feature-icon"><i class="fa-regular fa-clock"></i></div>
                    <div class="feature-title">Direct Deposit</div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon"><i class="fa-solid fa-file-invoice-dollar"></i></div>
                    <div class="feature-title">Salary Templates</div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon"><i class="fa-solid fa-bolt"></i></div>
                    <div class="feature-title">Auto Reminder for IT &amp; POI Declaration</div>
                </div>
                <div class="feature-card">
                    <div class="feature-icon"><i class="fa-solid fa-robot"></i></div>
                    <div class="feature-title">Employee Custom Field</div>
                </div>
            </div>

            <section class="help-wrapper">
                <h2 class="section-title center">Find help & resources</h2>
                <div class="help-grid">
                    <div class="card wide">
                        <div class="card-subtitle">Learn how to use Zoho Payroll</div>
                        <div class="video-card large">
                            <div class="play-btn big"><i class="fa-solid fa-play"></i></div>
                            <p>Watch Complete Walkthrough Video</p>
                        </div>
                    </div>
                    <div class="card help-panel">
                        <div class="card-subtitle">Help & Support</div>
                        <div class="support-list icons">
                            <div class="support-item"><span class="support-icon"><i class="fa-regular fa-circle-question"></i></span>Help</div>
                            <div class="support-item"><span class="support-icon"><i class="fa-regular fa-comments"></i></span>FAQ</div>
                            <div class="support-item"><span class="support-icon"><i class="fa-solid fa-notes-medical"></i></span>Forum</div>
                        </div>
                    </div>
                </div>
            </section>

            <div class="info-strip">
                <div class="info-item">
                    <span class="info-icon"><i class="fa-regular fa-envelope"></i></span>
                    Need Clarification? <a href="#">Drop us an email</a> and we'll get back to you
                </div>
                <div class="info-item">
                    <span class="info-icon"><i class="fa-solid fa-phone"></i></span>
                    You can directly talk to us every Monday to Friday<br>
                    Toll Free: 18005726671 (9:00 AM to 7:00 PM)
                </div>
            </div>

            <div class="footer-grid">
                <div class="promo-card">
                    <img src="images/mobile-footer-in-6c8e1951aeca90821dfaa475a1967a1c.png" alt="Payroll mobile app preview" class="promo-img">
                    <div class="phone-card">Payroll portal app for your employees; accessible anywhere anytime</div>
                    <div class="store-row">
                        <button class="store-btn">App Store</button>
                        <button class="store-btn">Google Play</button>
                    </div>
                </div>
                <div class="link-col">
                    <h4>Other Zoho Apps</h4>
                    <ul>
                        <li>Accounting Software</li>
                        <li>HR Software</li>
                        <li>Inventory Management</li>
                        <li>Expense Reporting</li>
                        <li>CRM & Other Apps</li>
                    </ul>
                </div>
                <div class="link-col">
                    <h4>Help & Support</h4>
                    <ul>
                        <li>Contact Support</li>
                        <li>Help Documentation</li>
                        <li>FAQ</li>
                        <li>Training Program</li>
                    </ul>
                </div>
                <div class="link-col">
                    <h4>Quick Links</h4>
                    <ul>
                        <li>Features</li>
                        <li>Integrations</li>
                        <li>What's New?</li>
                    </ul>
                </div>
            </div>

            <p class="copyright">ï¿½ 2026, Zoho Corporation Pvt. Ltd. All Rights Reserved.</p>
        </section>
    </main>
</div>

<aside class="org-drawer" id="orgDrawer" aria-hidden="<?php echo $activeDrawer === 'org' ? 'false' : 'true'; ?>">
    <div class="org-panel">
        <div class="org-drawer__header">
            <span>Organisations</span>
            <div class="org-head-actions">
                <a href="#" class="manage-link"><i class="fa-solid fa-gear"></i>Manage</a>
                <a class="org-close" href="dashboard.php" aria-label="Close"><i class="fa-solid fa-xmark"></i></a>
            </div>
        </div>
        <div class="org-drawer__subhead">
            <span class="label">My Organisations</span>
        </div>
        <div class="org-list">
            <div class="org-card active">
                <div class="org-icon"><i class="fa-regular fa-building"></i></div>
                <div class="org-meta">
                    <div class="org-name"><?php echo htmlspecialchars($orgName); ?></div>
                    <div class="org-id">Organisation ID: <?php echo htmlspecialchars($orgId); ?> ï¿½ <?php echo htmlspecialchars($trialStatus); ?></div>
                </div>
                <div class="org-check"><i class="fa-solid fa-circle-check"></i></div>
            </div>
        </div>
    </div>
</aside>

<!-- Right side drawers -->
<aside class="side-drawer<?php echo $activeDrawer === 'notif' ? ' is-open' : ''; ?>" id="notifDrawer" aria-hidden="<?php echo $activeDrawer === 'notif' ? 'false' : 'true'; ?>">
    <div class="drawer-panel">
        <div class="drawer-head">
            <div class="drawer-title">Notifications</div>
            <a class="drawer-close" href="dashboard.php" aria-label="Close"><i class="fa-solid fa-xmark"></i></a>
        </div>
        <div class="drawer-body">
            <div class="notif-section">
                <div class="drawer-section-title">Payroll Status</div>
                <div class="notif-list">
                    <?php foreach ($notificationCards as $notification): ?>
                        <article class="notif-card">
                            <div class="notif-card-ico">
                                <i class="<?php echo htmlspecialchars($notification['icon']); ?>"></i>
                            </div>
                            <div class="notif-card-body">
                                <div class="notif-card-top">
                                    <div class="notif-card-title"><?php echo htmlspecialchars($notification['title']); ?></div>
                                    <span class="salary-pill status-<?php echo htmlspecialchars($notification['status_key']); ?>"><?php echo htmlspecialchars($notification['status_label']); ?></span>
                                </div>
                                <p><?php echo htmlspecialchars($notification['message']); ?></p>
                                <div class="notif-meta">
                                    <?php foreach ($notification['meta'] as $meta): ?>
                                        <span><?php echo htmlspecialchars($meta); ?></span>
                                    <?php endforeach; ?>
                                </div>
                            </div>
                        </article>
                    <?php endforeach; ?>
                </div>
            </div>
            <a class="notif-action pill ghost" href="salary_holds.php">Open Salary Holds</a>
        </div>
    </div>
</aside>

<aside class="side-drawer<?php echo $activeDrawer === 'apps' ? ' is-open' : ''; ?>" id="appsDrawer" aria-hidden="<?php echo $activeDrawer === 'apps' ? 'false' : 'true'; ?>">
    <div class="drawer-panel">
        <div class="drawer-head">
            <div class="drawer-title">All Zoho Apps</div>
            <div class="drawer-actions">
                <a class="icon-btn ghost" href="#" aria-label="Search"><i class="fa-solid fa-magnifying-glass"></i></a>
                <a class="drawer-close" href="dashboard.php" aria-label="Close"><i class="fa-solid fa-xmark"></i></a>
            </div>
        </div>
        <div class="drawer-body">
            <div class="drawer-section">
                <div class="drawer-section-title">Finance Apps</div>
                <div class="app-list">
                    <div class="app-row"><span class="app-ico zapp-c-blue"><svg><use href="#icon-books"></use></svg></span><div><div class="app-name">Zoho Books</div><div class="app-sub">Online Accounting Software</div></div></div>
                    <div class="app-row"><span class="app-ico zapp-c-red"><svg><use href="#icon-expense"></use></svg></span><div><div class="app-name">Zoho Expense</div><div class="app-sub">Expense Reporting Software</div></div><i class="fa-solid fa-angle-right app-arrow"></i></div>
                    <div class="app-row"><span class="app-ico zapp-c-green"><svg><use href="#icon-billing"></use></svg></span><div><div class="app-name">Zoho Billing</div><div class="app-sub">End-to-end Billing Solution</div></div></div>
                    <div class="app-row"><span class="app-ico zapp-c-red"><svg><use href="#icon-inventory"></use></svg></span><div><div class="app-name">Zoho Inventory</div><div class="app-sub">Order &amp; Inventory Management</div></div></div>
                    <div class="app-row"><span class="app-ico zapp-c-blue"><svg><use href="#icon-checkout"></use></svg></span><div><div class="app-name">Zoho Checkout</div><div class="app-sub">One-time &amp; Recurring Payments</div></div></div>
                    <div class="app-row"><span class="app-ico zapp-c-green"><svg><use href="#icon-commerce"></use></svg></span><div><div class="app-name">Zoho Commerce</div><div class="app-sub">Ecommerce Software</div></div></div>
                </div>
            </div>

            <div class="drawer-section">
                <div class="drawer-section-title">Other Apps <span class="section-caret"><i class="fa-solid fa-angle-down"></i></span></div>

                <div class="drawer-subtitle">Email and Collaboration</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-amber"><svg><use href="#icon-notebook"></use></svg></span>Notebook</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-meeting"></use></svg></span>Meeting</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-projects"></use></svg></span>Projects</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-sign"></use></svg></span>Sign</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-sprints"></use></svg></span>Sprints</div>
                    <div class="app-tile"><span class="app-ico zapp-c-teal"><svg><use href="#icon-teaminbox"></use></svg></span>TeamInbox</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-mail"></use></svg></span>Mail</div>
                    <div class="app-tile"><span class="app-ico zapp-c-rose"><svg><use href="#icon-cliq"></use></svg></span>Cliq</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-sheet"></use></svg></span>Sheet</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-show"></use></svg></span>Show</div>
                    <div class="app-tile"><span class="app-ico zapp-c-indigo"><svg><use href="#icon-writer"></use></svg></span>Writer</div>
                    <div class="app-tile selected"><span class="app-ico zapp-c-blue"><svg><use href="#icon-connect"></use></svg></span>Connect</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-vault"></use></svg></span>Vault</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-workdrive"></use></svg></span>WorkDrive</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-learn"></use></svg></span>Learn</div>
                </div>

                <div class="drawer-subtitle">Sales</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-crm"></use></svg></span>CRM</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-salesiq"></use></svg></span>SalesIQ</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-salesinbox"></use></svg></span>SalesInbox</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-bigin"></use></svg></span>Bigin</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-bookings"></use></svg></span>Bookings</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-commerce"></use></svg></span>Commerce</div>
                </div>

                <div class="drawer-subtitle">Marketing</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-sites"></use></svg></span>Sites</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-campaigns"></use></svg></span>Campaigns</div>
                    <div class="app-tile"><span class="app-ico zapp-c-amber"><svg><use href="#icon-survey"></use></svg></span>Survey</div>
                    <div class="app-tile"><span class="app-ico zapp-c-indigo"><svg><use href="#icon-backstage"></use></svg></span>Backstage</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-forms"></use></svg></span>Forms</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-marketinghub"></use></svg></span>MarketingHub</div>
                    <div class="app-tile"><span class="app-ico zapp-c-orange"><svg><use href="#icon-pagesense"></use></svg></span>PageSense</div>
                    <div class="app-tile"><span class="app-ico zapp-c-teal"><svg><use href="#icon-social"></use></svg></span>Social</div>
                </div>

                <div class="drawer-subtitle">Help Desk and Customer Support</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-desk"></use></svg></span>Desk</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-lens"></use></svg></span>Lens</div>
                    <div class="app-tile"><span class="app-ico zapp-c-teal"><svg><use href="#icon-assist"></use></svg></span>Assist</div>
                </div>

                <div class="drawer-subtitle">Human Resources</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-people"></use></svg></span>People</div>
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-recruit"></use></svg></span>Recruit</div>
                </div>

                <div class="drawer-subtitle">Business Process</div>
                <div class="app-grid compact">
                    <div class="app-tile"><span class="app-ico zapp-c-red"><svg><use href="#icon-analytics"></use></svg></span>Analytics</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-creator"></use></svg></span>Creator</div>
                    <div class="app-tile"><span class="app-ico zapp-c-green"><svg><use href="#icon-flow"></use></svg></span>Flow</div>
                    <div class="app-tile"><span class="app-ico zapp-c-gray"><svg><use href="#icon-qntrl"></use></svg></span>Qntrl</div>
                    <div class="app-tile"><span class="app-ico zapp-c-blue"><svg><use href="#icon-dataprep"></use></svg></span>DataPrep</div>
                    <div class="app-tile"><span class="app-ico zapp-c-teal"><svg><use href="#icon-rpa"></use></svg></span>RPA</div>
                </div>
            </div>
        </div>
    </div>
</aside>

<aside class="side-drawer<?php echo $activeDrawer === 'profile' ? ' is-open' : ''; ?>" id="profileDrawer" aria-hidden="<?php echo $activeDrawer === 'profile' ? 'false' : 'true'; ?>">
    <div class="drawer-panel">
        <div class="drawer-head">
            <div class="drawer-title"><?php echo htmlspecialchars($displayName); ?></div>
            <a class="drawer-close" href="dashboard.php" aria-label="Close"><i class="fa-solid fa-xmark"></i></a>
        </div>
        <div class="drawer-body">
            <div class="profile-meta">
                <div class="profile-avatar"><?php echo strtoupper(substr($displayName,0,1)); ?></div>
                <div>
                    <div class="profile-name"><?php echo htmlspecialchars($displayName); ?></div>
                    <div class="profile-sub"><?php echo htmlspecialchars($userEmail); ?></div>
                    <div class="profile-sub">Organisation ID: <?php echo htmlspecialchars($orgId); ?></div>
                </div>
            </div>
            <div class="profile-links">
                <a href="#" class="profile-link">My Account</a>
                <a href="logout.php" class="profile-link danger">Sign Out</a>
            </div>
            <div class="profile-panel">
                <div class="panel-title">Need Assistance?</div>
                <div class="panel-item"><i class="fa-regular fa-circle-dot"></i> Record an issue</div>
                <div class="panel-item"><i class="fa-regular fa-envelope"></i> Send an email</div>
                <div class="panel-item"><i class="fa-regular fa-calendar"></i> Register for webinars</div>
            </div>
        </div>
    </div>
</aside>

<!-- Upgrade modal -->
<div class="upgrade-modal" id="upgradeModal" aria-hidden="<?php echo $activeModal === 'upgrade' ? 'false' : 'true'; ?>" role="dialog" aria-modal="true" aria-labelledby="upgradeTitle">
    <div class="upgrade-card">
        <div class="upgrade-head">
            <h3 id="upgradeTitle">Ready to make the switch?</h3>
            <a class="upgrade-close" href="dashboard.php" aria-label="Close"><i class="fa-solid fa-xmark"></i></a>
        </div>
        <div class="upgrade-body">
            <div class="upgrade-illustration" aria-hidden="true">
                <i class="fa-solid fa-hourglass-half"></i>
            </div>
            <div class="upgrade-sub">
                <div class="upgrade-trial">Your trial expires in 6 day(s).</div>
                <p>We hope you enjoyed using Zoho Payroll. To join the Zoho Payroll family, click the Upgrade Subscription button.</p>
            </div>

            <div class="upgrade-help">
                <div class="upgrade-help-title"><span class="bulb"><i class="fa-regular fa-lightbulb"></i></span>Need help to know more on Zoho Payroll?</div>
                <div class="upgrade-help-sub">Checkout our tailor made help resources below</div>
                <div class="upgrade-help-grid">
                    <div class="help-chips">
                        <button class="help-chip" type="button"><span class="chip-ico"><i class="fa-regular fa-circle-question"></i></span>Help</button>
                        <button class="help-chip" type="button"><span class="chip-ico"><i class="fa-regular fa-circle-play"></i></span>Videos</button>
                        <button class="help-chip" type="button"><span class="chip-ico"><i class="fa-regular fa-rectangle-list"></i></span>FAQ</button>
                        <button class="help-chip" type="button"><span class="chip-ico"><i class="fa-solid fa-graduation-cap"></i></span>Academy</button>
                    </div>
                    <div class="help-card">
                        <div class="help-ico"><i class="fa-solid fa-headset"></i></div>
                        <div>
                            <div class="help-card-title">Need Clarification?</div>
                            <a href="#" class="help-card-link">Drop us an email</a>
                        </div>
                    </div>
                </div>
                <div class="upgrade-webinar">
                    <span class="webinar-ico"><i class="fa-solid fa-video"></i></span>
                    Join Live webinar on getting started with Zoho Payroll
                    <a href="#" class="upgrade-webinar-link">Register Now</a>
                </div>
            </div>
        </div>
        <div class="upgrade-actions">
            <button class="upgrade-primary" type="button">Upgrade Subscription</button>
            <button class="upgrade-secondary" type="button">Move to Free Plan</button>
        </div>
    </div>
</div>

<!-- Custom app icon sprite -->
<svg class="zapp-sprite" aria-hidden="true">
    <symbol id="icon-books" viewBox="0 0 24 24">
        <rect x="3" y="5" width="7" height="14" rx="1.5"></rect>
        <rect x="11" y="4" width="10" height="16" rx="1.5"></rect>
        <line x1="6" y1="9" x2="9" y2="9"></line>
        <line x1="14" y1="9" x2="19" y2="9"></line>
    </symbol>
    <symbol id="icon-expense" viewBox="0 0 24 24">
        <path d="M7 4h8l2 2v14l-2-1-2 1-2-1-2 1-2-1-2 1V4z"></path>
        <line x1="9" y1="9" x2="15" y2="9"></line>
        <line x1="9" y1="13" x2="15" y2="13"></line>
    </symbol>
    <symbol id="icon-billing" viewBox="0 0 24 24">
        <rect x="3" y="6" width="18" height="12" rx="2"></rect>
        <line x1="6" y1="10" x2="10" y2="10"></line>
        <line x1="14" y1="14" x2="18" y2="14"></line>
    </symbol>
    <symbol id="icon-inventory" viewBox="0 0 24 24">
        <path d="M4 7l8-4 8 4-8 4-8-4z"></path>
        <path d="M4 7v10l8 4 8-4V7"></path>
    </symbol>
    <symbol id="icon-checkout" viewBox="0 0 24 24">
        <rect x="4" y="6" width="16" height="8" rx="2"></rect>
        <path d="M8 14v4h8v-4"></path>
        <line x1="7" y1="10" x2="11" y2="10"></line>
    </symbol>
    <symbol id="icon-commerce" viewBox="0 0 24 24">
        <path d="M6 8h12l-1 11H7L6 8z"></path>
        <path d="M9 8V6a3 3 0 0 1 6 0v2"></path>
    </symbol>
    <symbol id="icon-notebook" viewBox="0 0 24 24">
        <rect x="5" y="4" width="14" height="16" rx="2"></rect>
        <line x1="9" y1="4" x2="9" y2="20"></line>
        <line x1="12" y1="9" x2="17" y2="9"></line>
    </symbol>
    <symbol id="icon-meeting" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="3"></circle>
        <line x1="12" y1="3" x2="12" y2="7"></line>
        <line x1="12" y1="17" x2="12" y2="21"></line>
        <line x1="3" y1="12" x2="7" y2="12"></line>
        <line x1="17" y1="12" x2="21" y2="12"></line>
        <line x1="5.2" y1="5.2" x2="8" y2="8"></line>
        <line x1="16" y1="16" x2="18.8" y2="18.8"></line>
        <line x1="5.2" y1="18.8" x2="8" y2="16"></line>
        <line x1="16" y1="8" x2="18.8" y2="5.2"></line>
    </symbol>
    <symbol id="icon-projects" viewBox="0 0 24 24">
        <rect x="5" y="4" width="14" height="16" rx="2"></rect>
        <line x1="8" y1="9" x2="16" y2="9"></line>
        <line x1="8" y1="13" x2="13" y2="13"></line>
        <path d="M9 16l1.5 1.5L13 15"></path>
    </symbol>
    <symbol id="icon-sign" viewBox="0 0 24 24">
        <path d="M4 18l4-1 8-8-3-3-8 8-1 4z"></path>
        <line x1="13" y1="6" x2="18" y2="11"></line>
    </symbol>
    <symbol id="icon-sprints" viewBox="0 0 24 24">
        <path d="M5 14l6-6 4 4-6 6H5z"></path>
        <path d="M9 6l2-2 4 4-2 2"></path>
        <circle cx="16.5" cy="7.5" r="1"></circle>
    </symbol>
    <symbol id="icon-teaminbox" viewBox="0 0 24 24">
        <path d="M4 7h16l-2 10H6L4 7z"></path>
        <path d="M9 13h6"></path>
    </symbol>
    <symbol id="icon-mail" viewBox="0 0 24 24">
        <rect x="4" y="6" width="16" height="12" rx="2"></rect>
        <path d="M4 8l8 6 8-6"></path>
    </symbol>
    <symbol id="icon-cliq" viewBox="0 0 24 24">
        <path d="M4 6h12a4 4 0 0 1 4 4v2a4 4 0 0 1-4 4H9l-5 4v-4H4a4 4 0 0 1-4-4v-2a4 4 0 0 1 4-4z"></path>
    </symbol>
    <symbol id="icon-sheet" viewBox="0 0 24 24">
        <rect x="4" y="5" width="16" height="14" rx="2"></rect>
        <line x1="4" y1="10" x2="20" y2="10"></line>
        <line x1="9" y1="5" x2="9" y2="19"></line>
    </symbol>
    <symbol id="icon-show" viewBox="0 0 24 24">
        <rect x="4" y="6" width="16" height="12" rx="2"></rect>
        <path d="M11 10l4 2-4 2z"></path>
    </symbol>
    <symbol id="icon-writer" viewBox="0 0 24 24">
        <path d="M6 18l10-10 2 2-10 10H6z"></path>
        <path d="M14 6l2-2 4 4-2 2"></path>
    </symbol>
    <symbol id="icon-connect" viewBox="0 0 24 24">
        <circle cx="6" cy="12" r="3"></circle>
        <circle cx="18" cy="7" r="3"></circle>
        <circle cx="18" cy="17" r="3"></circle>
        <line x1="8.5" y1="10.5" x2="15.5" y2="8.5"></line>
        <line x1="8.5" y1="13.5" x2="15.5" y2="15.5"></line>
    </symbol>
    <symbol id="icon-vault" viewBox="0 0 24 24">
        <rect x="5" y="10" width="14" height="10" rx="2"></rect>
        <path d="M8 10V7a4 4 0 0 1 8 0v3"></path>
        <circle cx="12" cy="15" r="1.5"></circle>
    </symbol>
    <symbol id="icon-workdrive" viewBox="0 0 24 24">
        <rect x="4" y="7" width="16" height="10" rx="2"></rect>
        <circle cx="8" cy="12" r="1.5"></circle>
        <line x1="11" y1="12" x2="18" y2="12"></line>
    </symbol>
    <symbol id="icon-learn" viewBox="0 0 24 24">
        <path d="M4 6h8a4 4 0 0 1 4 4v8H8a4 4 0 0 0-4 0V6z"></path>
        <path d="M20 6h-8a4 4 0 0 0-4 4v8h8a4 4 0 0 1 4 0V6z"></path>
    </symbol>
    <symbol id="icon-crm" viewBox="0 0 24 24">
        <path d="M9 7h4a4 4 0 0 1 0 8H9"></path>
        <path d="M15 17h-4a4 4 0 0 1 0-8h4"></path>
    </symbol>
    <symbol id="icon-salesiq" viewBox="0 0 24 24">
        <rect x="4" y="6" width="16" height="10" rx="3"></rect>
        <path d="M9 16l-3 3v-3"></path>
        <circle cx="10" cy="11" r="1"></circle>
        <circle cx="14" cy="11" r="1"></circle>
    </symbol>
    <symbol id="icon-salesinbox" viewBox="0 0 24 24">
        <path d="M4 7h16l-2 10H6L4 7z"></path>
        <path d="M12 10v6"></path>
        <path d="M9 13l3 3 3-3"></path>
    </symbol>
    <symbol id="icon-bigin" viewBox="0 0 24 24">
        <path d="M4 6h16l-6 6v6l-4-2v-4L4 6z"></path>
    </symbol>
    <symbol id="icon-bookings" viewBox="0 0 24 24">
        <rect x="4" y="6" width="16" height="14" rx="2"></rect>
        <line x1="4" y1="10" x2="20" y2="10"></line>
        <line x1="8" y1="4" x2="8" y2="8"></line>
        <line x1="16" y1="4" x2="16" y2="8"></line>
    </symbol>
    <symbol id="icon-sites" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="9"></circle>
        <path d="M3 12h18"></path>
        <path d="M12 3a12 12 0 0 1 0 18"></path>
        <path d="M12 3a12 12 0 0 0 0 18"></path>
    </symbol>
    <symbol id="icon-campaigns" viewBox="0 0 24 24">
        <path d="M4 10l10-4v12l-10-4v-4z"></path>
        <path d="M14 8h4a3 3 0 0 1 0 8h-4"></path>
    </symbol>
    <symbol id="icon-survey" viewBox="0 0 24 24">
        <rect x="5" y="4" width="14" height="16" rx="2"></rect>
        <path d="M8 10l2 2 4-4"></path>
        <line x1="8" y1="14" x2="16" y2="14"></line>
    </symbol>
    <symbol id="icon-backstage" viewBox="0 0 24 24">
        <path d="M7 7l5-3 5 3v6l-5 3-5-3V7z"></path>
    </symbol>
    <symbol id="icon-forms" viewBox="0 0 24 24">
        <rect x="5" y="4" width="14" height="16" rx="2"></rect>
        <line x1="8" y1="9" x2="16" y2="9"></line>
        <line x1="8" y1="13" x2="14" y2="13"></line>
    </symbol>
    <symbol id="icon-marketinghub" viewBox="0 0 24 24">
        <path d="M5 16l4-4 3 3 6-6"></path>
        <path d="M16 9h4v4"></path>
    </symbol>
    <symbol id="icon-pagesense" viewBox="0 0 24 24">
        <rect x="4" y="6" width="12" height="12" rx="2"></rect>
        <rect x="8" y="4" width="12" height="12" rx="2"></rect>
    </symbol>
    <symbol id="icon-social" viewBox="0 0 24 24">
        <circle cx="6" cy="12" r="2"></circle>
        <circle cx="18" cy="7" r="2"></circle>
        <circle cx="18" cy="17" r="2"></circle>
        <line x1="8" y1="11" x2="16" y2="8"></line>
        <line x1="8" y1="13" x2="16" y2="16"></line>
    </symbol>
    <symbol id="icon-desk" viewBox="0 0 24 24">
        <path d="M6 12a6 6 0 0 1 12 0v3h-4l-2 3-2-3H6v-3z"></path>
    </symbol>
    <symbol id="icon-lens" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="7"></circle>
        <circle cx="12" cy="12" r="2"></circle>
    </symbol>
    <symbol id="icon-assist" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="7"></circle>
        <circle cx="12" cy="12" r="3"></circle>
        <line x1="12" y1="5" x2="12" y2="9"></line>
        <line x1="12" y1="15" x2="12" y2="19"></line>
    </symbol>
    <symbol id="icon-people" viewBox="0 0 24 24">
        <circle cx="9" cy="9" r="3"></circle>
        <circle cx="16" cy="10" r="2.5"></circle>
        <path d="M4 19a5 5 0 0 1 10 0"></path>
        <path d="M13 19a4 4 0 0 1 7 0"></path>
    </symbol>
    <symbol id="icon-recruit" viewBox="0 0 24 24">
        <circle cx="10" cy="9" r="3"></circle>
        <path d="M4 19a6 6 0 0 1 12 0"></path>
        <line x1="18" y1="8" x2="18" y2="14"></line>
        <line x1="15" y1="11" x2="21" y2="11"></line>
    </symbol>
    <symbol id="icon-analytics" viewBox="0 0 24 24">
        <line x1="5" y1="19" x2="5" y2="11"></line>
        <line x1="10" y1="19" x2="10" y2="7"></line>
        <line x1="15" y1="19" x2="15" y2="13"></line>
        <line x1="20" y1="19" x2="20" y2="9"></line>
    </symbol>
    <symbol id="icon-creator" viewBox="0 0 24 24">
        <rect x="4" y="4" width="8" height="8" rx="2"></rect>
        <circle cx="17" cy="7" r="3"></circle>
        <path d="M14 14h6v6h-6z"></path>
    </symbol>
    <symbol id="icon-flow" viewBox="0 0 24 24">
        <circle cx="6" cy="6" r="2"></circle>
        <circle cx="18" cy="12" r="2"></circle>
        <circle cx="6" cy="18" r="2"></circle>
        <path d="M8 6h6l4 6-4 6H8"></path>
    </symbol>
    <symbol id="icon-qntrl" viewBox="0 0 24 24">
        <circle cx="12" cy="12" r="8"></circle>
        <circle cx="12" cy="12" r="3"></circle>
        <line x1="12" y1="4" x2="12" y2="7"></line>
    </symbol>
    <symbol id="icon-dataprep" viewBox="0 0 24 24">
        <path d="M4 15c3 0 3-6 6-6s3 6 6 6 3-6 6-6"></path>
    </symbol>
    <symbol id="icon-rpa" viewBox="0 0 24 24">
        <rect x="6" y="7" width="12" height="10" rx="2"></rect>
        <circle cx="10" cy="12" r="1"></circle>
        <circle cx="14" cy="12" r="1"></circle>
        <line x1="9" y1="5" x2="9" y2="7"></line>
        <line x1="15" y1="5" x2="15" y2="7"></line>
    </symbol>
</svg>

<!-- Sticky help button (right rail) -->
<a class="help-fab" href="support.php" aria-label="Help" title="Help"><i class="fa-regular fa-circle-question"></i></a>
<script>
  (function(){
    const toggles = document.querySelectorAll('[data-nav-toggle]');
    toggles.forEach(btn => {
        btn.addEventListener('click', () => {
            const group = btn.closest('.nav-group');
            if (!group) return;
            group.classList.toggle('open');
        });
    });

    const setupSteps = document.querySelectorAll('.step[data-step-href]');
    setupSteps.forEach(step => {
        step.setAttribute('role', 'link');
        step.tabIndex = 0;

        step.addEventListener('click', event => {
            if (event.target.closest('a, button')) {
                return;
            }
            const href = step.dataset.stepHref;
            if (href) {
                window.location.href = href;
            }
        });

        step.addEventListener('keydown', event => {
            if (event.key !== 'Enter' && event.key !== ' ') {
                return;
            }
            event.preventDefault();
            const href = step.dataset.stepHref;
            if (href) {
                window.location.href = href;
            }
        });
    });
})();
</script>
</body>
</html>

