<style>
    /* Making the sidebar flexible, responsive, and scrollable */
    #sidebar {
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        width: 250px;
        overflow-y: auto; /* Adds a clean scrollbar when items overflow vertically */
        z-index: 1000;
        padding-bottom: 30px; /* Gives padding at the bottom so items aren't slammed against the edge */
        background: #1e293b !important; /* Premium deep slate/navy background */
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.2);
        scrollbar-width: thin; /* Clean, minimal scrollbar design for modern browsers */
        scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
    }

    /* Webkit scrollbar customization for Chrome/Edge/Safari browser support */
    #sidebar::-webkit-scrollbar {
        width: 5px;
    }
    #sidebar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    #sidebar::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, 0.2);
    }

    /* Layout structure inside the scroll container */
    .sidebar-list {
        display: flex;
        flex-direction: column;
        padding: 15px 0;
    }

    /* Modernized Button Base Design */
    .sidebar-list a {
        display: flex;
        align-items: center;
        padding: 11px 20px;
        margin: 2px 12px; /* Adds spacing around buttons to prevent standard block cramping */
        border-radius: 8px; /* Smooth rounded corners for links */
        color: #94a3b8 !important; /* Soft, readable slate gray for inactive items */
        text-decoration: none;
        transition: all 0.25s ease-in-out;
        font-size: 14px;
        font-weight: 500;
    }

    /* Sleek Translucent Hover Effect */
    .sidebar-list a:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #f8fafc !important; /* Crisp off-white */
        transform: translateX(3px); /* Subtle forward micro-interaction shift */
    }

    /* Interactive Icon Pop Configuration */
    .sidebar-list a:hover .icon-field i {
        transform: scale(1.1);
        color: #38bdf8; /* Dynamic blue sky tint on hover icon */
    }

    .collapse a {
        text-indent: 10px;
    }
    
    /* Elegant and Eye-Catching Active State */
    .sidebar-list a.active {
        background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important; /* Rich Royal Blue Gradient */
        color: #ffffff !important;
        font-weight: 600;
        box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); /* Dynamic glow drop-shadow */
    }

    .sidebar-list a.active .icon-field i {
        color: #ffffff !important;
    }

    .icon-field {
        margin-right: 12px;
        width: 20px;
        text-align: center;
        display: inline-block;
    }

    .icon-field i {
        transition: transform 0.2s ease, color 0.2s ease;
    }

    /* Section Header Custom Labels styling */
    .sidebar-section-header {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        color: #64748b !important; /* Understated secondary headers */
        font-weight: 700;
    }

    /* Ensuring main layout shifts over if your wrapper framework needs it */
    @media (min-width: 768px) {
        body {
            padding-left: 250px;
        }
    }
</style>

<nav id="sidebar">
    <div class="sidebar-list">
        <a href="index.php?page=home" class="nav-item nav-home">
            <span class='icon-field'><i class="fa fa-tachometer-alt"></i></span> Dashboard
        </a>
        
        <div class="mx-4 mt-3 mb-2">
            <small class="text-uppercase sidebar-section-header">Property Management</small>
        </div>
        
        <a href="index.php?page=categories" class="nav-item nav-categories">
            <span class='icon-field'><i class="fa fa-th-list"></i></span> House Type
        </a>
        <a href="index.php?page=houses" class="nav-item nav-houses">
            <span class='icon-field'><i class="fa fa-home"></i></span> Houses
        </a>
        <a href="index.php?page=tenants" class="nav-item nav-tenants">
            <span class='icon-field'><i class="fa fa-user-friends"></i></span> Tenants
        </a>
        
        <div class="mx-4 mt-3 mb-2">
            <small class="text-uppercase sidebar-section-header">Billing & Payments</small>
        </div>

        <a href="index.php?page=utility_billing" class="nav-item nav-utility_billing">
            <span class='icon-field'><i class="fa fa-bolt"></i></span> Utility Billing
        </a>

        <a href="index.php?page=invoices" class="nav-item nav-invoices">
            <span class='icon-field'><i class="fa fa-file-invoice-dollar"></i></span> Payments
        </a>

        <div class="mx-4 mt-3 mb-2">
            <small class="text-uppercase sidebar-section-header">Reports</small>
        </div>

        <a href="index.php?page=reports" class="nav-item nav-reports">
            <span class='icon-field'><i class="fa fa-chart-line"></i></span> Collection Report
        </a>
        
        <a href="index.php?page=payment_report" class="nav-item nav-payment_report">
            <span class='icon-field'><i class="fa fa-receipt"></i></span> Payment History
        </a>
        <a href="index.php?page=balance_report" class="nav-item nav-balance_report">
            <span class='icon-field'><i class="fa fa-money-bill-wave"></i></span> Balance Report
        </a>

        <?php if(isset($_SESSION['login_type']) && $_SESSION['login_type'] == 1): ?>
            <div class="mx-4 mt-3 mb-2">
                <small class="text-uppercase sidebar-section-header">System Admin</small>
            </div>
            <a href="index.php?page=users" class="nav-item nav-users">
                <span class='icon-field'><i class="fa fa-users"></i></span> Users
            </a>
            <a href="index.php?page=site_settings" class="nav-item nav-site_settings">
                <span class='icon-field'><i class="fa fa-cogs"></i></span> System Settings
            </a>
        <?php endif; ?>
    </div>
</nav>

<script>
    // This highlights the current page automatically
    $('.nav-<?php echo isset($_GET['page']) ? $_GET['page'] : "home" ?>').addClass('active')
</script>