class CRMSidebar5 extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
<div id="sidebar-wrap" x-bind:class="{ 'open': side }">
    <div id="sidebar-header" class="flex items-center gap-3 px-4 h-[64px] shrink-0 border-b border-gray-100">
        <div class="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style="background: #2563eb;">
            <svg class="w-5 h-5 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
        </div>
        <span class="lt" style="line-height: 1.2;"><span class="text-base font-bold block text-slate-400">EDK</span><span class="text-[10px] text-slate-400 block leading-none">Enterprise Development Kit</span></span>
    </div>
    <div id="sidebar-nav-wrap">
        <nav id="sidebar-nav">
            <div class="section-label dt">Main</div>
            <div class="submenu-group" data-mod="dashboard"><div class="submenu-head mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zm10 0a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/></svg></span><span class="lbl dt">Dashboard</span><span class="chev">&#9662;</span></div><div class="submenu-body"><div class="submenu-group" data-mod="crm"><div class="submenu-head mi"><span class="lbl dt">CRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-crm1.html" class="mi sub"><span class="lbl dt">CRM1</span></a><a href="dashboard-crm2.html" class="mi sub"><span class="lbl dt">CRM2</span></a><a href="dashboard-crm3.html" class="mi sub"><span class="lbl dt">CRM3</span></a><a href="dashboard-crm4.html" class="mi sub"><span class="lbl dt">CRM4</span></a><a href="dashboard-crm5.html" class="mi sub"><span class="lbl dt">CRM5</span></a></div></div><div class="submenu-group" data-mod="eam"><div class="submenu-head mi"><span class="lbl dt">EAM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-eam1.html" class="mi sub"><span class="lbl dt">EAM1</span></a><a href="dashboard-eam2.html" class="mi sub"><span class="lbl dt">EAM2</span></a><a href="dashboard-eam3.html" class="mi sub"><span class="lbl dt">EAM3</span></a><a href="dashboard-eam4.html" class="mi sub"><span class="lbl dt">EAM4</span></a><a href="dashboard-eam5.html" class="mi sub"><span class="lbl dt">EAM5</span></a></div></div><div class="submenu-group" data-mod="fms"><div class="submenu-head mi"><span class="lbl dt">FMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-fms1.html" class="mi sub"><span class="lbl dt">FMS1</span></a><a href="dashboard-fms2.html" class="mi sub"><span class="lbl dt">FMS2</span></a><a href="dashboard-fms3.html" class="mi sub"><span class="lbl dt">FMS3</span></a><a href="dashboard-fms4.html" class="mi sub"><span class="lbl dt">FMS4</span></a><a href="dashboard-fms5.html" class="mi sub"><span class="lbl dt">FMS5</span></a></div></div><div class="submenu-group" data-mod="hrm"><div class="submenu-head mi"><span class="lbl dt">HRM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-hrm1.html" class="mi sub"><span class="lbl dt">HRM1</span></a><a href="dashboard-hrm2.html" class="mi sub"><span class="lbl dt">HRM2</span></a><a href="dashboard-hrm3.html" class="mi sub"><span class="lbl dt">HRM3</span></a><a href="dashboard-hrm4.html" class="mi sub"><span class="lbl dt">HRM4</span></a><a href="dashboard-hrm5.html" class="mi sub"><span class="lbl dt">HRM5</span></a></div></div><div class="submenu-group" data-mod="itsm"><div class="submenu-head mi"><span class="lbl dt">ITSM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-itsm1.html" class="mi sub"><span class="lbl dt">ITSM1</span></a><a href="dashboard-itsm2.html" class="mi sub"><span class="lbl dt">ITSM2</span></a><a href="dashboard-itsm3.html" class="mi sub"><span class="lbl dt">ITSM3</span></a><a href="dashboard-itsm4.html" class="mi sub"><span class="lbl dt">ITSM4</span></a><a href="dashboard-itsm5.html" class="mi sub"><span class="lbl dt">ITSM5</span></a></div></div><div class="submenu-group" data-mod="pos"><div class="submenu-head mi"><span class="lbl dt">POS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-pos1.html" class="mi sub"><span class="lbl dt">POS1</span></a><a href="dashboard-pos2.html" class="mi sub"><span class="lbl dt">POS2</span></a><a href="dashboard-pos3.html" class="mi sub"><span class="lbl dt">POS3</span></a><a href="dashboard-pos4.html" class="mi sub"><span class="lbl dt">POS4</span></a><a href="dashboard-pos5.html" class="mi sub"><span class="lbl dt">POS5</span></a></div></div><div class="submenu-group" data-mod="rms"><div class="submenu-head mi"><span class="lbl dt">RMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-rms1.html" class="mi sub"><span class="lbl dt">RMS1</span></a><a href="dashboard-rms2.html" class="mi sub"><span class="lbl dt">RMS2</span></a><a href="dashboard-rms3.html" class="mi sub"><span class="lbl dt">RMS3</span></a><a href="dashboard-rms4.html" class="mi sub"><span class="lbl dt">RMS4</span></a><a href="dashboard-rms5.html" class="mi sub"><span class="lbl dt">RMS5</span></a></div></div><div class="submenu-group" data-mod="scm"><div class="submenu-head mi"><span class="lbl dt">SCM</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-scm1.html" class="mi sub"><span class="lbl dt">SCM1</span></a><a href="dashboard-scm2.html" class="mi sub"><span class="lbl dt">SCM2</span></a><a href="dashboard-scm3.html" class="mi sub"><span class="lbl dt">SCM3</span></a><a href="dashboard-scm4.html" class="mi sub"><span class="lbl dt">SCM4</span></a><a href="dashboard-scm5.html" class="mi sub"><span class="lbl dt">SCM5</span></a></div></div><div class="submenu-group" data-mod="tms"><div class="submenu-head mi"><span class="lbl dt">TMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-tms1.html" class="mi sub"><span class="lbl dt">TMS1</span></a><a href="dashboard-tms2.html" class="mi sub"><span class="lbl dt">TMS2</span></a><a href="dashboard-tms3.html" class="mi sub"><span class="lbl dt">TMS3</span></a><a href="dashboard-tms4.html" class="mi sub"><span class="lbl dt">TMS4</span></a><a href="dashboard-tms5.html" class="mi sub"><span class="lbl dt">TMS5</span></a></div></div><div class="submenu-group" data-mod="wms"><div class="submenu-head mi"><span class="lbl dt">WMS</span><span class="chev">&#9662;</span></div><div class="submenu-body"><a href="dashboard-wms1.html" class="mi sub"><span class="lbl dt">WMS1</span></a><a href="dashboard-wms2.html" class="mi sub"><span class="lbl dt">WMS2</span></a><a href="dashboard-wms3.html" class="mi sub"><span class="lbl dt">WMS3</span></a><a href="dashboard-wms4.html" class="mi sub"><span class="lbl dt">WMS4</span></a><a href="dashboard-wms5.html" class="mi sub"><span class="lbl dt">WMS5</span></a></div></div></div></div>
            <div class="section-label dt">Components</div>
            <a href="alerts5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/></svg></span><span class="lbl dt">Alerts</span></a>
            <a href="buttons5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"/></svg></span><span class="lbl dt">Buttons</span></a>
            <a href="cards5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/></svg></span><span class="lbl dt">Cards</span></a>
            <a href="datatables5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 14h18m-9-4v8m-7 0h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"/></svg></span><span class="lbl dt">Datatables</span></a>
            <a href="forms5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"/></svg></span><span class="lbl dt">Forms</span></a>
            <a href="pickers5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg></span><span class="lbl dt">Pickers</span></a>
            <a href="selection5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Selection</span></a>
            <a href="tabs5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"/></svg></span><span class="lbl dt">Tabs</span></a>
            <div class="section-label dt">Pages</div>
            <a href="empty5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg></span><span class="lbl dt">Empty</span></a>
            <a href="badrequest5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z"/></svg></span><span class="lbl dt">Badrequest</span></a>
            <a href="error5005.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Error500</span></a>
            <a href="forbidden5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/></svg></span><span class="lbl dt">Forbidden</span></a>
            <a href="landing5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg></span><span class="lbl dt">Landing</span></a>
            <a href="notfound5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg></span><span class="lbl dt">Notfound</span></a>
            <a href="toomany5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/></svg></span><span class="lbl dt">Toomany</span></a>
            <a href="unauthorized5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/></svg></span><span class="lbl dt">Unauthorized</span></a>
            <a href="unavailable5.html" class="mi"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192l-3.536 3.536M21 12a9 9 0 11-18 0 9 9 0 0118 0zm-5 0a4 4 0 11-8 0 4 4 0 018 0z"/></svg></span><span class="lbl dt">Unavailable</span></a>
            <div class="section-label dt">Security</div>
            <a href="login5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 16l-4-4m0 0l4-4m-4 4h14m-5 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h7a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Login</span></a>
            <a href="logout5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg></span><span class="lbl dt">Logout</span></a>
            <a href="register5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 0 11-8 0 4 4 0 018 0zM3 20a6 6 0 0112 0v1H3v-1z"/></svg></span><span class="lbl dt">Register</span></a>
            <a href="multitenantselection5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"/></svg></span><span class="lbl dt">Multitenantselection</span></a>
            <a href="confirmemail5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/></svg></span><span class="lbl dt">Confirmemail</span></a>
            <a href="forgotpassword5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/></svg></span><span class="lbl dt">Forgotpassword</span></a>
            <a href="resetpassword5.html" class="mi" target="_blank" rel="noopener noreferrer"><span class="ico"><svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/></svg></span><span class="lbl dt">Resetpassword</span></a>
        </nav>
        <div id="sb-track"><div id="sb-thumb"></div></div>
    </div>
    <div id="sidebar-footer" x-show="side" class="p-4 border-t border-gray-100 shrink-0 text-gray-400 text-xs">
        <div class="flex items-center gap-2"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/></svg><span>v2.1.0</span></div>
    </div>
</div>
`;
        // Auto-highlight active menu based on current page
        requestAnimationFrame(() => {
            const currentPage = window.location.pathname.split('/').pop();
            const activeLink = this.querySelector(`nav a[href="${currentPage}"]`);
            if (activeLink) activeLink.classList.add('active');
        });
    }
}
customElements.define('crm-sidebar-5', CRMSidebar5);
