{"id":7,"date":"2026-06-19T03:14:18","date_gmt":"2026-06-19T03:14:18","guid":{"rendered":"https:\/\/ksa.kenyascouts.com\/?page_id=7"},"modified":"2026-06-19T03:14:18","modified_gmt":"2026-06-19T03:14:18","slug":"portal","status":"publish","type":"page","link":"https:\/\/ksa.kenyascouts.com\/","title":{"rendered":"Member Registration Portal"},"content":{"rendered":"\n\n<!-- PRINT AREA -->\n<div class=\"print-area\" id=\"printArea\"><\/div>\n<div id=\"staffPrintArea\" style=\"display:none;position:fixed;inset:0;background:#fff;align-items:center;justify-content:center;z-index:99999\"><\/div>\n<!-- TOASTS -->\n<div class=\"toast-wrap\" id=\"toastWrap\"><\/div>\n\n<!-- LOGIN SCREEN -->\n<div class=\"login-screen\" id=\"loginScreen\">\n  <div class=\"login-box\">\n    <div class=\"logo\">\n      <img decoding=\"async\" src=\"https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo.png?v=1.2.0\" onerror=\"this.onerror=null;this.src='https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo.png?v=1.2.0'\" alt=\"KSA\" style=\"max-height:64px;width:auto\">\n    <\/div>\n    <h2>Kenya Scouts Association<\/h2>\n    <p>Membership Registration System<\/p>\n    <div class=\"login-tabs\">\n      <button class=\"login-tab on\" onclick=\"setLoginMode('public')\" id=\"ltab-public\">New Member<\/button>\n      <button class=\"login-tab\" onclick=\"setLoginMode('staff')\" id=\"ltab-staff\">Existing Member<\/button>\n    <\/div>\n    <div id=\"login-public\">\n      <button class=\"btn btn-purple btn-full btn-lg\" onclick=\"enterPublic()\" style=\"margin-top:4px\">\n        Register as New Member\n      <\/button>\n      <p style=\"font-size:.68rem;color:var(--n3);text-align:center;margin-top:12px\">Register for membership, verify a card, or register a scout unit.<\/p>\n    <\/div>\n    <div id=\"login-staff\" class=\"hidden\">\n      <div class=\"login-field\"><label>Username<\/label><input type=\"text\" id=\"loginUser\" placeholder=\"e.g. nairobi_cc\" autocomplete=\"username\"><\/div>\n      <div class=\"login-field\"><label>Password<\/label><input type=\"password\" id=\"loginPass\" placeholder=\"Enter password\" autocomplete=\"current-password\" onkeydown=\"if(event.key==='Enter')doLogin()\"><\/div>\n      <button class=\"btn btn-purple btn-full btn-lg\" onclick=\"doLogin()\" style=\"margin-top:4px\">Sign In<\/button>\n      <div class=\"login-err\" id=\"loginErr\">Invalid username or password. Please try again.<\/div>\n      <p style=\"font-size:.65rem;color:var(--n3);text-align:center;margin-top:12px\">Contact your administrator for login credentials.<\/p>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- NAV -->\n<nav class=\"nav\">\n  <a class=\"nav-brand\" href=\"#\">\n    <img decoding=\"async\" class=\"nav-logo-img\" id=\"navLogoImg\" src=\"https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo.png?v=1.2.0\" onerror=\"this.onerror=null;this.style.display='none';document.getElementById('navLogoSvg').style.display='flex'\" alt=\"KSA\"><div id=\"navLogoSvg\" style=\"display:none;width:40px;height:40px;background:#3a0e5e;border-radius:9px;align-items:center;justify-content:center\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#f5c518\" stroke-width=\"1.8\" stroke-linecap=\"round\" width=\"24\" height=\"24\"><path d=\"M12 2l3 8h8l-6.5 4.7 2.5 7.8L12 18l-6.5 4.5 2.5-7.8L2 10h8z\"\/><\/svg><\/div>\n    <div class=\"brand-text\">\n      <strong>Kenya Scouts Association<\/strong>\n      <span>Member Registration Portal<\/span>\n    <\/div>\n  <\/a>\n  <div class=\"nav-actions\">\n    <button class=\"btn-sm btn-sm-ghost\" onclick=\"openOverlay('unitOverlay')\" id=\"navUnitBtn\">\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n      <span class=\"btn-label\">Register Unit<\/span>\n    <\/button>\n    <button class=\"btn-sm btn-sm-ghost\" onclick=\"openOverlay('verifyOverlay')\">\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><path d=\"m21 21-4.35-4.35\"\/><\/svg>\n      <span class=\"btn-label\">Verify<\/span>\n    <\/button>\n    <button class=\"btn-sm btn-sm-primary\" onclick=\"showDashboard()\" id=\"navDashBtn\" style=\"display:none\">\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>\n      <span class=\"btn-label\">Dashboard<\/span>\n    <\/button>\n    <button class=\"btn-sm btn-sm-ghost\" onclick=\"doLogout()\" id=\"navLogoutBtn\" style=\"display:none\">\n      <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"\/><polyline points=\"16 17 21 12 16 7\"\/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"\/><\/svg>\n      <span class=\"btn-label\">Logout<\/span>\n    <\/button>\n  <\/div>\n<\/nav>\n\n<!-- HERO -->\n<div class=\"hero\" id=\"heroSection\">\n  <div class=\"hero-slides\" id=\"heroSlides\">\n    <!-- Slides generated by JS -->\n  <\/div>\n  <div class=\"hero-overlay\"><\/div>\n  <div class=\"hero-content fade-in\">\n    <div class=\"hero-tag\"><span>Do Your Best \u2014 Jitahidi Zaidi<\/span><\/div>\n    <h1>Kenya Scouts<br><em>Membership Registration<\/em><\/h1>\n    <p class=\"hero-desc\">Register online, pay via M-Pesa, and receive your membership card or certificate instantly. All 47 counties served.<\/p>\n    <div class=\"hero-btns\">\n      <button class=\"btn-hero btn-hero-gold\" id=\"btnRegNow\">\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"\/><\/svg>\n        Register as Member\n      <\/button>\n      <button class=\"btn-hero btn-hero-outline\" id=\"btnRegUnit\">\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n        Register a Unit\n      <\/button>\n    <\/div>\n    <div class=\"hero-stats\">\n      <div class=\"hero-stat\"><div class=\"num\">47<\/div><div class=\"lbl\">Counties<\/div><\/div>\n      <div class=\"hero-stat\"><div class=\"num\">5<\/div><div class=\"lbl\">Categories<\/div><\/div>\n      <div class=\"hero-stat\"><div class=\"num\">24h<\/div><div class=\"lbl\">Card Turnaround<\/div><\/div>\n      <div class=\"hero-stat\"><div class=\"num\">M-Pesa<\/div><div class=\"lbl\">Instant Payment<\/div><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"slide-dots\" id=\"slideDots\"><\/div>\n<\/div>\n\n<!-- STEPS -->\n<div class=\"steps-wrap\" id=\"stepsWrap\">\n  <div class=\"steps\">\n    <div class=\"step-item active\" id=\"si1\"><div class=\"step-dot\">1<\/div><span class=\"step-lbl\">Category<\/span><\/div>\n    <div class=\"step-line\" id=\"sl1\"><\/div>\n    <div class=\"step-item\" id=\"si2\"><div class=\"step-dot\">2<\/div><span class=\"step-lbl\">Details<\/span><\/div>\n    <div class=\"step-line\" id=\"sl2\"><\/div>\n    <div class=\"step-item\" id=\"si3\"><div class=\"step-dot\">3<\/div><span class=\"step-lbl\">Payment<\/span><\/div>\n    <div class=\"step-line\" id=\"sl3\"><\/div>\n    <div class=\"step-item\" id=\"si4\"><div class=\"step-dot\">4<\/div><span class=\"step-lbl\">Card<\/span><\/div>\n  <\/div>\n<\/div>\n\n<!-- MAIN -->\n<div class=\"main\" id=\"mainSection\">\n\n  <!-- Staff dashboard is now the full-screen .staff-layout below -->\n  <div id=\"dashSection\" class=\"hidden fade-in\">\n\n    <!-- Profile Header -->\n    <div class=\"dash-profile-hdr\">\n      <div class=\"dash-avatar\" id=\"dashAvatar\">?<\/div>\n      <div class=\"dash-profile-info\">\n        <div class=\"dash-name\" id=\"dashName\">\u2014<\/div>\n        <div class=\"dash-meta\">\n          <span class=\"dash-role-badge\" id=\"dashRoleBadge\">\u2014<\/span>\n          <span id=\"dashCountyLabel\" style=\"font-size:.72rem;color:rgba(255,255,255,.6)\"><\/span>\n        <\/div>\n        <div id=\"dashMemno\" style=\"font-size:.68rem;color:rgba(255,255,255,.5);margin-top:3px;font-family:monospace\"><\/div>\n      <\/div>\n      <div class=\"dash-profile-actions\">\n        <button class=\"btn-dash-sm\" onclick=\"showDashTab('card')\">My Card<\/button>\n        <button class=\"btn-dash-sm\" onclick=\"showDashTab('pw')\">Change Password<\/button>\n        <a href=\"admin.html\" class=\"btn-dash-sm\" id=\"adminLink\" style=\"display:none\" target=\"_blank\">Admin Panel<\/a>\n      <\/div>\n    <\/div>\n\n    <!-- Dashboard Tabs -->\n    <div class=\"dash-tabs\" id=\"dashTabs\">\n      <button class=\"dash-tab active\" onclick=\"showDashTab('members')\" id=\"dtab-members\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><\/svg>\n        Members\n      <\/button>\n      <button class=\"dash-tab\" onclick=\"showDashTab('card')\" id=\"dtab-card\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/><\/svg>\n        My Card\n      <\/button>\n      <button class=\"dash-tab\" onclick=\"showDashTab('invoice')\" id=\"dtab-invoice\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg>\n        Invoice\n      <\/button>\n      <button class=\"dash-tab\" onclick=\"showDashTab('pw')\" id=\"dtab-pw\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>\n        Password\n      <\/button>\n    <\/div>\n\n    <!-- TAB: MEMBERS -->\n    <div id=\"dtab-members-content\">\n      <div class=\"db-stats\" style=\"margin-bottom:14px\">\n        <div class=\"db-stat\"><div class=\"dsn\" id=\"dbTotal\">0<\/div><div class=\"dsl\">Total<\/div><\/div>\n        <div class=\"db-stat green\"><div class=\"dsn\" id=\"dbActive\">0<\/div><div class=\"dsl\">Active<\/div><\/div>\n        <div class=\"db-stat gold\"><div class=\"dsn\" id=\"dbPending\">0<\/div><div class=\"dsl\">Pending<\/div><\/div>\n      <\/div>\n      <div class=\"tbl-wrap\">\n        <div class=\"tbl-top\">\n          <h3 id=\"dbTableTitle\">Members in Your Area<\/h3>\n          <input class=\"srch\" type=\"text\" placeholder=\"Search...\" oninput=\"filterDashMembers(this.value)\">\n        <\/div>\n        <div class=\"tbl-scroll\">\n          <table>\n            <thead><tr><th>Member<\/th><th>Category<\/th><th>Sub-County<\/th><th>Status<\/th><th>Payment<\/th><th>Date<\/th><th id=\"dbActionsCol\">Actions<\/th><\/tr><\/thead>\n            <tbody id=\"dbTbody\"><\/tbody>\n          <\/table>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- TAB: MY CARD \/ CERT -->\n    <div id=\"dtab-card-content\" class=\"hidden\">\n      <div class=\"card\" style=\"text-align:center\">\n        <p style=\"font-size:.8rem;color:var(--n2);margin-bottom:16px\" id=\"myCardNote\">Your membership card is shown below. Use the print button to print it.<\/p>\n        <div id=\"myCardWrap\">\n          <!-- Populated by JS -->\n          <div style=\"padding:32px;color:var(--n3);font-size:.82rem\" id=\"myCardEmpty\">Loading your card...<\/div>\n        <\/div>\n        <div style=\"display:flex;gap:9px;justify-content:center;flex-wrap:wrap;margin-top:16px\" id=\"myCardActions\" style=\"display:none\">\n          <button class=\"btn btn-purple\" onclick=\"printMyCard()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n            Print Card\n          <\/button>\n          <button class=\"btn btn-ghost\" onclick=\"downloadCard()\">\n            <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n            Download\n          <\/button>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- TAB: INVOICE -->\n    <div id=\"dtab-invoice-content\" class=\"hidden\">\n      <div class=\"card\">\n        <div style=\"display:flex;align-items:center;justify-content:space-between;margin-bottom:20px\">\n          <h3 style=\"font-size:.95rem;font-weight:700;color:var(--p1)\">Payment Invoice<\/h3>\n          <button class=\"btn btn-ghost btn-sm\" onclick=\"printInvoice()\">Print<\/button>\n        <\/div>\n        <div id=\"myInvoiceContent\">\n          <p style=\"font-size:.8rem;color:var(--n3)\">Loading invoice...<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- TAB: CHANGE PASSWORD -->\n    <div id=\"dtab-pw-content\" class=\"hidden\">\n      <div class=\"card\" style=\"max-width:400px;margin:0 auto\">\n        <div class=\"card-hdr\">\n          <div class=\"card-ico\"><svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg><\/div>\n          <h2>Change Password<\/h2>\n        <\/div>\n        <p class=\"card-sub\">Update your portal login password.<\/p>\n        <div class=\"field\" style=\"margin-bottom:12px\">\n          <label>Current Password<\/label>\n          <input type=\"password\" id=\"pw-current\" placeholder=\"Your current password\">\n        <\/div>\n        <div class=\"field\" style=\"margin-bottom:12px\">\n          <label>New Password<\/label>\n          <input type=\"password\" id=\"pw-new\" placeholder=\"Min 6 characters\">\n        <\/div>\n        <div class=\"field\" style=\"margin-bottom:16px\">\n          <label>Confirm New Password<\/label>\n          <input type=\"password\" id=\"pw-confirm\" placeholder=\"Repeat new password\">\n        <\/div>\n        <button class=\"btn btn-purple btn-full\" onclick=\"changeDashPassword()\">Update Password<\/button>\n      <\/div>\n    <\/div>\n\n  <\/div><!-- \/dashSection -->\n\n  <!-- STEP 1: CATEGORY -->\n  <div class=\"card fade-in\" id=\"step1\">\n    <div class=\"card-hdr\">\n      <div class=\"card-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"\/><\/svg><\/div>\n      <h2>Select Membership Category<\/h2>\n    <\/div>\n    <p class=\"card-sub\">Choose your membership type. Fee and output format vary by category.<\/p>\n    <div class=\"cat-grid\" id=\"catGrid\"><\/div>\n    <div style=\"display:flex;justify-content:flex-end;margin-top:16px\">\n      <button class=\"btn btn-purple btn-lg\" onclick=\"goStep(2)\" id=\"btnNext1\" disabled>Continue<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- STEP 2: DETAILS -->\n  <div class=\"card hidden\" id=\"step2\">\n    <div class=\"card-hdr\">\n      <div class=\"card-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg><\/div>\n      <h2>Personal Information<\/h2>\n    <\/div>\n    <p class=\"card-sub\">Fields marked * are required and appear on your membership card.<\/p>\n    <div class=\"photo-row\" id=\"photoRow\" onclick=\"document.getElementById('photoInput').click()\">\n      <div class=\"photo-thumb\" id=\"photoThumb\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n      <\/div>\n      <input type=\"file\" id=\"photoInput\" accept=\"image\/*\" capture=\"user\" style=\"display:none\" onchange=\"handlePhoto(this)\">\n      <div><p style=\"font-size:.8rem;color:var(--n2);font-weight:600\">Tap to take\/upload a face photo <span class=\"req\">*<\/span><\/p><p style=\"font-size:.68rem;color:var(--n3);margin-top:4px\">A clear photo of your face \u2014 not a screenshot. JPG\/PNG, max 2 MB. Appears on your membership card.<\/p><\/div>\n    <\/div>\n    <div class=\"fg\">\n      <div class=\"field s2\"><label>Full Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"f-name\" placeholder=\"As on your ID document\"><\/div>\n      <div class=\"field\">\n        <label>National ID \/ Birth Cert No. <span class=\"req\">*<\/span><\/label>\n        <input type=\"text\" id=\"f-nid\" placeholder=\"Enter your ID\/birth cert number\" onblur=\"checkDuplicate('nid')\">\n        <div id=\"nid-dup-msg\" style=\"display:none;margin-top:6px;padding:10px 13px;background:#fef2f2;border:1px solid #fca5a5;border-radius:7px;font-size:.72rem;color:#991b1b;line-height:1.6\"><\/div>\n      <\/div>\n      <div class=\"field\"><label>Date of Birth <span class=\"req\">*<\/span><\/label><input type=\"date\" id=\"f-dob\" onchange=\"onDobChange()\" max=\"2020-06-20\" min=\"1906-06-20\" oninput=\"onDobChange()\"><\/div>\n      <div class=\"field\"><label>Gender <span class=\"req\">*<\/span><\/label><select id=\"f-gender\"><option value=\"\">Select<\/option><option>Male<\/option><option>Female<\/option><option>Prefer not to say<\/option><\/select><\/div>\n      <div class=\"field\">\n        <label>Phone <span class=\"req\">*<\/span><\/label>\n        <input type=\"tel\" id=\"f-phone\" placeholder=\"07XX XXX XXX\" oninput=\"validatePhone(this)\" onblur=\"checkDuplicate('phone')\">\n        <div id=\"phone-dup-msg\" style=\"display:none;margin-top:6px;padding:10px 13px;background:#fef2f2;border:1px solid #fca5a5;border-radius:7px;font-size:.72rem;color:#991b1b;line-height:1.6\"><\/div>\n      <\/div>\n      <div class=\"field s2\"><label>Email Address<\/label><input type=\"email\" id=\"f-email\" placeholder=\"For card delivery & receipt\"><\/div>\n    <\/div>\n    <div class=\"fg\" style=\"margin-top:12px\">\n      <div class=\"field\"><label>County <span class=\"req\">*<\/span><\/label><select id=\"f-county\" onchange=\"onCountyChange()\"><option value=\"\">Select County<\/option><\/select><\/div>\n      <div class=\"field\"><label>Sub-County <span class=\"req\">*<\/span><\/label><select id=\"f-subcounty\" onchange=\"onSubcountyChange()\"><option value=\"\">Select County first<\/option><\/select><\/div>\n      <div class=\"field\" id=\"unitField\">\n        <label>Scout Unit \/ Group <span class=\"req\">*<\/span><span id=\"unit-age-note\" style=\"font-size:.62rem;color:var(--n3);margin-left:6px;font-weight:400\"><\/span><\/label>\n        <select id=\"f-unit\">\n          <option value=\"\">\u2014 Select your unit (required) \u2014<\/option>\n        <\/select>\n        <div id=\"unit-warn\" style=\"display:none;margin-top:6px;padding:10px 13px;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;font-size:.72rem;color:#92400e;line-height:1.6\">\n          <strong>No units found for your area.<\/strong> A unit must be registered before you can complete membership registration.<br>\n          <button onclick=\"openOverlay('unitOverlay')\" style=\"margin-top:7px;background:#92400e;color:#fff;border:none;padding:6px 14px;border-radius:6px;font-size:.7rem;font-weight:600;cursor:pointer;font-family:inherit\">\n            Register a Unit Now\n          <\/button>\n          <span style=\"margin-left:8px;font-size:.66rem;color:#a16207\">Then return here and select it.<\/span>\n        <\/div>\n        <span class=\"hint\" id=\"unit-hint\" style=\"display:none\">Select the school, group, or troop you belong to.<\/span>\n      <\/div>\n      <div class=\"field\" id=\"sectionField\"><label>Scout Section <span style=\"font-size:.62rem;color:var(--n3);font-weight:400\">(auto-assigned by age)<\/span><\/label><input type=\"text\" id=\"f-section\" readonly style=\"background:var(--n5);cursor:default;color:var(--n2)\" placeholder=\"Assigned based on date of birth\"><\/div>\n      <div id=\"parentNote\" style=\"display:none;background:#fef3c7;border:1px solid #fcd34d;border-radius:7px;padding:8px 12px;font-size:.7rem;color:#92400e;grid-column:span 2\" id=\"parentRequiredNote\">\n        Under 18: guardian name and phone are required. Member phone is optional.\n      <\/div>\n      <div class=\"field\"><label>Parent \/ Guardian Name<\/label><input type=\"text\" id=\"f-parent\" placeholder=\"Optional for adults\"><\/div>\n      <div class=\"field\"><label>Parent \/ Guardian Phone<\/label><input type=\"tel\" id=\"f-parent-phone\" placeholder=\"07XX XXX XXX\" oninput=\"validatePhone(this)\"><\/div>\n      <div class=\"field s2\" style=\"background:var(--n5);border-radius:8px;padding:10px 13px;border:1px solid var(--n4)\">\n        <div style=\"font-size:.7rem;font-weight:600;color:var(--n2);margin-bottom:3px\">Commissioner Assignment<\/div>\n        <div style=\"font-size:.68rem;color:var(--n3);line-height:1.6\">Your sub-county and county commissioners will be automatically assigned based on your county and sub-county selection. No manual entry required.<\/div>\n        <input type=\"hidden\" id=\"f-scc\" value=\"\"><input type=\"hidden\" id=\"f-cc\" value=\"\">\n      <\/div>\n      <div class=\"field s2\"><label>Additional Notes<\/label><textarea id=\"f-notes\" placeholder=\"Any special requirements...\"><\/textarea><\/div>\n    <\/div>\n    <div style=\"display:flex;gap:10px;justify-content:space-between;margin-top:18px\">\n      <button class=\"btn btn-ghost\" onclick=\"goStep(1)\">Back<\/button>\n      <button class=\"btn btn-purple btn-lg\" onclick=\"validateAndNext()\">Continue to Payment<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- STEP 3: PAYMENT -->\n  <div class=\"card hidden\" id=\"step3\">\n    <div class=\"card-hdr\">\n      <div class=\"card-ico\"><svg viewBox=\"0 0 24 24\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/><\/svg><\/div>\n      <h2>Payment<\/h2>\n    <\/div>\n    <p class=\"card-sub\">Payment activates your membership and generates your card immediately.<\/p>\n    <div class=\"fee-box\">\n      <div class=\"fee-row\"><span>Membership Category<\/span><span id=\"feeCat\">\u2014<\/span><\/div>\n      <div class=\"fee-row\"><span>Annual Membership Fee<\/span><span id=\"feeAmt\">\u2014<\/span><\/div>\n      <div class=\"fee-row\"><span>Processing Fee<\/span><span>KES 0<\/span><\/div>\n      <div class=\"fee-row tot\"><span>Total Due<\/span><span id=\"feeTotal\">\u2014<\/span><\/div>\n    <\/div>\n    <div id=\"cardColourPreview\" style=\"display:none;margin-bottom:14px;padding:10px 14px;border-radius:8px;display:flex;align-items:center;gap:10px\">\n      <div id=\"cardColourSwatch\" style=\"width:32px;height:20px;border-radius:4px;flex-shrink:0;border:1px solid rgba(0,0,0,.1)\"><\/div>\n      <div style=\"font-size:.72rem;color:var(--n2)\">Your card colour: <strong id=\"cardColourName\" style=\"color:var(--n0)\">\u2014<\/strong><\/div>\n    <\/div>\n    <div style=\"font-size:.68rem;font-weight:700;color:var(--n3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:10px\">Payment Method<\/div>\n    <div class=\"pay-tabs\">\n      <div class=\"pay-tab on\" id=\"tabSTK\" onclick=\"setPayMethod('stk')\">\n        <div class=\"ptab-ico\"><svg viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n        <div><strong>M-Pesa STK Push<\/strong><span>Prompt sent to phone<\/span><\/div>\n      <\/div>\n      <div class=\"pay-tab\" id=\"tabPaybill\" onclick=\"setPayMethod('paybill')\">\n        <div class=\"ptab-ico\"><svg viewBox=\"0 0 24 24\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg><\/div>\n        <div><strong>M-Pesa Paybill<\/strong><span>Pay manually, enter code<\/span><\/div>\n      <\/div>\n    <\/div>\n    <!-- STK Form -->\n    <div class=\"pay-form\" id=\"frmSTK\">\n      <div class=\"field\" style=\"margin-bottom:12px\">\n        <label>M-Pesa Phone Number <span class=\"req\">*<\/span><\/label>\n        <input type=\"tel\" id=\"stkPhone\" placeholder=\"07XX XXX XXX\" oninput=\"validatePhone(this)\">\n        <span class=\"hint\" style=\"margin-top:4px;display:block\">You will receive an M-Pesa prompt. Have your PIN ready.<\/span>\n      <\/div>\n      <button class=\"btn btn-green btn-full btn-lg\" onclick=\"sendSTK()\">\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><\/svg>\n        Send M-Pesa Request \u2014 KES <span id=\"stkAmt\">\u2014<\/span>\n      <\/button>\n    <\/div>\n    <!-- Paybill Form -->\n    <div class=\"pay-form\" id=\"frmPaybill\" style=\"display:none\">\n      <div style=\"background:var(--g3);border:1px solid #86efac;border-radius:8px;padding:13px 15px;margin-bottom:13px\">\n        <div style=\"font-size:.76rem;font-weight:700;color:var(--g1);margin-bottom:9px\">Pay via M-Pesa Paybill<\/div>\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px\">\n          <div><div style=\"font-size:.6rem;color:#4ade80;font-weight:600;text-transform:uppercase\">Business No.<\/div><div style=\"font-size:.86rem;font-weight:800;color:var(--g1)\" id=\"pbBiz\">000000<\/div><\/div>\n          <div><div style=\"font-size:.6rem;color:#4ade80;font-weight:600;text-transform:uppercase\">Account \/ Ref<\/div><div style=\"font-size:.86rem;font-weight:800;color:var(--g1)\" id=\"pbAcc\">\u2014<\/div><\/div>\n          <div style=\"grid-column:span 2\"><div style=\"font-size:.6rem;color:#4ade80;font-weight:600;text-transform:uppercase\">Amount<\/div><div style=\"font-size:.86rem;font-weight:800;color:var(--g1)\" id=\"pbAmt\">\u2014<\/div><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"field\" style=\"margin-bottom:12px\">\n        <label>M-Pesa Confirmation Code <span class=\"req\">*<\/span><\/label>\n        <input type=\"text\" id=\"pbCode\" placeholder=\"e.g. QAB1234XYZ\" style=\"text-transform:uppercase\" oninput=\"this.value=this.value.toUpperCase()\">\n        <span class=\"hint\" style=\"margin-top:4px;display:block\">Enter the code from the M-Pesa SMS exactly as received.<\/span>\n      <\/div>\n      <button class=\"btn btn-green btn-full btn-lg\" onclick=\"confirmPaybill()\">\n        <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n        Confirm Payment\n      <\/button>\n    <\/div>\n    <!-- STK Pending -->\n    <div class=\"stk-pending hidden\" id=\"stkPending\">\n      <div class=\"stk-phone\"><svg viewBox=\"0 0 24 24\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg><\/div>\n      <h3 style=\"font-size:.95rem;font-weight:700;margin-bottom:6px\">Waiting for M-Pesa Payment\u2026<\/h3>\n      <p style=\"font-size:.76rem;color:var(--n3);line-height:1.7;max-width:260px;margin:0 auto\">Prompt sent to <strong id=\"stkTarget\"><\/strong>. Enter your PIN to complete.<\/p>\n      <div class=\"prog-bar\"><div class=\"prog-fill\"><\/div><\/div>\n      <p style=\"font-size:.64rem;color:var(--n3)\">Updates automatically once confirmed.<\/p>\n      <button class=\"btn btn-ghost\" style=\"margin-top:12px\" onclick=\"cancelSTK()\">Cancel<\/button>\n    <\/div>\n    <div style=\"display:flex;gap:10px;margin-top:16px\">\n      <button class=\"btn btn-ghost\" onclick=\"goStep(2)\" id=\"backBtn2\">Back<\/button>\n    <\/div>\n  <\/div>\n\n  <!-- STEP 4: OUTPUT -->\n  <div class=\"card hidden\" id=\"step4\">\n    <div style=\"text-align:center;padding:6px 0 18px\">\n      <div class=\"suc-icon\"><svg viewBox=\"0 0 24 24\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg><\/div>\n      <h2 style=\"font-size:1.2rem;font-weight:800;color:var(--n0);margin-bottom:5px\">Registration Complete<\/h2>\n      <p style=\"font-size:.82rem;color:var(--n2);margin-bottom:12px\">Your <span id=\"outLabel\">membership card<\/span> is ready.<\/p>\n      <div class=\"ref-badge\" id=\"refDisplay\">KSA-XXXXXXXX<\/div>\n    <\/div>\n    <!-- ID Card -->\n    <div id=\"cardOut\" class=\"card-wrap\">\n      <div class=\"id-card\" id=\"idCardEl\">\n        <div class=\"ic-topbar\" id=\"icTopbar\"><\/div>\n        <div class=\"ic-inner\">\n          <div class=\"ic-hdr\">\n            <img decoding=\"async\" class=\"ic-logo\" id=\"icLogoImg\" src=\"https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo_icon.png?v=1.2.0\"\n              onerror=\"this.onerror=null;this.style.display='none'\"\n              alt=\"KSA\">\n            <div class=\"ic-org\">\n              <span class=\"ic-org-name\">Kenya Scouts Association<\/span>\n              <span class=\"ic-org-sub\">Do Your Best \u2014 Jitahidi Zaidi<\/span>\n            <\/div>\n            <div class=\"ic-tag\" id=\"icTag\">SCOUT<\/div>\n          <\/div>\n          <div class=\"ic-body\">\n            <div class=\"ic-photo\" id=\"icPhoto\">\n              <svg viewBox=\"0 0 24 24\"><path d=\"M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2\"\/><circle cx=\"12\" cy=\"7\" r=\"4\"\/><\/svg>\n            <\/div>\n            <div class=\"ic-info\">\n              <div>\n                <div class=\"ic-name\" id=\"icName\">MEMBER NAME<\/div>\n                <div class=\"ic-status\"><span class=\"ic-status-dot\"><\/span><span class=\"ic-status-txt\" id=\"icStatus\">Active<\/span><\/div>\n              <\/div>\n              <div class=\"ic-fields\">\n                <div class=\"ic-f\"><span class=\"ic-fl\">Section<\/span><span class=\"ic-fv\" id=\"icSection\">\u2014<\/span><\/div>\n                <div class=\"ic-f\"><span class=\"ic-fl\">Unit \/ Group<\/span><span class=\"ic-fv\" id=\"icUnit\">\u2014<\/span><\/div>\n                <div class=\"ic-f\"><span class=\"ic-fl\">Sub-County<\/span><span class=\"ic-fv\" id=\"icSC\">\u2014<\/span><\/div>\n                <div class=\"ic-f\"><span class=\"ic-fl\">County<\/span><span class=\"ic-fv\" id=\"icCounty\">\u2014<\/span><\/div>\n                <div class=\"ic-f\"><span class=\"ic-fl\">Gender<\/span><span class=\"ic-fv\" id=\"icGender\">\u2014<\/span><\/div>\n                <div class=\"ic-f\"><span class=\"ic-fl\">Issued<\/span><span class=\"ic-fv\" id=\"icIssued\">\u2014<\/span><\/div>\n              <\/div>\n            <\/div>\n            <div class=\"ic-qr-block\">\n              <div class=\"ic-qr\" id=\"icQR\"><\/div>\n              <span class=\"ic-qr-lbl\">Scan to verify<\/span>\n            <\/div>\n          <\/div>\n          <div class=\"ic-ftr\">\n            <span class=\"ic-memno\" id=\"icMemno\">KSA\/SC\/NBI\/1001<\/span>\n            <span class=\"ic-exp\">Valid until <strong id=\"icExp\">31 Dec 2027<\/strong><\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <!-- Certificate -->\n    <div id=\"certOut\" class=\"cert-wrap hidden\">\n      <div class=\"certificate\" id=\"certEl\">\n        <div class=\"cert-border\"><\/div>\n        <div class=\"cert-hdr\">\n          <img decoding=\"async\" class=\"cert-logo-img\" src=\"https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo_icon.png?v=1.2.0\"\n              onerror=\"this.onerror=null;this.style.display='none'\"\n              alt=\"KSA\">\n          <div class=\"cert-orgname\">Kenya Scouts Association<\/div>\n          <div class=\"cert-motto\">Do Your Best \u2014 Jitahidi Zaidi<\/div>\n          <div class=\"cert-div\"><\/div>\n          <div class=\"cert-title\" id=\"certTitle\">CERTIFICATE OF REGISTRATION<\/div>\n          <div class=\"cert-subtitle\" id=\"certSubtitle\">Annual Membership 2026\u20132027<\/div>\n        <\/div>\n        <div class=\"cert-body\">\n          <p>This certifies that<\/p>\n          <div class=\"cert-name\" id=\"certName\">MEMBER NAME<\/div>\n          <p>is duly registered as a member of the Kenya Scouts Association and is entitled to all rights and privileges thereto.<\/p>\n        <\/div>\n        <div class=\"cert-dg\">\n          <div class=\"cert-di\"><div class=\"di-l\">Membership No.<\/div><div class=\"di-v\" id=\"certMemno\">\u2014<\/div><\/div>\n          <div class=\"cert-di\"><div class=\"di-l\">Category<\/div><div class=\"di-v\" id=\"certCat\">\u2014<\/div><\/div>\n          <div class=\"cert-di\"><div class=\"di-l\">County<\/div><div class=\"di-v\" id=\"certCounty\">\u2014<\/div><\/div>\n          <div class=\"cert-di\"><div class=\"di-l\">Valid Until<\/div><div class=\"di-v\">31 December 2027<\/div><\/div>\n          <div class=\"cert-di\"><div class=\"di-l\">Reference<\/div><div class=\"di-v\" id=\"certRef\">\u2014<\/div><\/div>\n          <div class=\"cert-di\"><div class=\"di-l\">Date Issued<\/div><div class=\"di-v\" id=\"certDate\">\u2014<\/div><\/div>\n        <\/div>\n        <div class=\"cert-ftr\">\n          <div class=\"cert-sig\"><div class=\"sig-l\"><\/div><div class=\"sig-n\">National Commissioner<\/div><div class=\"sig-t\">Kenya Scouts Association<\/div><\/div>\n          <div class=\"cert-qr\" id=\"certQR\"><div class=\"qr-l\">Scan to Verify<\/div><\/div>\n          <div class=\"cert-sig\"><div class=\"sig-l\"><\/div><div class=\"sig-n\" id=\"certCCName\">County Commissioner<\/div><div class=\"sig-t\" id=\"certCCSub\">County<\/div><\/div>\n        <\/div>\n      <\/div>\n    <\/div>\n    <div class=\"action-btns\">\n      <button class=\"btn btn-purple\" onclick=\"printOutput()\">\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n        Print Card\n      <\/button>\n      <button class=\"btn btn-ghost\" onclick=\"resetForm()\">Register Another<\/button>\n      <button class=\"btn btn-ghost\" onclick=\"openOverlay('verifyOverlay')\">Verify<\/button>\n    <\/div>\n    <div style=\"margin-top:14px;padding:11px 14px;background:var(--n5);border-radius:8px;border:1px solid var(--n4);text-align:center\">\n      <p style=\"font-size:.68rem;color:var(--n3)\">Payment Ref: <strong id=\"payRefDisplay\" style=\"color:var(--g1)\">\u2014<\/strong> &nbsp;|&nbsp; Expires <strong>31 December 2027<\/strong><\/p>\n      <p style=\"font-size:.64rem;color:var(--n3);margin-top:3px\">A confirmation has been sent to your email address.<\/p>\n      <div id=\"loginCredNote\" style=\"display:none;margin-top:12px;padding:14px 16px;background:var(--p4);border-radius:8px;border:1.5px solid var(--p3);text-align:left\">\n        <div style=\"font-size:.76rem;font-weight:800;color:var(--p1);margin-bottom:8px\">Your Staff Portal Login<\/div>\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px\">\n          <div style=\"background:#fff;border-radius:7px;padding:10px 12px;border:1px solid var(--p3)\">\n            <div style=\"font-size:.58rem;font-weight:700;color:var(--p3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px\">Username<\/div>\n            <div style=\"font-size:.82rem;font-weight:800;font-family:monospace;color:var(--p1)\" id=\"credUser\">\u2014<\/div>\n          <\/div>\n          <div style=\"background:#fff;border-radius:7px;padding:10px 12px;border:1px solid var(--p3)\">\n            <div style=\"font-size:.58rem;font-weight:700;color:var(--p3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px\">Password<\/div>\n            <div style=\"font-size:.82rem;font-weight:800;font-family:monospace;color:var(--p1)\" id=\"credPass\">\u2014<\/div>\n          <\/div>\n        <\/div>\n        <div style=\"font-size:.66rem;color:var(--n2);line-height:1.6;margin-bottom:8px\">Use these to log in next time via the <strong>Existing Member<\/strong> tab on the portal. These credentials have also been sent to your email.<\/div>\n        <a href=\"https:\/\/ksa.kenyascouts.com\/\" onclick=\"event.preventDefault();document.getElementById('loginScreen').style.display='';setLoginMode('staff')\" style=\"display:inline-block;background:var(--p1);color:#fff;text-decoration:none;font-size:.72rem;font-weight:700;padding:7px 16px;border-radius:6px;cursor:pointer\">Sign In (Existing Member)<\/a>\n      <\/div>\n      <div id=\"confirmRetryNote\" style=\"display:none;margin-top:12px;padding:12px 14px;background:#fef2f2;border-radius:8px;border:1.5px solid #fca5a5;text-align:left\">\n        <div style=\"font-size:.72rem;font-weight:700;color:#991b1b;margin-bottom:6px\">We couldn't reach the server to finish setting up your account.<\/div>\n        <div style=\"font-size:.66rem;color:#7f1d1d;line-height:1.6;margin-bottom:8px\">Your card above is ready, but your dashboard login and welcome email may not have been created yet. Check your internet connection and tap below to try again \u2014 this is safe to repeat.<\/div>\n        <button onclick=\"retryConfirmation()\" id=\"btnRetryConfirm\" style=\"background:#991b1b;color:#fff;border:none;padding:7px 16px;border-radius:6px;font-size:.72rem;font-weight:700;cursor:pointer;font-family:inherit\">Retry Now<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<\/div><!-- \/main -->\n\n<!-- VERIFY MODAL -->\n<div class=\"overlay\" id=\"verifyOverlay\">\n  <div class=\"modal\">\n    <div class=\"modal-hdr\"><h3>Verify Membership<\/h3><button class=\"modal-x\" onclick=\"closeOverlay('verifyOverlay')\">&#x2715;<\/button><\/div>\n    <div class=\"modal-body\">\n      <p style=\"font-size:.78rem;color:var(--n2);margin-bottom:14px\">Enter the membership number or reference code from the card.<\/p>\n      <div style=\"display:flex;gap:9px;margin-bottom:14px\">\n        <input type=\"text\" id=\"verifyInput\" placeholder=\"KSA-XXXXXXXX or KSA\/SC\/NBI\/1001\" style=\"flex:1\" onkeydown=\"if(event.key==='Enter')doVerify()\">\n        <button class=\"btn btn-purple\" onclick=\"doVerify()\">Check<\/button>\n      <\/div>\n      <div id=\"verifyResult\"><\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- UNIT MODAL -->\n<div class=\"overlay\" id=\"unitOverlay\">\n  <div class=\"modal\" style=\"max-width:520px;margin:auto\">\n    <div class=\"modal-hdr\">\n      <h3>Register Scout Unit \/ Group<\/h3>\n      <button class=\"modal-x\" onclick=\"closeOverlay('unitOverlay')\">&#x2715;<\/button>\n    <\/div>\n    <!-- STEP 1: FORM -->\n    <div id=\"unitFormFields\">\n      <div class=\"modal-body\" style=\"padding-top:10px\">\n        <div style=\"background:var(--p4);border-left:3px solid var(--p3);padding:10px 13px;border-radius:7px;font-size:.74rem;color:var(--n2);margin-bottom:14px;line-height:1.6\">\n          Once registered, your unit will appear in the unit selection list when members register.\n        <\/div>\n        <div style=\"background:var(--a4);border:1px solid rgba(217,119,6,.25);border-radius:7px;padding:11px 13px;margin-bottom:14px;font-size:.72rem\">\n          <strong style=\"color:var(--a2)\">Registration Fees<\/strong>\n          <div style=\"margin-top:6px;display:grid;grid-template-columns:1fr auto;gap:4px;color:var(--n2)\">\n            <span>School \/ Scout Unit<\/span><span style=\"font-weight:700;color:var(--n0)\">KES 2,000<\/span>\n            <span>Sub-County Group<\/span><span style=\"font-weight:700;color:var(--n0)\">KES 1,000<\/span>\n            <span>County Group<\/span><span style=\"font-weight:700;color:var(--n0)\">KES 2,000<\/span>\n          <\/div>\n        <\/div>\n        <div class=\"field\" style=\"margin-bottom:12px\"><label>Unit \/ Group Name <span class=\"req\">*<\/span><\/label><input type=\"text\" id=\"un-name\" placeholder=\"e.g. Westlands Scout Group\"><\/div>\n        <div class=\"fg\" style=\"margin-bottom:12px\">\n          <div class=\"field\"><label>County <span class=\"req\">*<\/span><\/label><select id=\"un-county\" onchange=\"populateUnitSC()\"><option value=\"\">Select County<\/option><\/select><\/div>\n          <div class=\"field\"><label>Sub-County<\/label><select id=\"un-subcounty\"><option value=\"\">Select County first<\/option><\/select><\/div>\n        <\/div>\n        <div class=\"field\" style=\"margin-bottom:12px\">\n          <label>Unit Type \/ Section<\/label>\n          <select id=\"un-section\" onchange=\"document.getElementById('unitFeeHint').textContent='Fee: KES '+getUnitFee(this.value).toLocaleString()\">\n            <option value=\"\">School \/ All Sections \u2014 KES 2,000<\/option>\n            <option value=\"Sungura\">Sungura (6\u201311 yrs) \u2014 KES 2,000<\/option>\n            <option value=\"Chipukizi\">Chipukizi (12\u201314 yrs) \u2014 KES 2,000<\/option>\n            <option value=\"Mwamba\">Mwamba (15\u201317 yrs) \u2014 KES 2,000<\/option>\n            <option value=\"Jasiri\">Jasiri (18\u201326 yrs) \u2014 KES 2,000<\/option>\n            <option value=\"Rover\">Rover \/ Adult (18+ yrs) \u2014 KES 2,000<\/option>\n            <option value=\"Subcounty\">Sub-County Group \u2014 KES 1,000<\/option>\n            <option value=\"County\">County Group \u2014 KES 2,000<\/option>\n          <\/select>\n          <span class=\"hint\" id=\"unitFeeHint\" style=\"margin-top:4px;display:block\">Fee: KES 2,000<\/span>\n        <\/div>\n        <div class=\"fg\">\n          <div class=\"field\"><label>Contact Person<\/label><input type=\"text\" id=\"un-contact\" placeholder=\"Unit leader name\"><\/div>\n          <div class=\"field\"><label>Contact Phone<\/label><input type=\"tel\" id=\"un-phone\" placeholder=\"07XX XXX XXX\" oninput=\"validatePhone(this)\"><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"modal-ftr\">\n        <button class=\"btn btn-ghost\" onclick=\"closeOverlay('unitOverlay')\">Cancel<\/button>\n        <button class=\"btn btn-purple\" onclick=\"submitUnit()\">Continue to Payment &rarr;<\/button>\n      <\/div>\n    <\/div>\n    <!-- STEP 2: PAYMENT -->\n    <div id=\"unitPayStep\" style=\"display:none\">\n      <div class=\"modal-body\">\n        <div style=\"text-align:center;margin-bottom:18px\">\n          <div style=\"font-size:.78rem;color:var(--n3);margin-bottom:3px\">Registering unit<\/div>\n          <div style=\"font-size:.88rem;font-weight:700;color:var(--n0)\" id=\"unitPayName\"><\/div>\n          <div style=\"font-size:1.5rem;font-weight:800;color:var(--p1);margin-top:8px\">KES <span id=\"unitPayAmount\"><\/span><\/div>\n          <div style=\"font-size:.7rem;color:var(--n3);margin-top:3px\">One-time registration fee<\/div>\n        <\/div>\n        <!-- Payment tabs -->\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:14px\">\n          <div id=\"uTabSTK\" onclick=\"setUnitPayMethod('stk')\" style=\"cursor:pointer;border:2px solid var(--g1);background:var(--g3);border-radius:9px;padding:11px;display:flex;align-items:center;gap:9px\">\n            <div style=\"width:32px;height:32px;border-radius:7px;background:var(--g1);display:flex;align-items:center;justify-content:center;flex-shrink:0\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\" stroke-linecap=\"round\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><\/svg>\n            <\/div>\n            <div><div style=\"font-size:.76rem;font-weight:700;color:var(--g1)\">STK Push<\/div><div style=\"font-size:.62rem;color:var(--n3)\">Prompt to phone<\/div><\/div>\n          <\/div>\n          <div id=\"uTabPB\" onclick=\"setUnitPayMethod('paybill')\" style=\"cursor:pointer;border:2px solid var(--n4);border-radius:9px;padding:11px;display:flex;align-items:center;gap:9px\">\n            <div style=\"width:32px;height:32px;border-radius:7px;background:var(--n4);display:flex;align-items:center;justify-content:center;flex-shrink:0\">\n              <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--n2)\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/><\/svg>\n            <\/div>\n            <div><div style=\"font-size:.76rem;font-weight:700;color:var(--n2)\">Paybill<\/div><div style=\"font-size:.62rem;color:var(--n3)\">Enter code manually<\/div><\/div>\n          <\/div>\n        <\/div>\n        <!-- STK form (default shown) -->\n        <div id=\"unitPayForm\" style=\"background:var(--n5);border-radius:8px;padding:14px;border:1px solid var(--n4)\">\n          <div class=\"field\" style=\"margin-bottom:12px\">\n            <label>M-Pesa Phone <span class=\"req\">*<\/span><\/label>\n            <input type=\"tel\" id=\"unitStkPhone\" placeholder=\"07XX XXX XXX\" oninput=\"validatePhone(this)\">\n            <span class=\"hint\" style=\"display:block;margin-top:4px\">You will receive an M-Pesa prompt on this number.<\/span>\n          <\/div>\n          <button class=\"btn btn-green btn-full\" onclick=\"sendUnitSTK()\">Send M-Pesa Request<\/button>\n        <\/div>\n        <!-- Paybill form -->\n        <div id=\"unitPaybillForm\" style=\"display:none;background:var(--n5);border-radius:8px;padding:14px;border:1px solid var(--n4)\">\n          <div style=\"background:var(--g3);border:1px solid #86efac;border-radius:7px;padding:12px;margin-bottom:12px;font-size:.74rem;color:var(--g1)\">\n            <div style=\"font-weight:700;margin-bottom:6px\">Pay via M-Pesa Paybill<\/div>\n            <div>Business No: <strong>000000<\/strong><\/div>\n            <div>Account No: <strong>KSA-UNIT<\/strong><\/div>\n            <div>Amount: <strong>KES <span id=\"unitPbAmt\"><\/span><\/strong><\/div>\n          <\/div>\n          <div class=\"field\" style=\"margin-bottom:12px\">\n            <label>M-Pesa Confirmation Code <span class=\"req\">*<\/span><\/label>\n            <input type=\"text\" id=\"unitPbCode\" placeholder=\"e.g. QAB1234XYZ\" oninput=\"this.value=this.value.toUpperCase()\">\n          <\/div>\n          <button class=\"btn btn-green btn-full\" onclick=\"confirmUnitPaybill()\">Confirm Payment<\/button>\n        <\/div>\n        <!-- Waiting for STK -->\n        <div id=\"unitStkPending\" style=\"display:none;text-align:center;padding:20px 10px\">\n          <div style=\"width:52px;height:52px;border-radius:50%;background:var(--g1);margin:0 auto 12px;display:flex;align-items:center;justify-content:center\">\n            <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#fff\" stroke-width=\"2\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\"\/><\/svg>\n          <\/div>\n          <div style=\"font-size:.88rem;font-weight:700;color:var(--n0);margin-bottom:6px\">Waiting for M-Pesa\u2026<\/div>\n          <div style=\"font-size:.74rem;color:var(--n3)\">Prompt sent to <strong id=\"unitStkTarget\"><\/strong><\/div>\n          <div style=\"font-size:.7rem;color:var(--n3);margin-top:4px\">Enter your M-Pesa PIN to complete payment.<\/div>\n        <\/div>\n      <\/div>\n      <div class=\"modal-ftr\">\n        <button class=\"btn btn-ghost\" onclick=\"document.getElementById('unitFormFields').style.display='block';document.getElementById('unitPayStep').style.display='none';document.getElementById('unitStkPending').style.display='none';document.getElementById('unitPayForm').style.display='block';document.getElementById('unitPaybillForm').style.display='none'\">\u2190 Back<\/button>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- FOOTER -->\n<div class=\"footer\">\n  <p><strong>Kenya Scouts Association<\/strong> \u2014 Member Registration Portal<\/p>\n  <p style=\"margin-top:5px\">Hurlingham Road, Nairobi | P.O. Box 41422\u201300100 | info@kenyascouts.org<\/p>\n  <div class=\"footer-links\">\n    <a href=\"https:\/\/kenyascouts.org\" target=\"_blank\">kenyascouts.org<\/a>\n    <a href=\"#\" onclick=\"openOverlay('verifyOverlay')\">Verify Card<\/a>\n    <a href=\"#\" onclick=\"openOverlay('unitOverlay')\">Register Unit<\/a>\n  <\/div>\n  <p style=\"margin-top:10px;font-size:.6rem;opacity:.35\">Powered by OpeniT &copy; 2026 Kenya Scouts Association<\/p>\n<\/div>\n\n\n\n\n<!-- \u2550\u2550 STAFF FULL-SCREEN DASHBOARD \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<div class=\"staff-layout\" id=\"staffLayout\">\n\n  <!-- Sidebar overlay (mobile) -->\n  <div class=\"staff-sb-overlay\" id=\"staffSbOverlay\" onclick=\"closeStaffSidebar()\"><\/div>\n\n  <!-- Sidebar -->\n  <div class=\"staff-sidebar\" id=\"staffSidebar\">\n    <div class=\"staff-sb-brand\">\n      <div class=\"staff-sb-brand-fb\">\n        <img decoding=\"async\" src=\"https:\/\/ksa.kenyascouts.com\/wp-content\/themes\/KSA_WordPress_Theme_FIXED-2\/assets\/img\/ksa_logo.png?v=1.2.0\" \n          onerror=\"this.onerror=null;this.style.display='none';document.getElementById('sbLogoFb').style.display='block'\" \n          alt=\"KSA\" style=\"height:30px;width:auto;filter:brightness(0) invert(1)\">\n        <svg viewBox=\"0 0 24 24\" id=\"sbLogoFb\" style=\"display:none;width:20px;height:20px;stroke:#f5c518;fill:none;stroke-width:1.8;stroke-linecap:round\"><path d=\"M12 2l3 8h8l-6.5 4.7 2.5 7.8L12 18l-6.5 4.5 2.5-7.8L2 10h8z\"\/><\/svg>\n      <\/div>\n      <div class=\"staff-sb-brand-text\"><strong>KSA Portal<\/strong><span>Member Dashboard<\/span><\/div>\n    <\/div>\n\n    <!-- Profile in sidebar -->\n    <div class=\"staff-sb-profile\">\n      <div class=\"staff-sb-avatar\" id=\"sbAvatar\">?<\/div>\n      <div class=\"staff-sb-profile-info\">\n        <div class=\"staff-sb-name\" id=\"sbName\">Loading\u2026<\/div>\n        <div class=\"staff-sb-role\" id=\"sbRole\">\u2014<\/div>\n        <div class=\"staff-sb-memno\" id=\"sbMemno\"><\/div>\n      <\/div>\n    <\/div>\n\n    <nav class=\"staff-nav\">\n      <div class=\"staff-nav-section\">Dashboard<\/div>\n      <div class=\"staff-nav-item on\" onclick=\"staffNav('overview')\" id=\"snav-overview\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"3\" width=\"7\" height=\"7\"\/><rect x=\"14\" y=\"14\" width=\"7\" height=\"7\"\/><rect x=\"3\" y=\"14\" width=\"7\" height=\"7\"\/><\/svg>Overview\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('members')\" id=\"snav-members\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><\/svg>Members\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('mycard')\" id=\"snav-mycard\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"1\" y=\"4\" width=\"22\" height=\"16\" rx=\"2\"\/><line x1=\"1\" y1=\"10\" x2=\"23\" y2=\"10\"\/><\/svg>My Card\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('invoice')\" id=\"snav-invoice\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\/><polyline points=\"14 2 14 8 20 8\"\/><\/svg>Invoice\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('password')\" id=\"snav-password\">\n        <svg viewBox=\"0 0 24 24\"><rect x=\"3\" y=\"11\" width=\"18\" height=\"11\" rx=\"2\"\/><path d=\"M7 11V7a5 5 0 0 1 10 0v4\"\/><\/svg>Change Password\n      <\/div>\n      <div class=\"staff-nav-item hidden\" onclick=\"staffNav('approvals')\" id=\"snav-approvals\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 11l3 3L22 4\"\/><path d=\"M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11\"\/><\/svg>Pending Approvals\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('progress')\" id=\"snav-progress\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 20v-6M6 20V10M18 20V4\"\/><\/svg>Progressive Scheme\n      <\/div>\n      <div class=\"staff-nav-section\" data-section=\"tools\">Tools<\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('reports')\" id=\"snav-reports\">\n        <svg viewBox=\"0 0 24 24\"><line x1=\"18\" y1=\"20\" x2=\"18\" y2=\"10\"\/><line x1=\"12\" y1=\"20\" x2=\"12\" y2=\"4\"\/><line x1=\"6\" y1=\"20\" x2=\"6\" y2=\"14\"\/><\/svg>Reports &amp; Analytics\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('import')\" id=\"snav-import\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/><\/svg>Import \/ Export\n      <\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffNav('bulk')\" id=\"snav-bulk\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>Bulk Actions\n      <\/div>\n      <div id=\"snav-admin-link-item\" class=\"staff-nav-item hidden\" onclick=\"window.open((window.KSA_CONFIG&&window.KSA_CONFIG.siteUrl?window.KSA_CONFIG.siteUrl.replace(\/\\\/$\/,''):'')+'\/wp-admin\/themes.php?page=ksa-settings','_blank')\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M12 20h9\"\/><path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z\"\/><\/svg>System Settings\n      <\/div>\n      <div class=\"staff-nav-section\">Account<\/div>\n      <div class=\"staff-nav-item\" onclick=\"staffLogout()\">\n        <svg viewBox=\"0 0 24 24\"><path d=\"M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4\"\/><polyline points=\"16 17 21 12 16 7\"\/><line x1=\"21\" y1=\"12\" x2=\"9\" y2=\"12\"\/><\/svg>Logout\n      <\/div>\n    <\/nav>\n\n    <div class=\"staff-sb-footer\"><p>Powered by OpeniT<\/p><\/div>\n  <\/div>\n\n  <!-- Main area -->\n  <div class=\"staff-main\">\n    <div class=\"staff-topbar\">\n      <div class=\"staff-topbar-left\">\n        <button class=\"staff-menu-btn\" onclick=\"toggleStaffSidebar()\">\n          <svg viewBox=\"0 0 24 24\"><line x1=\"3\" y1=\"6\" x2=\"21\" y2=\"6\"\/><line x1=\"3\" y1=\"12\" x2=\"21\" y2=\"12\"\/><line x1=\"3\" y1=\"18\" x2=\"21\" y2=\"18\"\/><\/svg>\n        <\/button>\n        <div class=\"staff-page-title\" id=\"staffPageTitle\">Overview<\/div>\n      <\/div>\n      <div class=\"staff-topbar-right\">\n        <button class=\"btn btn-outline btn-sm\" onclick=\"openOverlay('unitOverlay')\" style=\"font-size:.72rem;padding:6px 13px\">\n          <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n          Register Unit\n        <\/button>\n        <button class=\"btn-sm btn-sm-ghost\" onclick=\"loadDashboard()\" style=\"padding:6px 12px;font-size:.7rem\">\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"23 4 23 10 17 10\"\/><path d=\"M20.49 15a9 9 0 1 1-.07-7.48\"\/><\/svg>\n        <\/button>\n        <button class=\"btn-sm btn-sm-ghost\" onclick=\"staffLogout()\" style=\"padding:6px 12px;font-size:.7rem\">Logout<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"staff-content\">\n\n      <!-- OVERVIEW PAGE -->\n      <div id=\"spage-overview\">\n        <div class=\"staff-stats\">\n          <div class=\"staff-stat\"><div class=\"sn\" id=\"sst-total\">0<\/div><div class=\"sl\">Total Members<\/div><\/div>\n          <div class=\"staff-stat g\"><div class=\"sn\" id=\"sst-active\">0<\/div><div class=\"sl\">Active \/ Paid<\/div><\/div>\n          <div class=\"staff-stat a\"><div class=\"sn\" id=\"sst-pending\">0<\/div><div class=\"sl\">Pending<\/div><\/div>\n        <\/div>\n        <!-- Recent registrations quick table -->\n        <div class=\"staff-tbl\">\n          <div class=\"staff-tbl-top\">\n            <h3>Recent Registrations<\/h3>\n            <button class=\"btn-sm btn-sm-ghost\" onclick=\"staffNav('members')\" style=\"padding:5px 12px;font-size:.7rem\">View All<\/button>\n          <\/div>\n          <div class=\"staff-tbl-scroll\">\n            <table>\n              <thead><tr><th>Member<\/th><th>Category<\/th><th>Sub-County<\/th><th>Status<\/th><th>Payment<\/th><\/tr><\/thead>\n              <tbody id=\"sRecent\"><\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- MEMBERS PAGE -->\n      <div id=\"spage-members\" class=\"hidden\">\n        <div class=\"staff-tbl\">\n          <div class=\"staff-tbl-top\">\n            <h3 id=\"sMembersTitle\">Members<\/h3>\n            <div style=\"display:flex;gap:8px;flex-wrap:wrap\">\n              <input type=\"text\" placeholder=\"Search\u2026\" oninput=\"filterStaffMembers(this.value)\"\n                style=\"padding:6px 11px;border:1.5px solid var(--n4);border-radius:7px;font-size:.74rem;font-family:inherit;outline:none;width:180px\">\n              <button class=\"btn-sm btn-sm-ghost\" onclick=\"openStaffAddMember()\" id=\"sAddMemberBtn\" style=\"padding:6px 12px;font-size:.72rem\">+ Add Member<\/button>\n            <\/div>\n          <\/div>\n          <div class=\"staff-tbl-scroll\">\n            <table>\n              <thead><tr><th>Member<\/th><th>Category<\/th><th>Sub-County<\/th><th>Status<\/th><th>Payment<\/th><th>Date<\/th><th>Actions<\/th><\/tr><\/thead>\n              <tbody id=\"sMembersBody\"><\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- MY CARD PAGE -->\n      <div id=\"spage-mycard\" class=\"hidden\">\n        <div style=\"max-width:520px\">\n          <div class=\"staff-card-display\" id=\"sMyCardDisplay\">\n            <div style=\"padding:32px;text-align:center;color:var(--n3);font-size:.8rem\">Loading your card\u2026<\/div>\n          <\/div>\n          <div style=\"display:flex;gap:9px;justify-content:center;flex-wrap:wrap\">\n            <button class=\"btn btn-purple\" onclick=\"printStaffCard()\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n              Print Card\n            <\/button>\n            <button class=\"btn btn-ghost\" onclick=\"printStaffCard()\">\n              <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n              Save as PDF\n            <\/button>\n          <\/div>\n          <p style=\"font-size:.68rem;color:var(--n3);text-align:center;margin-top:12px\">Use \"Save as PDF\" in the print dialog to download your card.<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- INVOICE PAGE -->\n      <div id=\"spage-invoice\" class=\"hidden\">\n        <div style=\"display:flex;gap:9px;margin-bottom:12px;flex-wrap:wrap\">\n          <button class=\"btn-sm btn-sm-ghost\" onclick=\"printStaffInvoice()\" style=\"padding:7px 14px;font-size:.74rem;background:#fff;border:1.5px solid var(--n4);border-radius:7px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n            Print Invoice\n          <\/button>\n          <button class=\"btn-sm btn-sm-ghost\" onclick=\"downloadStaffInvoice()\" style=\"padding:7px 14px;font-size:.74rem;background:#fff;border:1.5px solid var(--n4);border-radius:7px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px\">\n            <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n            Download PDF\n          <\/button>\n        <\/div>\n        <div class=\"staff-invoice\" id=\"sInvoiceContent\">\n          <p style=\"color:var(--n3);font-size:.8rem\">Loading invoice\u2026<\/p>\n        <\/div>\n      <\/div>\n\n      <!-- PASSWORD PAGE -->\n      <div id=\"spage-password\" class=\"hidden\">\n        <div class=\"staff-pw-form\">\n          <h3 style=\"font-size:.9rem;font-weight:700;color:var(--p1);margin-bottom:16px\">Change Your Password<\/h3>\n          <div class=\"field\" style=\"margin-bottom:12px\"><label>Current Password<\/label><input type=\"password\" id=\"sCurPw\" placeholder=\"Enter current password\"><\/div>\n          <div class=\"field\" style=\"margin-bottom:12px\"><label>New Password (min 6 characters)<\/label><input type=\"password\" id=\"sNewPw\" placeholder=\"New password\"><\/div>\n          <div class=\"field\" style=\"margin-bottom:16px\"><label>Confirm New Password<\/label><input type=\"password\" id=\"sConfPw\" placeholder=\"Repeat new password\"><\/div>\n          <button class=\"btn btn-purple btn-full\" onclick=\"staffChangePassword()\">Update Password<\/button>\n        <\/div>\n      <\/div>\n\n      <!-- \u2500\u2500 REPORTS PAGE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div id=\"spage-reports\" class=\"hidden\">\n        <!-- Date filters -->\n        <div style=\"display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center\">\n          <select id=\"rpt-period\" onchange=\"renderReports()\" style=\"padding:8px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.78rem;background:#fff;outline:none\">\n            <option value=\"all\">All Time<\/option>\n            <option value=\"today\">Today<\/option>\n            <option value=\"week\">This Week<\/option>\n            <option value=\"month\">This Month<\/option>\n            <option value=\"year\">This Year<\/option>\n          <\/select>\n          <select id=\"rpt-county-filter\" onchange=\"renderReports()\" style=\"padding:8px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.78rem;background:#fff;outline:none\">\n            <option value=\"\">All Counties<\/option>\n          <\/select>\n          <select id=\"rpt-cat-filter\" onchange=\"renderReports()\" style=\"padding:8px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.78rem;background:#fff;outline:none\">\n            <option value=\"\">All Categories<\/option>\n            <option value=\"scout\">Youth Scout<\/option>\n            <option value=\"leader\">Scout Leader<\/option>\n            <option value=\"subcounty\">Sub-County Official<\/option>\n            <option value=\"county\">County Official<\/option>\n            <option value=\"national\">National Official<\/option>\n          <\/select>\n          <div style=\"display:flex;gap:8px;margin-left:auto\">\n            <button class=\"btn btn-ghost\" style=\"padding:7px 14px;font-size:.74rem\" onclick=\"exportReportCSV()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg> Export CSV\n            <\/button>\n            <button class=\"btn btn-ghost\" style=\"padding:7px 14px;font-size:.74rem\" onclick=\"printReport()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg> Print\n            <\/button>\n            <button class=\"btn btn-ghost\" style=\"padding:7px 14px;font-size:.74rem\" onclick=\"shareReport()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/><line x1=\"15.41\" y1=\"6.51\" x2=\"8.59\" y2=\"10.49\"\/><\/svg> Share\n            <\/button>\n          <\/div>\n        <\/div>\n\n        <!-- KPI Cards -->\n        <div style=\"display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px\" id=\"rpt-kpis\">\n          <!-- filled by JS -->\n        <\/div>\n\n        <!-- Charts row -->\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px\">\n          <!-- Registrations over time -->\n          <div class=\"staff-tbl\" style=\"padding:16px\">\n            <div style=\"font-size:.8rem;font-weight:700;color:var(--n0);margin-bottom:12px\">Registrations Over Time<\/div>\n            <div id=\"rpt-timeline\" style=\"display:flex;align-items:flex-end;gap:4px;height:80px;padding:0 4px\"><\/div>\n            <div id=\"rpt-timeline-labels\" style=\"display:flex;gap:4px;margin-top:4px\"><\/div>\n          <\/div>\n          <!-- Category breakdown -->\n          <div class=\"staff-tbl\" style=\"padding:16px\">\n            <div style=\"font-size:.8rem;font-weight:700;color:var(--n0);margin-bottom:12px\">By Category<\/div>\n            <div id=\"rpt-cat-chart\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- County performance table -->\n        <div class=\"staff-tbl\" style=\"margin-bottom:14px\">\n          <div class=\"staff-tbl-top\"><h3>County Performance<\/h3><\/div>\n          <div class=\"staff-tbl-scroll\">\n            <table><thead><tr><th>County<\/th><th>Total<\/th><th>Active<\/th><th>Leaders<\/th><th>Scouts<\/th><th>Revenue (KES)<\/th><th>Performance<\/th><\/tr><\/thead>\n            <tbody id=\"rpt-county-body\"><\/tbody><\/table>\n          <\/div>\n        <\/div>\n\n        <!-- Sub-county performance table -->\n        <div class=\"staff-tbl\">\n          <div class=\"staff-tbl-top\"><h3>Sub-County Performance<\/h3><input type=\"text\" placeholder=\"Filter\u2026\" oninput=\"filterSubcountyRpt(this.value)\" style=\"padding:6px 10px;border:1.5px solid var(--n4);border-radius:7px;font-size:.74rem;font-family:inherit;outline:none;width:160px\"><\/div>\n          <div class=\"staff-tbl-scroll\">\n            <table><thead><tr><th>Sub-County<\/th><th>County<\/th><th>Total<\/th><th>Active<\/th><th>Pending<\/th><th>Revenue<\/th><\/tr><\/thead>\n            <tbody id=\"rpt-sc-body\"><\/tbody><\/table>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \u2500\u2500 IMPORT \/ EXPORT PAGE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div id=\"spage-import\" class=\"hidden\">\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px\">\n          <!-- Import Members -->\n          <div class=\"staff-tbl\" style=\"padding:20px\">\n            <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:4px\">Import Members<\/div>\n            <p style=\"font-size:.74rem;color:var(--n3);margin-bottom:16px;line-height:1.6\">Upload a CSV file of members. A welcome email is automatically sent to each imported member.<\/p>\n            <div style=\"background:var(--n5);border:2px dashed var(--n4);border-radius:8px;padding:24px;text-align:center;cursor:pointer;transition:border-color .2s\" onclick=\"document.getElementById('importMemberFile').click()\" id=\"importDropzone\">\n              <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--n3)\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"17 8 12 3 7 8\"\/><line x1=\"12\" y1=\"3\" x2=\"12\" y2=\"15\"\/><\/svg>\n              <div style=\"font-size:.78rem;color:var(--n2);margin-top:8px;font-weight:600\">Click to upload CSV<\/div>\n              <div style=\"font-size:.66rem;color:var(--n3);margin-top:3px\">Required: full_name, phone | Optional: national_id, category, county, subcounty, unit, section, email, payment_ref | Also accepts exported CSV format<\/div>\n            <\/div>\n            <input type=\"file\" id=\"importMemberFile\" accept=\".csv\" style=\"display:none\" onchange=\"importMembers(this)\">\n            <button class=\"btn btn-ghost btn-full\" style=\"margin-top:10px;font-size:.74rem\" onclick=\"downloadMemberTemplate()\">Download CSV Template<\/button>\n            <div id=\"importProgress\" style=\"display:none;margin-top:12px\"><\/div>\n          <\/div>\n          <!-- Import Units -->\n          <div class=\"staff-tbl\" style=\"padding:20px\">\n            <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:4px\">Import Scout Units<\/div>\n            <p style=\"font-size:.74rem;color:var(--n3);margin-bottom:16px;line-height:1.6\">Upload a CSV file of scout units\/groups to register them in bulk.<\/p>\n            <div style=\"background:var(--n5);border:2px dashed var(--n4);border-radius:8px;padding:24px;text-align:center;cursor:pointer\" onclick=\"document.getElementById('importUnitFile').click()\">\n              <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--n3)\" stroke-width=\"1.5\" stroke-linecap=\"round\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/><polyline points=\"9 22 9 12 15 12 15 22\"\/><\/svg>\n              <div style=\"font-size:.78rem;color:var(--n2);margin-top:8px;font-weight:600\">Click to upload CSV<\/div>\n              <div style=\"font-size:.66rem;color:var(--n3);margin-top:3px\">Required columns: unit_name, county, subcounty, section<\/div>\n            <\/div>\n            <input type=\"file\" id=\"importUnitFile\" accept=\".csv\" style=\"display:none\" onchange=\"importUnits(this)\">\n            <button class=\"btn btn-ghost btn-full\" style=\"margin-top:10px;font-size:.74rem\" onclick=\"downloadUnitTemplate()\">Download CSV Template<\/button>\n            <div id=\"importUnitProgress\" style=\"display:none;margin-top:12px\"><\/div>\n          <\/div>\n        <\/div>\n\n        <!-- Export section -->\n        <div class=\"staff-tbl\" style=\"padding:20px\">\n          <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:14px\">Export Data<\/div>\n          <div style=\"display:flex;gap:10px;flex-wrap:wrap\">\n            <button class=\"btn btn-purple\" style=\"font-size:.78rem\" onclick=\"exportAllMembers()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\"\/><polyline points=\"7 10 12 15 17 10\"\/><line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\"\/><\/svg>\n              Export All Members (CSV)\n            <\/button>\n            <button class=\"btn btn-ghost\" style=\"font-size:.78rem\" onclick=\"exportActiveMembers()\">Export Active Members<\/button>\n            <button class=\"btn btn-ghost\" style=\"font-size:.78rem\" onclick=\"exportUnits()\">Export Units (CSV)<\/button>\n            <button class=\"btn btn-ghost\" style=\"font-size:.78rem\" onclick=\"exportPayments()\">Export Payments (CSV)<\/button>\n          <\/div>\n          <div style=\"margin-top:16px;padding:12px 14px;background:var(--n5);border-radius:8px;border-left:3px solid var(--p3)\">\n            <div style=\"font-size:.72rem;font-weight:700;color:var(--p1);margin-bottom:3px\">Share Cards &amp; Certificates<\/div>\n            <p style=\"font-size:.68rem;color:var(--n3);margin-bottom:10px;line-height:1.6\">Share or email individual member cards and certificates directly from the Members tab. Click a member row, then choose \"Share Card\" from the detail view.<\/p>\n            <button class=\"btn btn-ghost\" style=\"font-size:.74rem\" onclick=\"bulkShareCards()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/><\/svg>\n              Email Cards to All Active Members\n            <\/button>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- \u2500\u2500 BULK ACTIONS PAGE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n      <div id=\"spage-bulk\" class=\"hidden\">\n        <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:14px\">\n          <!-- Bulk Email -->\n          <div class=\"staff-tbl\" style=\"padding:20px\">\n            <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:4px\">Bulk Email<\/div>\n            <p style=\"font-size:.74rem;color:var(--n3);margin-bottom:14px;line-height:1.6\">Send a message to all members in your region.<\/p>\n            <div class=\"field\" style=\"margin-bottom:10px\"><label>Recipients<\/label>\n              <select id=\"bulk-recipients\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none\">\n                <option value=\"all\">All Members in My Region<\/option>\n                <option value=\"paid\">Active \/ Paid Members Only<\/option>\n                <option value=\"pending\">Pending Members Only<\/option>\n                <option value=\"leaders\">Leaders Only<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"field\" style=\"margin-bottom:10px\"><label>Subject<\/label><input type=\"text\" id=\"bulk-subject\" placeholder=\"Email subject\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none\"><\/div>\n            <div class=\"field\" style=\"margin-bottom:14px\"><label>Message<\/label><textarea id=\"bulk-message\" placeholder=\"Write your message here\u2026\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none;resize:vertical;min-height:100px\"><\/textarea><\/div>\n            <button class=\"btn btn-purple btn-full\" style=\"font-size:.78rem\" onclick=\"sendBulkEmail()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"\/><polyline points=\"22,6 12,13 2,6\"\/><\/svg>\n              Send Bulk Email\n            <\/button>\n          <\/div>\n\n          <!-- Bulk Announcement -->\n          <div class=\"staff-tbl\" style=\"padding:20px\">\n            <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:4px\">Announcements &amp; Alerts<\/div>\n            <p style=\"font-size:.74rem;color:var(--n3);margin-bottom:14px;line-height:1.6\">Send quick announcements or SMS-style alerts to your region.<\/p>\n            <div class=\"field\" style=\"margin-bottom:10px\"><label>Announcement Type<\/label>\n              <select id=\"announce-type\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none\">\n                <option value=\"renewal\">Membership Renewal Reminder<\/option>\n                <option value=\"event\">Upcoming Event<\/option>\n                <option value=\"notice\">General Notice<\/option>\n                <option value=\"emergency\">Emergency Alert<\/option>\n              <\/select>\n            <\/div>\n            <div class=\"field\" style=\"margin-bottom:14px\"><label>Message<\/label><textarea id=\"announce-message\" placeholder=\"Your announcement text\u2026\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none;resize:vertical;min-height:80px\"><\/textarea><\/div>\n            <button class=\"btn btn-purple btn-full\" style=\"font-size:.78rem\" onclick=\"sendAnnouncement()\">Send Announcement<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Bulk Print -->\n        <div class=\"staff-tbl\" style=\"padding:20px;margin-top:14px\">\n          <div style=\"font-size:.88rem;font-weight:700;color:var(--p1);margin-bottom:4px\">Bulk Print Cards<\/div>\n          <p style=\"font-size:.74rem;color:var(--n3);margin-bottom:14px;line-height:1.6\">Print all membership cards or certificates for members in your region in one batch.<\/p>\n          <div style=\"display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px\">\n            <select id=\"bulk-print-filter\" style=\"padding:8px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.78rem;outline:none\">\n              <option value=\"all\">All Members<\/option>\n              <option value=\"paid\">Paid \/ Active Only<\/option>\n              <option value=\"printing\">Ready to Print<\/option>\n            <\/select>\n            <button class=\"btn btn-purple\" style=\"font-size:.78rem\" onclick=\"bulkPrintCards()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><polyline points=\"6 9 6 2 18 2 18 9\"\/><path d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2\"\/><rect x=\"6\" y=\"14\" width=\"12\" height=\"8\"\/><\/svg>\n              Bulk Print All Cards\n            <\/button>\n            <button class=\"btn btn-ghost\" style=\"font-size:.78rem\" onclick=\"bulkShareCards()\">\n              <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"><circle cx=\"18\" cy=\"5\" r=\"3\"\/><circle cx=\"6\" cy=\"12\" r=\"3\"\/><circle cx=\"18\" cy=\"19\" r=\"3\"\/><line x1=\"8.59\" y1=\"13.51\" x2=\"15.42\" y2=\"17.49\"\/><\/svg>\n              Email Cards to Members\n            <\/button>\n          <\/div>\n          <div id=\"bulkPrintPreview\" style=\"display:none\"><\/div>\n        <\/div>\n      <\/div>\n\n      <!-- APPROVALS QUEUE (Multi-Level Authorisation Workflow \u2014 Section 4.4) -->\n      <div id=\"spage-approvals\" class=\"hidden\">\n        <div class=\"staff-tbl\" style=\"padding:16px 20px;margin-bottom:14px\">\n          <div style=\"display:flex;gap:10px;align-items:center;flex-wrap:wrap\">\n            <label style=\"font-size:.76rem;font-weight:600;color:var(--n2)\">Review level:<\/label>\n            <select id=\"approvalLevel\" onchange=\"loadApprovals()\" style=\"padding:7px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.78rem;outline:none\">\n              <option value=\"subcounty\">Sub-County Review<\/option>\n              <option value=\"county\">County Review<\/option>\n              <option value=\"national\">National Approval<\/option>\n            <\/select>\n            <button class=\"btn-sm btn-sm-ghost\" onclick=\"loadApprovals()\" style=\"font-size:.72rem\">Refresh<\/button>\n          <\/div>\n        <\/div>\n        <div class=\"tbl-wrap\">\n          <div class=\"tbl-top\"><h3>Pending \u2014 <span id=\"approvalLevelLabel\">Sub-County Review<\/span><\/h3><\/div>\n          <div class=\"tbl-scroll\">\n            <table>\n              <thead><tr><th>Member<\/th><th>Category<\/th><th>County \/ Sub-County<\/th><th>Unit<\/th><th>Submitted<\/th><th>Action<\/th><\/tr><\/thead>\n              <tbody id=\"approvalsBody\"><tr><td colspan=\"6\" style=\"text-align:center;padding:24px;color:var(--n3)\">Loading\u2026<\/td><\/tr><\/tbody>\n            <\/table>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <!-- PROGRESSIVE SCHEME TRACKER (Section 4.5) -->\n      <div id=\"spage-progress\" class=\"hidden\">\n        <div class=\"staff-tbl\" style=\"padding:16px 20px;margin-bottom:14px\">\n          <div style=\"display:flex;gap:10px;align-items:center;flex-wrap:wrap\">\n            <input type=\"text\" id=\"progressRefInput\" placeholder=\"Enter member ref or membership number\u2026\" style=\"flex:1;min-width:220px;padding:8px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.8rem;outline:none\">\n            <button class=\"btn btn-purple\" style=\"font-size:.78rem\" onclick=\"loadProgressTracker()\">Load Progress<\/button>\n          <\/div>\n          <p style=\"font-size:.7rem;color:var(--n3);margin-top:8px\">Tip: click any member row on the Members page and choose \"View Progress\" to jump here directly.<\/p>\n        <\/div>\n        <div id=\"progressTrackerBody\" class=\"staff-tbl\" style=\"padding:20px\">\n          <div style=\"text-align:center;color:var(--n3);font-size:.8rem;padding:30px 0\">Enter a member reference above to view their Progressive Scheme journey.<\/div>\n        <\/div>\n      <\/div>\n\n    <\/div><!-- \/staff-content -->\n  <\/div><!-- \/staff-main -->\n<\/div><!-- \/staff-layout -->\n\n<!-- Staff edit member modal -->\n<div class=\"overlay\" id=\"staffMemberModal\">\n  <div class=\"modal\" style=\"max-width:600px\">\n    <div class=\"modal-hdr\"><h3 id=\"staffMemberModalTitle\">Member Details<\/h3><button class=\"modal-x\" onclick=\"closeOverlay('staffMemberModal')\">&#x2715;<\/button><\/div>\n    <div class=\"modal-body\" id=\"staffMemberModalBody\"><\/div>\n    <div class=\"modal-ftr\" id=\"staffMemberModalFtr\"><\/div>\n  <\/div>\n<\/div>\n\n<!-- Approval action modal (approve\/reject\/query with reason) -->\n<div class=\"overlay\" id=\"approvalActionModal\">\n  <div class=\"modal\" style=\"max-width:460px\">\n    <div class=\"modal-hdr\"><h3 id=\"approvalActionTitle\">Review Registration<\/h3><button class=\"modal-x\" onclick=\"closeOverlay('approvalActionModal')\">&#x2715;<\/button><\/div>\n    <div class=\"modal-body\">\n      <div id=\"approvalActionMemberInfo\" style=\"background:var(--n5);border-radius:8px;padding:12px;margin-bottom:14px;font-size:.78rem\"><\/div>\n      <div class=\"field\" style=\"margin-bottom:10px\">\n        <label>Reason \/ Notes <span style=\"font-size:.62rem;color:var(--n3);font-weight:400\">(required for Reject or Query)<\/span><\/label>\n        <textarea id=\"approvalReason\" placeholder=\"Explain the decision\u2026\" style=\"width:100%;padding:9px 12px;border:1.5px solid var(--n4);border-radius:8px;font-family:inherit;font-size:.82rem;outline:none;resize:vertical;min-height:70px\"><\/textarea>\n      <\/div>\n    <\/div>\n    <div class=\"modal-ftr\" style=\"gap:8px;flex-wrap:wrap\">\n      <button class=\"btn btn-ghost\" onclick=\"closeOverlay('approvalActionModal')\">Cancel<\/button>\n      <button class=\"btn\" style=\"background:#fef3c7;color:#92400e\" onclick=\"submitApprovalAction('query')\">Query<\/button>\n      <button class=\"btn\" style=\"background:#fee2e2;color:#991b1b\" onclick=\"submitApprovalAction('reject')\">Reject<\/button>\n      <button class=\"btn btn-green\" onclick=\"submitApprovalAction('approve')\">Approve<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n<!-- Staff edit member form modal -->\n<div class=\"overlay\" id=\"staffEditModal\">\n  <div class=\"modal\">\n    <div class=\"modal-hdr\"><h3 id=\"staffEditTitle\">Edit Member<\/h3><button class=\"modal-x\" onclick=\"closeOverlay('staffEditModal')\">&#x2715;<\/button><\/div>\n    <div class=\"modal-body\">\n      <input type=\"hidden\" id=\"se-ref\">\n      <div class=\"fg\">\n        <div class=\"field s2\"><label>Full Name<\/label><input type=\"text\" id=\"se-name\"><\/div>\n        <div class=\"field\"><label>Phone<\/label><input type=\"tel\" id=\"se-phone\"><\/div>\n        <div class=\"field\"><label>Email<\/label><input type=\"email\" id=\"se-email\"><\/div>\n        <div class=\"field\"><label>Membership Status<\/label>\n          <select id=\"se-status\"><option value=\"pending\">Pending<\/option><option value=\"approved\">Approved<\/option><option value=\"active\">Active<\/option><option value=\"revoked\">Revoked<\/option><\/select>\n        <\/div>\n        <div class=\"field\"><label>Payment Status<\/label>\n          <select id=\"se-pay\"><option value=\"pending\">Pending<\/option><option value=\"paid\">Paid<\/option><\/select>\n        <\/div>\n        <div class=\"field\"><label>Approval Stage<\/label>\n          <select id=\"se-step\"><option value=\"subcounty\">Sub-County<\/option><option value=\"county\">County<\/option><option value=\"printing\">Ready to Print<\/option><option value=\"done\">Done<\/option><\/select>\n        <\/div>\n        <div class=\"field s2\"><label>Notes<\/label><textarea id=\"se-notes\" placeholder=\"Internal notes\u2026\"><\/textarea><\/div>\n      <\/div>\n    <\/div>\n    <div class=\"modal-ftr\">\n      <button class=\"btn btn-ghost\" onclick=\"closeOverlay('staffEditModal')\">Cancel<\/button>\n      <button class=\"btn btn-purple\" onclick=\"saveStaffEdit()\">Save Changes<\/button>\n    <\/div>\n  <\/div>\n<\/div>\n\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/page-portal.php","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":0,"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"wp:attachment":[{"href":"https:\/\/ksa.kenyascouts.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}