    <style>
        .sidebar {
            background: #2c3e50;
            min-height: 100vh;
            padding-top: 20px;
        }
        .sidebar .nav-link {
            color: #ecf0f1;
            border-radius: 5px;
            margin-bottom: 5px;
        }
        .sidebar .nav-link:hover, .sidebar .nav-link.active {
            background: #3498db;
        }
        .main-content {
            margin-left: 280px;
        }
        @media (max-width: 992px) {
            .sidebar {
                position: fixed;
                z-index: 1000;
                width: 280px;
                transform: translateX(-100%);
                transition: transform 0.3s ease;
            }
            .sidebar.active {
                transform: translateX(0);
            }
            .main-content {
                margin-left: 0;
            }
        }
        .kpi-card {
            transition: transform 0.3s;
        }
        .kpi-card:hover {
            transform: translateY(-5px);
        }
    </style>
<!-- Sidebar -->
<ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

    <!-- Sidebar - Brand -->
    <a class="sidebar-brand d-flex align-items-center justify-content-center" href="/dashboard">
        <div class="sidebar-brand-icon">
            <i class="fas fa-calculator"></i>
        </div>
        <div class="sidebar-brand-text mx-3">ADVANCED Payroll</div>
    </a>

    <!-- Divider -->
    <hr class="sidebar-divider my-0">

    <!-- Nav Item - Dashboard -->
    <li class="nav-item active">
        <a class="nav-link" href="/dashboard">
            <i class="fas fa-fw fa-tachometer-alt"></i>
            <span>Tableau de bord</span>
        </a>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider">

    <!-- Heading -->
    <div class="sidebar-heading">
        Gestion
    </div>

    <!-- Nav Item - Employees -->
    <li class="nav-item">
        <a class="nav-link" href="/employees">
            <i class="fas fa-fw fa-users"></i>
            <span>Employés</span>
        </a>
    </li>

    <!-- Nav Item - Payslips -->
    <li class="nav-item">
        <a class="nav-link" href="/payslips">
            <i class="fas fa-fw fa-file-invoice-dollar"></i>
            <span>Bulletins de paie</span>
        </a>
    </li>

    <!-- Nav Item - Taxes -->
    <li class="nav-item">
        <a class="nav-link" href="/taxes">
            <i class="fas fa-fw fa-euro-sign"></i>
            <span>Retenues d'impôt</span>
        </a>
    </li>

    <!-- Divider -->
    <hr class="sidebar-divider">

    <!-- Heading -->
    <div class="sidebar-heading">
        Administration
    </div>

    <!-- Nav Item - Settings -->
    <li class="nav-item">
        <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseSettings">
            <i class="fas fa-fw fa-cog"></i>
            <span>Paramètres</span>
        </a>
        <div id="collapseSettings" class="collapse" data-parent="#accordionSidebar">
            <div class="bg-white py-2 collapse-inner rounded">
                <a class="collapse-item" href="/settings/social">Paramètres sociaux</a>
                <a class="collapse-item" href="/settings/tax">Paramètres fiscaux</a>
                <a class="collapse-item" href="/settings/app">Paramètres application</a>
            </div>
        </div>
    </li>

    <?php if (Auth::hasPermission(['admin'])): ?>
    <!-- Nav Item - Users -->
    <li class="nav-item">
        <a class="nav-link" href="/users">
            <i class="fas fa-fw fa-user-cog"></i>
            <span>Utilisateurs</span>
        </a>
    </li>
    <?php endif; ?>

    <!-- Divider -->
    <hr class="sidebar-divider d-none d-md-block">

    <!-- Sidebar Toggler (Sidebar) -->
    <div class="text-center d-none d-md-inline">
        <button class="rounded-circle border-0" id="sidebarToggle"></button>
    </div>
</ul>
<!-- End of Sidebar -->