cloud-ide-layout 1.0.93 → 1.0.96

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-BJ08Dx73.mjs → cloud-ide-layout-cloud-ide-layout-CvPRcnbK.mjs}

@@ -7,7 +7,7 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
 import * as i2 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, WebSocketNotificationService, NotificationApiService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
+import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, CideThemeService, WebSocketNotificationService, NotificationApiService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
 import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
@@ -1266,7 +1266,7 @@ class CideLytFloatingEntitySelectionService {
         }
         try {
             // Use relative import to avoid circular dependency
-            const module = await import('./cloud-ide-layout-floating-entity-selection.component-Dd5VHZDh.mjs');
+            const module = await import('./cloud-ide-layout-floating-entity-selection.component-u9Bs8oS7.mjs');
             if (module.CideLytFloatingEntitySelectionComponent) {
                 this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
                 console.log('✅ Entity selection component registered successfully');
@@ -1359,6 +1359,8 @@ class CideLytHeaderWrapperComponent {
     financialYearService = inject(FINANCIAL_YEAR_SERVICE_TOKEN);
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     destroyRef = inject(DestroyRef);
+    // Inject theme service for independent theme management
+    themeService = inject(CideThemeService);
     // Signals for year data
     financialYears = signal([], ...(ngDevMode ? [{ debugName: "financialYears" }] : []));
     academicYears = signal([], ...(ngDevMode ? [{ debugName: "academicYears" }] : []));
@@ -1504,21 +1506,16 @@ class CideLytHeaderWrapperComponent {
         });
     }
     ngOnInit() {
-        // Initialize dark mode from localStorage
-        if (typeof document !== 'undefined' && typeof localStorage !== 'undefined') {
-            const isDarkMode = localStorage.getItem('cide-dark-mode') === 'true';
-            this.darkMode.set(isDarkMode);
-            if (isDarkMode) {
-                const root = document.documentElement;
-                const body = document.body;
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-            }
+        // Subscribe to theme service for reactive theme updates
+        this.themeService.getEffectiveTheme$()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(theme => {
+            this.darkMode.set(theme === 'dark');
             // Update theme menu item based on current state
             this.updateThemeMenuItem();
-        }
+        });
+        // Set initial darkMode state from theme service
+        this.darkMode.set(this.themeService.isDarkMode());
         this.loadFinancialYears();
         this.loadAcademicYears();
         // Initialize notification dropdown with empty state
@@ -2485,28 +2482,10 @@ class CideLytHeaderWrapperComponent {
      * Toggle dark mode theme
      */
     toggleTheme() {
-        this.darkMode.set(!this.darkMode());
-        // Apply dark mode to root element (html/body) for global theme switching
-        if (typeof document !== 'undefined') {
-            const root = document.documentElement;
-            const body = document.body;
-            if (this.darkMode()) {
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-                // Save to localStorage
-                localStorage.setItem('cide-dark-mode', 'true');
-            }
-            else {
-                root.removeAttribute('data-theme');
-                root.classList.remove('dark-mode');
-                body.removeAttribute('data-theme');
-                body.classList.remove('dark-mode');
-                // Remove from localStorage
-                localStorage.removeItem('cide-dark-mode');
-            }
-        }
+        // Use the CIDE Element Library theme service for theme management
+        // The service handles DOM manipulation, localStorage, and theme application
+        this.themeService.toggleTheme();
+        // Note: darkMode signal is automatically updated via the subscription in ngOnInit
     }
     /**
      * Update theme menu item label and icon based on current theme
@@ -2867,6 +2846,7 @@ class CideLytSidebarWrapperComponent {
     appState = inject(AppStateHelperService);
     router = inject(Router);
     userStatusService = inject(CideLytUserStatusService);
+    themeService = inject(CideThemeService);
     constructor() {
         // React to active module changes using signal effects
         effect(() => {
@@ -3115,28 +3095,11 @@ class CideLytSidebarWrapperComponent {
         }
     }
     toggleTheme() {
-        this.darkMode.set(!this.darkMode());
-        // Apply dark mode to root element (html/body) for global theme switching
-        if (typeof document !== 'undefined') {
-            const root = document.documentElement;
-            const body = document.body;
-            if (this.darkMode()) {
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-                // Save to localStorage
-                localStorage.setItem('cide-dark-mode', 'true');
-            }
-            else {
-                root.removeAttribute('data-theme');
-                root.classList.remove('dark-mode');
-                body.removeAttribute('data-theme');
-                body.classList.remove('dark-mode');
-                // Remove from localStorage
-                localStorage.removeItem('cide-dark-mode');
-            }
-        }
+        // Use the CIDE Element Library theme service for theme management
+        // The service handles DOM manipulation, localStorage, and theme application
+        this.themeService.toggleTheme();
+        // Update local darkMode signal
+        this.darkMode.set(this.themeService.isDarkMode());
     }
     toggleOptions() {
         this.showOptions.set(!this.showOptions());
@@ -3258,7 +3221,7 @@ class CideLytSidebarWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     opacity: 1,
@@ -3330,7 +3293,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             transition('visible => removing', animate('300ms ease-in-out')),
                             transition('* => visible', animate('200ms ease-out'))
                         ])
-                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
+                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);border-radius:4px;box-shadow:0 0 6px var(--cide-theme-color-brand-primary)}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-theme-color-brand-primary);box-shadow:0 0 10px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:rgba(209,213,219,.5) transparent;padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3917,8 +3880,8 @@ class CideLytSidedrawerWrapperComponent {
     }
     ngOnInit() {
         // Initialize the component map (You'd likely populate this from a config or service)
-        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-Dv8lU855.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-BJ-GMbja.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-D7Muubg2.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CBA81RLw.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4441,7 +4404,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-CwiJfD6i.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-B6SRfAFc.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -6009,4 +5972,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BJ08Dx73.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-CvPRcnbK.mjs.map