<style>
    .main-sidebar {
        background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .brand-link {
        background: rgba(255, 255, 255, 0.05);
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding: 20px 15px;
        display: flex;
        align-items: center;
        text-decoration: none;
    }
    
    .brand-link:hover {
        background: rgba(255, 255, 255, 0.08);
    }
    
    .brand-image {
        max-width: 150px;
        height: auto;
        filter: brightness(0) invert(1);
    }
    
    .brand-text {
        display: none;
    }
    
    .user-panel {
        padding: 20px 15px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    .user-panel .image {
        margin-bottom: 0;
    }
    
    .user-panel .user-avatar {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 700;
        font-size: 18px;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }
    
    .user-panel .info a {
        color: white;
        font-weight: 600;
        font-size: 15px;
        text-decoration: none;
    }
    
    .user-panel .info a:hover {
        color: #667eea;
    }
    
    .nav-sidebar {
        padding: 10px 0;
    }
    
    .nav-sidebar .nav-item {
        margin-bottom: 5px;
    }
    
    .nav-sidebar .nav-link {
        color: rgba(255, 255, 255, 0.8);
        padding: 12px 20px;
        border-radius: 10px;
        margin: 0 10px;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
    }
    
    .nav-sidebar .nav-link:hover {
        background: rgba(255, 255, 255, 0.1);
        color: white;
        transform: translateX(5px);
    }
    
    .nav-sidebar .nav-link.active {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
    }
    
    .nav-sidebar .nav-icon {
        margin-right: 12px;
        font-size: 18px;
        width: 25px;
        text-align: center;
    }
    
    .nav-sidebar .nav-link p {
        margin: 0;
        font-weight: 500;
        font-size: 14px;
    }
    
    .sidebar-footer {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 20px;
        background: rgba(0, 0, 0, 0.2);
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        text-align: center;
    }
    
    .sidebar-footer p {
        color: rgba(255, 255, 255, 0.6);
        font-size: 12px;
        margin: 0;
    }
</style>

<aside class="main-sidebar sidebar-dark-primary elevation-4">
    <a href="dashboard.php" class="brand-link">
        <img src="../dist/img/rxconnect.png" alt="Rx Connect" class="brand-image">
    </a>

    <div class="sidebar">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="image">
                <div class="user-avatar">
                    <?php echo getUserInititals($pdo, $_SESSION['clientId']); ?>
                </div>
            </div>
            <div class="info">
                <a href="#" class="d-block"><?php echo $_SESSION['clientName']; ?></a>
            </div>
        </div>

        <nav class="mt-2">
            <ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu">
                <li class="nav-item">
                    <a href="dashboard.php" class="nav-link <?php echo basename($_SERVER['PHP_SELF']) == 'dashboard.php' ? 'active' : ''; ?>">
                        <i class="nav-icon fas fa-tachometer-alt"></i>
                        <p>Dashboard</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="de/index.php" class="nav-link <?php echo strpos($_SERVER['PHP_SELF'], '/de/') !== false ? 'active' : ''; ?>">
                        <i class="nav-icon fas fa-user-plus"></i>
                        <p>Data Entry</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="pharmacy/index.php" class="nav-link <?php echo strpos($_SERVER['PHP_SELF'], '/pharmacy/') !== false ? 'active' : ''; ?>">
                        <i class="nav-icon fas fa-phone-alt"></i>
                        <p>Welcome Calls</p>
                    </a>
                </li>
                <li class="nav-item">
                    <a href="reimbursement/index.php" class="nav-link <?php echo strpos($_SERVER['PHP_SELF'], '/reimbursement/') !== false ? 'active' : ''; ?>">
                        <i class="nav-icon fas fa-dollar-sign"></i>
                        <p>Reimbursement</p>
                    </a>
                </li>
            </ul>
        </nav>
        
        <div class="sidebar-footer">
            <p><i class="fas fa-shield-alt"></i> Secure Connection</p>
        </div>
    </div>
</aside>
