<!-- index.html - Complete updated file with Food Order Management for Admin/User and Order Tracking for Students -->
<!-- INCLUDES: Notification badges and alert tones support (via script.js) -->
<!-- UPDATED: Content Management image upload buttons (Events, Restaurants, Food Items, Banners) -->
<!-- ADDED: Edit modals and functionality for Restaurants, Food Items, Events in Content Management -->
<!-- FIXED: Mobile view for Restaurant cards, Food cards, Events cards with "View Event" button -->
<!-- FIXED: Event detail page image full cover without cropping -->
<!-- ADDED: Visitor user role (fourth category) with registration/login and dedicated modules -->
<!-- ADDED: Forgot password feature for Student and Visitor users -->
<!-- ADDED: Admin Visitor Management Module (view, delete, export visitors) -->
<!-- UPDATED: Desktop header now includes logo beside UEW badge -->
<!-- ADDED: Show/hide password eye button on all login and registration forms -->
<!-- FIXED: Room number fields now accept only numeric input -->
<!-- FIXED: Login forms now work reliably on mobile (novalidate) -->
<!-- ADDED: Recover Missing Students button in Student Records module -->
<!-- ADDED: Access restriction for unapproved students on Complaints and Key Tracking modules -->
<!-- FIXED: Complaint submission now includes student block number -->
<!-- ADDED: Admin "Search & Edit Student" tab in User Management (with image fields) -->
<!-- ADDED: Picture and Payment Slip mandatory in Student Registration -->
<!-- ADDED: Image edit fields in Student Records edit modal -->
<!-- ADDED: Student Records Filters (Year of Hall Registration, Level, Block) -->
<!-- ADDED: Alumni Management tab and move/restore functionality -->
<!-- UPDATED: Label "ACADEMIC YEAR" changed to "YEAR OF HALL REGISTRATION" in registration forms -->
<!-- ==================== NEW: DIGITAL VIRTUAL GALLERY ==================== -->
<!-- ADDED: Gallery collection and real-time listener -->
<!-- ADDED: Admin gallery management (upload, delete, group by event) -->
<!-- ADDED: Student virtual gallery with Grid, Carousel, Virtual Room views -->
<!-- ADDED: Gallery lightbox modal for image preview -->
<!-- ADDED: Notifications for new gallery images on Events module -->
<!-- ADDED: Gallery filter by event and view toggle -->
<!-- FIXED: Aggressive image compression for gallery uploads (max 600px, quality 0.6) -->
<!-- FIXED: Event dropdown now populates correctly in admin gallery management (moved inside IIFE) -->
<!-- ==================== FIX: Gallery Upload Robustness ==================== -->
<!-- FIXED: Gallery image upload now uses aggressive compression (max 350px, quality 0.4) with fallbacks -->
<!-- FIXED: Added proper error handling to prevent infinite loading overlay -->
<!-- FIXED: Added file size validation and chunked upload for large images -->
<!-- FIXED: Added progress feedback during upload -->
<!-- ==================== FIX: Virtual Gallery 3D Immersive View ==================== -->
<!-- ADDED: Immersive 3D virtual room with cylindrical carousel layout -->
<!-- ADDED: Smooth drag-to-rotate with inertia for walking around the gallery -->
<!-- ADDED: Click on any image to open full-size lightbox -->
<!-- ADDED: Responsive 3D view that adapts to mobile and desktop -->
<!-- ==================== ENHANCED: Full-width Virtual Art Gallery ==================== -->
<!-- ADDED: Full-width immersive virtual gallery room with dark walls and large windows -->
<!-- ADDED: Artworks displayed as framed pieces on gallery walls with realistic spacing -->
<!-- ADDED: Central benches for viewers to sit and observe -->
<!-- ADDED: Smooth drag-to-rotate with momentum for walking around the gallery -->
<!-- ADDED: Click on any artwork to open full-size lightbox -->
<!-- ADDED: Responsive design that works across desktop and mobile -->
<!-- ==================== NEW: STUDENT RECORDS ENHANCEMENTS ==================== -->
<!-- ADDED: Residential Status filter in Student Records -->
<!-- ADDED: Affiliates tab showing non-residential students -->
<!-- ADDED: Single and bulk select to move students to Alumni or Affiliates -->
<!-- ADDED: Key Tracking restriction for non-residential, alumni, and affiliate students -->
<!-- ==================== NEW: CHEAP DATA BUNDLES MODULE ==================== -->
<!-- ADDED: Data Bundles module for all users (MTN, Telecel, AirtelTigo) -->
<!-- ADDED: Dedicated page with terms and conditions and network tabs -->
<!-- ADDED: Modern pricing cards with "Buy Cheap Data Now" buttons linking to Datasika -->
<!-- ==================== STUDENT REGISTRATION FORM UPDATES ==================== -->
<!-- UPDATED: Added Student Phone Number and Student Personal Email (mandatory) -->
<!-- UPDATED: Renamed "Email" to "Student School Email" and placed personal email after it -->
<!-- UPDATED: Moved Password field to after Payment Slip upload -->
<!-- UPDATED: Year of Hall Registration fixed to 2026/2027 (read-only) -->
<!-- ==================== NEW: COMPLAINTS MANAGEMENT ENHANCEMENTS ==================== -->
<!-- ADDED: Six tabs (All, Pending, Acknowledged, In Progress, Resolved, Rejected) -->
<!-- ADDED: Search functionality to find complaints by student name, index, room, or ID -->
<!-- ADDED: Real-time filtering of complaints table based on tab selection and search query -->
<!-- ==================== FIX: STUDENT RECORDS MODULE - MISSING COLUMNS & RESPONSIVE TABLE ==================== -->
<!-- ADDED: Three missing columns to Student Records table (Personal Email, Student Phone, Guardian Address) -->
<!-- ADDED: Modern card-based responsive layout to eliminate horizontal scrolling on all devices -->
<!-- ADDED: Smooth transition between table and card views based on screen size -->
<!-- ADDED: Compact table styling with reduced padding for better fit -->
<!-- ADDED: Full-width card view on mobile with all student information organized cleanly -->
<!-- ADDED: Preserved all existing functionality (edit, verify, move to alumni/affiliates, delete) -->
<!-- FIXED: Horizontal scrolling eliminated on all screen sizes using responsive card layout -->
<!-- ==================== NEW: SANDWICH STUDENT & GUEST TENANT MODULES ==================== -->
<!-- ADDED: Two new user groups: Sandwich Student and Guest Tenant -->
<!-- ADDED: Dedicated registration forms for both with all required fields -->
<!-- ADDED: Admin management modules with tabs, filters, search, column toggle, edit, verify, delete -->
<!-- ADDED: Same image compression logic as regular students for picture uploads -->
<!-- ADDED: Same interface styles, table format, and responsive card layout as Student Records -->
<!-- ADDED: Access to all modules after approval (same as regular students) -->
<!-- UPDATED: Login/register labels changed from "Student" to "Regular Student" for clarity -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
    <meta name="mobile-web-app-capable" content="yes">
    <title>Ghartey Hall Management System | UEW</title>
    <!-- Google Fonts & Font Awesome -->
    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <!-- Chart.js for analytics -->
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <!-- QR Code Libraries -->
    <script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.1/build/qrcode.min.js"></script>
    <script src="https://unpkg.com/html5-qrcode@2.3.8/minified/html5-qrcode.min.js"></script>
    <!-- Three.js and OrbitControls for 3D Virtual Gallery -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.js"></script>
    <!-- External Stylesheet -->
    <link rel="stylesheet" href="styles.css">
    <!-- Loading Overlay Styles (unchanged) -->
    <style>
        .loading-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.95);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            z-index: 10001;
            display: none;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            gap: 25px;
            animation: fadeInOverlay 0.3s ease;
        }
        .loading-overlay.active {
            display: flex;
        }
        @keyframes fadeInOverlay {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        .loading-spinner {
            width: 70px;
            height: 70px;
            border: 4px solid rgba(0, 240, 255, 0.15);
            border-top: 4px solid var(--glow-blue);
            border-right: 4px solid var(--glow-purple);
            border-radius: 50%;
            animation: spin 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
            box-shadow: 0 0 30px rgba(0, 240, 255, 0.3);
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .loading-text {
            color: var(--glow-blue);
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            text-shadow: 0 0 15px rgba(0, 240, 255, 0.5);
            animation: pulseText 1.5s ease infinite;
        }
        @keyframes pulseText {
            0%, 100% { opacity: 1; text-shadow: 0 0 15px rgba(0, 240, 255, 0.5); }
            50% { opacity: 0.8; text-shadow: 0 0 25px rgba(0, 240, 255, 0.8); }
        }
        .loading-subtext {
            color: var(--text-secondary);
            font-size: 1rem;
            text-align: center;
            max-width: 280px;
            line-height: 1.5;
            background: rgba(0, 0, 0, 0.5);
            padding: 12px 24px;
            border-radius: 50px;
            border: 1px solid rgba(0, 240, 255, 0.2);
        }
        .loading-subtext i {
            color: var(--glow-blue);
            margin-right: 8px;
        }
        @media (max-width: 768px) {
            .loading-spinner {
                width: 55px;
                height: 55px;
                border-width: 3px;
            }
            .loading-text {
                font-size: 1.1rem;
                letter-spacing: 2px;
            }
            .loading-subtext {
                font-size: 0.85rem;
                padding: 10px 20px;
                max-width: 260px;
            }
        }
        .btn-loading {
            opacity: 0.7;
            cursor: wait !important;
            pointer-events: none;
            transform: scale(0.98);
        }
        .btn-loading i {
            animation: spin 0.8s linear infinite;
        }
        body.loading-active {
            overflow: hidden;
        }
        /* Gallery upload progress bar */
        #galleryUploadProgressContainer {
            display: none;
            margin-top: 12px;
            padding: 10px 14px;
            background: rgba(0,0,0,0.3);
            border-radius: 12px;
            border: 1px solid var(--glass-edge);
        }
        #galleryUploadProgressContainer .progress-track {
            width: 100%;
            height: 6px;
            background: rgba(255,255,255,0.1);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 6px;
        }
        #galleryUploadProgressContainer .progress-bar {
            height: 100%;
            width: 0%;
            background: linear-gradient(90deg, var(--glow-blue), var(--glow-purple));
            border-radius: 10px;
            transition: width 0.3s ease;
        }
        #galleryUploadProgressContainer .progress-label {
            font-size: 0.8rem;
            color: var(--text-secondary);
            display: flex;
            justify-content: space-between;
        }
        .gallery-upload-status.error {
            color: var(--danger-glow);
            border-color: var(--danger-glow);
        }
        .gallery-upload-status.success {
            color: var(--success-glow);
            border-color: var(--success-glow);
        }
        .gallery-upload-status.info {
            color: var(--glow-blue);
            border-color: var(--glow-blue);
        }
        /* ==================== 3D Virtual Art Gallery Room Styles ==================== */
        .gallery-virtual-room-3d {
            position: relative;
            width: 100% !important;
            height: 65vh !important;
            min-height: 480px !important;
            max-height: 700px !important;
            perspective: 1000px;
            perspective-origin: 50% 50%;
            overflow: hidden;
            border-radius: 24px;
            background: radial-gradient(ellipse at center, #1a1a2e, #0a0a15);
            touch-action: none;
            cursor: grab;
            user-select: none;
            -webkit-user-select: none;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
            margin: 0 auto;
        }
        .gallery-virtual-room-3d:active {
            cursor: grabbing;
        }
        .gallery-virtual-room-3d .carousel-container {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: none;
        }
        /* Gallery Floor */
        .gallery-floor {
            position: absolute;
            bottom: 0;
            left: -50%;
            width: 200%;
            height: 30%;
            background: radial-gradient(ellipse at center, #2a2a3e, #1a1a2e);
            border-radius: 50%;
            transform: rotateX(90deg) translateZ(-50px);
            opacity: 0.6;
            pointer-events: none;
        }
        /* Gallery Walls - Windows Effect */
        .gallery-wall-light {
            position: absolute;
            top: -10%;
            left: -20%;
            width: 140%;
            height: 60%;
            background: radial-gradient(ellipse at 30% 20%, rgba(100, 150, 255, 0.08), transparent 70%);
            pointer-events: none;
            border-radius: 50%;
        }
        .gallery-wall-light-2 {
            position: absolute;
            top: -5%;
            right: -20%;
            width: 120%;
            height: 50%;
            background: radial-gradient(ellipse at 70% 30%, rgba(200, 180, 100, 0.06), transparent 60%);
            pointer-events: none;
            border-radius: 50%;
        }
        /* Window frames - subtle */
        .gallery-window {
            position: absolute;
            border: 2px solid rgba(255, 255, 255, 0.04);
            border-radius: 8px;
            background: rgba(100, 150, 255, 0.03);
            pointer-events: none;
            box-shadow: 0 0 40px rgba(100, 150, 255, 0.05) inset;
        }
        .gallery-window-1 {
            top: 5%;
            left: 5%;
            width: 15%;
            height: 25%;
        }
        .gallery-window-2 {
            top: 5%;
            right: 5%;
            width: 15%;
            height: 25%;
        }
        .gallery-window-3 {
            bottom: 25%;
            left: 8%;
            width: 10%;
            height: 20%;
        }
        .gallery-window-4 {
            bottom: 25%;
            right: 8%;
            width: 10%;
            height: 20%;
        }
        /* Benches in center */
        .gallery-bench {
            position: absolute;
            left: 50%;
            bottom: 12%;
            transform: translateX(-50%) rotateX(0deg);
            width: 40%;
            height: 4%;
            background: linear-gradient(180deg, rgba(80, 60, 40, 0.5), rgba(40, 30, 20, 0.7));
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            pointer-events: none;
            backdrop-filter: blur(2px);
        }
        .gallery-bench::before {
            content: '';
            position: absolute;
            top: -20px;
            left: 10%;
            width: 80%;
            height: 20px;
            background: linear-gradient(180deg, rgba(60, 45, 30, 0.4), transparent);
            border-radius: 4px 4px 0 0;
        }
        .gallery-bench-label {
            position: absolute;
            bottom: 8%;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.15);
            font-size: 0.6rem;
            letter-spacing: 2px;
            text-transform: uppercase;
            pointer-events: none;
            font-family: 'Space Grotesk', sans-serif;
        }
        /* Gallery Artwork Items */
        .gallery-virtual-room-3d .carousel-item {
            position: absolute;
            width: 200px;
            height: 250px;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -125px;
            border-radius: 12px;
            overflow: visible;
            backface-visibility: hidden;
            transform-style: preserve-3d;
            transition: transform 0.1s ease, box-shadow 0.3s ease;
            will-change: transform;
            cursor: pointer;
        }
        /* Artwork Frame */
        .gallery-virtual-room-3d .carousel-item .art-frame {
            width: 100%;
            height: 100%;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(180, 160, 120, 0.3), 0 0 0 6px rgba(40, 35, 30, 0.5);
            background: rgba(30, 25, 20, 0.8);
            transition: box-shadow 0.3s ease, transform 0.3s ease;
            position: relative;
        }
        .gallery-virtual-room-3d .carousel-item .art-frame img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: transform 0.4s ease;
        }
        /* Artwork Label */
        .gallery-virtual-room-3d .carousel-item .art-label {
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.5);
            font-size: 0.6rem;
            letter-spacing: 0.5px;
            white-space: nowrap;
            font-family: 'Space Grotesk', sans-serif;
            text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
            opacity: 0;
            transition: opacity 0.3s ease;
            pointer-events: none;
            background: rgba(0, 0, 0, 0.4);
            padding: 2px 10px;
            border-radius: 10px;
            backdrop-filter: blur(2px);
        }
        .gallery-virtual-room-3d .carousel-item:hover .art-label {
            opacity: 1;
        }
        .gallery-virtual-room-3d .carousel-item:hover .art-frame {
            box-shadow: 0 10px 40px rgba(0, 240, 255, 0.2), 0 0 0 3px rgba(180, 160, 120, 0.5), 0 0 0 6px rgba(40, 35, 30, 0.7);
            transform: scale(1.02);
        }
        .gallery-virtual-room-3d .carousel-item:hover .art-frame img {
            transform: scale(1.05);
        }
        /* Navigation hint */
        .gallery-virtual-room-3d .nav-hint {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            color: rgba(255, 255, 255, 0.4);
            font-size: 0.7rem;
            letter-spacing: 1px;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px 20px;
            border-radius: 30px;
            backdrop-filter: blur(4px);
            border: 1px solid rgba(255, 255, 255, 0.05);
            pointer-events: none;
            animation: hintPulse 3s ease-in-out infinite;
            font-family: 'Space Grotesk', sans-serif;
        }
        @keyframes hintPulse {
            0%, 100% { opacity: 0.4; transform: translateX(-50%) scale(1); }
            50% { opacity: 0.8; transform: translateX(-50%) scale(1.02); }
        }
        .gallery-virtual-room-3d .nav-hint i {
            margin-right: 8px;
        }
        /* Responsive adjustments for the 3D gallery */
        @media (max-width: 1024px) {
            .gallery-virtual-room-3d {
                height: 55vh !important;
                min-height: 400px !important;
                max-height: 600px !important;
            }
            .gallery-virtual-room-3d .carousel-item {
                width: 160px;
                height: 200px;
                margin-left: -80px;
                margin-top: -100px;
            }
            .gallery-window-1, .gallery-window-2 {
                width: 12%;
                height: 20%;
            }
            .gallery-window-3, .gallery-window-4 {
                width: 8%;
                height: 15%;
            }
            .gallery-bench {
                width: 50%;
                height: 3%;
            }
        }
        @media (max-width: 768px) {
            .gallery-virtual-room-3d {
                height: 45vh !important;
                min-height: 320px !important;
                max-height: 450px !important;
                border-radius: 16px;
            }
            .gallery-virtual-room-3d .carousel-item {
                width: 120px;
                height: 150px;
                margin-left: -60px;
                margin-top: -75px;
            }
            .gallery-virtual-room-3d .carousel-item .art-label {
                font-size: 0.5rem;
                bottom: -24px;
                padding: 1px 8px;
            }
            .gallery-window-1, .gallery-window-2 {
                width: 10%;
                height: 15%;
            }
            .gallery-window-3, .gallery-window-4 {
                display: none;
            }
            .gallery-bench {
                width: 60%;
                height: 2.5%;
                bottom: 10%;
            }
            .gallery-bench-label {
                font-size: 0.5rem;
                bottom: 6%;
            }
            .gallery-virtual-room-3d .nav-hint {
                font-size: 0.6rem;
                padding: 6px 14px;
                bottom: 12px;
            }
            .gallery-wall-light, .gallery-wall-light-2 {
                display: none;
            }
        }
        @media (max-width: 480px) {
            .gallery-virtual-room-3d {
                height: 40vh !important;
                min-height: 260px !important;
                max-height: 350px !important;
                border-radius: 12px;
            }
            .gallery-virtual-room-3d .carousel-item {
                width: 90px;
                height: 115px;
                margin-left: -45px;
                margin-top: -57px;
            }
            .gallery-virtual-room-3d .carousel-item .art-label {
                font-size: 0.4rem;
                bottom: -18px;
                padding: 1px 6px;
            }
            .gallery-bench {
                width: 70%;
                height: 2%;
                bottom: 8%;
            }
            .gallery-bench-label {
                font-size: 0.4rem;
                bottom: 5%;
            }
            .gallery-virtual-room-3d .nav-hint {
                font-size: 0.5rem;
                padding: 4px 10px;
                bottom: 8px;
            }
        }
        /* Ensure gallery container doesn't clip 3D content */
        #galleryContainer {
            overflow: visible !important;
        }
        #galleryContainer.gallery-virtual-room-3d-container {
            overflow: visible !important;
            padding: 5px 0;
        }
        /* Light mode adjustments */
        body.light-mode .gallery-virtual-room-3d {
            background: radial-gradient(ellipse at center, #e8e8f0, #d0d0d8);
        }
        body.light-mode .gallery-floor {
            background: radial-gradient(ellipse at center, #d0d0d8, #c0c0c8);
        }
        body.light-mode .gallery-window {
            border-color: rgba(100, 150, 255, 0.1);
            background: rgba(100, 150, 255, 0.02);
        }
        body.light-mode .gallery-bench {
            background: linear-gradient(180deg, rgba(180, 160, 140, 0.5), rgba(120, 100, 80, 0.7));
        }
        body.light-mode .gallery-virtual-room-3d .carousel-item .art-frame {
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3), 0 0 0 3px rgba(180, 160, 120, 0.4), 0 0 0 6px rgba(200, 190, 180, 0.5);
            background: rgba(220, 210, 200, 0.8);
        }
        body.light-mode .gallery-virtual-room-3d .carousel-item .art-label {
            color: rgba(0, 0, 0, 0.6);
            background: rgba(255, 255, 255, 0.7);
        }
        body.light-mode .gallery-virtual-room-3d .nav-hint {
            color: rgba(0, 0, 0, 0.4);
            background: rgba(255, 255, 255, 0.7);
            border-color: rgba(0, 0, 0, 0.05);
        }
        body.light-mode .gallery-wall-light {
            background: radial-gradient(ellipse at 30% 20%, rgba(100, 150, 255, 0.05), transparent 70%);
        }
        body.light-mode .gallery-wall-light-2 {
            background: radial-gradient(ellipse at 70% 30%, rgba(200, 180, 100, 0.04), transparent 60%);
        }
        /* Gallery light effect overlay */
        .gallery-light-spot {
            position: absolute;
            top: 10%;
            left: 20%;
            width: 60%;
            height: 40%;
            background: radial-gradient(ellipse at center, rgba(255, 240, 200, 0.04), transparent 70%);
            pointer-events: none;
            border-radius: 50%;
            transform: rotateX(20deg);
        }
        .gallery-light-spot-2 {
            position: absolute;
            bottom: 20%;
            right: 10%;
            width: 40%;
            height: 30%;
            background: radial-gradient(ellipse at center, rgba(200, 220, 255, 0.03), transparent 70%);
            pointer-events: none;
            border-radius: 50%;
            transform: rotateX(-10deg);
        }
        /* ==================== NEW STUDENT RECORDS ENHANCEMENTS ==================== */
        .admin-bulk-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid var(--glass-edge);
            margin-bottom: 15px;
        }
        .admin-bulk-actions .action-btn {
            padding: 6px 14px;
            border-radius: 30px;
            font-size: 0.8rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s;
            border: 1px solid;
            background: transparent;
        }
        .admin-bulk-actions .action-btn.move-alumni-btn {
            color: var(--glow-purple);
            border-color: var(--glow-purple);
        }
        .admin-bulk-actions .action-btn.move-alumni-btn:hover {
            background: var(--glow-purple);
            color: var(--dark-bg);
        }
        .admin-bulk-actions .action-btn.move-affiliates-btn {
            color: var(--warning-glow);
            border-color: var(--warning-glow);
        }
        .admin-bulk-actions .action-btn.move-affiliates-btn:hover {
            background: var(--warning-glow);
            color: var(--dark-bg);
        }
        .admin-bulk-actions #selectedCount {
            font-size: 0.85rem;
            color: var(--text-secondary);
            margin-left: 10px;
        }
        .student-row-checkbox {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: var(--glow-blue);
        }
        /* Mobile adjustments for new elements */
        @media (max-width: 768px) {
            .admin-bulk-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .admin-bulk-actions #selectedCount {
                text-align: center;
                margin-left: 0;
            }
        }
        /* ==================== DATA BUNDLES MODULE STYLES ==================== */
        .data-tab-btn.active-data-tab {
            background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)) !important;
            color: var(--dark-bg) !important;
            box-shadow: 0 0 15px rgba(185, 107, 255, 0.5);
        }
        .data-tab-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
        }
        .data-tab-content {
            display: none;
        }
        .data-tab-content.active-data-content {
            display: block;
        }
        .data-bundle-card:hover {
            transform: translateY(-5px);
            border-color: var(--glow-blue);
            box-shadow: 0 10px 25px rgba(0, 240, 255, 0.2);
        }
        .buy-data-btn:hover {
            transform: scale(1.05);
            box-shadow: 0 5px 20px rgba(185, 107, 255, 0.4);
        }

        /* ==================== TAB NOTIFICATION BADGE STYLES ==================== */
        .tab-badge {
            position: relative;
            top: -8px;
            right: -4px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 20px;
            height: 20px;
            padding: 0 6px;
            background: linear-gradient(135deg, var(--danger-glow), #ff3366);
            color: #fff;
            border-radius: 30px;
            font-size: 0.6rem;
            font-weight: 700;
            line-height: 1;
            margin-left: 6px;
            box-shadow: 0 0 0 1px var(--dark-bg), 0 0 0 2px rgba(255, 94, 124, 0.4);
            animation: badgePulse 1.2s ease infinite;
            font-family: monospace;
            letter-spacing: 0;
            vertical-align: middle;
            transition: all 0.2s ease;
        }

        .tab-badge:empty {
            display: none;
        }

        @keyframes badgePulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.08);
            }
            100% {
                transform: scale(1);
            }
        }

        /* Tab button with badge - adjust positioning */
        .verification-tab-btn .tab-badge,
        .content-mgmt-tab-btn .tab-badge,
        .marketplace-tab-btn .tab-badge,
        .inventory-tab-btn .tab-badge {
            margin-left: 4px;
            top: 0;
            right: 0;
            position: relative;
            display: inline-flex;
            vertical-align: middle;
            animation: badgePulse 1.2s ease infinite;
        }

        /* Light mode badge adjustment */
        body.light-mode .tab-badge {
            box-shadow: 0 0 0 1px #fff, 0 0 0 2px rgba(204, 51, 85, 0.4);
        }

        /* Badge on small screens */
        @media (max-width: 768px) {
            .tab-badge {
                min-width: 16px;
                height: 16px;
                font-size: 0.5rem;
                padding: 0 4px;
                margin-left: 3px;
            }
        }
        @media (max-width: 480px) {
            .tab-badge {
                min-width: 14px;
                height: 14px;
                font-size: 0.45rem;
                padding: 0 3px;
                margin-left: 2px;
            }
        }
        /* ==================== NEW: COMPLAINTS MANAGEMENT TABS & SEARCH ==================== */
        .complaints-tabs {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 20px;
            padding: 8px;
            background: rgba(0, 0, 0, 0.2);
            border-radius: 60px;
        }
        body.light-mode .complaints-tabs {
            background: rgba(0, 0, 0, 0.05);
        }
        .complaints-tab-btn {
            background: transparent;
            border: 1px solid var(--glass-edge);
            color: var(--text-secondary);
            padding: 8px 18px;
            border-radius: 40px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            font-size: 0.8rem;
            white-space: nowrap;
        }
        .complaints-tab-btn:hover {
            background: rgba(255, 255, 255, 0.05);
            color: var(--text-primary);
            border-color: var(--glow-blue);
        }
        .complaints-tab-btn.active-complaints-tab {
            background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple));
            color: var(--dark-bg);
            border-color: transparent;
            box-shadow: 0 0 15px rgba(185, 107, 255, 0.4);
        }
        /* Responsive complaints tabs */
        @media (max-width: 768px) {
            .complaints-tabs {
                border-radius: 30px;
                padding: 6px;
                gap: 5px;
                overflow-x: auto;
                flex-wrap: nowrap;
                justify-content: flex-start;
                -webkit-overflow-scrolling: touch;
                scrollbar-width: none;
            }
            .complaints-tabs::-webkit-scrollbar {
                display: none;
            }
            .complaints-tab-btn {
                font-size: 0.7rem;
                padding: 6px 12px;
                flex-shrink: 0;
            }
        }
        @media (max-width: 480px) {
            .complaints-tab-btn {
                font-size: 0.65rem;
                padding: 5px 10px;
            }
        }
    </style>
    <!-- PWA Manifest -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#0c0b1a">
    <meta name="apple-mobile-web-app-title" content="Ghartey Hall MS">
    <link rel="apple-touch-icon" href="icons/icon-192x192.png">
    <!-- Notification Audio (optional fallback, script uses Web Audio API) -->
    <audio id="notification-tone" preload="auto" style="display:none;"></audio>
