    </div><!-- end main-content -->

    <!-- Bottom Tab Navigation -->
    <div class="bottom-tabs">
        <a href="dashboard.php" class="<?php echo $currentPage === 'dashboard' ? 'active' : ''; ?>">
            <i class="bi bi-cpu"></i>Dashboard
        </a>
        <a href="devices.php" class="<?php echo $currentPage === 'devices' ? 'active' : ''; ?>">
            <i class="bi bi-phone-fill"></i>Devices
        </a>
        <a href="messages.php" class="<?php echo $currentPage === 'messages' ? 'active' : ''; ?>">
            <i class="bi bi-envelope-fill"></i>Messages
        </a>
        <a href="users.php" class="<?php echo $currentPage === 'users' ? 'active' : ''; ?>">
            <i class="bi bi-people-fill"></i>Users
        </a>
        <a href="settings.php" class="<?php echo $currentPage === 'settings' ? 'active' : ''; ?>">
            <i class="bi bi-sliders"></i>Settings
        </a>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    // ====== DISMISS PAGE LOADER ======
    (function() {
        const loader = document.getElementById('pageLoader');
        if (loader) {
            setTimeout(() => {
                loader.style.opacity = '0';
                setTimeout(() => { loader.style.display = 'none'; }, 400);
            }, 600);
        }
    })();
    // ====== MATRIX RAIN BACKGROUND ======
    (function() {
        const canvas = document.getElementById('matrixCanvas');
        if (!canvas) return;
        const ctx = canvas.getContext('2d');
        
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        
        const chars = '01アイウエオカキクケコサシスセソタチツテトナニヌネノ';
        const fontSize = 12;
        const columns = Math.floor(canvas.width / fontSize);
        const drops = Array(columns).fill(1);
        
        function drawMatrix() {
            ctx.fillStyle = 'rgba(10, 14, 23, 0.05)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.fillStyle = '#00ff88';
            ctx.font = fontSize + 'px JetBrains Mono';
            
            for (let i = 0; i < drops.length; i++) {
                const text = chars[Math.floor(Math.random() * chars.length)];
                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
                
                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                    drops[i] = 0;
                }
                drops[i]++;
            }
        }
        
        setInterval(drawMatrix, 50);
        
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });
    })();

    // ====== SYSTEM TIME ======
    (function() {
        const el = document.getElementById('sysTime');
        if (!el) return;
        function tick() {
            const now = new Date();
            const h = String(now.getHours()).padStart(2,'0');
            const m = String(now.getMinutes()).padStart(2,'0');
            const s = String(now.getSeconds()).padStart(2,'0');
            el.textContent = 'UTC+' + (-now.getTimezoneOffset()/60) + ' ' + h + ':' + m + ':' + s;
        }
        tick();
        setInterval(tick, 1000);
    })();

    // ====== SESSION TIMEOUT ======
    (function(){
        const T=30*60*1000, W=25*60*1000;
        let last=Date.now(), warned=false;
        function reset(){last=Date.now();warned=false;const w=document.getElementById('stw');if(w)w.remove();}
        function check(){
            const e=Date.now()-last;
            if(e>=T){window.location.href='logout.php?reason=inactivity';return;}
            if(e>=W&&!warned){
                warned=true;
                const d=document.createElement('div');
                d.id='stw';
                d.style.cssText='position:fixed;top:82px;left:12px;right:12px;z-index:9999;padding:10px 14px;background:rgba(255,51,102,0.1);color:#ff3366;border:1px solid rgba(255,51,102,0.3);border-radius:4px;font-size:11px;font-weight:500;text-align:center;font-family:JetBrains Mono,monospace;';
                d.textContent='⚠ SESSION TIMEOUT IMMINENT — Activity required to maintain connection';
                document.body.appendChild(d);
            }
        }
        ['click','touchstart','keypress','scroll'].forEach(ev=>document.addEventListener(ev,reset,{passive:true}));
        setInterval(check,30000);
    })();

    // ====== EXPAND/COLLAPSE ======
    function toggleExpand(btn) {
        const item = btn.closest('.data-item');
        const expand = item.querySelector('.item-expand');
        if (expand.classList.contains('show')) {
            expand.classList.remove('show');
            btn.textContent = '+ EXPAND';
        } else {
            expand.classList.add('show');
            btn.textContent = '− COLLAPSE';
        }
    }

    // ====== SELECT ALL ======
    document.addEventListener('DOMContentLoaded', function() {
        const sa = document.getElementById('select-all');
        if (sa) {
            sa.addEventListener('click', function() {
                document.querySelectorAll('input[name="item_ids[]"]').forEach(cb => cb.checked = sa.checked);
            });
        }
    });
    </script>
</body>
</html>