</head>
<body>
    <!-- Loading Overlay -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="loading-spinner"></div>
        <div class="loading-text">PROCESSING</div>
        <div class="loading-subtext">
            <i class="fas fa-hourglass-half"></i>
            Please wait. Your request is being processed.<br>You will be notified shortly.
        </div>
    </div>

    <!-- Authentication Modal (updated with Visitor forms + Forgot Password + compact styling + password eye toggles) -->
    <div id="authModal" class="modal">
        <div class="modal-content glass-panel" style="max-width: 500px; max-height: 85vh; overflow-y: auto; padding: 25px 20px;">
            <div class="modal-header">
                <h2><i class="fas fa-shield-halded"></i> GHARTEY HALL · SECURE ACCESS</h2>
                <p>University of Education, Winneba</p>
            </div>

            <!-- Staff/Admin Login Form -->
            <form id="staffLoginForm" class="auth-form active" novalidate>
                <h3><i class="fas fa-lock"></i> STAFF/ADMIN LOGIN</h3>
                <div class="form-group">
                    <label><i class="fas fa-envelope"></i> Email</label>
                    <input type="email" id="staffLoginEmail" placeholder="admin@example.com" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> Password</label>
                    <div class="password-input-wrapper">
                        <input type="password" id="staffLoginPassword" placeholder="••••••••" required>
                        <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('staffLoginPassword', this)" aria-label="Show password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-sign-in-alt"></i> STAFF LOGIN</button>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">New Regular Student? <a href="#" onclick="showStudentRegister(); return false;">Register as Regular Student →</a></p>
            </form>

            <!-- Regular Student Login Form (with forgot password) - UPDATED label -->
            <form id="studentLoginForm" class="auth-form" novalidate>
                <h3><i class="fas fa-graduation-cap"></i> REGULAR STUDENT LOGIN</h3>
                <div class="form-group">
                    <label><i class="fas fa-id-card"></i> Index Number</label>
                    <input type="text" id="studentIndexNumber" placeholder="e.g., 12345678" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> Password</label>
                    <div class="password-input-wrapper">
                        <input type="password" id="studentPassword" placeholder="••••••••" required>
                        <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('studentPassword', this)" aria-label="Show password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div style="text-align: right; margin-bottom: 15px;">
                    <a href="#" id="studentForgotPasswordLink" style="color: var(--glow-blue); font-size: 0.85rem;">Forgot Password?</a>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-sign-in-alt"></i> REGULAR STUDENT LOGIN</button>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">New Regular Student? <a href="#" onclick="showStudentRegister(); return false;">Register as Regular Student →</a></p>
            </form>

            <!-- Regular Student Registration Form - UPDATED label -->
            <form id="studentRegisterForm" class="auth-form">
                <h3><i class="fas fa-user-plus"></i> REGULAR STUDENT REGISTRATION</h3>
                <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Full Name</label>
                        <input type="text" id="studentRegName" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-id-card"></i> Index Number</label>
                        <input type="text" id="studentRegIndex" placeholder="e.g., 12345678" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-home"></i> Status</label>
                        <select id="studentRegStatus" required>
                            <option value="">Select Status</option>
                            <option value="Residential">Residential</option>
                            <option value="Non-residential">Non-residential</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-venus-mars"></i> Gender</label>
                        <select id="studentRegGender" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Block</label>
                        <select id="studentRegBlock" required>
                            <option value="">Select Block</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-door-open"></i> Room Number</label>
                        <input type="text" id="studentRegRoom" placeholder="e.g., 101" required
                               inputmode="numeric" pattern="[0-9]*"
                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Department</label>
                        <input type="text" id="studentRegDepartment" placeholder="e.g., Computer Science" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-graduation-cap"></i> Program</label>
                        <input type="text" id="studentRegProgram" placeholder="e.g., BSc Information Technology" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-layer-group"></i> Level</label>
                        <select id="studentRegLevel" required>
                            <option value="">Select Level</option>
                            <option value="100">100 Level</option>
                            <option value="200">200 Level</option>
                            <option value="300">300 Level</option>
                            <option value="400">400 Level</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Student School Email</label>
                        <input type="email" id="studentRegEmail" placeholder="student@uew.edu.gh" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Student Personal Email</label>
                        <input type="email" id="studentRegPersonalEmail" placeholder="personal@example.com" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Student Phone Number</label>
                        <input type="tel" id="studentRegPhone" placeholder="024XXXXXXX" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-calendar"></i> Year of Hall Registration</label>
                        <input type="text" id="studentRegAcademicYear" value="2026/2027" readonly required style="background: rgba(0,0,0,0.2); cursor: not-allowed;">
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-camera"></i> Picture Upload</label>
                        <input type="file" id="studentRegPicture" accept="image/*" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-receipt"></i> Payment Slip/Student ID Upload</label>
                        <input type="file" id="studentRegPaymentSlip" accept="image/*,.pdf" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-key"></i> Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" id="studentRegPassword" placeholder="••••••••" required>
                            <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('studentRegPassword', this)" aria-label="Show password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-phone-alt"></i> Guardian/Parent Details</h4>
                    <div class="form-group">
                        <label><i class="fas fa-user-friends"></i> Contact Person Name</label>
                        <input type="text" id="studentRegGuardianName" placeholder="Guardian's full name" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-map-marker-alt"></i> Address</label>
                        <input type="text" id="studentRegGuardianAddress" placeholder="Residential address" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Telephone</label>
                        <input type="tel" id="studentRegGuardianPhone" placeholder="024XXXXXXX" required>
                    </div>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-check-circle"></i> REGISTER</button>
                <p class="auth-switch">Already have an account? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
            </form>

            <!-- ==================== NEW: SANDWICH STUDENT LOGIN FORM ==================== -->
            <form id="sandwichStudentLoginForm" class="auth-form" novalidate>
                <h3><i class="fas fa-user-graduate"></i> SANDWICH STUDENT LOGIN</h3>
                <div class="form-group">
                    <label><i class="fas fa-id-card"></i> Index Number</label>
                    <input type="text" id="sandwichStudentIndexNumber" placeholder="e.g., 12345678" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> Password</label>
                    <div class="password-input-wrapper">
                        <input type="password" id="sandwichStudentPassword" placeholder="••••••••" required>
                        <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('sandwichStudentPassword', this)" aria-label="Show password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div style="text-align: right; margin-bottom: 15px;">
                    <a href="#" id="sandwichStudentForgotPasswordLink" style="color: var(--glow-blue); font-size: 0.85rem;">Forgot Password?</a>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-sign-in-alt"></i> SANDWICH STUDENT LOGIN</button>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">New Sandwich Student? <a href="#" onclick="showSandwichStudentRegister(); return false;">Register as Sandwich Student →</a></p>
            </form>

            <!-- ==================== NEW: SANDWICH STUDENT REGISTRATION FORM ==================== -->
            <form id="sandwichStudentRegisterForm" class="auth-form">
                <h3><i class="fas fa-user-plus"></i> SANDWICH STUDENT REGISTRATION</h3>
                <div style="max-height: 420px; overflow-y: auto; padding-right: 10px;">
                    <!-- A. PERSONAL INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-user-circle"></i> A. PERSONAL INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Full Name</label>
                        <input type="text" id="sandwichRegName" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-id-card"></i> Index Number</label>
                        <input type="text" id="sandwichRegIndex" placeholder="e.g., 12345678" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-venus-mars"></i> Gender</label>
                        <select id="sandwichRegGender" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-camera"></i> Picture Upload <span style="color: var(--danger-glow);">*</span></label>
                        <input type="file" id="sandwichRegPicture" accept="image/*" required>
                    </div>

                    <!-- B. ACCOMMODATION DETAILS -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-building"></i> B. ACCOMMODATION DETAILS</h4>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Select Block</label>
                        <select id="sandwichRegBlock" required>
                            <option value="">Select Block</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-door-open"></i> Room Number</label>
                        <input type="text" id="sandwichRegRoom" placeholder="e.g., 101" required
                               inputmode="numeric" pattern="[0-9]*"
                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>

                    <!-- C. ACADEMIC INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-graduation-cap"></i> C. ACADEMIC INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Department</label>
                        <input type="text" id="sandwichRegDepartment" placeholder="e.g., Computer Science" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-graduation-cap"></i> Programme</label>
                        <input type="text" id="sandwichRegProgram" placeholder="e.g., BSc Information Technology" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-layer-group"></i> Level</label>
                        <select id="sandwichRegLevel" required>
                            <option value="">Select Level</option>
                            <option value="100">100 Level</option>
                            <option value="200">200 Level</option>
                            <option value="300">300 Level</option>
                            <option value="400">400 Level</option>
                        </select>
                    </div>

                    <!-- D. CONTACT INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-address-card"></i> D. CONTACT INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Email Address</label>
                        <input type="email" id="sandwichRegEmail" placeholder="student@example.com" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Contact Number</label>
                        <input type="tel" id="sandwichRegPhone" placeholder="024XXXXXXX" required>
                    </div>

                    <!-- E. HALL REGISTRATION INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-calendar-check"></i> E. HALL REGISTRATION INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-calendar-plus"></i> Date of Arrival</label>
                        <input type="date" id="sandwichRegDateArrival" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-calendar-minus"></i> Date of Departure</label>
                        <input type="date" id="sandwichRegDateDeparture" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-clock"></i> Time of Sign-out</label>
                        <input type="time" id="sandwichRegTimeSignout" required>
                    </div>

                    <!-- Password -->
                    <div class="form-group" style="margin-top: 15px;">
                        <label><i class="fas fa-key"></i> Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" id="sandwichRegPassword" placeholder="••••••••" required>
                            <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('sandwichRegPassword', this)" aria-label="Show password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-check-circle"></i> REGISTER</button>
                <p class="auth-switch">Already have an account? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
            </form>

            <!-- ==================== NEW: GUEST TENANT LOGIN FORM ==================== -->
            <form id="guestTenantLoginForm" class="auth-form" novalidate>
                <h3><i class="fas fa-user-friends"></i> GUEST TENANT LOGIN</h3>
                <div class="form-group">
                    <label><i class="fas fa-envelope"></i> Email Address</label>
                    <input type="email" id="guestTenantLoginEmail" placeholder="tenant@example.com" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> Password</label>
                    <div class="password-input-wrapper">
                        <input type="password" id="guestTenantLoginPassword" placeholder="••••••••" required>
                        <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('guestTenantLoginPassword', this)" aria-label="Show password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div style="text-align: right; margin-bottom: 15px;">
                    <a href="#" id="guestTenantForgotPasswordLink" style="color: var(--glow-blue); font-size: 0.85rem;">Forgot Password?</a>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-sign-in-alt"></i> GUEST TENANT LOGIN</button>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">New Guest Tenant? <a href="#" onclick="showGuestTenantRegister(); return false;">Register as Guest Tenant →</a></p>
            </form>

            <!-- ==================== NEW: GUEST TENANT REGISTRATION FORM ==================== -->
            <form id="guestTenantRegisterForm" class="auth-form">
                <h3><i class="fas fa-user-plus"></i> GUEST TENANT REGISTRATION</h3>
                <div style="max-height: 420px; overflow-y: auto; padding-right: 10px;">
                    <!-- A. PERSONAL INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-user-circle"></i> A. PERSONAL INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Full Name</label>
                        <input type="text" id="guestTenantRegName" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-venus-mars"></i> Gender</label>
                        <select id="guestTenantRegGender" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-camera"></i> Picture Upload <span style="color: var(--danger-glow);">*</span></label>
                        <input type="file" id="guestTenantRegPicture" accept="image/*" required>
                    </div>

                    <!-- B. TENANT TYPE -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-tag"></i> B. SELECT TENANT TYPE</h4>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Tenant Type</label>
                        <select id="guestTenantRegType" required>
                            <option value="">Select Tenant Type</option>
                            <option value="Private">Private</option>
                            <option value="Organisation">Organisation</option>
                            <option value="Group">Group</option>
                        </select>
                    </div>
                    <div class="form-group" id="guestTenantOrgGroupField">
                        <label><i class="fas fa-building"></i> Name of Organisation/Group</label>
                        <input type="text" id="guestTenantRegOrgName" placeholder="Enter organisation or group name">
                    </div>

                    <!-- C. ACCOMMODATION DETAILS -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-building"></i> C. ACCOMMODATION DETAILS</h4>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Select Block</label>
                        <select id="guestTenantRegBlock" required>
                            <option value="">Select Block</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-door-open"></i> Room Number</label>
                        <input type="text" id="guestTenantRegRoom" placeholder="e.g., 101" required
                               inputmode="numeric" pattern="[0-9]*"
                               oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                    </div>

                    <!-- D. CONTACT INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-address-card"></i> D. CONTACT INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Email Address</label>
                        <input type="email" id="guestTenantRegEmail" placeholder="tenant@example.com" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Contact Number</label>
                        <input type="tel" id="guestTenantRegPhone" placeholder="024XXXXXXX" required>
                    </div>

                    <!-- E. HALL REGISTRATION INFORMATION -->
                    <h4 style="margin: 10px 0 8px; color: var(--glow-blue);"><i class="fas fa-calendar-check"></i> E. HALL REGISTRATION INFORMATION</h4>
                    <div class="form-group">
                        <label><i class="fas fa-calendar-plus"></i> Date of Arrival</label>
                        <input type="date" id="guestTenantRegDateArrival" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-calendar-minus"></i> Date of Departure</label>
                        <input type="date" id="guestTenantRegDateDeparture" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-clock"></i> Time of Sign-out</label>
                        <input type="time" id="guestTenantRegTimeSignout" required>
                    </div>

                    <!-- Password -->
                    <div class="form-group" style="margin-top: 15px;">
                        <label><i class="fas fa-key"></i> Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" id="guestTenantRegPassword" placeholder="••••••••" required>
                            <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('guestTenantRegPassword', this)" aria-label="Show password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-check-circle"></i> REGISTER</button>
                <p class="auth-switch">Already have an account? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Visitor? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login →</a></p>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
            </form>

            <!-- VISITOR LOGIN FORM (unchanged) -->
            <form id="visitorLoginForm" class="auth-form" novalidate>
                <h3><i class="fas fa-user-friends"></i> VISITOR LOGIN</h3>
                <div class="form-group">
                    <label><i class="fas fa-envelope"></i> Email</label>
                    <input type="email" id="visitorLoginEmail" placeholder="visitor@example.com" required>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-key"></i> Password</label>
                    <div class="password-input-wrapper">
                        <input type="password" id="visitorLoginPassword" placeholder="••••••••" required>
                        <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('visitorLoginPassword', this)" aria-label="Show password">
                            <i class="fas fa-eye"></i>
                        </button>
                    </div>
                </div>
                <div style="text-align: right; margin-bottom: 15px;">
                    <a href="#" id="visitorForgotPasswordLink" style="color: var(--glow-blue); font-size: 0.85rem;">Forgot Password?</a>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-sign-in-alt"></i> VISITOR LOGIN</button>
                <p class="auth-switch">New Visitor? <a href="#" onclick="showVisitorRegister(); return false;">Register as Visitor →</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
            </form>

            <!-- VISITOR REGISTRATION FORM (unchanged) -->
            <form id="visitorRegisterForm" class="auth-form">
                <h3><i class="fas fa-user-plus"></i> VISITOR REGISTRATION</h3>
                <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Full Name</label>
                        <input type="text" id="visitorRegName" placeholder="John Doe" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-venus-mars"></i> Gender</label>
                        <select id="visitorRegGender" required>
                            <option value="">Select Gender</option>
                            <option value="Male">Male</option>
                            <option value="Female">Female</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-building"></i> Hall/Hostel/Location</label>
                        <input type="text" id="visitorRegHallLocation" placeholder="e.g., Off-Campus Hostel" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-door-open"></i> Room Number</label>
                        <input type="text" id="visitorRegRoomNumber" placeholder="e.g., 12B" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-envelope"></i> Email</label>
                        <input type="email" id="visitorRegEmail" placeholder="visitor@example.com" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Phone Number</label>
                        <input type="tel" id="visitorRegPhone" placeholder="024XXXXXXX" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-camera"></i> Profile Picture</label>
                        <input type="file" id="visitorRegPicture" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-key"></i> Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" id="visitorRegPassword" placeholder="••••••••" required>
                            <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('visitorRegPassword', this)" aria-label="Show password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-check-circle"></i> Confirm Password</label>
                        <div class="password-input-wrapper">
                            <input type="password" id="visitorRegConfirmPassword" placeholder="••••••••" required>
                            <button type="button" class="toggle-password-btn" onclick="togglePasswordVisibility('visitorRegConfirmPassword', this)" aria-label="Show password">
                                <i class="fas fa-eye"></i>
                            </button>
                        </div>
                    </div>
                </div>
                <button type="submit" class="auth-btn"><i class="fas fa-check-circle"></i> REGISTER</button>
                <p class="auth-switch">Already have an account? <a href="#" onclick="showVisitorLogin(); return false;">Visitor Login</a></p>
                <p class="auth-switch">Regular Student? <a href="#" onclick="showStudentLogin(); return false;">Regular Student Login →</a></p>
                <p class="auth-switch">Sandwich Student? <a href="#" onclick="showSandwichStudentLogin(); return false;">Sandwich Student Login →</a></p>
                <p class="auth-switch">Guest Tenant? <a href="#" onclick="showGuestTenantLogin(); return false;">Guest Tenant Login →</a></p>
                <p class="auth-switch">Staff/Admin? <a href="#" onclick="showStaffLogin(); return false;">Staff Login →</a></p>
            </form>
        </div>
    </div>

    <!-- Main App Content -->
    <div id="appContent" style="display: none;">
        <!-- Sliding Banner Container for Mobile Student/Visitor View -->
        <div id="slidingBannerContainer" class="sliding-banner-container">
            <div class="sliding-banner-wrapper">
                <div class="sliding-banner">
                    <div class="slide active" id="bannerSlide1"></div>
                    <div class="slide" id="bannerSlide2"></div>
                    <div class="slide" id="bannerSlide3"></div>
                </div>
            </div>
            <!-- Menu Button -->
            <button id="menuDrawerBtn" class="menu-drawer-btn">
                <i class="fas fa-bars"></i>
            </button>
            <!-- Logo - Top Right -->
            <div id="topLogoContainer" class="top-logo-container">
                <img src="logo.jpeg" alt="Ghartey Hall Logo" class="top-logo-img" id="topLogoImg">
            </div>
            <!-- Centered Header Text -->
            <div class="banner-header-text">
                <div class="banner-badge" id="crawlerBadge">UEW - Winneba</div>
                <h1 class="banner-title">GHARTEY HALL</h1>
                <div id="crawlerText" class="crawler-text">
                    <div class="crawler-content" id="crawlerContent">
                        <span>🏆 Excellence in Leadership • Service Above Self • Integrity and Discipline 🏆</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- Menu Drawer -->
        <div id="menuDrawer" class="menu-drawer">
            <div class="menu-drawer-header">
                <div class="menu-drawer-user">
                    <i class="fas fa-user-circle"></i>
                    <div>
                        <span id="drawerUserName">Loading...</span>
                        <span class="drawer-role-badge" id="drawerUserRole">role</span>
                    </div>
                </div>
                <button id="closeDrawerBtn" class="close-drawer-btn">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div class="menu-drawer-body">
                <div class="drawer-section">
                    <h4>ACCOUNT</h4>
                    <button id="drawerLogoutBtn" class="drawer-menu-item">
                        <i class="fas fa-sign-out-alt"></i> LOGOUT
                    </button>
                </div>
                <div class="drawer-section">
                    <h4>PREFERENCES</h4>
                    <button id="drawerDarkModeBtn" class="drawer-menu-item">
                        <i class="fas fa-moon"></i> DARK MODE
                    </button>
                </div>
            </div>
        </div>

        <!-- Standard User Bar -->
        <div class="user-bar desktop-user-bar">
            <div class="user-info">
                <i class="fas fa-user-circle"></i>
                <span id="currentUser">Loading...</span>
                <span class="role-badge" id="userRole">role</span>
            </div>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button id="toggleDarkModeBtn" class="dark-mode-toggle-btn">
                    <i class="fas fa-moon"></i> DARK MODE
                </button>
                <button id="logoutBtn" class="logout-btn"><i class="fas fa-sign-out-alt"></i> LOGOUT</button>
            </div>
        </div>

        <!-- Standard Hall Title (DESKTOP) - UPDATED: logo added beside badge -->
        <div class="hall-title desktop-hall-title">
            <h1><i class="fas fa-building" style="margin-right: 12px; color: var(--glow-purple);"></i>GHARTEY HALL MANAGEMENT SYSTEM</h1>
            <div class="header-badge-group">
                <span class="badge"><i class="fas fa-shield-alt"></i> UEW · Winneba</span>
                <img src="logo.jpeg" alt="Ghartey Hall Logo" class="hall-logo">
            </div>
        </div>

        <!-- MAIN MENU PAGE -->
        <div id="menuPage" class="menu-page">
            <div class="menu-grid" id="menuGrid"></div>
        </div>

        <!-- MODULE CONTAINER -->
        <div id="moduleContainer" style="display: none;">
            <button id="backToMenuBtn" class="back-to-menu-btn">
                <i class="fas fa-arrow-left"></i> BACK TO MENU
            </button>
            <!-- Blocked access message for unapproved students -->
            <div id="moduleAccessBlocked" style="display: none;">
                <div class="glass-panel" style="padding: 30px; text-align: center;">
                    <i class="fas fa-lock" style="font-size: 3rem; color: var(--warning-glow); margin-bottom: 20px;"></i>
                    <h2 style="color: var(--warning-glow);">Access Restricted</h2>
                    <p style="font-size: 1.1rem; margin: 20px 0; color: var(--text-secondary);">
                        Your registration has not yet been approved; therefore, you are not authorized to access this feature.
                        Please contact your Hall Manager to complete the approval process and gain full access to all platform features.
                    </p>
                </div>
            </div>
            <div id="moduleContent"></div>
        </div>

        <!-- ==================== EXISTING MODULES (Inventory, Student Records, etc.) ==================== -->
        <!-- INVENTORY MODULE (unchanged) -->
        <div id="inventoryModule" class="module-content" style="display: none;">
            <div class="inventory-module-tabs">
                <button class="inventory-tab-btn active-tab" data-tab="inventory-main">
                    <i class="fas fa-warehouse"></i> INVENTORY
                </button>
                <button class="inventory-tab-btn" data-tab="item-search">
                    <i class="fas fa-search"></i> ITEM SEARCH & REQUEST
                </button>
                <button class="inventory-tab-btn" data-tab="manage-stock" id="manageStockTabBtnModule" style="display: none;">
                    <i class="fas fa-tools"></i> MANAGE STOCK
                </button>
                <button class="inventory-tab-btn" data-tab="analytics-dashboard" id="analyticsTabBtnModule" style="display: none;">
                    <i class="fas fa-chart-line"></i> ANALYTICS
                </button>
                <div class="inventory-module-actions">
                    <button id="scanQRBtnModule" class="qr-scan-btn"><i class="fas fa-qrcode"></i> SCAN QR</button>
                    <div class="export-btn-group" id="inventoryExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnInventory" class="export-data-btn"><i class="fas fa-download"></i> EXPORT</button>
                        <div class="export-options" id="exportOptionsInventory" style="display: none;">
                            <button id="exportCSVBtnInventory" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnInventory" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>
            </div>

            <div id="inventoryMainTab" class="inventory-tab-content active-tab-content">
                <div class="main-inventory">
                    <div class="metric-grid" id="netTotalContainer">
                        <div class="metric-card">
                            <div class="metric-label"><i class="fas fa-layer-group" style="margin-right: 5px;"></i> TOTAL NET ITEMS (ALL)</div>
                            <div class="metric-value" id="globalNetValue">0</div>
                            <span class="metric-unit">units</span>
                        </div>
                        <div class="metric-card">
                            <div class="metric-label"><i class="fas fa-arrows-spin"></i> ACTIVE ITEMS</div>
                            <div class="metric-value" id="activeItemCount">0</div>
                            <span class="metric-unit">types</span>
                        </div>
                    </div>

                    <div class="dashboard-panels">
                        <div class="glass-panel inventory-table-panel">
                            <h2 style="margin-bottom: 18px; display: flex; gap: 10px; justify-content: space-between; align-items: center;">
                                <span><i class="fas fa-list-ul" style="color: var(--glow-blue);"></i> MASTER STOCK · REAL TIME</span>
                                <div class="table-actions" id="tableAdminActions" style="display: none;">
                                    <button id="bulkDeleteBtn" class="table-action-btn danger-glow" style="padding: 8px 16px; font-size: 0.9rem;">
                                        <i class="fas fa-trash-alt"></i> DELETE SELECTED
                                    </button>
                                </div>
                            </h2>
                            <div class="table-wrapper">
                                <table class="inventory-table" id="inventoryTable">
                                    <thead>
                                        <tr>
                                            <th id="adminCheckboxHeader" style="width: 40px; display: none;"><input type="checkbox" id="selectAllCheckbox"></th>
                                            <th>Item</th><th>Initial</th><th>New in</th><th>Returned</th><th>Taken out</th><th>Net avail.</th><th>Last update</th>
                                            <th id="adminActionsHeader" style="display: none;">Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="tableBody"></tbody>
                                  </table>
                            </div>
                            <div style="margin-top: 20px; font-style: italic; color: var(--text-secondary);">
                                <i class="fas fa-sync fa-spin" style="margin-right: 6px;"></i> net = initial + new + returned – taken out
                            </div>
                        </div>

                        <div class="control-panel">
                            <div class="tracker-card" id="trackerCard">
                                <div class="tracker-title">
                                    <i class="fas fa-satellite-dish"></i> LIVE TRACKER : <span id="trackerItemName">select item</span>
                                </div>
                                <div class="tracker-grid" id="trackerContent">
                                    <div class="tracker-item"><span class="tracker-label">BROUGHT IN (first)</span><div class="tracker-value" id="trackBrought">—</div></div>
                                    <div class="tracker-item"><span class="tracker-label">LAST IN (new/return)</span><div class="tracker-value" id="trackLastIn">—</div></div>
                                    <div class="tracker-item"><span class="tracker-label">LAST TAKEN OUT</span><div class="tracker-value" id="trackTakenOut">—</div></div>
                                    <div class="tracker-item"><span class="tracker-label">RESPONSIBLE</span><div class="tracker-value responsible-highlight" id="trackResponsible">—</div></div>
                                    <div class="tracker-item"><span class="tracker-label">REASON</span><div class="tracker-value" id="trackReason">—</div></div>
                                    <div class="tracker-item"><span class="tracker-label">TAKEN TO</span><div class="tracker-value" id="trackTakenTo">—</div></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div id="itemSearchTab" class="inventory-tab-content">
                <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                    <h2 style="margin-bottom: 20px;"><i class="fas fa-search" style="color: var(--glow-blue);"></i> ITEM SEARCH & REQUEST</h2>
                    <div class="search-box" style="margin-bottom: 20px;">
                        <i class="fas fa-search"></i>
                        <input type="text" id="searchInput" placeholder="Search item (e.g. Projector, Desk...)" value="">
                        <button id="searchBtn"><i class="fas fa-radar"></i> FIND</button>
                    </div>
                    <div id="selectedItemPanel" class="selected-item-panel" style="display: none;">
                        <div class="selected-item-header">
                            <h4><i class="fas fa-box-open"></i> <span id="selectedItemName">-</span></h4>
                            <span class="item-category" id="selectedItemCategory"></span>
                        </div>
                        <div class="selected-item-details">
                            <div class="detail-row"><span class="detail-label">Available Net:</span><span class="detail-value highlight-net" id="selectedItemNet">0</span></div>
                            <div class="detail-row"><span class="detail-label">Location:</span><span class="detail-value" id="selectedItemLocation">Main Store</span></div>
                        </div>
                        <div class="request-form">
                            <div class="form-row">
                                <div class="input-group"><label for="requestQuantity"><i class="fas fa-calculator"></i> Quantity:</label><input type="number" id="requestQuantity" min="1" value="1" class="quantity-input"></div>
                                <div class="input-group"><label for="requestResponsible"><i class="fas fa-user"></i> Your Name:</label><input type="text" id="requestResponsible" placeholder="Enter your name" class="responsible-input"></div>
                            </div>
                            <div class="form-row" id="requestReasonLocationRow">
                                <div class="input-group"><label for="requestReason"><i class="fas fa-question-circle"></i> Reason for taking:</label><input type="text" id="requestReason" placeholder="e.g., Lecture, Event, Maintenance" class="responsible-input"></div>
                                <div class="input-group"><label for="requestTakeLocation"><i class="fas fa-map-marker-alt"></i> Location taken to:</label><input type="text" id="requestTakeLocation" placeholder="e.g., Room 203, Auditorium" class="responsible-input"></div>
                            </div>
                            <div class="form-actions"><button id="requestTakeOutBtn" class="request-btn"><i class="fas fa-arrow-right-from-bracket"></i> REQUEST TAKE OUT</button><div id="requestStatus" class="request-status"></div></div>
                        </div>
                    </div>
                    <div id="noSelectionMessage" class="no-selection-message"><i class="fas fa-arrow-up"></i><p>Search for an item above to request</p></div>
                </div>
                <div class="glass-panel" style="padding: 25px;">
                    <h2 style="margin-bottom: 18px;"><span><i class="fas fa-list-ul" style="color: var(--glow-blue);"></i> MASTER STOCK · REAL TIME</span></h2>
                    <div class="table-wrapper"><table class="inventory-table" id="inventoryTable2"><thead><tr><th>Item</th><th>Initial</th><th>New in</th><th>Returned</th><th>Taken out</th><th>Net avail.</th><th>Last update</th></tr></thead><tbody id="tableBody2"></tbody></table></div>
                    <div style="margin-top: 20px; font-style: italic; color: var(--text-secondary);"><i class="fas fa-sync fa-spin" style="margin-right: 6px;"></i> net = initial + new + returned – taken out</div>
                </div>
            </div>

            <div id="manageStockTab" class="inventory-tab-content">
                <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                    <h2 style="margin-bottom: 20px;"><i class="fas fa-tools" style="color: var(--glow-purple);"></i> MANAGE STOCK · ADMIN</h2>
                    <div class="action-forms" id="adminFormsMoved">
                        <div class="mini-form"><h3><i class="fas fa-plus-circle" style="color: #00e5b0;"></i> Add new item - ADMIN</h3><div class="form-row"><input type="text" id="newItemName" placeholder="Name e.g. Laptop" value=""><input type="number" id="newItemInit" placeholder="Initial qty" value="1" min="1"><input type="text" id="newItemCategory" placeholder="Category" value="General"><input type="text" id="newItemLocation" placeholder="Location" value="Main Store"></div><div class="form-row"><button id="addNewItemBtn" style="flex: 1;"><i class="fas fa-database"></i> CREATE ITEM</button></div></div>
                        <div class="mini-form"><h3><i class="fas fa-edit" style="color: var(--glow-purple);"></i> Edit Selected Item - ADMIN</h3><div class="form-row"><select id="editItemSelect"><option value="">— choose item to edit —</option></select></div><div id="editFormFields" style="display: none;"><div class="form-row"><input type="text" id="editItemName" placeholder="Item name"><input type="number" id="editItemInitial" placeholder="Initial qty" min="0"></div><div class="form-row"><input type="text" id="editItemCategory" placeholder="Category"><input type="text" id="editItemLocation" placeholder="Location"></div><div class="form-row"><button id="updateItemBtn" style="background: var(--glow-purple); color: white; border: none;"><i class="fas fa-save"></i> UPDATE ITEM</button><button id="deleteItemBtn" class="danger-glow"><i class="fas fa-trash-alt"></i> DELETE ITEM</button></div></div></div>
                        <div class="mini-form"><h3><i class="fas fa-arrow-right-to-bracket" style="color: #2ad4e3;"></i> Stock Movements - ADMIN</h3><div class="form-row"><select id="inOutItemSelect"><option value="">— choose item —</option></select><input type="number" id="inOutQty" placeholder="Qty" value="1" min="1"></div><div class="form-row"><input type="text" id="responsibleField" placeholder="Responsible name" value="Admin"><button id="newInBtn"><i class="fas fa-boxes"></i> Brought new</button><button id="returnedBtn" style="border-color: #00e5b0; color:#00e5b0;"><i class="fas fa-rotate-left"></i> Returned</button></div><div class="form-row"><button id="takenOutBtn" class="danger-glow"><i class="fas fa-arrow-right-from-bracket"></i> Taken out</button></div></div>
                    </div>
                </div>
                <div class="glass-panel" style="padding: 25px;">
                    <h2 style="margin-bottom: 18px;"><span><i class="fas fa-list-ul" style="color: var(--glow-blue);"></i> MASTER STOCK · REAL TIME</span></h2>
                    <div class="table-wrapper"><table class="inventory-table" id="inventoryTable3"><thead><tr><th>Item</th><th>Initial</th><th>New in</th><th>Returned</th><th>Taken out</th><th>Net avail.</th><th>Last update</th></tr></thead><tbody id="tableBody3"></tbody></table></div>
                    <div style="margin-top: 20px; font-style: italic; color: var(--text-secondary);"><i class="fas fa-sync fa-spin" style="margin-right: 6px;"></i> net = initial + new + returned – taken out</div>
                </div>
            </div>

            <div id="analyticsDashboardTab" class="inventory-tab-content">
                <div class="analytics-dashboard">
                    <div class="analytics-header">
                        <h2><i class="fas fa-chart-pie"></i> ADVANCED ANALYTICS DASHBOARD</h2>
                        <div class="analytics-controls">
                            <select id="analyticsTimeRange" class="analytics-select">
                                <option value="7">Last 7 days</option>
                                <option value="30" selected>Last 30 days</option>
                                <option value="90">Last 90 days</option>
                                <option value="365">Last year</option>
                                <option value="all">All time</option>
                            </select>
                            <button id="refreshAnalyticsBtn" class="analytics-refresh-btn">
                                <i class="fas fa-sync-alt"></i> UPDATE
                            </button>
                        </div>
                    </div>

                    <div class="analytics-metric-grid">
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-exchange-alt"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">Total Transactions</div>
                                <div class="analytics-metric-value" id="totalTransactions">0</div>
                            </div>
                        </div>
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-arrow-right-from-bracket"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">Items Taken Out</div>
                                <div class="analytics-metric-value" id="totalTakenOut">0</div>
                            </div>
                        </div>
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-rotate-left"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">Items Returned</div>
                                <div class="analytics-metric-value" id="totalReturned">0</div>
                            </div>
                        </div>
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-boxes"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">New Items Added</div>
                                <div class="analytics-metric-value" id="totalNewIn">0</div>
                            </div>
                        </div>
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-users"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">Active Users</div>
                                <div class="analytics-metric-value" id="activeUsers">0</div>
                            </div>
                        </div>
                        <div class="analytics-metric-card">
                            <div class="analytics-metric-icon"><i class="fas fa-exclamation-triangle"></i></div>
                            <div class="analytics-metric-content">
                                <div class="analytics-metric-label">Low Stock Items</div>
                                <div class="analytics-metric-value" id="lowStockItems">0</div>
                            </div>
                        </div>
                    </div>

                    <div class="analytics-charts-row">
                        <div class="analytics-chart-container">
                            <h3><i class="fas fa-chart-bar"></i> Item Usage Trends</h3>
                            <canvas id="usageTrendsChart"></canvas>
                        </div>
                        <div class="analytics-chart-container">
                            <h3><i class="fas fa-chart-pie"></i> Category Distribution</h3>
                            <canvas id="categoryChart"></canvas>
                        </div>
                    </div>

                    <div class="analytics-charts-row">
                        <div class="analytics-chart-container">
                            <h3><i class="fas fa-chart-line"></i> Transaction History</h3>
                            <canvas id="transactionChart"></canvas>
                        </div>
                        <div class="analytics-chart-container">
                            <h3><i class="fas fa-fire"></i> Most Requested Items</h3>
                            <canvas id="popularItemsChart"></canvas>
                        </div>
                    </div>

                    <div class="analytics-table-container">
                        <h3><i class="fas fa-exclamation-circle"></i> LOW STOCK ALERTS (Net < 3)</h3>
                        <div class="table-wrapper">
                            <table class="analytics-table">
                                <thead>
                                    <tr><th>Item Name</th><th>Category</th><th>Current Net</th><th>Location</th><th>Status</th><th>Action</th>
                                </thead>
                                <tbody id="lowStockTableBody"></tbody>
                              </table>
                        </div>
                    </div>

                    <div class="analytics-table-container">
                        <h3><i class="fas fa-trophy"></i> TOP USERS BY ACTIVITY</h3>
                        <div class="table-wrapper">
                            <table class="analytics-table">
                                <thead>
                                    <tr><th>User Name</th><th>Role</th><th>Total Transactions</th><th>Items Taken</th><th>Items Returned</th><th>Last Active</th>
                                </thead>
                                <tbody id="topUsersTableBody"></tbody>
                              </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- STUDENT RECORDS MODULE (UPDATED: added filters, Affiliates tab, bulk actions, checkboxes, missing columns, responsive card layout) -->
        <div id="studentRecordsModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-users" style="color: var(--glow-blue);"></i> REGULAR STUDENT RECORDS · GHARTEY HALL</h2>

                <div class="verification-tabs">
                    <button class="verification-tab-btn active-verif-tab" data-verif-status="all">ALL STUDENTS</button>
                    <button class="verification-tab-btn" data-verif-status="pending">PENDING APPROVAL</button>
                    <button class="verification-tab-btn" data-verif-status="approved">APPROVED</button>
                    <button class="verification-tab-btn" data-verif-status="disapproved">DISAPPROVED</button>
                    <button class="verification-tab-btn" data-verif-status="alumni">ALUMNI</button>
                    <button class="verification-tab-btn" data-verif-status="affiliates">AFFILIATES</button>
                </div>

                <!-- Student Filters: Year of Hall Registration, Level, Block, Residential Status -->
                <div class="student-filters" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: center; background: rgba(0,0,0,0.1); padding: 10px 15px; border-radius: 30px;">
                    <div class="filter-group">
                        <label for="filterYear" style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Year of Hall Registration</label>
                        <select id="filterYear" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Years</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="filterLevel" style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Student Level</label>
                        <select id="filterLevel" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Levels</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="300">300</option>
                            <option value="400">400</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="filterBlock" style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Block</label>
                        <select id="filterBlock" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Blocks</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label for="filterResidentialStatus" style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Residential Status</label>
                        <select id="filterResidentialStatus" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All</option>
                            <option value="Residential">Residential</option>
                            <option value="Non-residential">Non-residential</option>
                        </select>
                    </div>
                    <button id="clearFiltersBtn" class="filter-clear-btn" style="background: transparent; border: 1px solid var(--danger-glow); color: var(--danger-glow); padding: 8px 16px; border-radius: 30px; cursor: pointer; font-weight: 600; transition: all 0.3s;">Clear Filters</button>
                </div>

                <div class="search-box" style="margin-bottom: 20px;">
                    <i class="fas fa-search"></i>
                    <input type="text" id="studentSearchInput" placeholder="Search by name, index number, room..." value="">
                    <button id="studentSearchBtn"><i class="fas fa-radar"></i> SEARCH</button>
                </div>
                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="studentRecordsExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnStudentRecords" class="export-data-btn"><i class="fas fa-download"></i> EXPORT RECORDS</button>
                        <div class="export-options" id="exportOptionsStudentRecords" style="display: none;">
                            <button id="exportCSVBtnStudentRecords" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnStudentRecords" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>
                <div class="admin-actions" style="display: flex; gap: 10px; margin: 10px 0 20px;">
                    <button id="recoverMissingStudentsBtn" class="analytics-refresh-btn" style="background: var(--warning-glow); color: var(--dark-bg); border-color: var(--warning-glow);">
                        <i class="fas fa-sync-alt"></i> RECOVER MISSING STUDENTS
                    </button>
                </div>

                <div id="adminBulkActions" class="admin-bulk-actions" style="display: none;">
                    <button id="bulkMoveToAlumniBtn" class="action-btn move-alumni-btn"><i class="fas fa-user-graduate"></i> Move Selected to Alumni</button>
                    <button id="bulkMoveToAffiliatesBtn" class="action-btn move-affiliates-btn"><i class="fas fa-user-tag"></i> Move Selected to Affiliates</button>
                    <span id="selectedCount">0 selected</span>
                </div>

                <!-- ==================== MODERN RESPONSIVE STUDENT RECORDS TABLE/CARD ==================== -->
                <div class="student-records-responsive-container">
                    <div class="table-wrapper-responsive" id="studentRecordsTableWrapper" style="max-height: 600px; overflow-y: auto;">
                        <table class="inventory-table student-records-table" id="studentRecordsTable">
                            <thead>
                                <tr>
                                    <th id="studentCheckboxHeader" style="width: 40px; display: none;"><input type="checkbox" id="selectAllStudentsCheckbox"></th>
                                    <th>Photo</th>
                                    <th>Name</th>
                                    <th>Index No.</th>
                                    <th>Gender</th>
                                    <th>Block</th>
                                    <th>Room</th>
                                    <th>Dept.</th>
                                    <th>Program</th>
                                    <th>Level</th>
                                    <th>School Email</th>
                                    <th>Personal Email</th>
                                    <th>Phone</th>
                                    <th>Status</th>
                                    <th>Verification</th>
                                    <th>Year of Hall Reg.</th>
                                    <th>Guardian</th>
                                    <th>Guardian Phone</th>
                                    <th>Guardian Address</th>
                                    <th>Payment Slip</th>
                                    <th>Registered</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="studentRecordsBody"></tbody>
                        </table>
                    </div>
                    <div id="studentRecordsCardsContainer" class="student-records-cards-container" style="display: none;"></div>
                </div>
            </div>
        </div>

        <!-- Edit Student Modal -->
        <div id="editStudentModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 600px; max-height: 90vh; overflow-y: auto;">
                <div class="modal-header">
                    <h2><i class="fas fa-edit"></i> EDIT STUDENT RECORD</h2>
                </div>
                <form id="editStudentForm">
                    <input type="hidden" id="editStudentId">
                    <div class="form-group"><label>Full Name</label><input type="text" id="editStudentFullName" required></div>
                    <div class="form-group"><label>Index Number</label><input type="text" id="editStudentIndexNum" required></div>
                    <div class="form-group"><label>Gender</label><select id="editStudentGenderSelect"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                    <div class="form-group"><label>Block</label><select id="editStudentBlockSelect"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                    <div class="form-group"><label>Room Number</label><input type="text" id="editStudentRoomNum" required></div>
                    <div class="form-group"><label>Department</label><input type="text" id="editStudentDept" required></div>
                    <div class="form-group"><label>Program</label><input type="text" id="editStudentProg" required></div>
                    <div class="form-group"><label>Level</label><select id="editStudentLevelSelect"><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option></select></div>
                    <div class="form-group"><label>Student School Email</label><input type="email" id="editStudentEmailAddr" required></div>
                    <div class="form-group"><label>Student Personal Email</label><input type="email" id="editStudentPersonalEmail"></div>
                    <div class="form-group"><label>Student Phone Number</label><input type="tel" id="editStudentPhone"></div>
                    <div class="form-group"><label>Year of Hall Registration</label><input type="text" id="editStudentAcadYear" required></div>
                    <div class="form-group"><label>Status</label><select id="editStudentStatusSelect"><option value="Residential">Residential</option><option value="Non-residential">Non-residential</option></select></div>
                    <div class="form-group"><label>Guardian Name</label><input type="text" id="editStudentGuardName" required></div>
                    <div class="form-group"><label>Guardian Address</label><input type="text" id="editStudentGuardAddr" required></div>
                    <div class="form-group"><label>Guardian Phone</label><input type="text" id="editStudentGuardPhoneNum" required></div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div id="editStudentCurrentPicture" style="margin-bottom: 8px;"></div>
                        <input type="file" id="editStudentPictureInput" accept="image/*">
                    </div>
                    <div class="form-group">
                        <label>Payment Slip / Student ID</label>
                        <div id="editStudentCurrentPaymentSlip" style="margin-bottom: 8px;"></div>
                        <input type="file" id="editStudentPaymentSlipInput" accept="image/*,.pdf">
                    </div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Verify Student Modal -->
        <div id="verifyStudentModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-check-circle"></i> VERIFY STUDENT REGISTRATION</h2>
                    <p id="verifyStudentName"></p>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-tasks"></i> Verification Status</label>
                    <select id="verificationStatusSelect" class="form-control">
                        <option value="approved">Approve Registration</option>
                        <option value="disapproved">Disapprove Registration</option>
                    </select>
                </div>
                <div class="form-group" id="disapproveReasonGroup" style="display: none;">
                    <label><i class="fas fa-comment-dots"></i> Reason for Disapproval</label>
                    <textarea id="disapproveReason" rows="3" placeholder="Please provide reason for disapproval..." class="form-control" style="width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--glass-edge); border-radius:12px; padding:12px; color:white;"></textarea>
                </div>
                <div class="form-row">
                    <button id="submitVerificationBtn" class="auth-btn"><i class="fas fa-save"></i> SUBMIT VERIFICATION</button>
                    <button id="closeVerifyModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                </div>
            </div>
        </div>

        <!-- ==================== NEW: SANDWICH STUDENT RECORDS MODULE ==================== -->
        <div id="sandwichRecordsModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-graduate" style="color: var(--glow-blue);"></i> SANDWICH STUDENT RECORDS · GHARTEY HALL</h2>

                <div class="verification-tabs">
                    <button class="verification-tab-btn active-verif-tab" data-sandwich-status="all">ALL STUDENTS</button>
                    <button class="verification-tab-btn" data-sandwich-status="pending">PENDING APPROVAL</button>
                    <button class="verification-tab-btn" data-sandwich-status="approved">APPROVED</button>
                    <button class="verification-tab-btn" data-sandwich-status="disapproved">DISAPPROVED</button>
                    <button class="verification-tab-btn" data-sandwich-status="alumni">ALUMNI</button>
                    <!-- No Affiliates tab for Sandwich Students -->
                </div>

                <!-- Sandwich Student Filters -->
                <div class="student-filters" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: center; background: rgba(0,0,0,0.1); padding: 10px 15px; border-radius: 30px;">
                    <div class="filter-group">
                        <label style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Level</label>
                        <select id="filterSandwichLevel" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Levels</option>
                            <option value="100">100</option>
                            <option value="200">200</option>
                            <option value="300">300</option>
                            <option value="400">400</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Block</label>
                        <select id="filterSandwichBlock" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Blocks</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <button id="clearSandwichFiltersBtn" class="filter-clear-btn" style="background: transparent; border: 1px solid var(--danger-glow); color: var(--danger-glow); padding: 8px 16px; border-radius: 30px; cursor: pointer; font-weight: 600; transition: all 0.3s;">Clear Filters</button>
                </div>

                <div class="search-box" style="margin-bottom: 20px;">
                    <i class="fas fa-search"></i>
                    <input type="text" id="sandwichSearchInput" placeholder="Search by name, index number, room..." value="">
                    <button id="sandwichSearchBtn"><i class="fas fa-radar"></i> SEARCH</button>
                </div>
                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="sandwichRecordsExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnSandwichRecords" class="export-data-btn"><i class="fas fa-download"></i> EXPORT RECORDS</button>
                        <div class="export-options" id="exportOptionsSandwichRecords" style="display: none;">
                            <button id="exportCSVBtnSandwichRecords" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnSandwichRecords" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>

                <div id="adminSandwichBulkActions" class="admin-bulk-actions" style="display: none;">
                    <button id="bulkSandwichMoveToAlumniBtn" class="action-btn move-alumni-btn"><i class="fas fa-user-graduate"></i> Move Selected to Alumni</button>
                    <span id="sandwichSelectedCount">0 selected</span>
                </div>

                <div class="student-records-responsive-container">
                    <div class="table-wrapper-responsive" id="sandwichRecordsTableWrapper" style="max-height: 600px; overflow-y: auto;">
                        <table class="inventory-table student-records-table" id="sandwichRecordsTable">
                            <thead>
                                <tr>
                                    <th id="sandwichCheckboxHeader" style="width: 40px; display: none;"><input type="checkbox" id="selectAllSandwichCheckbox"></th>
                                    <th>Photo</th>
                                    <th>Name</th>
                                    <th>Index No.</th>
                                    <th>Gender</th>
                                    <th>Block</th>
                                    <th>Room</th>
                                    <th>Dept.</th>
                                    <th>Program</th>
                                    <th>Level</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Arrival</th>
                                    <th>Departure</th>
                                    <th>Sign-out</th>
                                    <th>Verification</th>
                                    <th>Registered</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="sandwichRecordsBody"></tbody>
                        </table>
                    </div>
                    <div id="sandwichRecordsCardsContainer" class="student-records-cards-container" style="display: none;"></div>
                </div>
            </div>
        </div>

        <!-- ==================== NEW: GUEST TENANT RECORDS MODULE ==================== -->
        <div id="guestTenantRecordsModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-friends" style="color: var(--glow-blue);"></i> GUEST TENANT RECORDS · GHARTEY HALL</h2>

                <div class="verification-tabs">
                    <button class="verification-tab-btn active-verif-tab" data-guest-status="all">ALL TENANTS</button>
                    <button class="verification-tab-btn" data-guest-status="approved">APPROVED</button>
                    <button class="verification-tab-btn" data-guest-status="pending">PENDING</button>
                    <button class="verification-tab-btn" data-guest-status="disapproved">DISAPPROVED</button>
                </div>

                <!-- Guest Tenant Filters & Search -->
                <div class="student-filters" style="display: flex; flex-wrap: wrap; gap: 15px; margin-bottom: 20px; align-items: center; background: rgba(0,0,0,0.1); padding: 10px 15px; border-radius: 30px;">
                    <div class="filter-group">
                        <label style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Tenant Type</label>
                        <select id="filterGuestTenantType" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Types</option>
                            <option value="Private">Private</option>
                            <option value="Organisation">Organisation</option>
                            <option value="Group">Group</option>
                        </select>
                    </div>
                    <div class="filter-group">
                        <label style="font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px;">Block</label>
                        <select id="filterGuestTenantBlock" class="filter-select" style="background: rgba(0,0,0,0.3); border: 1px solid var(--glass-edge); border-radius: 30px; padding: 8px 16px; color: var(--text-primary); font-family: inherit; cursor: pointer;">
                            <option value="all">All Blocks</option>
                            <option value="Block A">Block A</option>
                            <option value="Block B">Block B</option>
                            <option value="Block C">Block C</option>
                        </select>
                    </div>
                    <button id="clearGuestTenantFiltersBtn" class="filter-clear-btn" style="background: transparent; border: 1px solid var(--danger-glow); color: var(--danger-glow); padding: 8px 16px; border-radius: 30px; cursor: pointer; font-weight: 600; transition: all 0.3s;">Clear Filters</button>
                </div>

                <div class="search-box" style="margin-bottom: 20px;">
                    <i class="fas fa-search"></i>
                    <input type="text" id="guestTenantSearchInput" placeholder="Search by name, email, room, organisation..." value="">
                    <button id="guestTenantSearchBtn"><i class="fas fa-radar"></i> SEARCH</button>
                </div>
                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="guestTenantRecordsExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnGuestTenantRecords" class="export-data-btn"><i class="fas fa-download"></i> EXPORT RECORDS</button>
                        <div class="export-options" id="exportOptionsGuestTenantRecords" style="display: none;">
                            <button id="exportCSVBtnGuestTenantRecords" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnGuestTenantRecords" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>

                <div class="student-records-responsive-container">
                    <div class="table-wrapper-responsive" id="guestTenantRecordsTableWrapper" style="max-height: 600px; overflow-y: auto;">
                        <table class="inventory-table student-records-table" id="guestTenantRecordsTable">
                            <thead>
                                <tr>
                                    <th>Photo</th>
                                    <th>Name</th>
                                    <th>Gender</th>
                                    <th>Tenant Type</th>
                                    <th>Org/Group</th>
                                    <th>Block</th>
                                    <th>Room</th>
                                    <th>Email</th>
                                    <th>Phone</th>
                                    <th>Arrival</th>
                                    <th>Departure</th>
                                    <th>Sign-out</th>
                                    <th>Verification</th>
                                    <th>Registered</th>
                                    <th>Actions</th>
                                </tr>
                            </thead>
                            <tbody id="guestTenantRecordsBody"></tbody>
                        </table>
                    </div>
                    <div id="guestTenantRecordsCardsContainer" class="student-records-cards-container" style="display: none;"></div>
                </div>
            </div>
        </div>

        <!-- Edit Sandwich Student Modal -->
        <div id="editSandwichModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 600px; max-height: 90vh; overflow-y: auto;">
                <div class="modal-header">
                    <h2><i class="fas fa-edit"></i> EDIT SANDWICH STUDENT RECORD</h2>
                </div>
                <form id="editSandwichForm">
                    <input type="hidden" id="editSandwichId">
                    <div class="form-group"><label>Full Name</label><input type="text" id="editSandwichName" required></div>
                    <div class="form-group"><label>Index Number</label><input type="text" id="editSandwichIndex" required></div>
                    <div class="form-group"><label>Gender</label><select id="editSandwichGender"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                    <div class="form-group"><label>Block</label><select id="editSandwichBlock"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                    <div class="form-group"><label>Room Number</label><input type="text" id="editSandwichRoom" required></div>
                    <div class="form-group"><label>Department</label><input type="text" id="editSandwichDept" required></div>
                    <div class="form-group"><label>Programme</label><input type="text" id="editSandwichProgram" required></div>
                    <div class="form-group"><label>Level</label><select id="editSandwichLevel"><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option></select></div>
                    <div class="form-group"><label>Email</label><input type="email" id="editSandwichEmail" required></div>
                    <div class="form-group"><label>Phone</label><input type="tel" id="editSandwichPhone" required></div>
                    <div class="form-group"><label>Date of Arrival</label><input type="date" id="editSandwichArrival" required></div>
                    <div class="form-group"><label>Date of Departure</label><input type="date" id="editSandwichDeparture" required></div>
                    <div class="form-group"><label>Time of Sign-out</label><input type="time" id="editSandwichSignout" required></div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div id="editSandwichCurrentPicture" style="margin-bottom: 8px;"></div>
                        <input type="file" id="editSandwichPictureInput" accept="image/*">
                    </div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditSandwichModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Edit Guest Tenant Modal -->
        <div id="editGuestTenantModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 600px; max-height: 90vh; overflow-y: auto;">
                <div class="modal-header">
                    <h2><i class="fas fa-edit"></i> EDIT GUEST TENANT RECORD</h2>
                </div>
                <form id="editGuestTenantForm">
                    <input type="hidden" id="editGuestTenantId">
                    <div class="form-group"><label>Full Name</label><input type="text" id="editGuestTenantName" required></div>
                    <div class="form-group"><label>Gender</label><select id="editGuestTenantGender"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                    <div class="form-group"><label>Tenant Type</label><select id="editGuestTenantType"><option value="Private">Private</option><option value="Organisation">Organisation</option><option value="Group">Group</option></select></div>
                    <div class="form-group"><label>Organisation/Group Name</label><input type="text" id="editGuestTenantOrgName"></div>
                    <div class="form-group"><label>Block</label><select id="editGuestTenantBlock"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                    <div class="form-group"><label>Room Number</label><input type="text" id="editGuestTenantRoom" required></div>
                    <div class="form-group"><label>Email</label><input type="email" id="editGuestTenantEmail" required></div>
                    <div class="form-group"><label>Phone</label><input type="tel" id="editGuestTenantPhone" required></div>
                    <div class="form-group"><label>Date of Arrival</label><input type="date" id="editGuestTenantArrival" required></div>
                    <div class="form-group"><label>Date of Departure</label><input type="date" id="editGuestTenantDeparture" required></div>
                    <div class="form-group"><label>Time of Sign-out</label><input type="time" id="editGuestTenantSignout" required></div>
                    <div class="form-group">
                        <label>Profile Picture</label>
                        <div id="editGuestTenantCurrentPicture" style="margin-bottom: 8px;"></div>
                        <input type="file" id="editGuestTenantPictureInput" accept="image/*">
                    </div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditGuestTenantModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                </form>
            </div>
        </div>

        <!-- Verify Sandwich Modal -->
        <div id="verifySandwichModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-check-circle"></i> VERIFY SANDWICH STUDENT</h2>
                    <p id="verifySandwichName"></p>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-tasks"></i> Verification Status</label>
                    <select id="sandwichVerificationStatusSelect" class="form-control">
                        <option value="approved">Approve Registration</option>
                        <option value="disapproved">Disapprove Registration</option>
                    </select>
                </div>
                <div class="form-group" id="sandwichDisapproveReasonGroup" style="display: none;">
                    <label><i class="fas fa-comment-dots"></i> Reason for Disapproval</label>
                    <textarea id="sandwichDisapproveReason" rows="3" placeholder="Please provide reason for disapproval..." class="form-control" style="width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--glass-edge); border-radius:12px; padding:12px; color:white;"></textarea>
                </div>
                <div class="form-row">
                    <button id="submitSandwichVerificationBtn" class="auth-btn"><i class="fas fa-save"></i> SUBMIT VERIFICATION</button>
                    <button id="closeVerifySandwichModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                </div>
            </div>
        </div>

        <!-- Verify Guest Tenant Modal -->
        <div id="verifyGuestTenantModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-check-circle"></i> VERIFY GUEST TENANT</h2>
                    <p id="verifyGuestTenantName"></p>
                </div>
                <div class="form-group">
                    <label><i class="fas fa-tasks"></i> Verification Status</label>
                    <select id="guestTenantVerificationStatusSelect" class="form-control">
                        <option value="approved">Approve Registration</option>
                        <option value="disapproved">Disapprove Registration</option>
                    </select>
                </div>
                <div class="form-group" id="guestTenantDisapproveReasonGroup" style="display: none;">
                    <label><i class="fas fa-comment-dots"></i> Reason for Disapproval</label>
                    <textarea id="guestTenantDisapproveReason" rows="3" placeholder="Please provide reason for disapproval..." class="form-control" style="width:100%; background:rgba(0,0,0,0.5); border:1px solid var(--glass-edge); border-radius:12px; padding:12px; color:white;"></textarea>
                </div>
                <div class="form-row">
                    <button id="submitGuestTenantVerificationBtn" class="auth-btn"><i class="fas fa-save"></i> SUBMIT VERIFICATION</button>
                    <button id="closeVerifyGuestTenantModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                </div>
            </div>
        </div>

        <!-- COMPLAINTS MANAGEMENT MODULE -->
        <div id="complaintsManagementModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-clipboard-list" style="color: var(--glow-blue);"></i> COMPLAINTS MANAGEMENT · RECEIVED ISSUES</h2>

                <div class="complaints-tabs" id="complaintsTabsContainer">
                    <button class="complaints-tab-btn active-complaints-tab" data-complaints-status="all">ALL COMPLAINTS</button>
                    <button class="complaints-tab-btn" data-complaints-status="pending">PENDING</button>
                    <button class="complaints-tab-btn" data-complaints-status="acknowledged">ACKNOWLEDGED</button>
                    <button class="complaints-tab-btn" data-complaints-status="in progress">IN PROGRESS</button>
                    <button class="complaints-tab-btn" data-complaints-status="resolved">RESOLVED</button>
                    <button class="complaints-tab-btn" data-complaints-status="rejected">REJECTED</button>
                </div>

                <div class="search-box" style="margin-bottom: 20px;">
                    <i class="fas fa-search"></i>
                    <input type="text" id="complaintsSearchInput" placeholder="Search by student name, index, room, or complaint ID..." value="">
                    <button id="complaintsSearchBtn"><i class="fas fa-radar"></i> SEARCH</button>
                </div>

                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="complaintsExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnComplaints" class="export-data-btn"><i class="fas fa-download"></i> EXPORT COMPLAINTS</button>
                        <div class="export-options" id="exportOptionsComplaints" style="display: none;">
                            <button id="exportCSVBtnComplaints" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnComplaints" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>
                <div class="table-wrapper" style="max-height: 500px;">
                    <table class="inventory-table" id="complaintsTable">
                        <thead>
                            <tr><th>ID</th><th>Student</th><th>Index No.</th><th>Room</th><th>Block</th><th>Category</th><th>Issue Description</th><th>Location</th><th>Status</th><th>Submitted</th><th>Acknowledged By</th><th>Est. Fix Time</th><th>Updates</th><th>Action</th>
                        </thead>
                        <tbody id="complaintsBody"></tbody>
                      </table>
                </div>
            </div>
        </div>

        <!-- USER MANAGEMENT MODULE -->
        <div id="userManagementModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-plus" style="color: var(--glow-blue);"></i> CREATE NORMAL USER ACCOUNT</h2>
                <form id="createUserForm">
                    <div class="form-row">
                        <div class="input-group"><label>Full Name</label><input type="text" id="newUserName" placeholder="Full Name" required></div>
                        <div class="input-group"><label>Email</label><input type="email" id="newUserEmail" placeholder="user@ghartey.edu" required></div>
                    </div>
                    <div class="form-row">
                        <div class="input-group"><label>Password</label><input type="password" id="newUserPassword" placeholder="••••••••" required></div>
                        <div class="input-group"><label>Confirm Password</label><input type="password" id="newUserConfirmPassword" placeholder="••••••••" required></div>
                    </div>
                    <div class="form-row">
                        <div class="input-group"><label>Role</label><select id="newUserRole">
                            <option value="user">Normal User</option>
                        </select></div>
                    </div>
                    <button type="submit" class="auth-btn"><i class="fas fa-user-plus"></i> CREATE USER ACCOUNT</button>
                    <div id="createUserStatus" class="request-status" style="margin-top: 15px; display: none;"></div>
                </form>
            </div>

            <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-graduate" style="color: var(--glow-blue);"></i> REGISTER REGULAR STUDENT (ADMIN)</h2>
                <form id="adminRegisterStudentForm">
                    <div style="max-height: 400px; overflow-y: auto; padding-right: 10px;">
                        <div class="form-group"><label>Full Name</label><input type="text" id="adminStudentName" required></div>
                        <div class="form-group"><label>Index Number</label><input type="text" id="adminStudentIndex" required></div>
                        <div class="form-group"><label>Gender</label><select id="adminStudentGender"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                        <div class="form-group"><label>Block</label><select id="adminStudentBlock"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                        <div class="form-group"><label>Room Number</label>
                            <input type="text" id="adminStudentRoom" required
                                   inputmode="numeric" pattern="[0-9]*"
                                   oninput="this.value = this.value.replace(/[^0-9]/g, '')">
                        </div>
                        <div class="form-group"><label>Department</label><input type="text" id="adminStudentDepartment" required></div>
                        <div class="form-group"><label>Program</label><input type="text" id="adminStudentProgram" required></div>
                        <div class="form-group"><label>Level</label><select id="adminStudentLevel"><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option></select></div>
                        <div class="form-group"><label>Student School Email</label><input type="email" id="adminStudentEmail" required></div>
                        <div class="form-group"><label>Student Personal Email</label><input type="email" id="adminStudentPersonalEmail" required></div>
                        <div class="form-group"><label>Student Phone Number</label><input type="tel" id="adminStudentPhone" required></div>
                        <div class="form-group"><label>Year of Hall Registration</label><input type="text" id="adminStudentAcademicYear" value="2026/2027" readonly required style="background: rgba(0,0,0,0.2); cursor: not-allowed;"></div>
                        <div class="form-group"><label>Status</label><select id="adminStudentStatus"><option value="Residential">Residential</option><option value="Non-residential">Non-residential</option></select></div>
                        <div class="form-group"><label>Password</label><input type="text" id="adminStudentPassword" value="student123" required></div>
                        <h4>Guardian Details</h4>
                        <div class="form-group"><label>Guardian Name</label><input type="text" id="adminStudentGuardianName" required></div>
                        <div class="form-group"><label>Guardian Address</label><input type="text" id="adminStudentGuardianAddress" required></div>
                        <div class="form-group"><label>Guardian Phone</label><input type="text" id="adminStudentGuardianPhone" required></div>
                    </div>
                    <button type="submit" class="auth-btn"><i class="fas fa-user-graduate"></i> REGISTER STUDENT</button>
                    <div id="adminRegisterStatus" class="request-status" style="margin-top: 15px; display: none;"></div>
                </form>
            </div>

            <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-search" style="color: var(--glow-blue);"></i> SEARCH & EDIT STUDENT</h2>
                <div class="search-box" style="margin-bottom: 20px;">
                    <i class="fas fa-search"></i>
                    <input type="text" id="adminEditStudentSearch" placeholder="Search by name, index, or room number..." value="">
                    <button id="adminEditStudentSearchBtn"><i class="fas fa-radar"></i> FIND</button>
                </div>
                <div id="adminEditStudentResult" style="display: none;">
                    <form id="adminEditStudentForm">
                        <input type="hidden" id="adminEditStudentId">
                        <div class="form-row">
                            <div class="input-group"><label>Full Name</label><input type="text" id="adminEditStudentName" required></div>
                            <div class="input-group"><label>Index Number</label><input type="text" id="adminEditStudentIndex" required></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Gender</label><select id="adminEditStudentGender"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                            <div class="input-group"><label>Block</label><select id="adminEditStudentBlock"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Room Number</label><input type="text" id="adminEditStudentRoom" required></div>
                            <div class="input-group"><label>Department</label><input type="text" id="adminEditStudentDepartment" required></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Program</label><input type="text" id="adminEditStudentProgram" required></div>
                            <div class="input-group"><label>Level</label><select id="adminEditStudentLevel"><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option></select></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Student School Email</label><input type="email" id="adminEditStudentEmail" required></div>
                            <div class="input-group"><label>Student Personal Email</label><input type="email" id="adminEditStudentPersonalEmail"></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Student Phone Number</label><input type="tel" id="adminEditStudentPhone"></div>
                            <div class="input-group"><label>Year of Hall Registration</label><input type="text" id="adminEditStudentAcademicYear" required></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Status</label><select id="adminEditStudentStatus"><option value="Residential">Residential</option><option value="Non-residential">Non-residential</option></select></div>
                            <div class="input-group"><label>Guardian Name</label><input type="text" id="adminEditStudentGuardianName" required></div>
                        </div>
                        <div class="form-row">
                            <div class="input-group"><label>Guardian Address</label><input type="text" id="adminEditStudentGuardianAddress" required></div>
                            <div class="input-group"><label>Guardian Phone</label><input type="text" id="adminEditStudentGuardianPhone" required></div>
                        </div>
                        <div class="form-group">
                            <label>Profile Picture</label>
                            <div id="adminEditStudentCurrentPicture" style="margin-bottom: 8px;"></div>
                            <input type="file" id="adminEditStudentPicture" accept="image/*">
                        </div>
                        <div class="form-group">
                            <label>Payment Slip / Student ID</label>
                            <div id="adminEditStudentCurrentPaymentSlip" style="margin-bottom: 8px;"></div>
                            <input type="file" id="adminEditStudentPaymentSlip" accept="image/*,.pdf">
                        </div>
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <div id="adminEditStudentStatus" class="request-status" style="margin-top: 15px; display: none;"></div>
                    </form>
                </div>
                <div id="adminEditStudentNotFound" style="display: none; color: var(--danger-glow); text-align: center; padding: 20px;">
                    <i class="fas fa-exclamation-circle"></i> No student found matching your search.
                </div>
            </div>

            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-times" style="color: var(--danger-glow);"></i> MANAGE SYSTEM USERS</h2>
                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="usersExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnUsers" class="export-data-btn"><i class="fas fa-download"></i> EXPORT USERS</button>
                        <div class="export-options" id="exportOptionsUsers" style="display: none;">
                            <button id="exportCSVBtnUsers" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnUsers" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table class="inventory-table" id="usersManagementTable">
                        <thead>
                            <tr><th>Name</th><th>Email</th><th>Role</th><th>Created Date</th><th>Action</th>
                        </thead>
                        <tbody id="usersManagementBody"></tbody>
                      </table>
                </div>
            </div>
        </div>

        <!-- REGISTRATION APPROVAL REPORTING MODULE -->
        <div id="registrationReportingModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-chart-line" style="color: var(--glow-blue);"></i> REGISTRATION VERIFICATION REPORTS</h2>

                <div class="report-filters">
                    <div class="filter-group">
                        <label><i class="fas fa-calendar"></i> Time Period</label>
                        <select id="reportTimeRange">
                            <option value="day">Today</option>
                            <option value="week" selected>This Week</option>
                            <option value="month">This Month</option>
                            <option value="year">This Year</option>
                        </select>
                    </div>
                    <button id="refreshReportBtn" class="analytics-refresh-btn"><i class="fas fa-sync-alt"></i> UPDATE REPORT</button>
                    <div class="export-btn-group" id="registrationReportExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnRegistrationReport" class="export-data-btn"><i class="fas fa-download"></i> EXPORT REPORT</button>
                        <div class="export-options" id="exportOptionsRegistrationReport" style="display: none;">
                            <button id="exportCSVBtnRegistrationReport" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnRegistrationReport" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>

                <div class="analytics-metric-grid">
                    <div class="analytics-metric-card">
                        <div class="analytics-metric-icon"><i class="fas fa-check-circle"></i></div>
                        <div class="analytics-metric-content">
                            <div class="analytics-metric-label">Approved</div>
                            <div class="analytics-metric-value" id="reportApprovedCount">0</div>
                        </div>
                    </div>
                    <div class="analytics-metric-card">
                        <div class="analytics-metric-icon"><i class="fas fa-times-circle"></i></div>
                        <div class="analytics-metric-content">
                            <div class="analytics-metric-label">Disapproved</div>
                            <div class="analytics-metric-value" id="reportDisapprovedCount">0</div>
                        </div>
                    </div>
                    <div class="analytics-metric-card">
                        <div class="analytics-metric-icon"><i class="fas fa-clock"></i></div>
                        <div class="analytics-metric-content">
                            <div class="analytics-metric-label">Pending</div>
                            <div class="analytics-metric-value" id="reportPendingCount">0</div>
                        </div>
                    </div>
                    <div class="analytics-metric-card">
                        <div class="analytics-metric-icon"><i class="fas fa-users"></i></div>
                        <div class="analytics-metric-content">
                            <div class="analytics-metric-label">Total Registered</div>
                            <div class="analytics-metric-value" id="reportTotalCount">0</div>
                        </div>
                    </div>
                </div>

                <div class="analytics-chart-container" style="margin-top: 20px;">
                    <h3><i class="fas fa-chart-pie"></i> Registration Status Distribution</h3>
                    <canvas id="registrationStatusChart"></canvas>
                </div>

                <div class="analytics-table-container" style="margin-top: 20px;">
                    <h3><i class="fas fa-list"></i> Recent Verification Activity</h3>
                    <div class="table-wrapper">
                        <table class="analytics-table">
                            <thead>
                                <tr><th>Student Name</th><th>Index Number</th><th>Status</th><th>Reviewed By</th><th>Reason (if disapproved)</th><th>Review Date</th>
                            </thead>
                            <tbody id="recentVerificationBody"></tbody>
                          </table>
                    </div>
                </div>
            </div>
        </div>

        <!-- KEY TRACKING MODULE -->
        <div id="keyTrackingModuleShared" class="module-content" style="display: none;">
            <div class="key-tracking-container">
                <div class="glass-panel" style="padding: 25px; margin-bottom: 25px;">
                    <h2 style="margin-bottom: 20px;"><i class="fas fa-key" style="color: var(--glow-blue);"></i> KEY TRACKING · LOG MOVEMENT</h2>
                    <form id="keyLogForm">
                        <div class="form-row">
                            <div class="input-group" style="flex: 1;">
                                <label><i class="fas fa-door-open"></i> Select Room Number</label>
                                <input type="text" id="keyRoomInput" list="keyRoomDatalist" placeholder="Type or select room number..." autocomplete="off" class="room-search-input">
                                <datalist id="keyRoomDatalist"></datalist>
                            </div>
                            <div class="input-group" style="flex: 2;">
                                <label><i class="fas fa-user-graduate"></i> Select Student <span id="lastActionIndicator" class="last-action-indicator"></span></label>
                                <div class="student-select-enhanced" id="studentSelectEnhanced">
                                    <select id="keyStudentSelect" class="enhanced-student-select">
                                        <option value="">-- Select Student --</option>
                                    </select>
                                    <div id="studentPreviewImage" class="student-preview-image" style="display: none;">
                                        <img id="selectedStudentPic" src="" alt="Student Photo">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label><i class="fas fa-map-marker-alt"></i> Key Location</label>
                                <select id="keyLocationSelect" required>
                                    <option value="">-- Select Location --</option>
                                    <option value="At the Lodge">At the Lodge (Porter's Desk)</option>
                                    <option value="In the Room">In the Room</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <label><i class="fas fa-calendar"></i> Date & Time</label>
                                <input type="datetime-local" id="keyDateTime" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label><i class="fas fa-arrow-right-to-bracket"></i> Action Type</label>
                                <select id="keyActionType" required>
                                    <option value="">-- Select Action --</option>
                                    <option value="submitted">Key Submitted (Returned)</option>
                                    <option value="collected">Key Collected (Taken)</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <label><i class="fas fa-user"></i> Processed By</label>
                                <input type="text" id="keyProcessedBy" placeholder="Staff Name" required>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group full-width">
                                <label><i class="fas fa-sticky-note"></i> Notes (Optional)</label>
                                <textarea id="keyNotes" rows="2" placeholder="Additional notes..."></textarea>
                            </div>
                        </div>
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> LOG KEY MOVEMENT</button>
                        <div id="keyLogStatus" class="request-status" style="margin-top: 15px; display: none;"></div>
                    </form>
                </div>

                <div class="glass-panel" style="padding: 25px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;">
                        <h2 style="margin: 0;"><i class="fas fa-history" style="color: var(--glow-blue);"></i> KEY MOVEMENT HISTORY</h2>
                        <div style="display: flex; gap: 10px;">
                            <div class="export-btn-group" id="keyHistoryExportGroup" style="position: relative; display: inline-flex;">
                                <button id="exportDataBtnKeyHistory" class="export-data-btn"><i class="fas fa-download"></i> EXPORT</button>
                                <div class="export-options" id="exportOptionsKeyHistory" style="display: none;">
                                    <button id="exportCSVBtnKeyHistory" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                                    <button id="exportPDFBtnKeyHistory" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                                </div>
                            </div>
                            <button id="toggleKeyHistoryBtn" class="toggle-list-btn" data-list="history">
                                <i class="fas fa-eye"></i> SHOW LIST
                            </button>
                        </div>
                    </div>
                    <div id="keyHistoryContainer" class="key-history-container" style="display: none;">
                        <div class="table-wrapper" style="max-height: 400px; overflow-y: auto;">
                            <table class="inventory-table" id="keyHistoryTable">
                                <thead>
                                    <tr><th>Student</th><th>Room</th><th>Action</th><th>Location</th><th>Date & Time</th><th>Processed By</th><th>Submission Time</th><th>Collection Time</th><th>Status</th>
                                </thead>
                                <tbody id="keyHistoryBody"></tbody>
                              </table>
                        </div>
                    </div>
                </div>

                <div class="glass-panel" style="padding: 25px; margin-top: 25px;">
                    <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px;">
                        <h2 style="margin: 0;"><i class="fas fa-chart-simple" style="color: var(--glow-blue);"></i> ROOM KEY STATUS SUMMARY</h2>
                        <div style="display: flex; gap: 10px;">
                            <div class="export-btn-group" id="keyStatusExportGroup" style="position: relative; display: inline-flex;">
                                <button id="exportDataBtnKeyStatus" class="export-data-btn"><i class="fas fa-download"></i> EXPORT</button>
                                <div class="export-options" id="exportOptionsKeyStatus" style="display: none;">
                                    <button id="exportCSVBtnKeyStatus" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                                    <button id="exportPDFBtnKeyStatus" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                                </div>
                            </div>
                            <button id="toggleKeyStatusBtn" class="toggle-list-btn" data-list="status">
                                <i class="fas fa-eye"></i> SHOW LIST
                            </button>
                        </div>
                    </div>
                    <div id="keyStatusContainer" class="key-status-container" style="display: none;">
                        <div class="table-wrapper" style="max-height: 500px; overflow-y: auto;">
                            <table class="inventory-table" id="keyStatusTable">
                                <thead>
                                    <tr><th>Room Number</th><th>Occupants</th><th>Key Location</th><th>Last Action</th><th>Last Updated</th><th>Status</th>
                                </thead>
                                <tbody id="keyStatusBody"></tbody>
                              </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- REGULAR STUDENT REGISTRATION MODULE (student view) -->
        <div id="studentRegModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-user-graduate" style="color: var(--glow-blue);"></i> MY REGISTRATION (REGULAR STUDENT)</h2>

                <div id="verificationStatusBanner" class="verification-banner" style="margin-bottom: 20px;"></div>

                <div id="studentProfileView" style="display: none;">
                    <div class="profile-header">
                        <div id="studentProfilePhoto" class="profile-photo">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="profile-name-status">
                            <h3 id="viewStudentName" class="profile-name">-</h3>
                            <div id="viewVerificationStatus" class="profile-status"></div>
                        </div>
                    </div>

                    <div class="profile-details-grid">
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-id-card"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Index Number</span>
                                <span class="detail-value" id="viewStudentIndex">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-venus-mars"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Gender</span>
                                <span class="detail-value" id="viewStudentGender">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Block</span>
                                <span class="detail-value" id="viewStudentBlock">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-door-open"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Room Number</span>
                                <span class="detail-value" id="viewStudentRoom">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Department</span>
                                <span class="detail-value" id="viewStudentDept">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-graduation-cap"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Program</span>
                                <span class="detail-value" id="viewStudentProgram">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-layer-group"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Level</span>
                                <span class="detail-value" id="viewStudentLevel">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Student School Email</span>
                                <span class="detail-value" id="viewStudentEmail">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Student Personal Email</span>
                                <span class="detail-value" id="viewStudentPersonalEmail">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-phone"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Student Phone Number</span>
                                <span class="detail-value" id="viewStudentPhone">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-calendar"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Year of Hall Registration</span>
                                <span class="detail-value" id="viewStudentAcademicYear">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-home"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Status</span>
                                <span class="detail-value" id="viewStudentStatus">-</span>
                            </div>
                        </div>
                    </div>

                    <div class="profile-section">
                        <h4><i class="fas fa-phone-alt"></i> Emergency Contact</h4>
                        <div class="profile-details-grid">
                            <div class="profile-detail-card">
                                <div class="detail-icon"><i class="fas fa-user-friends"></i></div>
                                <div class="detail-info">
                                    <span class="detail-label">Guardian Name</span>
                                    <span class="detail-value" id="viewStudentGuardianName">-</span>
                                </div>
                            </div>
                            <div class="profile-detail-card">
                                <div class="detail-icon"><i class="fas fa-map-marker-alt"></i></div>
                                <div class="detail-info">
                                    <span class="detail-label">Address</span>
                                    <span class="detail-value" id="viewStudentGuardianAddress">-</span>
                                </div>
                            </div>
                            <div class="profile-detail-card">
                                <div class="detail-icon"><i class="fas fa-phone"></i></div>
                                <div class="detail-info">
                                    <span class="detail-label">Phone</span>
                                    <span class="detail-value" id="viewStudentGuardianPhone">-</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div id="disapprovalReasonContainer" class="disapproval-reason" style="display: none;">
                        <h4><i class="fas fa-exclamation-triangle"></i> Disapproval Reason</h4>
                        <p id="viewDisapprovalReason">-</p>
                    </div>

                    <div class="profile-action">
                        <button id="editStudentRegistrationBtn" class="edit-profile-btn">
                            <i class="fas fa-edit"></i> EDIT REGISTRATION
                        </button>
                    </div>
                </div>

                <div id="studentRegForm" style="display: none;">
                    <div class="edit-form-container">
                        <div class="form-group">
                            <label><i class="fas fa-user"></i> Full Name</label>
                            <input type="text" id="editStudentName" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-id-card"></i> Index Number</label>
                            <input type="text" id="editStudentIndex" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-venus-mars"></i> Gender</label>
                            <select id="editStudentGender">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-building"></i> Block</label>
                            <select id="editStudentBlock">
                                <option value="Block A">Block A</option>
                                <option value="Block B">Block B</option>
                                <option value="Block C">Block C</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-door-open"></i> Room Number</label>
                            <input type="text" id="editStudentRoom" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-building"></i> Department</label>
                            <input type="text" id="editStudentDepartment" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-graduation-cap"></i> Program</label>
                            <input type="text" id="editStudentProgram" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-layer-group"></i> Level</label>
                            <select id="editStudentLevel">
                                <option value="100">100 Level</option>
                                <option value="200">200 Level</option>
                                <option value="300">300 Level</option>
                                <option value="400">400 Level</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Student School Email</label>
                            <input type="email" id="editStudentEmail" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Student Personal Email</label>
                            <input type="email" id="editStudentPersonalEmail">
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Student Phone Number</label>
                            <input type="tel" id="editStudentPhone">
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-calendar"></i> Year of Hall Registration</label>
                            <input type="text" id="editStudentAcademicYear" placeholder="2024/2025" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-home"></i> Status</label>
                            <select id="editStudentStatus">
                                <option value="Residential">Residential</option>
                                <option value="Non-residential">Non-residential</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-camera"></i> Picture Upload</label>
                            <input type="file" id="editStudentPicture" accept="image/*">
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-receipt"></i> Payment Slip/Student ID Upload</label>
                            <input type="file" id="editStudentPaymentSlip" accept="image/*,.pdf">
                        </div>
                        <h4>Guardian Details</h4>
                        <div class="form-group">
                            <label><i class="fas fa-user-friends"></i> Contact Person Name</label>
                            <input type="text" id="editStudentGuardianName" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-map-marker-alt"></i> Address</label>
                            <input type="text" id="editStudentGuardianAddress" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Telephone</label>
                            <input type="tel" id="editStudentGuardianPhone" required>
                        </div>
                        <div class="form-actions">
                            <button id="saveStudentUpdateBtn" class="auth-btn"><i class="fas fa-save"></i> SAVE UPDATES</button>
                            <button id="cancelStudentEditBtn" class="auth-btn cancel-btn"><i class="fas fa-times"></i> CANCEL</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== NEW: SANDWICH STUDENT PROFILE MODULE (student view) ==================== -->
        <div id="sandwichStudentRegModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-user-graduate" style="color: var(--glow-blue);"></i> MY REGISTRATION (SANDWICH STUDENT)</h2>

                <div id="sandwichVerificationStatusBanner" class="verification-banner" style="margin-bottom: 20px;"></div>

                <div id="sandwichProfileView" style="display: none;">
                    <div class="profile-header">
                        <div id="sandwichProfilePhoto" class="profile-photo">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="profile-name-status">
                            <h3 id="viewSandwichName" class="profile-name">-</h3>
                            <div id="viewSandwichVerificationStatus" class="profile-status"></div>
                        </div>
                    </div>

                    <div class="profile-details-grid">
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-id-card"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Index Number</span>
                                <span class="detail-value" id="viewSandwichIndex">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-venus-mars"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Gender</span>
                                <span class="detail-value" id="viewSandwichGender">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Block</span>
                                <span class="detail-value" id="viewSandwichBlock">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-door-open"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Room Number</span>
                                <span class="detail-value" id="viewSandwichRoom">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Department</span>
                                <span class="detail-value" id="viewSandwichDept">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-graduation-cap"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Programme</span>
                                <span class="detail-value" id="viewSandwichProgram">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-layer-group"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Level</span>
                                <span class="detail-value" id="viewSandwichLevel">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Email</span>
                                <span class="detail-value" id="viewSandwichEmail">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-phone"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Phone</span>
                                <span class="detail-value" id="viewSandwichPhone">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-calendar-plus"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Arrival Date</span>
                                <span class="detail-value" id="viewSandwichArrival">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-calendar-minus"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Departure Date</span>
                                <span class="detail-value" id="viewSandwichDeparture">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-clock"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Sign-out Time</span>
                                <span class="detail-value" id="viewSandwichSignout">-</span>
                            </div>
                        </div>
                    </div>

                    <div id="sandwichDisapprovalReasonContainer" class="disapproval-reason" style="display: none;">
                        <h4><i class="fas fa-exclamation-triangle"></i> Disapproval Reason</h4>
                        <p id="viewSandwichDisapprovalReason">-</p>
                    </div>

                    <div class="profile-action">
                        <button id="editSandwichRegistrationBtn" class="edit-profile-btn">
                            <i class="fas fa-edit"></i> EDIT REGISTRATION
                        </button>
                    </div>
                </div>

                <div id="sandwichRegForm" style="display: none;">
                    <div class="edit-form-container">
                        <div class="form-group"><label>Full Name</label><input type="text" id="editSandwichNameForm" required></div>
                        <div class="form-group"><label>Index Number</label><input type="text" id="editSandwichIndexForm" required></div>
                        <div class="form-group"><label>Gender</label><select id="editSandwichGenderForm"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                        <div class="form-group"><label>Block</label><select id="editSandwichBlockForm"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                        <div class="form-group"><label>Room Number</label><input type="text" id="editSandwichRoomForm" required></div>
                        <div class="form-group"><label>Department</label><input type="text" id="editSandwichDeptForm" required></div>
                        <div class="form-group"><label>Programme</label><input type="text" id="editSandwichProgramForm" required></div>
                        <div class="form-group"><label>Level</label><select id="editSandwichLevelForm"><option value="100">100</option><option value="200">200</option><option value="300">300</option><option value="400">400</option></select></div>
                        <div class="form-group"><label>Email</label><input type="email" id="editSandwichEmailForm" required></div>
                        <div class="form-group"><label>Phone</label><input type="tel" id="editSandwichPhoneForm" required></div>
                        <div class="form-group"><label>Date of Arrival</label><input type="date" id="editSandwichArrivalForm" required></div>
                        <div class="form-group"><label>Date of Departure</label><input type="date" id="editSandwichDepartureForm" required></div>
                        <div class="form-group"><label>Time of Sign-out</label><input type="time" id="editSandwichSignoutForm" required></div>
                        <div class="form-group"><label>Picture Upload</label><input type="file" id="editSandwichPictureForm" accept="image/*"></div>
                        <div class="form-actions">
                            <button id="saveSandwichUpdateBtn" class="auth-btn"><i class="fas fa-save"></i> SAVE UPDATES</button>
                            <button id="cancelSandwichEditBtn" class="auth-btn cancel-btn"><i class="fas fa-times"></i> CANCEL</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- ==================== NEW: GUEST TENANT PROFILE MODULE (tenant view) ==================== -->
        <div id="guestTenantProfileModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-user-friends" style="color: var(--glow-blue);"></i> MY PROFILE (GUEST TENANT)</h2>

                <div id="guestTenantVerificationStatusBanner" class="verification-banner" style="margin-bottom: 20px;"></div>

                <div id="guestTenantProfileView" style="display: none;">
                    <div class="profile-header">
                        <div id="guestTenantProfilePhoto" class="profile-photo">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="profile-name-status">
                            <h3 id="viewGuestTenantName" class="profile-name">-</h3>
                            <div id="viewGuestTenantVerificationStatus" class="profile-status"></div>
                        </div>
                    </div>

                    <div class="profile-details-grid">
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-venus-mars"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Gender</span>
                                <span class="detail-value" id="viewGuestTenantGender">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-tag"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Tenant Type</span>
                                <span class="detail-value" id="viewGuestTenantType">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Org/Group</span>
                                <span class="detail-value" id="viewGuestTenantOrgName">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Block</span>
                                <span class="detail-value" id="viewGuestTenantBlock">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-door-open"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Room Number</span>
                                <span class="detail-value" id="viewGuestTenantRoom">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Email</span>
                                <span class="detail-value" id="viewGuestTenantEmail">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-phone"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Phone</span>
                                <span class="detail-value" id="viewGuestTenantPhone">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-calendar-plus"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Arrival Date</span>
                                <span class="detail-value" id="viewGuestTenantArrival">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-calendar-minus"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Departure Date</span>
                                <span class="detail-value" id="viewGuestTenantDeparture">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-clock"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Sign-out Time</span>
                                <span class="detail-value" id="viewGuestTenantSignout">-</span>
                            </div>
                        </div>
                    </div>

                    <div id="guestTenantDisapprovalReasonContainer" class="disapproval-reason" style="display: none;">
                        <h4><i class="fas fa-exclamation-triangle"></i> Disapproval Reason</h4>
                        <p id="viewGuestTenantDisapprovalReason">-</p>
                    </div>

                    <div class="profile-action">
                        <button id="editGuestTenantProfileBtn" class="edit-profile-btn">
                            <i class="fas fa-edit"></i> EDIT PROFILE
                        </button>
                    </div>
                </div>

                <div id="guestTenantEditForm" style="display: none;">
                    <div class="edit-form-container">
                        <div class="form-group"><label>Full Name</label><input type="text" id="editGuestTenantNameForm" required></div>
                        <div class="form-group"><label>Gender</label><select id="editGuestTenantGenderForm"><option value="Male">Male</option><option value="Female">Female</option></select></div>
                        <div class="form-group"><label>Tenant Type</label><select id="editGuestTenantTypeForm"><option value="Private">Private</option><option value="Organisation">Organisation</option><option value="Group">Group</option></select></div>
                        <div class="form-group"><label>Org/Group Name</label><input type="text" id="editGuestTenantOrgNameForm"></div>
                        <div class="form-group"><label>Block</label><select id="editGuestTenantBlockForm"><option value="Block A">Block A</option><option value="Block B">Block B</option><option value="Block C">Block C</option></select></div>
                        <div class="form-group"><label>Room Number</label><input type="text" id="editGuestTenantRoomForm" required></div>
                        <div class="form-group"><label>Email</label><input type="email" id="editGuestTenantEmailForm" required></div>
                        <div class="form-group"><label>Phone</label><input type="tel" id="editGuestTenantPhoneForm" required></div>
                        <div class="form-group"><label>Date of Arrival</label><input type="date" id="editGuestTenantArrivalForm" required></div>
                        <div class="form-group"><label>Date of Departure</label><input type="date" id="editGuestTenantDepartureForm" required></div>
                        <div class="form-group"><label>Time of Sign-out</label><input type="time" id="editGuestTenantSignoutForm" required></div>
                        <div class="form-group"><label>Picture Upload</label><input type="file" id="editGuestTenantPictureForm" accept="image/*"></div>
                        <div class="form-actions">
                            <button id="saveGuestTenantUpdateBtn" class="auth-btn"><i class="fas fa-save"></i> SAVE UPDATES</button>
                            <button id="cancelGuestTenantEditBtn" class="auth-btn cancel-btn"><i class="fas fa-times"></i> CANCEL</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- STUDENT COMPLAINTS MODULE -->
        <div id="studentComplaintsModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-list-alt" style="color: var(--glow-blue);"></i> MY COMPLAINTS · TRACKING</h2>
                <div class="student-complaints-tabs">
                    <button class="student-complaints-tab-btn active-complaints-tab" data-complaints-tab="current">
                        <i class="fas fa-hourglass-half"></i> CURRENT COMPLAINTS
                    </button>
                    <button class="student-complaints-tab-btn" data-complaints-tab="history">
                        <i class="fas fa-history"></i> COMPLAINTS HISTORY
                    </button>
                </div>
                <div id="studentComplaintsList" class="complaints-list-container"></div>
                <div id="studentComplaintsEmpty" class="empty-state" style="display: none; text-align: center; padding: 40px 20px;">
                    <i class="fas fa-inbox" style="font-size: 3rem; color: var(--text-secondary); margin-bottom: 15px;"></i>
                    <p>No complaints found.</p>
                    <button class="auth-btn" style="margin-top: 15px;" onclick="navigateToModule('studentNewComplaintModule')">📝 Report New Complaint</button>
                </div>
            </div>
        </div>

        <!-- STUDENT NEW COMPLAINT MODULE -->
        <div id="studentNewComplaintModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-plus-circle" style="color: var(--glow-blue);"></i> REPORT NEW COMPLAINT</h2>
                <form id="newComplaintForm">
                    <div class="form-group">
                        <label><i class="fas fa-tags"></i> Issue Category</label>
                        <select id="complaintCategory" required>
                            <option value="">Select Category</option>
                            <option value="Cleaning issues">Cleaning Issues</option>
                            <option value="Electrical Issues">Electrical Issues</option>
                            <option value="Plumbing issues">Plumbing Issues</option>
                            <option value="Carpentry Issues">Carpentry Issues</option>
                            <option value="Others">Others</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-location-dot"></i> Location</label>
                        <input type="text" id="complaintLocation" placeholder="Enter specific location (e.g., Room 203, Block B, Washroom 2)" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-file-alt"></i> Issue Description</label>
                        <textarea id="complaintDescription" rows="4" placeholder="Please provide detailed description of the issue..." required></textarea>
                    </div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-paper-plane"></i> SUBMIT COMPLAINT</button>
                        <button type="button" id="clearComplaintBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--text-secondary);">CLEAR</button>
                    </div>
                    <div id="complaintSubmitStatus" class="request-status" style="margin-top: 15px;"></div>
                </form>
            </div>
        </div>

        <!-- STUDENT KEY TRACKING MODULE -->
        <div id="studentKeyTrackingModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-key" style="color: var(--glow-blue);"></i> ROOM KEY STATUS</h2>
                <div id="studentKeyStatusDisplay"></div>
            </div>
        </div>

        <!-- MARKETPLACE MODULE -->
        <div id="marketplaceModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-store" style="color: var(--glow-blue);"></i> GHARTEY MARKETPLACE</h2>

                <div class="marketplace-tabs-container">
                    <div class="marketplace-tabs">
                        <button class="marketplace-tab-btn active-marketplace-tab" data-marketplace-tab="browse">
                            <i class="fas fa-shopping-bag"></i>
                            <span>BROWSE</span>
                        </button>
                        <button class="marketplace-tab-btn" data-marketplace-tab="post">
                            <i class="fas fa-plus-circle"></i>
                            <span>POST</span>
                        </button>
                        <button class="marketplace-tab-btn" data-marketplace-tab="food">
                            <i class="fas fa-utensils"></i>
                            <span>FOOD</span>
                        </button>
                    </div>
                </div>

                <div id="marketplaceBrowseTab" class="marketplace-tab-content active-marketplace-content">
                    <div class="search-box" style="margin-bottom: 20px;">
                        <i class="fas fa-search"></i>
                        <input type="text" id="marketplaceSearchInput" placeholder="Search items, shops, or room numbers...">
                        <button id="marketplaceSearchBtn"><i class="fas fa-radar"></i> FIND</button>
                    </div>
                    <div class="marketplace-filter-bar">
                        <select id="marketplaceCategoryFilter" class="marketplace-filter-select">
                            <option value="all">All Categories</option>
                            <option value="Electronics">Electronics</option>
                            <option value="Books">Books</option>
                            <option value="Furniture">Furniture</option>
                            <option value="Clothing">Clothing</option>
                            <option value="Other">Other</option>
                        </select>
                        <select id="marketplaceSortFilter" class="marketplace-filter-select">
                            <option value="newest">Newest First</option>
                            <option value="price_low">Price: Low to High</option>
                            <option value="price_high">Price: High to Low</option>
                        </select>
                    </div>
                    <div id="marketplaceItemsList" class="marketplace-items-grid two-column-grid"></div>
                    <div id="marketplaceEmpty" class="empty-state" style="display: none;">
                        <i class="fas fa-store-slash"></i>
                        <p>No items found in marketplace</p>
                    </div>
                </div>

                <div id="marketplacePostTab" class="marketplace-tab-content">
                    <form id="marketplacePostForm" class="marketplace-post-form">
                        <div class="form-group">
                            <label><i class="fas fa-tag"></i> Item Title</label>
                            <input type="text" id="postItemTitle" placeholder="e.g., Used Textbook - Programming 101" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-align-left"></i> Description</label>
                            <textarea id="postItemDescription" rows="3" placeholder="Describe your item (condition, features, etc.)" required></textarea>
                        </div>
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label><i class="fas fa-tags"></i> Category</label>
                                <select id="postItemCategory" required>
                                    <option value="Electronics">Electronics</option>
                                    <option value="Books">Books</option>
                                    <option value="Furniture">Furniture</option>
                                    <option value="Clothing">Clothing</option>
                                    <option value="Other">Other</option>
                                </select>
                            </div>
                            <div class="input-group">
                                <label><i class="fas fa-money-bill"></i> Price (GHS)</label>
                                <input type="number" id="postItemPrice" step="0.01" placeholder="0.00" required>
                            </div>
                        </div>
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label><i class="fas fa-image"></i> Item Image</label>
                                <input type="file" id="postItemImage" accept="image/*">
                            </div>
                            <div class="input-group">
                                <label><i class="fas fa-door-open"></i> Room Number</label>
                                <input type="text" id="postItemRoom" placeholder="e.g., B-101" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Contact Number (Optional)</label>
                            <input type="tel" id="postItemContact" placeholder="024XXXXXXX">
                        </div>
                        <button type="submit" class="auth-btn"><i class="fas fa-paper-plane"></i> POST ITEM FOR SALE</button>
                        <div id="postItemStatus" class="request-status" style="margin-top: 15px;"></div>
                        <div id="imageUploadProgress" class="image-upload-progress" style="display: none; margin-top: 10px; padding: 8px; background: rgba(0,0,0,0.3); border-radius: 8px; font-size: 0.8rem;">
                            <i class="fas fa-spinner fa-spin"></i> Uploading image...
                        </div>
                    </form>

                    <div class="my-listings-section" style="margin-top: 30px;">
                        <h3><i class="fas fa-list-ul"></i> MY LISTINGS</h3>
                        <div id="myListingsList" class="marketplace-items-grid two-column-grid"></div>
                        <div id="myListingsEmpty" class="empty-state" style="display: none;">
                            <i class="fas fa-box-open"></i>
                            <p>You haven't posted any items yet</p>
                        </div>
                    </div>
                </div>

                <div id="marketplaceFoodTab" class="marketplace-tab-content">
                    <h3 class="food-section-header"><i class="fas fa-utensils"></i> Choose Your Restaurant</h3>
                    <div id="restaurantsGridView" class="restaurants-grid two-column-grid"></div>
                    <div id="restaurantDetailView" style="display: none;">
                        <button id="backToRestaurantsBtn" class="back-to-menu-btn" style="margin-bottom: 15px;">
                            <i class="fas fa-arrow-left"></i> BACK TO RESTAURANTS
                        </button>
                        <div id="restaurantFoodItems" class="marketplace-items-grid two-column-grid"></div>
                    </div>
                    <div id="foodEmpty" class="empty-state" style="display: none;">
                        <i class="fas fa-utensils"></i>
                        <p>No restaurants or food items available</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- STUDENT EVENTS MODULE -->
        <div id="eventsModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 10px; font-size: 1.3rem;"><i class="fas fa-calendar-alt" style="color: var(--glow-blue);"></i> UPCOMING EVENTS & UPDATES</h2>
                <div style="text-align: center; margin-bottom: 20px;">
                    <button id="enterVirtualGalleryBtn" class="auth-btn" style="width: auto; padding: 12px 30px; background: linear-gradient(145deg, var(--glow-purple), var(--accent-magenta));">
                        <i class="fas fa-vr-cardboard"></i> ENTER VIRTUAL GALLERY
                    </button>
                </div>
                <div id="eventsList" class="events-list"></div>
                <div id="eventsEmpty" class="empty-state" style="display: none;">
                    <i class="fas fa-calendar-times"></i>
                    <p>No upcoming events at this time</p>
                </div>
            </div>
        </div>

        <!-- VIRTUAL GALLERY MODULE -->
        <div id="virtualGalleryModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <button id="backToEventsFromGalleryBtn" class="back-to-menu-btn" style="margin-bottom: 20px;">
                    <i class="fas fa-arrow-left"></i> BACK TO EVENTS
                </button>
                <h2 style="margin-bottom: 20px;"><i class="fas fa-images" style="color: var(--glow-blue);"></i> VIRTUAL GALLERY</h2>
                <div class="gallery-filter-bar">
                    <select id="galleryFilterEvent" class="marketplace-filter-select">
                        <option value="all">All Events</option>
                    </select>
                    <div class="gallery-view-toggle">
                        <button class="gallery-view-btn active-view" data-view="grid"><i class="fas fa-th"></i> Grid</button>
                        <button class="gallery-view-btn" data-view="carousel"><i class="fas fa-images"></i> Carousel</button>
                        <button class="gallery-view-btn" data-view="virtual"><i class="fas fa-vr-cardboard"></i> Virtual Room</button>
                    </div>
                </div>
                <div id="galleryContainer" class="gallery-grid-view"></div>
                <div id="galleryEmpty" class="empty-state" style="display: none;">
                    <i class="fas fa-images"></i>
                    <p>No gallery images available</p>
                </div>
            </div>
        </div>

        <!-- GALLERY LIGHTBOX MODAL -->
        <div id="galleryLightboxModal" class="modal" style="display: none; z-index: 2100;">
            <div class="modal-content" style="background: transparent; box-shadow: none; padding: 0; max-width: 90vw; max-height: 90vh;">
                <button id="closeGalleryLightboxBtn" style="position: absolute; top: 20px; right: 30px; background: rgba(0,0,0,0.7); border: none; color: white; font-size: 2rem; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; z-index: 10;">&times;</button>
                <img id="galleryLightboxImg" src="" alt="Gallery Image" style="width: 100%; height: auto; max-height: 90vh; object-fit: contain; border-radius: 16px;">
            </div>
        </div>

        <!-- CONTENT MANAGEMENT MODULE -->
        <div id="contentManagementModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-cogs" style="color: var(--glow-blue);"></i> CONTENT MANAGEMENT</h2>

                <div class="content-mgmt-tabs">
                    <button class="content-mgmt-tab-btn active-content-tab" data-content-tab="restaurants">
                        <i class="fas fa-utensils"></i> RESTAURANTS
                    </button>
                    <button class="content-mgmt-tab-btn" data-content-tab="marketplace">
                        <i class="fas fa-store"></i> MARKETPLACE ITEMS
                    </button>
                    <button class="content-mgmt-tab-btn" data-content-tab="events">
                        <i class="fas fa-calendar"></i> EVENTS
                    </button>
                    <button class="content-mgmt-tab-btn" data-content-tab="banners">
                        <i class="fas fa-images"></i> BANNERS & CRAWLER
                    </button>
                    <button class="content-mgmt-tab-btn" data-content-tab="gallery">
                        <i class="fas fa-images"></i> GALLERY
                    </button>
                </div>

                <!-- RESTAURANTS MANAGEMENT TAB -->
                <div id="restaurantsMgmtTab" class="content-mgmt-tab-content active-content-mgmt-content">
                    <h3><i class="fas fa-plus-circle"></i> ADD NEW RESTAURANT</h3>
                    <form id="addRestaurantForm" class="admin-form">
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label>Restaurant Name</label>
                                <input type="text" id="restaurantName" required>
                            </div>
                            <div class="input-group">
                                <label>Restaurant Image</label>
                                <input type="file" id="restaurantImageFile" accept="image/*" style="display: block;">
                                <input type="text" id="restaurantImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label>Description</label>
                                <textarea id="restaurantDescription" rows="2" placeholder="Brief description..."></textarea>
                            </div>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label>Contact Number</label>
                                <input type="text" id="restaurantContact" placeholder="024XXXXXXX">
                            </div>
                            <div class="input-group">
                                <label>Operating Hours</label>
                                <input type="text" id="restaurantHours" placeholder="e.g., 8am - 8pm">
                            </div>
                        </div>
                        <div id="restaurantUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                        <button type="submit" class="auth-btn"><i class="fas fa-plus"></i> ADD RESTAURANT</button>
                        <div id="addRestaurantStatus" class="request-status"></div>
                    </form>

                    <h3 style="margin-top: 30px;"><i class="fas fa-list"></i> EXISTING RESTAURANTS</h3>
                    <div id="restaurantsMgmtList" class="admin-items-list"></div>

                    <h3 style="margin-top: 30px;"><i class="fas fa-hamburger"></i> ADD FOOD ITEM</h3>
                    <form id="addFoodItemForm" class="admin-form">
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label>Select Restaurant</label>
                                <select id="foodRestaurantSelect" required></select>
                            </div>
                            <div class="input-group">
                                <label>Food Name</label>
                                <input type="text" id="foodName" required>
                            </div>
                        </div>
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label>Price (GHS)</label>
                                <input type="number" id="foodPrice" step="0.01" required>
                            </div>
                            <div class="input-group">
                                <label>Food Image</label>
                                <input type="file" id="foodImageFile" accept="image/*" style="display: block;">
                                <input type="text" id="foodImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="foodDescription" rows="2" placeholder="Food description..."></textarea>
                        </div>
                        <div id="foodUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                        <button type="submit" class="auth-btn"><i class="fas fa-plus"></i> ADD FOOD ITEM</button>
                        <div id="addFoodStatus" class="request-status"></div>
                    </form>

                    <h3 style="margin-top: 30px;"><i class="fas fa-list"></i> FOOD ITEMS</h3>
                    <div id="foodItemsMgmtList" class="admin-items-list"></div>
                </div>

                <div id="marketplaceMgmtTab" class="content-mgmt-tab-content">
                    <div class="admin-actions">
                        <select id="marketplaceApprovalFilter" class="admin-filter-select">
                            <option value="all">All Items</option>
                            <option value="pending">Pending Approval</option>
                            <option value="approved">Approved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                        <button id="refreshMarketplaceMgmtBtn" class="analytics-refresh-btn"><i class="fas fa-sync-alt"></i> REFRESH</button>
                    </div>
                    <div id="marketplaceMgmtList" class="admin-items-list"></div>
                </div>

                <!-- EVENTS MANAGEMENT TAB -->
                <div id="eventsMgmtTab" class="content-mgmt-tab-content">
                    <h3><i class="fas fa-plus-circle"></i> ADD NEW EVENT</h3>
                    <form id="addEventForm" class="admin-form">
                        <div class="form-group">
                            <label>Event Title</label>
                            <input type="text" id="eventTitle" required>
                        </div>
                        <div class="form-row two-column-row">
                            <div class="input-group">
                                <label>Event Date</label>
                                <input type="datetime-local" id="eventDate" required>
                            </div>
                            <div class="input-group">
                                <label>Event Location</label>
                                <input type="text" id="eventLocation" placeholder="e.g., Main Hall, Room 101" required>
                            </div>
                        </div>
                        <div class="form-group">
                            <label>Description</label>
                            <textarea id="eventDescription" rows="3" required></textarea>
                        </div>
                        <div class="form-row">
                            <div class="input-group">
                                <label>Event Image</label>
                                <input type="file" id="eventImageFile" accept="image/*" style="display: block;">
                                <input type="text" id="eventImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                            </div>
                            <div class="input-group">
                                <label>Organizer</label>
                                <input type="text" id="eventOrganizer" placeholder="e.g., Hall Council">
                            </div>
                        </div>
                        <div id="eventUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                        <button type="submit" class="auth-btn"><i class="fas fa-plus"></i> ADD EVENT</button>
                        <div id="addEventStatus" class="request-status"></div>
                    </form>

                    <h3 style="margin-top: 30px;"><i class="fas fa-list"></i> EXISTING EVENTS</h3>
                    <div id="eventsMgmtList" class="admin-items-list"></div>
                </div>

                <!-- BANNERS & CRAWLER TAB -->
                <div id="bannersMgmtTab" class="content-mgmt-tab-content">
                    <h3><i class="fas fa-images"></i> BANNER IMAGES</h3>
                    <form id="bannerImagesForm" class="admin-form">
                        <div class="form-group">
                            <label>Banner Image 1</label>
                            <input type="file" id="bannerImage1File" accept="image/*" style="display: block;">
                            <input type="text" id="bannerImage1" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                        <div class="form-group">
                            <label>Banner Image 2</label>
                            <input type="file" id="bannerImage2File" accept="image/*" style="display: block;">
                            <input type="text" id="bannerImage2" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                        <div class="form-group">
                            <label>Banner Image 3 (Optional)</label>
                            <input type="file" id="bannerImage3File" accept="image/*" style="display: block;">
                            <input type="text" id="bannerImage3" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                        <div id="bannerUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> UPDATE BANNER IMAGES</button>
                        <div id="bannerImagesStatus" class="request-status"></div>
                    </form>

                    <h3 style="margin-top: 30px;"><i class="fas fa-comment-dots"></i> CRAWLER ANNOUNCEMENT</h3>
                    <form id="crawlerForm" class="admin-form">
                        <div class="form-group">
                            <label>Crawler Text / Announcement</label>
                            <input type="text" id="crawlerTextAdmin" placeholder="Enter announcement text..." style="width: 100%; padding: 12px;">
                        </div>
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> UPDATE CRAWLER</button>
                        <div id="crawlerStatus" class="request-status"></div>
                    </form>
                </div>

                <!-- GALLERY MANAGEMENT TAB -->
                <div id="galleryMgmtTab" class="content-mgmt-tab-content">
                    <h3><i class="fas fa-upload"></i> UPLOAD GALLERY IMAGES</h3>
                    <form id="galleryUploadForm" class="admin-form">
                        <div class="form-group">
                            <label>Select Event</label>
                            <select id="galleryEventSelect" required>
                                <option value="">Select Event</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label>Images (select multiple)</label>
                            <input type="file" id="galleryImagesInput" accept="image/*" multiple required>
                            <small style="color: var(--text-secondary); display: block; margin-top: 4px;">Max 5 images per batch. Large images will be automatically compressed.</small>
                        </div>
                        <div class="form-group">
                            <label>Description (optional)</label>
                            <input type="text" id="galleryDescription" placeholder="e.g., Event highlights">
                        </div>
                        <div id="galleryUploadProgressContainer" style="display: none;">
                            <div class="progress-label">
                                <span id="galleryUploadProgressText">Uploading...</span>
                                <span id="galleryUploadProgressPercent">0%</span>
                            </div>
                            <div class="progress-track">
                                <div id="galleryUploadProgressBar" class="progress-bar" style="width: 0%;"></div>
                            </div>
                        </div>
                        <button type="submit" class="auth-btn"><i class="fas fa-upload"></i> UPLOAD IMAGES</button>
                        <div id="galleryUploadStatus" class="request-status" style="margin-top: 10px;"></div>
                    </form>
                    <h3><i class="fas fa-list"></i> GALLERY IMAGES</h3>
                    <div id="galleryMgmtList" class="admin-items-grid"></div>
                </div>
            </div>
        </div>

        <!-- FOOD ORDER MANAGEMENT MODULE -->
        <div id="orderManagementModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-utensils" style="color: var(--glow-blue);"></i> FOOD ORDER MANAGEMENT</h2>

                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="foodOrdersExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnFoodOrders" class="export-data-btn"><i class="fas fa-download"></i> EXPORT ORDERS</button>
                        <div class="export-options" id="exportOptionsFoodOrders" style="display: none;">
                            <button id="exportCSVBtnFoodOrders" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnFoodOrders" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>

                <div class="orders-filter-bar" style="margin-bottom: 20px; display: flex; gap: 10px; flex-wrap: wrap;">
                    <select id="orderStatusFilter" class="marketplace-filter-select">
                        <option value="all">All Orders</option>
                        <option value="pending">Pending</option>
                        <option value="preparing">Preparing</option>
                        <option value="ready">Ready for Collection</option>
                        <option value="completed">Completed</option>
                    </select>
                    <button id="refreshOrdersBtn" class="analytics-refresh-btn"><i class="fas fa-sync-alt"></i> REFRESH</button>
                </div>

                <div class="orders-list-container" id="ordersListContainer">
                    <div class="orders-grid" id="ordersGrid"></div>
                    <div id="noOrdersMessage" class="empty-state" style="display: none;">
                        <i class="fas fa-shopping-basket"></i>
                        <p>No food orders found.</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- MY FOOD ORDERS (Student) -->
        <div id="studentOrderTrackingModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-truck" style="color: var(--glow-blue);"></i> MY FOOD ORDERS</h2>
                <div class="student-orders-tabs">
                    <button class="student-orders-tab-btn active-orders-tab" data-orders-tab="current">
                        <i class="fas fa-hourglass-half"></i> CURRENT ORDERS
                    </button>
                    <button class="student-orders-tab-btn" data-orders-tab="history">
                        <i class="fas fa-history"></i> ORDER HISTORY
                    </button>
                </div>
                <div id="studentOrdersList" class="student-orders-list"></div>
                <div id="studentOrdersEmpty" class="empty-state" style="display: none;">
                    <i class="fas fa-shopping-cart"></i>
                    <p>No food orders found.</p>
                    <button class="auth-btn" style="margin-top: 15px;" onclick="navigateToModule('marketplaceModule')">🍕 BROWSE FOOD</button>
                </div>
            </div>
        </div>

        <!-- VISITOR PROFILE MODULE -->
        <div id="visitorProfileModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 20px;">
                <h2 style="margin-bottom: 20px; font-size: 1.3rem;"><i class="fas fa-user-circle" style="color: var(--glow-blue);"></i> MY PROFILE (VISITOR)</h2>
                <div id="visitorProfileView" style="display: block;">
                    <div class="profile-header">
                        <div id="visitorProfilePhoto" class="profile-photo">
                            <i class="fas fa-user-circle"></i>
                        </div>
                        <div class="profile-name-status">
                            <h3 id="viewVisitorName" class="profile-name">-</h3>
                            <span class="role-badge status-success">VISITOR</span>
                        </div>
                    </div>
                    <div class="profile-details-grid">
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-venus-mars"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Gender</span>
                                <span class="detail-value" id="viewVisitorGender">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-building"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Hall/Hostel/Location</span>
                                <span class="detail-value" id="viewVisitorHallLocation">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-door-open"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Room Number</span>
                                <span class="detail-value" id="viewVisitorRoomNumber">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-envelope"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Email</span>
                                <span class="detail-value" id="viewVisitorEmail">-</span>
                            </div>
                        </div>
                        <div class="profile-detail-card">
                            <div class="detail-icon"><i class="fas fa-phone"></i></div>
                            <div class="detail-info">
                                <span class="detail-label">Phone</span>
                                <span class="detail-value" id="viewVisitorPhone">-</span>
                            </div>
                        </div>
                    </div>
                    <div class="profile-action">
                        <button id="editVisitorProfileBtn" class="edit-profile-btn">
                            <i class="fas fa-edit"></i> EDIT PROFILE
                        </button>
                    </div>
                </div>
                <div id="visitorEditForm" style="display: none;">
                    <div class="edit-form-container">
                        <div class="form-group">
                            <label><i class="fas fa-user"></i> Full Name</label>
                            <input type="text" id="editVisitorName" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-venus-mars"></i> Gender</label>
                            <select id="editVisitorGender">
                                <option value="Male">Male</option>
                                <option value="Female">Female</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-building"></i> Hall/Hostel/Location</label>
                            <input type="text" id="editVisitorHallLocation" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-door-open"></i> Room Number</label>
                            <input type="text" id="editVisitorRoomNumber" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-envelope"></i> Email</label>
                            <input type="email" id="editVisitorEmail" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-phone"></i> Phone Number</label>
                            <input type="tel" id="editVisitorPhone" required>
                        </div>
                        <div class="form-group">
                            <label><i class="fas fa-camera"></i> Profile Picture</label>
                            <input type="file" id="editVisitorPicture" accept="image/*">
                        </div>
                        <div class="form-actions">
                            <button id="saveVisitorUpdateBtn" class="auth-btn"><i class="fas fa-save"></i> SAVE UPDATES</button>
                            <button id="cancelVisitorEditBtn" class="auth-btn cancel-btn"><i class="fas fa-times"></i> CANCEL</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- VISITOR MANAGEMENT MODULE -->
        <div id="visitorManagementModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-user-friends" style="color: var(--glow-blue);"></i> VISITOR MANAGEMENT</h2>

                <div class="module-export-actions" style="display: flex; justify-content: flex-end; margin-bottom: 15px;">
                    <div class="export-btn-group" id="visitorsExportGroup" style="position: relative; display: inline-flex;">
                        <button id="exportDataBtnVisitors" class="export-data-btn"><i class="fas fa-download"></i> EXPORT VISITORS</button>
                        <div class="export-options" id="exportOptionsVisitors" style="display: none;">
                            <button id="exportCSVBtnVisitors" class="export-option-btn"><i class="fas fa-file-csv"></i> CSV</button>
                            <button id="exportPDFBtnVisitors" class="export-option-btn"><i class="fas fa-file-pdf"></i> PDF</button>
                        </div>
                    </div>
                </div>
                <div class="table-wrapper">
                    <table class="inventory-table" id="visitorManagementTable">
                        <thead>
                            <tr>
                                <th>Photo</th><th>Name</th><th>Email</th><th>Phone</th><th>Hall/Location</th><th>Room</th><th>Registered</th><th>Actions</th>
                            </tr>
                        </thead>
                        <tbody id="visitorManagementBody"></tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- CHEAP DATA BUNDLES MODULE -->
        <div id="dataBundlesModule" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <h2 style="margin-bottom: 20px;"><i class="fas fa-wifi" style="color: var(--glow-blue);"></i> CHEAP DATA BUNDLES</h2>

                <div class="data-terms" style="background: rgba(0,0,0,0.15); border-radius: 20px; padding: 20px; margin-bottom: 30px; border-left: 4px solid var(--glow-blue);">
                    <h3 style="color: var(--glow-blue); margin-bottom: 15px;"><i class="fas fa-file-contract"></i> Terms &amp; Conditions</h3>
                    <p style="margin-bottom: 12px; line-height: 1.6;"><strong>a)</strong> Please note that data bundle delivery time after successful payment is up to 2 hours. Your account will be credited within this period without fail. It is important to highlight that we work with multiple third parties — including MTN, Telecel, AirtelTigo, and Datasika — and occasional delivery delays may occur due to network issues.</p>
                    <p style="line-height: 1.6;"><strong>b)</strong> If you require the bundle to be available at a specific time, we advise that you place and complete payment for your order at least 2 hours in advance to ensure consistent and uninterrupted usage.</p>
                </div>

                <div class="data-network-tabs" style="display: flex; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; border-bottom: 1px solid var(--glass-edge); padding-bottom: 12px;">
                    <button class="data-tab-btn active-data-tab" data-network="mtn" style="background: transparent; border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;"><i class="fas fa-network-wired"></i> MTN</button>
                    <button class="data-tab-btn" data-network="telecel" style="background: transparent; border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;"><i class="fas fa-network-wired"></i> Telecel</button>
                    <button class="data-tab-btn" data-network="airteltigo" style="background: transparent; border: none; padding: 10px 24px; border-radius: 40px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all 0.3s; display: flex; align-items: center; gap: 8px;"><i class="fas fa-network-wired"></i> AirtelTigo</button>
                </div>

                <!-- MTN Tab -->
                <div id="dataMtnTab" class="data-tab-content active-data-content">
                    <div class="data-pricing-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;">
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge); transition: transform 0.2s;">
                            <div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">1 GB</div>
                            <div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 4.18</div>
                            <a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a>
                        </div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">2 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 8.98</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">3 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 13.46</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">4 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 17.94</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">5 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 22.38</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">6 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 24.89</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">8 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 35.54</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">10 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 41.97</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">15 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 62.87</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">20 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 81.93</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">25 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 104.45</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">30 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 125.45</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">40 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 165.35</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">50 GB</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 196.00</div><a href="https://datasika.com/store/donorics-technologies-acf6" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                    </div>
                </div>

                <!-- Telecel Tab -->
                <div id="dataTelecelTab" class="data-tab-content">
                    <div class="data-pricing-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;">
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);">
                            <div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">10 GB</div>
                            <div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div>
                            <div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 39.00</div>
                            <a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a>
                        </div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">15 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 55.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">20 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 72.06</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">30 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 107.01</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">40 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 147.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">50 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">∞ Non‑Expiry</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 177.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=Telecel" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                    </div>
                </div>

                <!-- AirtelTigo Tab -->
                <div id="dataAirtelTigoTab" class="data-tab-content">
                    <div class="data-pricing-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px;">
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);">
                            <div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">1 GB</div>
                            <div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div>
                            <div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 4.79</div>
                            <a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a>
                        </div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">2 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 8.87</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">5 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 23.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">10 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 43.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">20 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 82.00</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">30 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 115.99</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                        <div class="data-bundle-card" style="background: rgba(0,0,0,0.25); border-radius: 20px; padding: 16px; text-align: center; border: 1px solid var(--glass-edge);"><div class="bundle-size" style="font-size: 1.1rem; font-weight: 700; color: var(--glow-blue);">50 GB</div><div class="bundle-duration" style="font-size: 0.8rem; color: var(--text-secondary);">60‑Day Validity</div><div class="bundle-price" style="font-size: 1.3rem; font-weight: 700; margin: 8px 0; color: var(--success-glow);">GHS 194</div><a href="https://datasika.com/store/donorics-technologies-acf6?network=AirtelTigo" target="_blank" class="buy-data-btn" style="display: inline-block; background: linear-gradient(145deg, var(--glow-blue), var(--glow-purple)); color: var(--dark-bg); padding: 8px 16px; border-radius: 30px; font-weight: 600; text-decoration: none; transition: all 0.3s;"><i class="fas fa-shopping-cart"></i> Buy Cheap Data Now</a></div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Marketplace Product Detail Page -->
        <div id="marketplaceProductDetail" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <button id="backToMarketplaceBrowseBtn" class="back-to-menu-btn" style="margin-bottom: 20px;">
                    <i class="fas fa-arrow-left"></i> BACK TO MARKETPLACE
                </button>
                <div id="productDetailContent" class="product-detail-container">
                </div>
            </div>
        </div>

        <!-- Restaurant Detail Page -->
        <div id="restaurantDetailPage" class="module-content" style="display: none;">
            <div class="glass-panel" style="padding: 25px;">
                <button id="backToRestaurantsFromDetailBtn" class="back-to-menu-btn" style="margin-bottom: 20px;">
                    <i class="fas fa-arrow-left"></i> BACK TO RESTAURANTS
                </button>
                <div id="restaurantDetailContent" class="restaurant-detail-container">
                </div>
            </div>
        </div>

        <!-- QR Code Scanner Modal -->
        <div id="qrScannerModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-qrcode"></i> SCAN QR CODE</h2>
                    <p>Position QR code within the frame to scan</p>
                </div>
                <div id="qr-reader" style="width: 100%; margin: 20px 0;"></div>
                <div id="qr-reader-results" class="qr-result" style="margin: 10px 0;"></div>
                <div style="display: flex; gap: 10px; margin-top: 20px;">
                    <button id="closeScannerBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow); color: var(--danger-glow);">CLOSE</button>
                </div>
            </div>
        </div>

        <!-- QR Code Display Modal -->
        <div id="qrDisplayModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 400px; text-align: center;">
                <div class="modal-header">
                    <h2><i class="fas fa-qrcode"></i> ITEM QR CODE</h2>
                    <p id="qrItemName">Item Name</p>
                </div>
                <div id="qrCodeContainer" style="margin: 20px auto; padding: 20px; background: white; border-radius: 10px; display: inline-block;">
                </div>
                <div style="display: flex; gap: 10px; margin-top: 20px; justify-content: center;">
                    <button id="downloadQRBtn" class="auth-btn" style="flex: 1; background: var(--success-glow); color: var(--dark-bg);">
                        <i class="fas fa-download"></i> DOWNLOAD
                    </button>
                    <button id="printQRBtn" class="auth-btn" style="flex: 1; background: var(--glow-blue); color: var(--dark-bg);">
                        <i class="fas fa-print"></i> PRINT
                    </button>
                </div>
                <button id="closeQRDisplayBtn" class="auth-btn" style="margin-top: 10px; background: transparent; border: 1px solid var(--danger-glow); color: var(--danger-glow);">
                    CLOSE
                </button>
            </div>
        </div>

        <!-- Delete Confirmation Modal -->
        <div id="deleteModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 400px;">
                <div class="modal-header"><h2 style="color: var(--danger-glow);"><i class="fas fa-exclamation-triangle"></i> CONFIRM DELETE</h2></div>
                <div style="text-align: center; margin: 30px 0;"><p id="deleteModalMessage">Are you sure you want to delete this item?</p><p style="color: var(--danger-glow); margin-top: 10px;">This action cannot be undone!</p></div>
                <div style="display: flex; gap: 10px;"><button id="confirmDeleteBtn" class="auth-btn" style="background: var(--danger-glow);">DELETE</button><button id="cancelDeleteBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--text-secondary);">CANCEL</button></div>
            </div>
        </div>

        <!-- Complaint Update Modal -->
        <div id="complaintUpdateModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-pen"></i> UPDATE COMPLAINT STATUS</h2>
                </div>
                <div id="complaintUpdateForm">
                    <input type="hidden" id="updateComplaintId">
                    <div class="form-group">
                        <label><i class="fas fa-check-circle"></i> Acknowledge Complaint</label>
                        <select id="complaintAcknowledge" class="form-control">
                            <option value="pending">Pending</option>
                            <option value="acknowledged">Acknowledged</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-clock"></i> Estimated Fix Time</label>
                        <input type="datetime-local" id="complaintEstFixTime" class="form-control">
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-info-circle"></i> Update Message</label>
                        <textarea id="complaintUpdateMessage" rows="3" placeholder="Add update about the complaint status..." class="form-control"></textarea>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-flag-checkered"></i> Overall Status</label>
                        <select id="complaintOverallStatus" class="form-control">
                            <option value="pending">Pending</option>
                            <option value="acknowledged">Acknowledged</option>
                            <option value="in progress">In Progress</option>
                            <option value="resolved">Resolved</option>
                            <option value="rejected">Rejected</option>
                        </select>
                    </div>
                    <div class="form-row">
                        <button id="submitComplaintUpdateBtn" class="auth-btn"><i class="fas fa-save"></i> SAVE UPDATE</button>
                        <button id="closeComplaintModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- Food Order Modal -->
        <div id="foodOrderModal" class="modal" style="display: none; z-index: 2000;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-shopping-cart"></i> ORDER FOOD</h2>
                    <p id="foodOrderName"></p>
                </div>
                <form id="foodOrderForm">
                    <input type="hidden" id="orderFoodId">
                    <div class="form-group">
                        <label><i class="fas fa-user"></i> Your Name</label>
                        <input type="text" id="orderCustomerName" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-door-open"></i> Room Number</label>
                        <input type="text" id="orderRoomNumber" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-phone"></i> Phone Number</label>
                        <input type="tel" id="orderPhoneNumber" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-calculator"></i> Quantity</label>
                        <input type="number" id="orderQuantity" min="1" value="1" required>
                    </div>
                    <div class="form-group">
                        <label><i class="fas fa-comment"></i> Special Instructions (Optional)</label>
                        <textarea id="orderInstructions" rows="2"></textarea>
                    </div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-check-circle"></i> PLACE ORDER</button>
                        <button type="button" id="closeOrderModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                    <div id="orderStatus" class="request-status" style="margin-top: 15px;"></div>
                </form>
            </div>
        </div>

        <!-- Edit Restaurant Modal -->
        <div id="editRestaurantModal" class="modal" style="display: none; z-index: 2100;">
            <div class="modal-content glass-panel" style="max-width: 600px;">
                <div class="modal-header">
                    <h2><i class="fas fa-utensils"></i> EDIT RESTAURANT</h2>
                </div>
                <form id="editRestaurantForm">
                    <input type="hidden" id="editRestaurantId">
                    <div class="form-row two-column-row">
                        <div class="input-group">
                            <label>Restaurant Name</label>
                            <input type="text" id="editRestaurantName" required>
                        </div>
                        <div class="input-group">
                            <label>Restaurant Image</label>
                            <input type="file" id="editRestaurantImageFile" accept="image/*" style="display: block;">
                            <input type="text" id="editRestaurantImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="input-group">
                            <label>Description</label>
                            <textarea id="editRestaurantDescription" rows="2"></textarea>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="input-group">
                            <label>Contact Number</label>
                            <input type="text" id="editRestaurantContact">
                        </div>
                        <div class="input-group">
                            <label>Operating Hours</label>
                            <input type="text" id="editRestaurantHours">
                        </div>
                    </div>
                    <div id="editRestaurantUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditRestaurantModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                    <div id="editRestaurantStatus" class="request-status" style="margin-top: 10px;"></div>
                </form>
            </div>
        </div>

        <!-- Edit Food Item Modal -->
        <div id="editFoodItemModal" class="modal" style="display: none; z-index: 2100;">
            <div class="modal-content glass-panel" style="max-width: 600px;">
                <div class="modal-header">
                    <h2><i class="fas fa-hamburger"></i> EDIT FOOD ITEM</h2>
                </div>
                <form id="editFoodItemForm">
                    <input type="hidden" id="editFoodItemId">
                    <div class="form-row two-column-row">
                        <div class="input-group">
                            <label>Select Restaurant</label>
                            <select id="editFoodRestaurantSelect" required></select>
                        </div>
                        <div class="input-group">
                            <label>Food Name</label>
                            <input type="text" id="editFoodName" required>
                        </div>
                    </div>
                    <div class="form-row two-column-row">
                        <div class="input-group">
                            <label>Price (GHS)</label>
                            <input type="number" id="editFoodPrice" step="0.01" required>
                        </div>
                        <div class="input-group">
                            <label>Food Image</label>
                            <input type="file" id="editFoodImageFile" accept="image/*" style="display: block;">
                            <input type="text" id="editFoodImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea id="editFoodDescription" rows="2"></textarea>
                    </div>
                    <div id="editFoodUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditFoodItemModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                    <div id="editFoodItemStatus" class="request-status" style="margin-top: 10px;"></div>
                </form>
            </div>
        </div>

        <!-- Edit Event Modal -->
        <div id="editEventModal" class="modal" style="display: none; z-index: 2100;">
            <div class="modal-content glass-panel" style="max-width: 600px;">
                <div class="modal-header">
                    <h2><i class="fas fa-calendar-alt"></i> EDIT EVENT</h2>
                </div>
                <form id="editEventForm">
                    <input type="hidden" id="editEventId">
                    <div class="form-group">
                        <label>Event Title</label>
                        <input type="text" id="editEventTitle" required>
                    </div>
                    <div class="form-row two-column-row">
                        <div class="input-group">
                            <label>Event Date</label>
                            <input type="datetime-local" id="editEventDate" required>
                        </div>
                        <div class="input-group">
                            <label>Event Location</label>
                            <input type="text" id="editEventLocation" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label>Description</label>
                        <textarea id="editEventDescription" rows="3" required></textarea>
                    </div>
                    <div class="form-row">
                        <div class="input-group">
                            <label>Event Image</label>
                            <input type="file" id="editEventImageFile" accept="image/*" style="display: block;">
                            <input type="text" id="editEventImage" placeholder="Image URL (auto-filled after upload)" style="margin-top: 8px;" readonly>
                        </div>
                        <div class="input-group">
                            <label>Organizer</label>
                            <input type="text" id="editEventOrganizer">
                        </div>
                    </div>
                    <div id="editEventUploadStatus" class="request-status" style="margin-bottom: 10px; display: none;"></div>
                    <div class="form-row">
                        <button type="submit" class="auth-btn"><i class="fas fa-save"></i> SAVE CHANGES</button>
                        <button type="button" id="closeEditEventModalBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CANCEL</button>
                    </div>
                    <div id="editEventStatus" class="request-status" style="margin-top: 10px;"></div>
                </form>
            </div>
        </div>

        <!-- Visitor Detail Modal -->
        <div id="visitorDetailModal" class="modal" style="display: none; z-index: 2100;">
            <div class="modal-content glass-panel" style="max-width: 500px;">
                <div class="modal-header">
                    <h2><i class="fas fa-user-circle"></i> VISITOR DETAILS</h2>
                </div>
                <div id="visitorDetailContent"></div>
                <div class="form-row">
                    <button id="closeVisitorDetailBtn" class="auth-btn" style="background: transparent; border: 1px solid var(--danger-glow);">CLOSE</button>
                </div>
            </div>
        </div>

        <!-- ========== ADDED: Profile Image Modal for record images ========== -->
        <div id="profileImageModal" class="modal" style="display: none; z-index: 3000;">
            <div class="modal-content" style="background: transparent; box-shadow: none; padding: 0; max-width: 90vw; max-height: 90vh; position: relative;">
                <button id="closeProfileImageModalBtn" style="position: absolute; top: 20px; right: 30px; background: rgba(0,0,0,0.7); border: none; color: white; font-size: 2rem; border-radius: 50%; width: 50px; height: 50px; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;">&times;</button>
                <img id="profileImageModalImg" src="" alt="Full Image" style="width: 100%; height: auto; max-height: 90vh; object-fit: contain; border-radius: 16px;">
            </div>
        </div>
        <!-- ========== END ADDED ========== -->

        <div class="footer-note">
            <i class="fas fa-crown"></i> Ghartey Hall Management System · Powered by Ghana Elearn · intelligent management · all times displayed in system log
        </div>
    </div>

    <!-- Firebase Module Imports -->
    <script type="module">
        import { initializeApp } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-app.js";
        import { getFirestore, collection, doc, setDoc, getDocs, getDoc, updateDoc, deleteDoc, query, where, orderBy, Timestamp, addDoc } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-firestore.js";
        import { getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, sendPasswordResetEmail } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-auth.js";
        import { getStorage, ref, uploadString, getDownloadURL } from "https://www.gstatic.com/firebasejs/10.8.0/firebase-storage.js";

        window.firebaseModules = {
            initializeApp, getFirestore, collection, doc, setDoc, getDocs, getDoc, updateDoc, deleteDoc, query, where, orderBy, Timestamp, addDoc,
            getAuth, createUserWithEmailAndPassword, signInWithEmailAndPassword, signOut, onAuthStateChanged, sendPasswordResetEmail,
            getStorage, ref, uploadString, getDownloadURL
        };
    </script>
    <script src="script.js" type="module"></script>

    <!-- Service Worker Registration (removed sw.js reference to avoid 404) -->
    <script>
    if ('serviceWorker' in navigator) {
        console.log('Service Worker not registered - sw.js not found');
    }
    </script>

    <!-- PWA Install Prompt -->
    <script>
    let deferredPrompt;
    const pwaInstallBanner = document.createElement('div');
    pwaInstallBanner.className = 'pwa-install-banner';
    pwaInstallBanner.style.display = 'none';
    pwaInstallBanner.innerHTML = `
        <div class="banner-content">
            <i class="fas fa-download"></i>
            <div>
                <h4>Install Ghartey Hall App</h4>
                <p>Install this app on your device for faster access and offline features</p>
            </div>
        </div>
        <div class="banner-buttons">
            <button class="install-btn" id="pwaInstallBtn"><i class="fas fa-download"></i> INSTALL</button>
            <button class="close-banner-btn" id="pwaCloseBannerBtn"><i class="fas fa-times"></i> Dismiss</button>
        </div>
    `;
    document.body.appendChild(pwaInstallBanner);

    window.addEventListener('beforeinstallprompt', (e) => {
        e.preventDefault();
        deferredPrompt = e;
        setTimeout(() => {
            const dismissed = localStorage.getItem('pwaBannerDismissed');
            if (!dismissed) {
                pwaInstallBanner.style.display = 'flex';
            }
        }, 3000);
    });

    const installBtn = document.getElementById('pwaInstallBtn');
    if (installBtn) {
        installBtn.addEventListener('click', async () => {
            if (deferredPrompt) {
                deferredPrompt.prompt();
                const { outcome } = await deferredPrompt.userChoice;
                console.log(`User response to the install prompt: ${outcome}`);
                deferredPrompt = null;
                pwaInstallBanner.style.display = 'none';
            }
        });
    }

    const closeBannerBtn = document.getElementById('pwaCloseBannerBtn');
    if (closeBannerBtn) {
        closeBannerBtn.addEventListener('click', () => {
            pwaInstallBanner.style.display = 'none';
            localStorage.setItem('pwaBannerDismissed', 'true');
        });
    }

    // Welcome button for voice
    const welcomeOverlay = document.createElement('div');
    welcomeOverlay.id = 'welcomeVoiceOverlay';
    welcomeOverlay.innerHTML = `
        <div class="welcome-voice-modal">
            <div class="voice-icon-large">
                <i class="fas fa-volume-up"></i>
            </div>
            <h3>Welcome to Ghartey Hall</h3>
            <p>Click the button below to enable voice assistant</p>
            <button id="enableVoiceBtn" class="auth-btn">🔊 Enable Voice Assistant</button>
            <button id="skipVoiceBtn" class="skip-btn">Skip</button>
        </div>
    `;
    welcomeOverlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.95);
        backdrop-filter: blur(20px);
        z-index: 20000;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: fadeInOverlay 0.3s ease;
    `;
    document.body.appendChild(welcomeOverlay);

    document.getElementById('enableVoiceBtn')?.addEventListener('click', () => {
        welcomeOverlay.style.display = 'none';
        if (window.speechSynthesis) {
            const utterance = new SpeechSynthesisUtterance("Welcome to the Ghartey Hall Management System, powered by Ghana Elearn");
            utterance.rate = 0.9;
            utterance.pitch = 1.1;
            window.speechSynthesis.speak(utterance);
        }
        localStorage.setItem('voiceEnabled', 'true');
    });

    document.getElementById('skipVoiceBtn')?.addEventListener('click', () => {
        welcomeOverlay.style.display = 'none';
        localStorage.setItem('voiceSkipped', 'true');
    });

    if (localStorage.getItem('voiceEnabled') || localStorage.getItem('voiceSkipped')) {
        welcomeOverlay.style.display = 'none';
    }
    </script>
</body>
</html>