cloud-ide-layout 1.0.7 → 1.0.9

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-D3xzVSNA.mjs → cloud-ide-layout-cloud-ide-layout-DLceZY3Y.mjs}

@@ -4,21 +4,21 @@ import { HttpClient } from '@angular/common/http';
 import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, designConfigRoutesUrl } from 'cloud-ide-lms-model';
 import { throwError, of, BehaviorSubject, interval, take as take$1 } from 'rxjs';
 import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged } from 'rxjs/operators';
-import * as i2$1 from '@angular/router';
+import * as i2 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
 import { Title } from '@angular/platform-browser';
 import { CideElementsService, CideInputComponent, CideIconComponent, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent } from 'cloud-ide-element';
-import * as i2 from '@angular/common';
+import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
-import { trigger, state, style, transition, animate } from '@angular/animations';
+import { trigger, state, transition, style, animate } from '@angular/animations';
 import { merge } from 'lodash';
 
 class CloudIdeLayoutService {
     constructor() { }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -26,9 +26,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytHeaderService {
-    constructor() {
-        this.headerVisible = false;
-    }
+    headerVisible = false;
+    constructor() { }
     // Hide Header
     hideHeader() {
         this.headerVisible = false;
@@ -41,10 +40,10 @@ class CideLytHeaderService {
         document.querySelector(`#cide-lyt-header-wrapper`)?.classList.remove('cide-lyt-header-wrapper-hide');
         document.querySelector(`body`)?.classList.add('cide-lyt-header-exist');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -52,16 +51,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytFileManagerService {
-    constructor() {
-        this.http = inject(HttpClient);
-    }
+    http = inject(HttpClient);
     getFileDetails(body) {
         return this.http.post(cidePath.join([hostManagerRoutesUrl.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.getFileDetails]), body);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFileManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFileManagerService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFileManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFileManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFileManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFileManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -69,10 +66,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class CideLytSidebarService {
-    constructor() {
-        this.sidebarMenueVisible = false;
-        this.http = inject(HttpClient);
-    }
+    sidebarMenueVisible = false;
+    http = inject(HttpClient);
     // method to get sidebar menues
     getSidebarMenues(body) {
         return this.http?.post(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.getSidebarMenues]), body);
@@ -89,10 +84,10 @@ class CideLytSidebarService {
         document.querySelector(`#cide-lyt-sidebar-page`)?.classList.remove('cide-lyt-sidebar-page-hide');
         document.querySelector(`body`)?.classList.add('cide-lyt-sidebar-exist');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -100,9 +95,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class CideLytFooterService {
-    constructor() {
-        this.footerVisible = false;
-    }
+    footerVisible = false;
+    constructor() { }
     // Hide Footer
     hideFooter() {
         this.footerVisible = false;
@@ -115,10 +109,10 @@ class CideLytFooterService {
         document.querySelector(`#cide-lyt-footer-console-wrapper`)?.classList.remove('cide-lyt-footer-console-wrapper-hide');
         document.querySelector(`body`)?.classList.add('cide-lyt-footer-exist');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -126,9 +120,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytConsoleService {
-    constructor() {
-        this.headerVisible = false;
-    }
+    headerVisible = false;
+    constructor() { }
     // Hide Console
     hideConsole() {
         this.headerVisible = false;
@@ -141,10 +134,10 @@ class CideLytConsoleService {
         document.querySelector(`#cide-lyt-console-wrapper`)?.classList.remove('cide-lyt-console-wrapper-hide');
         document.querySelector(`body`)?.classList.remove('cide-lyt-console-exist');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -152,18 +145,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytSidedrawerService {
-    constructor() {
-        this.sidedrawerVisible = false;
-        // Modern Angular signals for reactive state management
-        this.drawerItemsSignal = signal([]);
-        this.drawerItems = this.drawerItemsSignal.asReadonly();
-        this.notesVisibleSignal = signal(false);
-        this.notesVisible = this.notesVisibleSignal.asReadonly();
-        this.activeComponentSignal = signal(null);
-        this.activeComponent = this.activeComponentSignal.asReadonly();
-        this._pageId = null;
-        this._themeId = null;
-    }
+    sidedrawerVisible = false;
+    // Modern Angular signals for reactive state management
+    drawerItemsSignal = signal([], ...(ngDevMode ? [{ debugName: "drawerItemsSignal" }] : []));
+    drawerItems = this.drawerItemsSignal.asReadonly();
+    notesVisibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "notesVisibleSignal" }] : []));
+    notesVisible = this.notesVisibleSignal.asReadonly();
+    activeComponentSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeComponentSignal" }] : []));
+    activeComponent = this.activeComponentSignal.asReadonly();
+    _pageId = null;
+    _themeId = null;
     setContext(pageId, themeId) {
         this._pageId = pageId;
         this._themeId = themeId;
@@ -209,10 +200,10 @@ class CideLytSidedrawerService {
     setActiveComponent(configFor) {
         this.activeComponentSignal.set(configFor);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -220,45 +211,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class AppStateService {
+    // Private signal for current user
+    currentUserSignal = signal(null, ...(ngDevMode ? [{ debugName: "currentUserSignal" }] : []));
+    // Private signal for active module
+    activeModuleSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeModuleSignal" }] : []));
+    // Private signal for active entity
+    activeEntitySignal = signal(null, ...(ngDevMode ? [{ debugName: "activeEntitySignal" }] : []));
+    // Public computed signal for current user, for other services to get the user value
+    currentUser = computed(() => this.currentUserSignal(), ...(ngDevMode ? [{ debugName: "currentUser" }] : []));
+    // Public computed signal for active module
+    activeModule = computed(() => this.activeModuleSignal(), ...(ngDevMode ? [{ debugName: "activeModule" }] : []));
+    // Public computed signal for active entity
+    activeEntity = computed(() => this.activeEntitySignal(), ...(ngDevMode ? [{ debugName: "activeEntity" }] : []));
+    // Computed signals for derived state
+    isAuthenticated = computed(() => !!this.currentUserSignal(), ...(ngDevMode ? [{ debugName: "isAuthenticated" }] : []));
+    userInfo = computed(() => {
+        const user = this.currentUserSignal();
+        if (!user)
+            return null;
+        return {
+            id: user._id,
+            name: user.user_fullname || `${user.user_firstname} ${user.user_lastname}`,
+            email: user.user_emailid,
+            role: user.user_id_role
+        };
+    }, ...(ngDevMode ? [{ debugName: "userInfo" }] : []));
+    // Computed signal for active module info
+    activeModuleInfo = computed(() => {
+        const module = this.activeModuleSignal();
+        if (!module)
+            return null;
+        return {
+            id: module._id,
+            title: module.syme_title,
+            icon: module.syme_icon,
+            path: module.syme_path,
+            type: module.syme_type
+        };
+    }, ...(ngDevMode ? [{ debugName: "activeModuleInfo" }] : []));
     constructor() {
-        // Private signal for current user
-        this.currentUserSignal = signal(null);
-        // Private signal for active module
-        this.activeModuleSignal = signal(null);
-        // Private signal for active entity
-        this.activeEntitySignal = signal(null);
-        // Public computed signal for current user, for other services to get the user value
-        this.currentUser = computed(() => this.currentUserSignal());
-        // Public computed signal for active module
-        this.activeModule = computed(() => this.activeModuleSignal());
-        // Public computed signal for active entity
-        this.activeEntity = computed(() => this.activeEntitySignal());
-        // Computed signals for derived state
-        this.isAuthenticated = computed(() => !!this.currentUserSignal());
-        this.userInfo = computed(() => {
-            const user = this.currentUserSignal();
-            if (!user)
-                return null;
-            return {
-                id: user._id,
-                name: user.user_fullname || `${user.user_firstname} ${user.user_lastname}`,
-                email: user.user_emailid,
-                role: user.user_id_role
-            };
-        });
-        // Computed signal for active module info
-        this.activeModuleInfo = computed(() => {
-            const module = this.activeModuleSignal();
-            if (!module)
-                return null;
-            return {
-                id: module._id,
-                title: module.syme_title,
-                icon: module.syme_icon,
-                path: module.syme_path,
-                type: module.syme_type
-            };
-        });
         // Load initial state from localStorage
         this.loadFromLocalStorage();
         // Save to localStorage whenever state changes
@@ -463,10 +454,10 @@ class AppStateService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -474,17 +465,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class AppStateHelperService {
-    constructor() {
-        this.appStateService = inject(AppStateService);
-        this.sidebarService = inject(CideLytSidebarService);
-        // Computed signals for derived state
-        this.currentUser = this.appStateService.currentUser;
-        this.isAuthenticated = this.appStateService.isAuthenticated;
-        this.userInfo = this.appStateService.userInfo;
-        this.activeModule = this.appStateService.activeModule;
-        this.activeModuleInfo = this.appStateService.activeModuleInfo;
-        this.activeEntity = this.appStateService.activeEntity;
-    }
+    appStateService = inject(AppStateService);
+    sidebarService = inject(CideLytSidebarService);
+    // Computed signals for derived state
+    currentUser = this.appStateService.currentUser;
+    isAuthenticated = this.appStateService.isAuthenticated;
+    userInfo = this.appStateService.userInfo;
+    activeModule = this.appStateService.activeModule;
+    activeModuleInfo = this.appStateService.activeModuleInfo;
+    activeEntity = this.appStateService.activeEntity;
     /**
      * Get current user value (non-reactive)
      */
@@ -680,10 +669,10 @@ class AppStateHelperService {
     refreshFromLocalStorage() {
         this.appStateService.refreshFromLocalStorage();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateHelperService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateHelperService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateHelperService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateHelperService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AppStateHelperService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -691,40 +680,47 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class CideLytSharedService {
+    // Enhanced reactive cache with signals
+    pageDataCacheSignal = signal({}, ...(ngDevMode ? [{ debugName: "pageDataCacheSignal" }] : []));
+    loadingStateSignal = signal({}, ...(ngDevMode ? [{ debugName: "loadingStateSignal" }] : []));
+    // Public readonly access to cache
+    pageDataCache = this.pageDataCacheSignal.asReadonly();
+    loadingStates = this.loadingStateSignal.asReadonly();
+    // Computed signal for cache status
+    cacheInfo = computed(() => {
+        const cache = this.pageDataCacheSignal();
+        return {
+            totalCached: Object.keys(cache).length,
+            validCached: Object.values(cache).filter(item => this.isCacheValid(item)).length,
+            expiredCached: Object.values(cache).filter(item => !this.isCacheValid(item)).length
+        };
+    }, ...(ngDevMode ? [{ debugName: "cacheInfo" }] : []));
+    // In-flight requests to prevent duplicate API calls
+    inflightRequests = {};
+    // Default cache TTL (5 minutes)
+    DEFAULT_CACHE_TTL = 5 * 60 * 1000;
+    // Modern Angular v20 dependency injection pattern
+    elementService = inject(CideElementsService);
+    http = inject(HttpClient);
+    titleService = inject(Title);
+    sidebarService = inject(CideLytSidebarService);
+    headerService = inject(CideLytHeaderService);
+    footerService = inject(CideLytFooterService);
+    consoleService = inject(CideLytConsoleService);
+    sidedrawerService = inject(CideLytSidedrawerService);
+    router = inject(Router);
+    // Import AppStateHelperService for sidebar sync
+    appState = inject(AppStateHelperService);
+    // Route change subscription for cleanup
+    routeSubscription;
+    pageDataSubscription;
+    // Tab management callback - to avoid circular dependency
+    tabManagementCallback;
+    // Request visibility callback
+    requestVisibilityCallback;
     constructor() {
         // Clean up expired cache entries every minute
         // setInterval(() => this.cleanExpiredCache(), 60000);
-        // Enhanced reactive cache with signals
-        this.pageDataCacheSignal = signal({});
-        this.loadingStateSignal = signal({});
-        // Public readonly access to cache
-        this.pageDataCache = this.pageDataCacheSignal.asReadonly();
-        this.loadingStates = this.loadingStateSignal.asReadonly();
-        // Computed signal for cache status
-        this.cacheInfo = computed(() => {
-            const cache = this.pageDataCacheSignal();
-            return {
-                totalCached: Object.keys(cache).length,
-                validCached: Object.values(cache).filter(item => this.isCacheValid(item)).length,
-                expiredCached: Object.values(cache).filter(item => !this.isCacheValid(item)).length
-            };
-        });
-        // In-flight requests to prevent duplicate API calls
-        this.inflightRequests = {};
-        // Default cache TTL (5 minutes)
-        this.DEFAULT_CACHE_TTL = 5 * 60 * 1000;
-        // Modern Angular v20 dependency injection pattern
-        this.elementService = inject(CideElementsService);
-        this.http = inject(HttpClient);
-        this.titleService = inject(Title);
-        this.sidebarService = inject(CideLytSidebarService);
-        this.headerService = inject(CideLytHeaderService);
-        this.footerService = inject(CideLytFooterService);
-        this.consoleService = inject(CideLytConsoleService);
-        this.sidedrawerService = inject(CideLytSidedrawerService);
-        this.router = inject(Router);
-        // Import AppStateHelperService for sidebar sync
-        this.appState = inject(AppStateHelperService);
         // Listen to route changes - moved from request service
         this.routeSubscription = this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe(() => {
             // Cancel any ongoing page data fetching
@@ -1173,10 +1169,10 @@ class CideLytSharedService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1184,13 +1180,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytSharedWrapperComponent {
-    constructor() {
-        this.shared_wrapper_setup_param = {};
-        this.page_data = {};
-        this.sharedService = inject(CideLytSharedService);
-        this.sidedrawerService = inject(CideLytSidedrawerService);
-        this.appState = inject(AppStateHelperService);
-    }
+    shared_wrapper_setup_param = {};
+    page_data = {};
+    sharedService = inject(CideLytSharedService);
+    sidedrawerService = inject(CideLytSidedrawerService);
+    appState = inject(AppStateHelperService);
     ngOnInit() {
         // Load and process page data using modern approach
         if (this.shared_wrapper_setup_param?.sypg_page_code) {
@@ -1219,24 +1213,24 @@ class CideLytSharedWrapperComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", ngImport: i0, template: "<p>shared-wrapper works!</p>\r\n", styles: [""] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", ngImport: i0, template: "<p>shared-wrapper works!</p>\r\n", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-shared-wrapper', standalone: true, imports: [], template: "<p>shared-wrapper works!</p>\r\n" }]
         }] });
 
 class CideLytHeaderWrapperComponent extends CideLytSharedWrapperComponent {
+    shared_wrapper_setup_param = {
+        sypg_page_code: "cide_lyt_header"
+    };
+    syen_photo = {};
+    headerService = inject(CideLytHeaderService);
+    fileManagerService = inject(CideLytFileManagerService);
+    router = inject(Router);
     constructor() {
         super();
-        this.shared_wrapper_setup_param = {
-            sypg_page_code: "cide_lyt_header"
-        };
-        this.syen_photo = {};
-        this.headerService = inject(CideLytHeaderService);
-        this.fileManagerService = inject(CideLytFileManagerService);
-        this.router = inject(Router);
     }
     ngAfterViewInit() {
         this.fileManagerService?.getFileDetails({ cyfm_id: '6724b247c2b5da7d83b04c91' })?.subscribe({
@@ -1295,35 +1289,35 @@ class CideLytHeaderWrapperComponent extends CideLytSharedWrapperComponent {
             }
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", usesInheritance: true, ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"header-logo-container tw-cursor-pointer\" \n         (click)=\"onLogoClick()\" \n         (keydown.enter)=\"onLogoClick()\" \n         (keydown.space)=\"onLogoClick()\"\n         tabindex=\"0\" \n         role=\"button\"\n         aria-label=\"Navigate to home\"\n         title=\"Click to go to control panel home\">\n        <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n             [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n    </div>\n      <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n    </div>\n    \n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>dashboard</cide-ele-icon>\n            <div class=\"header-tooltip\">Dashboard</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>notifications</cide-ele-icon>\n            <div class=\"header-badge\">3</div>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <div class=\"header-divider\"></div>\n        \n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <div class=\"profile-avatar\">AK</div>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>more_vert</cide-ele-icon>\n            <div class=\"header-tooltip\">More Options</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ 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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", usesInheritance: true, ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"header-logo-container tw-cursor-pointer\" \n         (click)=\"onLogoClick()\" \n         (keydown.enter)=\"onLogoClick()\" \n         (keydown.space)=\"onLogoClick()\"\n         tabindex=\"0\" \n         role=\"button\"\n         aria-label=\"Navigate to home\"\n         title=\"Click to go to control panel home\">\n        <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n             [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n    </div>\n      <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n    </div>\n    \n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>dashboard</cide-ele-icon>\n            <div class=\"header-tooltip\">Dashboard</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>notifications</cide-ele-icon>\n            <div class=\"header-badge\">3</div>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <div class=\"header-divider\"></div>\n        \n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <div class=\"profile-avatar\">AK</div>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>more_vert</cide-ele-icon>\n            <div class=\"header-tooltip\">More Options</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"], dependencies: [{ 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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-header-wrapper', standalone: true, imports: [CideInputComponent, CommonModule, CideIconComponent], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"header-logo-container tw-cursor-pointer\" \n         (click)=\"onLogoClick()\" \n         (keydown.enter)=\"onLogoClick()\" \n         (keydown.space)=\"onLogoClick()\"\n         tabindex=\"0\" \n         role=\"button\"\n         aria-label=\"Navigate to home\"\n         title=\"Click to go to control panel home\">\n        <img [src]=\"'data:image/png;base64,' + syen_photo.cyfm_file_base64\"\n             [alt]=\"syen_photo.cyfm_alt_text ? syen_photo.cyfm_alt_text : 'Entity Logo'\">\n    </div>\n      <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\" size=\"md\"></cide-ele-input>\n    </div>\n    \n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>dashboard</cide-ele-icon>\n            <div class=\"header-tooltip\">Dashboard</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>notifications</cide-ele-icon>\n            <div class=\"header-badge\">3</div>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <div class=\"header-divider\"></div>\n        \n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <div class=\"profile-avatar\">AK</div>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n        \n        <div class=\"header-icon\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-icon>more_vert</cide-ele-icon>\n            <div class=\"header-tooltip\">More Options</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,#fffffff2,#f9fafbf2);box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgba(229,231,235,.8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,#fff0,#ffffff4d,#fff0);transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:#f9fafbcc;border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:#fff;transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:#374151e6;color:#fff;padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px}.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}\n"] }]
         }], ctorParameters: () => [] });
 
 class CideLytUserStatusService {
+    // Modern Angular Signals pattern
+    _userStatus = signal({
+        status: 'online',
+        lastActive: new Date(),
+        message: undefined
+    }, ...(ngDevMode ? [{ debugName: "_userStatus" }] : []));
+    // Public readonly access to status
+    userStatus = this._userStatus.asReadonly();
+    // Computed properties
+    isOnline = computed(() => this._userStatus().status !== 'offline', ...(ngDevMode ? [{ debugName: "isOnline" }] : []));
+    statusColor = computed(() => this.getStatusColor(this._userStatus().status), ...(ngDevMode ? [{ debugName: "statusColor" }] : []));
+    statusText = computed(() => this.getStatusText(this._userStatus().status), ...(ngDevMode ? [{ debugName: "statusText" }] : []));
+    // Legacy observable for compatibility
+    statusSubject = new BehaviorSubject(this._userStatus());
+    status$ = this.statusSubject.asObservable();
+    // Auto-away functionality
+    lastActivityTime = Date.now();
+    autoAwayTimeout = 5 * 60 * 1000; // 5 minutes
+    autoAwayEnabled = true;
     constructor() {
-        // Modern Angular Signals pattern
-        this._userStatus = signal({
-            status: 'online',
-            lastActive: new Date(),
-            message: undefined
-        });
-        // Public readonly access to status
-        this.userStatus = this._userStatus.asReadonly();
-        // Computed properties
-        this.isOnline = computed(() => this._userStatus().status !== 'offline');
-        this.statusColor = computed(() => this.getStatusColor(this._userStatus().status));
-        this.statusText = computed(() => this.getStatusText(this._userStatus().status));
-        // Legacy observable for compatibility
-        this.statusSubject = new BehaviorSubject(this._userStatus());
-        this.status$ = this.statusSubject.asObservable();
-        // Auto-away functionality
-        this.lastActivityTime = Date.now();
-        this.autoAwayTimeout = 5 * 60 * 1000; // 5 minutes
-        this.autoAwayEnabled = true;
         this.initializeActivityTracking();
         this.startAutoAwayTimer();
     }
@@ -1425,10 +1419,10 @@ class CideLytUserStatusService {
     setAutoAwayTimeout(timeout) {
         this.autoAwayTimeout = timeout;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytUserStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytUserStatusService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytUserStatusService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytUserStatusService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytUserStatusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytUserStatusService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1436,6 +1430,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytSidebarWrapperComponent {
+    sidebarSetupData = {
+        cide_lyt_sidebar_width: 0
+    };
+    isCollapsed = false;
+    darkMode = false;
+    showUserMenu = false;
+    showOptions = false;
+    showNotifications = false;
+    showNotificationsPanel = false;
+    searchText = '';
+    isExpanded = true;
+    searchResults = [];
+    // Collapsed section states tracking
+    collapsedSections = {
+        'company': false,
+        'account': false,
+        'advanced': false,
+        'recent': false
+    };
+    // Track expanded state for menu sections
+    expandedSections = {};
+    // For scroll-based animation
+    animateSections = [false, false, false, false, false];
+    lastScrollTop = 0;
+    scrolledPast = [false, false, false, false, false];
+    core_system_menu = [];
+    core_system_module = [];
+    // Track active state for enhanced visual effects
+    activeModuleId = '';
+    hoverModuleId = '';
+    animateItems = false;
+    moduleLoadComplete = false;
+    menuLoadComplete = false;
+    loadingMenus = false;
     // Add this getter to retrieve the menu tree for the selected module
     get selectedModuleMenus() {
         return this.core_system_menu || [];
@@ -1501,46 +1529,12 @@ class CideLytSidebarWrapperComponent {
     isSectionExpanded(sectionId) {
         return this.expandedSections[sectionId] ?? true; // Default to expanded
     }
+    sidebarService = inject(CideLytSidebarService);
+    elementRef = inject(ElementRef);
+    appState = inject(AppStateHelperService);
+    router = inject(Router);
+    userStatusService = inject(CideLytUserStatusService);
     constructor() {
-        this.sidebarSetupData = {
-            cide_lyt_sidebar_width: 0
-        };
-        this.isCollapsed = false;
-        this.darkMode = false;
-        this.showUserMenu = false;
-        this.showOptions = false;
-        this.showNotifications = false;
-        this.showNotificationsPanel = false;
-        this.searchText = '';
-        this.isExpanded = true;
-        this.searchResults = [];
-        // Collapsed section states tracking
-        this.collapsedSections = {
-            'company': false,
-            'account': false,
-            'advanced': false,
-            'recent': false
-        };
-        // Track expanded state for menu sections
-        this.expandedSections = {};
-        // For scroll-based animation
-        this.animateSections = [false, false, false, false, false];
-        this.lastScrollTop = 0;
-        this.scrolledPast = [false, false, false, false, false];
-        this.core_system_menu = [];
-        this.core_system_module = [];
-        // Track active state for enhanced visual effects
-        this.activeModuleId = '';
-        this.hoverModuleId = '';
-        this.animateItems = false;
-        this.moduleLoadComplete = false;
-        this.menuLoadComplete = false;
-        this.loadingMenus = false;
-        this.sidebarService = inject(CideLytSidebarService);
-        this.elementRef = inject(ElementRef);
-        this.appState = inject(AppStateHelperService);
-        this.router = inject(Router);
-        this.userStatusService = inject(CideLytUserStatusService);
         // React to active module changes using signal effects
         effect(() => {
             const activeModule = this.appState.activeModule();
@@ -1872,8 +1866,8 @@ class CideLytSidebarWrapperComponent {
             this.showOptions = false;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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\" (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\n        <!-- Bottom section with enhanced theme toggle and user avatar -->\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\n            <!-- Theme toggle with modern design -->\n            <div class=\"nav-item tw-group\">\n                <div class=\"nav-tooltip\">Toggle Theme</div>\n                <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\n                    (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\n                    <cide-ele-icon type=\"box\" size=\"sm\">\n                        {{darkMode ? 'light_mode' : 'dark_mode'}}\n                    </cide-ele-icon>\n                </button>\n            </div>\n\n            <!-- User avatar with dropdown -->\n            <div class=\"tw-relative user-dropdown\" \n                 (click)=\"toggleUserMenu()\"\n                 (keydown.enter)=\"toggleUserMenu()\"\n                 (keydown.space)=\"toggleUserMenu()\"\n                 tabindex=\"0\"\n                 role=\"button\"\n                 aria-label=\"Toggle user menu\"\n                 [attr.aria-expanded]=\"showUserMenu\">\n                <div class=\"nav-tooltip\">Your Profile</div>\n                <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\n                    style=\"border-color: var(--cide-theme-sidebar-color);\">\n                    <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMwAAADACAMAAAB/Pny7AAAA8FBMVEX///8Qdv8QUuf///0QUegNdP////sAcv8Ab/8Abf/M4vASX+8Ab/3n7vgAbvgETufR4PP0//sAaf0ASeU6YuMyW+fe8PcAafbC1velwfGWufCOsvL1/P3u9vh7qfh3pvgARucRWOu10vBglOmnxuw0fOValuYAbOdYk/EAYPgAZ+o9hPJMi+TH3/duoONwnuwdefe0yvRunfZ6pe1LiOk6gfuRu+y11eurvuU3YtmRpuCitOO7xuvG1OlJjPYdc+iNnOFOcOFceOJlg93Jz+wANt6kte58kNp1kOgAQMkZOdQOTNUAKNkfU9FMb9I9Zs4gMZ6mAAAPKUlEQVR4nO1dC1fiuhZum6ZFoA+sFIH2TAUclQ6KgzoKPlB08Dgz3v//b26StohjH0la1LMW39KjI5yGr/uRnb13E0FYY4011lhjjTXWWGONNdbgBgi+AfkG+Af5JXxl8QP9BYAP+oj0AITDCxnl1b+E5X98fjLBxwXRpwWOa9smgW27DpFQ+Mp/gQthowhCrdxpjbon/inCkHydnu6edEetTrmG3qb8FyRDbrrdO9zVdRGKIkRQYQhVxb+Kur572LPBwoo+HxAJBYtEsXtf9yqbVVUUMZkElDYre197NpajsOwdPg2Q3rj2mV85QLc/kcULYHWz75/ZrvAZTQi4ZvMEiYSGSAR1s/KtabpYOsqnIYM+jbY92ttUg3tOyYe8T93cG21riqB8NAchcsSK2dzXNyAxElrJwOitcEPfb5rhvPOhPo5oiNm+blQZtOsNqo3rtrmYVD+MCxq73PYbah4qGGpE5wMlAwS75eu5qWCNU/Xrlg0+UDIA9HwxfUZhgCr6vY+QTHAHQbmrq4XwCAH1rh24gXflQqKrs34BCvaajdo/w1POO7MBwD45KJgKZiMe7NrK+9oNilx6/Y3iuWCo/Z77vly0kV6ksUQg11T1kfZeTk1RgDLYb6yAyoKRvj94H7eGRnF6fml1XDBKfs95HzJOa5greMkGFKvD1juwAUptJBbtkf+iQqJpceSsWNXQ5WtfiwhfsgmhCdRZ7SIHTWjfVmwuL6h+c1a6ZlOck2oxgRgFYOmktjpNA4pL5MLEJszJwCAzw8am+s1djWjwMt09YosroS6SfFmEoYjtjfoSaF1w5K5ENDj5MtIZiOCQ/nvruPyCQafV9cXqy4o56wpo+hythA3i0sYBP3W2QvfbA0d4iedJLFwbtH2WQAjqbXcVZJzmkEHp1f4oXNUv3w8Mc9Snsx7yHjhsOgUTwRbTuaHS9zDlstdzg9Te0mIrXOO7vT2q1WnwhupNBxSbysWrSp/OKcPgE7yKFF9/EgAGe9QJKRTZ+GWlwNUaKU3sU0+WUCzdmEry8OgV86YqUro1dLWTIgMbrGWHm5Smj13VjQlSMpQka3hDZ3/E8W0cFqlmQPlRGdLeSmQvA5AiGGI6CpOmHfwokkutT+/H4F4nWymQP6Fmg9B3FaWg1C1QjhgCZb1N4UuB4rQZFqtqVymq1AZ6DOGYem3SXdT0WZbevaLyT+VrloisTWesQJhK1PKG8NouQjJomTxioAJPe3SXFYTL+k44w1LdIyc/GXSF7VMGi1F9k0oyeLK5MHaoRa6ebhfgnlHcz5K+UK9tWuXWbg2pItJW2qpH+SNOAHpDBi6ifqLRcQFAu7MkaYf2wnBIp7+pY2rfmfJKepdOt3H6bWbJEpENDRex1NXyclGOG0zLZDiiV+25jMhIFdrLNzp5A06NPsAkQMpAJxn0fb5jIDIyFRv0HnVfyzfZgA6lGkRjnpapc95A2zKwbAI2FIwqHSVXjd39xpaJVX36rCpwbolkEBudatmndnMkBNA9HjBm++E1ZaoLh86YDLaayG7S+aBXGwPuOhRe8x4xVpSwmlF6ZgDMrYgMpd1sHHHHNLjU12fjgtCmlAz6moZUEIwKVd6nb/NRQVDA2SYrFxVHhHRkUAQQkaGdbzbPeDOcyHXssXIRoT+gvf594MxCNjIVmz0+KgigzF5PhqcdyotjMtIyaOzmoMzN5pCjfEEfQk3q8isyRDYZhEqHnFRArc9TvmjRes+x/JpMIJuMEfdqnGw6rDUIjMaI7k6hlab3WjBypqZhrpRa/Ga4Q9Z6Ch6tP6JyOMiBT6U3osm2GxzIss41+O3uNXvxEvrNK6qABs3/95MLOVbT0lQNXrOnN/H7ByxZ/2AkYjG04QyyGumNaOQMu4HDAXPkjMdqMfeRobf/oGzmI/2ynRhFy4xsqB3MMhlwRF1ZWsI2pRKQlcnlGyrZbPQj5vAMjeWesPZhYAU5Zrlv50Ycm3QvUD1hL9qimNZnlQsyMdgWGBqSpkYMFTldNvCUvUkICGxZmYhOl0Uys1jJZMw3tAvzV2gzlJZfyPj02a1o2RxDJk02epuVCRBqX3j6SuCpSZd0wKpyVY9TsywvUP1SY7YZe5+rDwvHmXRkFGGyE2v/GWyq+8wrNGAypf5fMKIt2eEygPx21sz0abQ1k+WRtk+5yKhdOiXA0ptZMZPmEhsxdtaGp9vMZI45nBkeyjep9Ay9w7xINJmFbOLIDI+ZyTS5uCAcmS5FSAPcq8c0sSw07W18qDdZyYAWh2cmGA6nmpBWOifQpn9S7IUgfvaEUG8xzjNAYamfvsYGstBMMuatlyWXpNmz0WaMZ4Az4iaDexoyRzP/ZBhMpGkxZEasjbXuP/zd8ZXt1MHIk13bD1RcIk1bFtDGP6zt9e4XfjKbGT3JOBT9SUkmJg+98YWVjPadnwzO1qfOnEDQ0BxDJxn5jRcofWctoeUhA/fMNN+Mn7U1JTqTiWEDecjk6F/ebKX2u6EXx9RaJkl/Z255yPD3+0Pc15QSBqTGy/FslmXDTAbkkoxY3bWTszTIYi4oLWaZzYJP9Z3JiNVrN9ls7Asv+/O/4hKwgbySyeOaCZtvbpLR2M+MXAgWdgPZXXOeSTNi8zbqwLsG2M9WZiCTwgayT5p5wpmITWz1AQhzLzNajsWi4sEczgCmRr1YwJjGM2xH0/hkWTaZyKc12qxk+JcAERexFXvduAQzFZdF9wNaAjBxybM4izBsxvgz9Je0NEYWoUDTWBdnAu+yeYlMJ+4GAuGyzk2GsFE5ls2cCY0FSBo17sJXW0yz/1+ocCU0TI5S0zLUUztuogFAy8pjpAgGz54cqSbeJGAkl9LBt3ifA5zn30srZnaV2/nOngTkSs/CoIinHvQPB1pMCz12CYq2Pbd+44nzbRGQBt4j6wM1aFCOxDmhAjcrXwdOtHlWzJXRn53t2YMXmzXPhjVlLZ0B1kbTBZ/qzVlkLDFkgh0esMzs8R/L4JCNXJ8wCgYPO2B3Z6o63O254dNZ8UFztMcZFs/5rcQephlbV8zVGQDcE5V6cx8iE6gP9ztO9FxW/Igg+iJwLp/rIR1qUsYdXdvUKy6kQMuC6nC/V2MaB6mbcz4jdNLKAX+ReeSpNrOVzlVxv+kKac8Axd8x4E7uDIueiySNmR9zwmrC0tRQ9VsaTskyDRMaj/bzwqNmI9ev2Jsa8Ox2TU2m+tUUOJ4LAwLh75gz2rWnbNxyPq0xog1oGiPe/UjCz6XNPRKrZFGRZOuRr08bdCiNZvMo50OuuIrmUXg0RMa4VPjatGt0vbNwz8n7aAtStX/Ta4IhGempRlcAfgu6tsZKmfNmvXBBGDzQqJk3T5yOszCgaTitjtgcchIhbDaZevZwxXt5kNkKjN1dv5i9lYD5lC0Y4xfvgw1I9hRN2qUjl8Mpx8B9zPbPD2Puoaja5xu4TFaEnimXT1lcjCfKZ8DiuAhK5oMNqp/34anFcOnraezqvEf+BxtQJDiopM81cIN7vnwznDtP0zNkMMj8uXfXwj4w82GgxnFR23kC0MzQM+8uMRlPc30l6zEtuJdeWWYa7f5Xqp5JD5cC/zY0OKrVUpM0UL02iyIDgHmbWoOynrnNPxqik5pA3/iuFbfvgJYePD8d53WaQOumiYY5I58ykpDuAbxZXsFkNZ42WJtyUof6mUJG/nWefwTgHqUk0BrN4rRMSCVjPeZXaHQB8gh9wmSjNwuTDK52JJMxti7zB00gfXODAtUMACVRMrJszIvY3AA30l4n7gRWGhW3L1RiCIAiGePWLCCcJSm9XuKWhtAvbJ5Ja9qUpXOhgL2cg2xQNzG1UZQHwOr8M7E50JsVsgAkUNBSIDbtBEV4U07K9zMxwQFAUjQjy092cfJXlB8HSbONuhtXiGEECgIVLbkJ5fd2odvPgcOEhQ2EKpJNzm0I8XY/5T9WUg7AmxfEIgAQnJNqTMt00HFYGWta8C7ey2va+CEx1eQ9O0KB5wZgjS771cRsbeXX46XpRrnjqKYR530WBTUQbi2OQwzz+PFXcmOwtVWgw4w+Recm+WiJkvVwMZ3ca2RDQyU6gSapRkP2BAu4Otp9c3rxlNJOY9VZK+UUZBSnOYx30LjHXd+xvKet2XSCJKSA6BPHXEZYNDwqmnk/mc7+PHlpqxijPil4g8OAjduO3zSStLVVd9A07XnS1t3jdHx+b9opSwPHNu/Px/PZ3ZbleUZQdk4QjWxMV7ORpuCOYuPNcFdF0hIjGxa60fWt27vZbD4dTyaX91dXwTFHV1f3l5PJeDp/nN3dbtUNz7KM9H4AnPSfr2aLUwT3CJc5EwjpOy9bFRgWgmFIO/X61gvqCFL4EkVtCXOZrYwLCgXxRrrxbgAiu5GX7nCoPcYrYG2Sk5XqbzYeWfWvhg3eevok0QmgYCBqvloUkKMPH/5ZllhKsZL3P6egbGksFMVJ2Hw6mD4jGrK0VAh7/YOaDZILWsIoq9x+GtS+ppxkBHdY6sapMKyZoxS8UesbKA7esD0pGNB3iqEiGdIcKKs/hyLYSj/BCyz7tDyw6mMHFLRzZhoXFHSmHXKg87dgLiB7F+dOUnhXMBkABvvJhqPnthvZer4PQ9JVqxmGkngwCAxjgRx0DGteYM43E4Ac2ZKYF6jyywb9b9a/5+96ZIuQfJgOjNhwcpEfLvh3yuImgybQs0pMqjOIBXgkg5XTepqEa7d3hgLsrp6UtJFYzCaKGAzrmW5/1NXQ6fkJM44qMdAJuucs+WKSu3GFE8FaUmv5eimOEFMsgO3euB1rLLuJrIANAPhkQFVcfj58ebVGCcu7nZpJa+13ohOkojGdmJCAmo3sebfjoMHvI88GJIyQYyNHUL6Zd7LZkAWOZ939NAFjf+eqAP46HPTFpWXMnvhF7+HX/FJTiszy5ULYXh4c26ouccmKOmXL+/08CY5t/SxkwrZs9F/XbvmNzY3AFxA3oOPbH0vI8B4eLsaaC1LPEPhgBEcdl6IjgtUl65CCqVGWMZF/Zz37HVZfeRCkj/Eh1KIenHBUIlmZpfyMZDxdzM9xAAYyN6f4YCz8a3g8+K5/Q/JlCFsXt8+z+fi87ArhkycrXuHnRrSiCicMfHC7eYVhmrYWZY1f5sZPzSVMc4VMwkdlFq8sfv/AM4DXWGONNdZYY4011lhjjTU+I/4P0EdBunobKkUAAAAASUVORK5CYII=\"\n                        alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\n                        onerror=\"this.src='data:image/png;base64,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'\">\n                    <!-- Modern Status Indicator Circle -->\n                    <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\n                                {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\n                        tooltipPlacement=\"left\">\n                        <!-- Pulse animation for active status -->\n                        <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\n                                    {{getUserStatusClass()}}\"></div>\n                    </div>\n                </div>\n\n                <!-- Enhanced User dropdown menu with modern status options -->\n                <div *ngIf=\"showUserMenu\"\n                    class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\n\n                    <!-- Enhanced User Info Section -->\n                    <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\n                        <div class=\"tw-flex tw-items-center tw-gap-4\">\n                            <div class=\"tw-relative\">\n                                <div\n                                    class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-lg tw-shadow-lg\">\n                                    JD\n                                </div>\n                                <!-- Enhanced status indicator -->\n                                <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\n                                    [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\n                                    <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\n                                        [class]=\"getUserStatusClass()\"></div>\n                                </div>\n                            </div>\n                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\n                                <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe&#64;company.com</div>\n                                <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\n                                    <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\n                                    </div>\n                                    <span>Active now</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Status Selection Section -->\n                    <div class=\"tw-p-4\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\n                                    <cide-ele-icon type=\"none\" size=\"2xs\"\n                                        class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\n                                </div>\n                                Set Status\n                            </h4>\n                            <span\n                                class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\n                                in 5min</span>\n                        </div>\n\n                        <div class=\"tw-space-y-1\">\n                            <button (click)=\"setUserStatus('online')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\n                                [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\n                                [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\n                                <div class=\"tw-relative\">\n                                    <div\n                                        class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                        <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\n                                            *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\n                                    </div>\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('away')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\n                                [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\n                                [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('busy')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\n                                [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\n                                [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('do-not-disturb')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\n                                [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                    type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Quick Actions Section -->\n                    <div class=\"tw-p-4 tw-bg-gray-50/50\">\n                        <h4\n                            class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\n                            <div\n                                class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\n                                <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\n                            </div>\n                            Quick Actions\n                        </h4>\n                        <div class=\"tw-space-y-1\">\n                            <a href=\"#\"\n                                class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\n                                </div>\n                                <span class=\"tw-flex-1\">View Profile</span>\n                                <cide-ele-icon type=\"none\" size=\"xs\"\n                                    class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n                            </a>\n                            <a href=\"#\"\n                                class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\"\n                                        class=\"tw-text-gray-600\">settings</cide-ele-icon>\n                                </div>\n                                <span class=\"tw-flex-1\">Preferences</span>\n                                <cide-ele-icon type=\"none\" size=\"xs\"\n                                    class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Sign Out Section -->\n                    <div class=\"tw-p-4\">\n                        <a href=\"#\"\n                            class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\n                            <div\n                                class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\n                                <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\n                            </div>\n                            <span class=\"tw-flex-1\">Sign out</span>\n                        </a>\n                    </div>\n                </div>\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-4 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-3 tw-mb-4\">\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\" (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-4\">\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-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-3 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-4\"\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-3\">\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\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 \n                                    (click)=\"toggleSection(menu._id)\"\n                                    (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-3 tw-py-2 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)\"\n                                    type=\"button\"\n                                    tabindex=\"0\"\n                                    role=\"button\"\n                                    [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 \n                                        class=\"tw-mr-3 tw-text-gray-500\" \n                                        type=\"none\"\n                                        size=\"xs\">{{ menu.syme_icon || 'folder' }}</cide-ele-icon>\n                                    \n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title }}</span>\n                                    \n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\n                                        <!-- Child Count Badge -->\n                                        <span \n                                            *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n                                        \n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon \n                                            class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\"\n                                            type=\"none\" \n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div \n                                    *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\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-1 tw-py-1 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-3 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\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        <div\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\n                            <div class=\"tw-flex tw-gap-3\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\n                                </div>\n                                <div class=\"tw-flex-1\">\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\n                                        with improved visualizations.</div>\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\n                            <div class=\"tw-flex tw-gap-3\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\n                                </div>\n                                <div class=\"tw-flex-1\">\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\n                                    </div>\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-4 tw-border-t tw-border-gray-100\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                    <div class=\"tw-flex tw-items-center\">\n                        <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                            size=\"xs\">cloud_upload</cide-ele-icon>\n                        <span class=\"tw-text-sm tw-text-gray-700\">Storage</span>\n                    </div>\n                    <button\n                        class=\"upgrade-button tw-text-xs tw-text-blue-500 tw-font-medium tw-px-2 tw-py-1 tw-rounded hover:tw-bg-blue-50 tw-transition-colors\">Upgrade</button>\n                </div>\n                <div class=\"storage-bar tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\n                    <div class=\"storage-fill tw-bg-blue-500 tw-h-1.5 tw-rounded-full tw-transition-all\"\n                        style=\"width: 75%\"></div>\n                </div>\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-1.5\">\n                    <div class=\"tw-text-xs tw-text-gray-500\">18.2 GB of 20 GB used</div>\n                    <div class=\"tw-text-xs tw-text-blue-500\">75%</div>\n                </div>\n\n                <!-- Plan features quick view -->\n                <div\n                    class=\"plan-features tw-flex tw-items-center tw-justify-between tw-mt-3 tw-pt-3 tw-border-t tw-border-gray-100\">\n                    <div class=\"tw-flex tw-flex-col\">\n                        <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">Free Plan</span>\n                        <span class=\"tw-text-xs tw-text-gray-500\">Basic features</span>\n                    </div>\n                    <div class=\"tw-flex tw-gap-2\">\n                        <button\n                            class=\"tw-text-xs tw-bg-white tw-border tw-border-gray-200 tw-text-gray-700 tw-py-1 tw-px-2 tw-rounded hover:tw-bg-gray-50 tw-transition-colors\">Compare\n                            Plans</button>\n                    </div>\n                </div>\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}.cide-lyt-sidebar.collapsed{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)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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 ɵ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\" (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\n        <!-- Bottom section with enhanced theme toggle and user avatar -->\n        <div class=\"tw-flex tw-flex-col tw-items-center tw-gap-3 tw-mt-auto tw-pb-4\">\n            <!-- Theme toggle with modern design -->\n            <div class=\"nav-item tw-group\">\n                <div class=\"nav-tooltip\">Toggle Theme</div>\n                <button class=\"theme-toggle\" (click)=\"toggleTheme()\" (keydown.enter)=\"toggleTheme()\"\n                    (keydown.space)=\"toggleTheme()\" tabindex=\"0\" role=\"button\" aria-label=\"Toggle theme\">\n                    <cide-ele-icon type=\"box\" size=\"sm\">\n                        {{darkMode ? 'light_mode' : 'dark_mode'}}\n                    </cide-ele-icon>\n                </button>\n            </div>\n\n            <!-- User avatar with dropdown -->\n            <div class=\"tw-relative user-dropdown\" \n                 (click)=\"toggleUserMenu()\"\n                 (keydown.enter)=\"toggleUserMenu()\"\n                 (keydown.space)=\"toggleUserMenu()\"\n                 tabindex=\"0\"\n                 role=\"button\"\n                 aria-label=\"Toggle user menu\"\n                 [attr.aria-expanded]=\"showUserMenu\">\n                <div class=\"nav-tooltip\">Your Profile</div>\n                <div class=\"user-avatar tw-w-10 tw-h-10 tw-rounded-full tw-overflow-hidden tw-bg-gray-200 tw-border-2 tw-shadow-sm tw-cursor-pointer hover:tw-shadow\"\n                    style=\"border-color: var(--cide-theme-sidebar-color);\">\n                    <img src=\"data:image/png;base64,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\"\n                        alt=\"User\" class=\"tw-w-full tw-h-full tw-object-cover\"\n                        onerror=\"this.src='data:image/png;base64,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'\">\n                    <!-- Modern Status Indicator Circle -->\n                    <div class=\"tw-absolute -tw-bottom-0.5 -tw-right-0.5 tw-w-3.5 tw-h-3.5 tw-rounded-full tw-border-2 tw-border-white tw-shadow-sm tw-transition-all tw-duration-200\n                                {{getUserStatusClass()}}\" [cideEleTooltip]=\"getUserStatusText()\"\n                        tooltipPlacement=\"left\">\n                        <!-- Pulse animation for active status -->\n                        <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\n                                    {{getUserStatusClass()}}\"></div>\n                    </div>\n                </div>\n\n                <!-- Enhanced User dropdown menu with modern status options -->\n                <div *ngIf=\"showUserMenu\"\n                    class=\"user-menu tw-absolute tw-left-full tw-bottom-0 tw-mt-2 tw-ml-2 tw-w-72 tw-rounded-xl tw-shadow-2xl tw-bg-white tw-ring-1 tw-ring-black/5 tw-divide-y tw-divide-gray-100 tw-z-50 tw-backdrop-blur-sm\">\n\n                    <!-- Enhanced User Info Section -->\n                    <div class=\"tw-p-5 tw-bg-gradient-to-br tw-from-blue-50 tw-to-indigo-50\">\n                        <div class=\"tw-flex tw-items-center tw-gap-4\">\n                            <div class=\"tw-relative\">\n                                <div\n                                    class=\"tw-w-12 tw-h-12 tw-rounded-xl tw-bg-gradient-to-br tw-from-blue-500 tw-via-purple-500 tw-to-indigo-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-semibold tw-text-lg tw-shadow-lg\">\n                                    JD\n                                </div>\n                                <!-- Enhanced status indicator -->\n                                <div class=\"tw-absolute -tw-bottom-1 -tw-right-1 tw-w-4 tw-h-4 tw-rounded-full tw-border-2 tw-border-white tw-shadow-md tw-transition-all tw-duration-300\"\n                                    [class]=\"getUserStatusClass()\" [title]=\"getUserStatusText()\">\n                                    <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-animate-pulse tw-opacity-50\"\n                                        [class]=\"getUserStatusClass()\"></div>\n                                </div>\n                            </div>\n                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                <div class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-truncate\">John Doe</div>\n                                <div class=\"tw-text-sm tw-text-gray-600 tw-truncate\">john.doe&#64;company.com</div>\n                                <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1 tw-flex tw-items-center tw-gap-1\">\n                                    <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-green-500 tw-animate-pulse\">\n                                    </div>\n                                    <span>Active now</span>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Status Selection Section -->\n                    <div class=\"tw-p-4\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                            <h4 class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-blue-100 tw-flex tw-items-center tw-justify-center\">\n                                    <cide-ele-icon type=\"none\" size=\"2xs\"\n                                        class=\"tw-text-blue-600\">radio_button_checked</cide-ele-icon>\n                                </div>\n                                Set Status\n                            </h4>\n                            <span\n                                class=\"tw-text-xs tw-text-gray-500 tw-bg-gray-100 tw-px-2 tw-py-1 tw-rounded-full\">Auto-away\n                                in 5min</span>\n                        </div>\n\n                        <div class=\"tw-space-y-1\">\n                            <button (click)=\"setUserStatus('online')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-green-50 tw-group\"\n                                [class.tw-bg-green-50]=\"userStatusService.userStatus().status === 'online'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'online'\"\n                                [class.tw-ring-green-200]=\"userStatusService.userStatus().status === 'online'\">\n                                <div class=\"tw-relative\">\n                                    <div\n                                        class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-green-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                        <div class=\"tw-absolute tw-inset-0 tw-rounded-full tw-bg-green-500 tw-animate-ping tw-opacity-75\"\n                                            *ngIf=\"userStatusService.userStatus().status === 'online'\"></div>\n                                    </div>\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Online</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'online'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-green-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('away')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-yellow-50 tw-group\"\n                                [class.tw-bg-yellow-50]=\"userStatusService.userStatus().status === 'away'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'away'\"\n                                [class.tw-ring-yellow-200]=\"userStatusService.userStatus().status === 'away'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-yellow-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Away</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'away'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-yellow-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('busy')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-orange-50 tw-group\"\n                                [class.tw-bg-orange-50]=\"userStatusService.userStatus().status === 'busy'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'busy'\"\n                                [class.tw-ring-orange-200]=\"userStatusService.userStatus().status === 'busy'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-orange-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Busy</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'busy'\" type=\"none\"\n                                    size=\"xs\" class=\"tw-text-orange-600\">check</cide-ele-icon>\n                            </button>\n\n                            <button (click)=\"setUserStatus('do-not-disturb')\"\n                                class=\"status-option tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-text-sm tw-rounded-lg tw-transition-all tw-duration-200 hover:tw-bg-red-50 tw-group\"\n                                [class.tw-bg-red-50]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                [class.tw-ring-2]=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                [class.tw-ring-red-200]=\"userStatusService.userStatus().status === 'do-not-disturb'\">\n                                <div\n                                    class=\"tw-w-3 tw-h-3 tw-rounded-full tw-bg-red-500 tw-shadow-sm group-hover:tw-scale-110 tw-transition-transform\">\n                                </div>\n                                <span class=\"tw-text-gray-700 tw-font-medium tw-flex-1\">Do not disturb</span>\n                                <cide-ele-icon *ngIf=\"userStatusService.userStatus().status === 'do-not-disturb'\"\n                                    type=\"none\" size=\"xs\" class=\"tw-text-red-600\">check</cide-ele-icon>\n                            </button>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Quick Actions Section -->\n                    <div class=\"tw-p-4 tw-bg-gray-50/50\">\n                        <h4\n                            class=\"tw-text-sm tw-font-semibold tw-text-gray-800 tw-mb-3 tw-flex tw-items-center tw-gap-2\">\n                            <div\n                                class=\"tw-w-5 tw-h-5 tw-rounded-md tw-bg-gray-100 tw-flex tw-items-center tw-justify-center\">\n                                <cide-ele-icon type=\"none\" size=\"2xs\" class=\"tw-text-gray-600\">bolt</cide-ele-icon>\n                            </div>\n                            Quick Actions\n                        </h4>\n                        <div class=\"tw-space-y-1\">\n                            <a href=\"#\"\n                                class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-blue-200 tw-transition-colors\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-blue-600\">person</cide-ele-icon>\n                                </div>\n                                <span class=\"tw-flex-1\">View Profile</span>\n                                <cide-ele-icon type=\"none\" size=\"xs\"\n                                    class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n                            </a>\n                            <a href=\"#\"\n                                class=\"quick-action tw-group tw-flex tw-items-center tw-px-3 tw-py-2 tw-text-sm tw-text-gray-700 tw-rounded-lg hover:tw-bg-white tw-transition-all tw-duration-200\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-gray-200 tw-transition-colors\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\"\n                                        class=\"tw-text-gray-600\">settings</cide-ele-icon>\n                                </div>\n                                <span class=\"tw-flex-1\">Preferences</span>\n                                <cide-ele-icon type=\"none\" size=\"xs\"\n                                    class=\"tw-text-gray-400 group-hover:tw-text-gray-600 tw-transition-colors\">chevron_right</cide-ele-icon>\n                            </a>\n                        </div>\n                    </div>\n\n                    <!-- Enhanced Sign Out Section -->\n                    <div class=\"tw-p-4\">\n                        <a href=\"#\"\n                            class=\"tw-group tw-flex tw-items-center tw-px-3 tw-py-2.5 tw-text-sm tw-text-red-600 tw-rounded-lg hover:tw-bg-red-50 tw-transition-all tw-duration-200 tw-font-medium\">\n                            <div\n                                class=\"tw-w-8 tw-h-8 tw-rounded-lg tw-bg-red-100 tw-flex tw-items-center tw-justify-center tw-mr-3 group-hover:tw-bg-red-200 tw-transition-colors\">\n                                <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-text-red-600\">logout</cide-ele-icon>\n                            </div>\n                            <span class=\"tw-flex-1\">Sign out</span>\n                        </a>\n                    </div>\n                </div>\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-4 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-3 tw-mb-4\">\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\" (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-4\">\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-3 tw-py-2 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-3 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-4\"\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-3\">\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\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 \n                                    (click)=\"toggleSection(menu._id)\"\n                                    (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-3 tw-py-2 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)\"\n                                    type=\"button\"\n                                    tabindex=\"0\"\n                                    role=\"button\"\n                                    [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 \n                                        class=\"tw-mr-3 tw-text-gray-500\" \n                                        type=\"none\"\n                                        size=\"xs\">{{ menu.syme_icon || 'folder' }}</cide-ele-icon>\n                                    \n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title }}</span>\n                                    \n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\n                                        <!-- Child Count Badge -->\n                                        <span \n                                            *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-2 tw-py-0.5 tw-bg-gray-200 tw-text-gray-600 tw-rounded-full tw-text-xs tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n                                        \n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon \n                                            class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\"\n                                            type=\"none\" \n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div \n                                    *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\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-1 tw-py-1 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-3 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\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        <div\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\n                            <div class=\"tw-flex tw-gap-3\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-text-blue-500\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\n                                </div>\n                                <div class=\"tw-flex-1\">\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\n                                        with improved visualizations.</div>\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\n                                </div>\n                            </div>\n                        </div>\n\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\n                            <div class=\"tw-flex tw-gap-3\">\n                                <div\n                                    class=\"tw-w-8 tw-h-8 tw-rounded-full tw-bg-gray-100 tw-flex tw-items-center tw-justify-center tw-text-gray-500\">\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\n                                </div>\n                                <div class=\"tw-flex-1\">\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\n                                    </div>\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-4 tw-border-t tw-border-gray-100\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                    <div class=\"tw-flex tw-items-center\">\n                        <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                            size=\"xs\">cloud_upload</cide-ele-icon>\n                        <span class=\"tw-text-sm tw-text-gray-700\">Storage</span>\n                    </div>\n                    <button\n                        class=\"upgrade-button tw-text-xs tw-text-blue-500 tw-font-medium tw-px-2 tw-py-1 tw-rounded hover:tw-bg-blue-50 tw-transition-colors\">Upgrade</button>\n                </div>\n                <div class=\"storage-bar tw-bg-gray-200 tw-rounded-full tw-h-1.5\">\n                    <div class=\"storage-fill tw-bg-blue-500 tw-h-1.5 tw-rounded-full tw-transition-all\"\n                        style=\"width: 75%\"></div>\n                </div>\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mt-1.5\">\n                    <div class=\"tw-text-xs tw-text-gray-500\">18.2 GB of 20 GB used</div>\n                    <div class=\"tw-text-xs tw-text-blue-500\">75%</div>\n                </div>\n\n                <!-- Plan features quick view -->\n                <div\n                    class=\"plan-features tw-flex tw-items-center tw-justify-between tw-mt-3 tw-pt-3 tw-border-t tw-border-gray-100\">\n                    <div class=\"tw-flex tw-flex-col\">\n                        <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">Free Plan</span>\n                        <span class=\"tw-text-xs tw-text-gray-500\">Basic features</span>\n                    </div>\n                    <div class=\"tw-flex tw-gap-2\">\n                        <button\n                            class=\"tw-text-xs tw-bg-white tw-border tw-border-gray-200 tw-text-gray-700 tw-py-1 tw-px-2 tw-rounded hover:tw-bg-gray-50 tw-transition-colors\">Compare\n                            Plans</button>\n                    </div>\n                </div>\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}.cide-lyt-sidebar.collapsed{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)}.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),#fff0)}.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),#fff0)}.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%;padding-top:.75rem;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:#f3f4f6;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, rgba(243, 244, 246, 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,#ffffff4d,#fff0);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:auto;background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgba(243,244,246,1);transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform}.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 rgba(243,244,246,.8);padding:1rem .75rem;transition:all .3s ease}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px #0000001a}.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:#f3f4f6}.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:#f3f4f6cc;border-radius:.25rem;border:1px solid rgba(229,231,235,.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:.5rem 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:3px 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}}.dark-mode .active-menu-item{background-color:#1e293b80;box-shadow:0 2px 5px #0f172a33}.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,#60a5fa,#3b82f6);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:#ffffffb3;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:#f3f4f6;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 rgba(243,244,246,.8);padding:.75rem;transition:all .3s ease}.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,#fff0,#fff3,#fff0);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:#f3f4f680}.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:rgba(209,213,219,.5) 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}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,rgba(255,255,255,.9),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,rgba(255,255,255,.9),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:#d1d5db80;border-radius:20px}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.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}.dark-mode{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:#1e293b;color:var(--cide-theme-light-color)}.dark-mode .cide-lyt-stack{background-color:#0f172a;border-right-color:#1e293b}.dark-mode .cide-lyt-stack:before,.dark-mode .cide-lyt-stack:after,.dark-mode .sidebar-content:before,.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,rgba(15,23,42,.9),transparent)}.dark-mode .sidebar-content:after,.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,rgba(15,23,42,.9),transparent)}.dark-mode .cide-lyt-sidebar-menu{background-color:#0f172a;border-left-color:#1e293b}.dark-mode .sidebar-header,.dark-mode .sidebar-footer{background-color:#0f172af2;border-color:#1e293b}.dark-mode .tw-text-gray-700{color:#e2e8f0}.dark-mode .tw-text-gray-500{color:#94a3b8}.dark-mode .tw-bg-gray-50,.dark-mode .menu-item:hover{background-color:#1e293b80}.dark-mode .tw-bg-gray-100{background-color:#1e293b}.dark-mode .tw-bg-gray-200{background-color:#334155}.dark-mode .nav-item:hover:before{background-color:#60a5fa1a}.dark-mode .back-button:hover{background-color:#1e293bb3}.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,#33415500,#33415580,#33415500)}.dark-mode .toggle-track:after{background:#00000080}.dark-mode .alert-box:before{opacity:.2}.dark-mode :host ::ng-deep .cide-input-field{background-color:#1e293b;color:#e2e8f0}.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:#475569;background-color:#0f172a}.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}.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 .5rem}.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}.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}.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)}.dark-mode .nav-item:hover{background-color:#33415580;box-shadow:0 2px 8px #0f172a4d}.dark-mode .nav-tooltip{background-color:#0f172ae6;box-shadow:0 3px 10px #0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.dark-mode .nav-tooltip:before{border-color:transparent rgba(15,23,42,.9) 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)}.dark-mode .nav-item:hover{background-color:#ffffff1a}.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 30%,var(--cide-theme-dark-color))}.dark-mode .user-avatar{border-color:var(--cide-theme-dark-color);background-color:#ffffff1a}.dark-mode .user-status{border-color:var(--cide-theme-dark-color)}.dark-mode .user-menu{background-color:var(--cide-theme-dark-color);border-color:#ffffff1a}.dark-mode .user-menu a{color:#fffc}.dark-mode .user-menu a:hover{background-color:#ffffff1a}.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,
@@ -1888,9 +1882,9 @@ class CideLytSidebarWrapperComponent {
                 transition('in => out', animate('200ms ease-in')),
                 transition('out => in', animate('200ms ease-out'))
             ])
-        ] }); }
+        ] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-sidebar-wrapper', standalone: true, imports: [CideIconComponent, CideInputComponent, CommonModule, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent], animations: [
                         trigger('slideInOut', [
@@ -1918,9 +1912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  * to persist component state, especially for tabbed navigation.
  */
 class CustomRouteReuseStrategy {
-    constructor() {
-        this.storedRoutes = {};
-    }
+    storedRoutes = {};
     // Generates a unique key for a route.
     // For routes marked with 'reuseTab', this key includes sorted query parameters
     // to ensure distinct states for tabs differing by query params.
@@ -1983,6 +1975,20 @@ const createDefaultComponentState = () => ({
     console: { history: [] },
 });
 class TabStateService {
+    // Holds the state for all open tabs, keyed by tab ID.
+    _tabsState = new BehaviorSubject(new Map());
+    // Holds the ID of the currently active tab.
+    _activeTabId = new BehaviorSubject(null);
+    /** An observable of all open tabs. */
+    tabs$ = this._tabsState.pipe(map(tabsMap => Array.from(tabsMap.values())));
+    /** An observable of the currently active tab's ID. */
+    activeTabId$ = this._activeTabId.asObservable().pipe(distinctUntilChanged());
+    /** An observable of the state of the currently active tab. */
+    activeTabState$ = this.activeTabId$.pipe(map(activeId => (activeId ? this._tabsState.getValue().get(activeId) ?? null : null)), 
+    // Use a deep-ish comparison to prevent emissions when only the object reference changes
+    distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
+    /** An observable of just the component-specific state for the active tab. */
+    activeComponentState$ = this.activeTabState$.pipe(map(activeTab => activeTab?.componentState ?? null));
     /**
      * Adds a new tab to the state.
      * @param title The title for the new tab.
@@ -2016,20 +2022,6 @@ class TabStateService {
         this._tabsState.next(newTabs);
     }
     constructor() {
-        // Holds the state for all open tabs, keyed by tab ID.
-        this._tabsState = new BehaviorSubject(new Map());
-        // Holds the ID of the currently active tab.
-        this._activeTabId = new BehaviorSubject(null);
-        /** An observable of all open tabs. */
-        this.tabs$ = this._tabsState.pipe(map(tabsMap => Array.from(tabsMap.values())));
-        /** An observable of the currently active tab's ID. */
-        this.activeTabId$ = this._activeTabId.asObservable().pipe(distinctUntilChanged());
-        /** An observable of the state of the currently active tab. */
-        this.activeTabState$ = this.activeTabId$.pipe(map(activeId => (activeId ? this._tabsState.getValue().get(activeId) ?? null : null)), 
-        // Use a deep-ish comparison to prevent emissions when only the object reference changes
-        distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)));
-        /** An observable of just the component-specific state for the active tab. */
-        this.activeComponentState$ = this.activeTabState$.pipe(map(activeTab => activeTab?.componentState ?? null));
         // You can initialize with default tabs if needed
         // For example:
         // this.addTab('Welcome Tab');
@@ -2087,10 +2079,10 @@ class TabStateService {
         const nextIndex = removedIndex === tabIds.length - 1 ? removedIndex - 1 : removedIndex + 1;
         return tabIds[nextIndex];
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabStateService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabStateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabStateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabStateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabStateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -2098,21 +2090,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }], ctorParameters: () => [] });
 
 class CideLytRequestService {
+    requestVisible = false;
+    // Modern Angular v20+ pattern: Use Signals instead of BehaviorSubject
+    tabsSignal = signal([], ...(ngDevMode ? [{ debugName: "tabsSignal" }] : []));
+    activeTabIdSignal = signal(null, ...(ngDevMode ? [{ debugName: "activeTabIdSignal" }] : []));
+    // Computed signals for derived state and public readonly access
+    tabs = computed(() => this.tabsSignal(), ...(ngDevMode ? [{ debugName: "tabs" }] : []));
+    activeTabId = computed(() => this.activeTabIdSignal(), ...(ngDevMode ? [{ debugName: "activeTabId" }] : []));
+    activeTab = computed(() => this.tabsSignal().find(tab => tab.active), ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    // Use inject() for all dependencies
+    router = inject(Router);
+    routeReuseStrategy = inject(RouteReuseStrategy);
+    tabStateService = inject(TabStateService);
+    sidedrawerService = inject(CideLytSidedrawerService);
+    sharedService = inject(CideLytSharedService);
     constructor() {
-        this.requestVisible = false;
-        // Modern Angular v20+ pattern: Use Signals instead of BehaviorSubject
-        this.tabsSignal = signal([]);
-        this.activeTabIdSignal = signal(null);
-        // Computed signals for derived state and public readonly access
-        this.tabs = computed(() => this.tabsSignal());
-        this.activeTabId = computed(() => this.activeTabIdSignal());
-        this.activeTab = computed(() => this.tabsSignal().find(tab => tab.active));
-        // Use inject() for all dependencies
-        this.router = inject(Router);
-        this.routeReuseStrategy = inject(RouteReuseStrategy);
-        this.tabStateService = inject(TabStateService);
-        this.sidedrawerService = inject(CideLytSidedrawerService);
-        this.sharedService = inject(CideLytSharedService);
         // Initialize router
         this.router = inject(Router);
         this.router.routeReuseStrategy = new CustomRouteReuseStrategy();
@@ -2315,10 +2307,10 @@ class CideLytRequestService {
             this.tabsSignal.set([...currentTabs]);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2337,9 +2329,13 @@ function isNotesComponentState(state) {
         'scrollTop' in state;
 }
 class CideLytSidedrawerWrapperComponent {
+    sidedrawerSetupData = {
+        cide_lyt_sidedrawer_width: 0
+    };
     // Modern Angular v20 pattern: Use Signals directly
     get drawerItems() { return this.sidedrawerService.drawerItems; }
     get notesVisible() { return this.sidedrawerService.notesVisible; }
+    isExpanded = false; // New property to track expansion state
     // Computed signal to determine if sidedrawer should be visible
     get shouldShowSidedrawer() {
         return computed(() => {
@@ -2347,18 +2343,15 @@ class CideLytSidedrawerWrapperComponent {
             return items && items.length > 0;
         });
     }
+    notesContainer;
+    currentComponentRef = null;
+    componentMap = {}; // Map configFor to component
+    currentTabId = null;
+    currentActiveComponent = null;
+    sidedrawerService = inject(CideLytSidedrawerService);
+    requestService = inject(CideLytRequestService);
+    tabStateService = inject(TabStateService);
     constructor() {
-        this.sidedrawerSetupData = {
-            cide_lyt_sidedrawer_width: 0
-        };
-        this.isExpanded = false; // New property to track expansion state
-        this.currentComponentRef = null;
-        this.componentMap = {}; // Map configFor to component
-        this.currentTabId = null;
-        this.currentActiveComponent = null;
-        this.sidedrawerService = inject(CideLytSidedrawerService);
-        this.requestService = inject(CideLytRequestService);
-        this.tabStateService = inject(TabStateService);
         // Modern Angular v20 pattern: Use Signals directly with effect
         effect(() => {
             const configFor = this.sidedrawerService.activeComponent();
@@ -2407,8 +2400,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-BWx03JYS.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-BSUFE_o2.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-BmadMzdl.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-Bn5--C_Q.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -2553,10 +2546,10 @@ class CideLytSidedrawerWrapperComponent {
             this.saveSidedrawerState(item.configFor);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);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: var(--cide-theme-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}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.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}}.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)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytSidedrawerWrapperComponent, isStandalone: true, selector: "cide-lyt-sidedrawer-wrapper", viewQueries: [{ propertyName: "notesContainer", first: true, predicate: ["notesContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<nav *ngIf=\"shouldShowSidedrawer()\" \r\n  [ngClass]=\"{'expanded tw-min-w-[var(--cide-lyt-sidedrawer-wrapper-width-expanded-min)]': isExpanded, 'tw-w-[var(--cide-lyt-sidedrawer-wrapper-width)]': !isExpanded}\"\r\n  id=\"cide-lyt-sidedrawer-wrapper\" class=\"tw-flex tw-relative tw-flex-col tw-items-center tw-justify-between tw-h-full tw-bg-white tw-shadow-lg tw-border-l tw-border-gray-200\">\r\n    <!-- Resizer Divider -->\r\n    <div parentElementSelector=\"#cide-lyt-outlet-sidedrawer-wrapper\"\r\n        [minNextSize]=\"sidedrawerSetupData.cide_lyt_sidedrawer_width\" prevElementSelector=\"#cide-lyt-outlet-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-sidedrawer-wrapper\" cideEleResizer direction=\"horizontal\" to=\"right-to-left\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <!-- Main Icon Area -->\r\n    <div class=\"tw-flex tw-justify-between tw-h-full tw-w-full\">\r\n        <div class=\"tw-w-8 tw-h-full tw-border-r tw-border-gray-200\">\r\n            <div class=\"sidedrawer-icon tw-flex tw-flex-col tw-items-center tw-gap-2\">\r\n                <ng-container *ngIf=\"drawerItems() as items; else loading\">\r\n                    <div *ngFor=\"let item of items\" [title]=\"item.title\">\r\n                        <button (click)=\"onItemClick(item)\"\r\n                            class=\"tw-p-0 tw-rounded-md hover:tw-bg-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500\"\r\n                            [ngClass]=\"{'tw-bg-blue-100 tw-text-blue-700': sidedrawerService.activeComponent() === item.configFor}\">\r\n                            <cide-ele-icon [cideEleTooltip]=\"item.title\" tooltipPlacement=\"left\" width=\"1.3rem\" height=\"1.5rem\" type=\"box\">{{item.icon}}</cide-ele-icon>\r\n                        </button>\r\n                    </div>\r\n                </ng-container>\r\n                <ng-template #loading>\r\n                    <cide-ele-skeleton-loader [width]=\"'2rem'\" [height]=\"'2rem'\" [count]=\"3\"\r\n                        [circle]=\"true\"></cide-ele-skeleton-loader>\r\n                </ng-template>\r\n            </div>\r\n        </div>\r\n        <div class=\"tw-flex-1 cide-lyt-sidedrawer-wrapper-child-holder\">\r\n            <div #notesContainer class=\"tw-h-full\">\r\n            </div>\r\n        </div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px var(--sidebar-shadow-color);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: var(--cide-theme-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}cide-ele-icon{color:var(--cide-theme-icon-color, var(--tw-gray-500));transition:all .2s ease}cide-ele-icon:hover{color:var(--cide-theme-icon-hover-color, var(--tw-gray-700));transform:scale(1.1)}.dark-mode .cide-lyt-sidebar{background-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track{background-color:color-mix(in srgb,var(--cide-theme-dark-color) 70%,var(--cide-theme-black, #000));border-left-color:var(--cide-theme-dark-color)}.dark-mode .cide-lyt-devider-track:hover{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 20%,var(--cide-theme-dark-color))}.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}}.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)}.sidedrawer-icon{margin:.25rem 0}.cide-lyt-sidedrawer-wrapper-child-holder{display:grid;height:100%;width:100%;overflow:auto}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "component", type: CideEleSkeletonLoaderComponent, selector: "cide-ele-skeleton-loader", inputs: ["width", "height", "borderRadius", "count", "circle", "animation"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-sidedrawer-wrapper', standalone: true, imports: [
                         NgClass,
@@ -2573,37 +2566,36 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
             }] } });
 
 class CideLytFooterWrapperComponent {
+    footerSetupData = {
+        cide_lyt_footer_height: 0
+    };
     constructor() {
-        this.footerSetupData = {
-            cide_lyt_footer_height: 0
-        };
         // collecte the width of the sidebar by using the style property
         const cide_lyt_sidedrawer_wrapper_width = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--cide-lyt-sidedrawer-wrapper-width'));
         this.footerSetupData.cide_lyt_footer_height = (cide_lyt_sidedrawer_wrapper_width);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 class CideLytConsoleWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: [""] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytConsoleWrapperComponent, isStandalone: true, selector: "cide-lyt-console-wrapper", ngImport: i0, template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->", styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytConsoleWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-console-wrapper', standalone: true, imports: [], template: "<div id=\"cide-lyt-console-wrapper\" class=\"cide-lyt-console tw-w-full tw-absolute tw-items-center tw-bg-gray-50 tw-h-0 tw-border-b-gray-200 tw-border-solid tw-border-t tw-select-none tw-z-[100] tw-bottom-0 tw-px-3\">\r\n\r\n</div>\r\n<!-- h-6 -->" }]
         }] });
 
 class CideLytRequestWrapperComponent {
-    constructor(requestService) {
-        this.requestService = requestService;
-        // Modern Signal-based access for better performance
-        this.requestItems = this.requestService.tabs;
-    }
+    requestService = inject(CideLytRequestService);
+    requestItemElements;
+    // Modern Signal-based access for better performance
+    requestItems = this.requestService.tabs;
     ngAfterViewInit() {
         // Apply entrance animation to initial items
         this.applyAnimations();
@@ -2641,25 +2633,29 @@ class CideLytRequestWrapperComponent {
             }, 400); // Match the animation duration
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestWrapperComponent, deps: [{ token: CideLytRequestService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\n    <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\n        <div class=\"request-content tw-flex tw-items-center tw-overflow-x-auto\">\n            <ng-container *ngFor=\"let item of requestItems; let i = index\">\n                <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [attr.data-tooltip]=\"item.title\">\n                    <span class=\"request-title\">{{ item.title }}</span>\n                    <button class=\"request-action close-action\" \n                        (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\n                        (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \n                        tabindex=\"0\"\n                        data-tooltip=\"Close this tab\">\n                        <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n                <!-- Only add divider between items -->\n                <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4)}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 640px){.request-title{max-width:80px}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytRequestWrapperComponent, isStandalone: true, selector: "cide-lyt-request-wrapper", viewQueries: [{ propertyName: "requestItemElements", predicate: ["requestItemEl"], descendants: true }], ngImport: i0, template: "<ng-container *ngIf=\"requestItems() as requestItems\">\n    <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\n        <div class=\"request-content tw-flex tw-items-center tw-overflow-x-auto\">\n            <ng-container *ngFor=\"let item of requestItems; let i = index\">\n                <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [attr.data-tooltip]=\"item.title\">\n                    <span class=\"request-title\">{{ item.title }}</span>\n                    <button class=\"request-action close-action\" \n                        (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\n                        (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \n                        tabindex=\"0\"\n                        data-tooltip=\"Close this tab\">\n                        <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n                <!-- Only add divider between items -->\n                <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4)}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 640px){.request-title{max-width:80px}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytRequestWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-request-wrapper', standalone: true, imports: [CommonModule, CideIconComponent], template: "<ng-container *ngIf=\"requestItems() as requestItems\">\n    <div id=\"cide-lyt-request-wrapper\" class=\"cide-lyt-request tw-w-[inherit]\" [class.cide-lyt-request-wrapper-hide]=\"!requestItems.length\">\n        <div class=\"request-content tw-flex tw-items-center tw-overflow-x-auto\">\n            <ng-container *ngFor=\"let item of requestItems; let i = index\">\n                <div #requestItemEl class=\"request-item\" (keydown.enter)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [class.active]=\"item.active\" tabindex=\"0\" (click)=\"requestService.activateTab(item.id); applyFlickerEffect($event)\"\n                    [attr.data-tooltip]=\"item.title\">\n                    <span class=\"request-title\">{{ item.title }}</span>\n                    <button class=\"request-action close-action\" \n                        (click)=\"requestService.closeTab(item.id); $event.stopPropagation();\"\n                        (keydown.enter)=\"requestService.closeTab(item.id); $event.stopPropagation();\" \n                        tabindex=\"0\"\n                        data-tooltip=\"Close this tab\">\n                        <cide-ele-icon size=\"3xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n                <!-- Only add divider between items -->\n                <div class=\"request-divider\" *ngIf=\"i < requestItems.length - 1\"></div>\n            </ng-container>\n        </div>\n    </div>\n</ng-container>", styles: [".cide-lyt-request{height:20px;background:linear-gradient(to right,#fff,#f9fafbf2);border-bottom:1px solid rgba(229,231,235,.8);box-shadow:0 2px 6px #0000000d,0 1px 1px #00000008;display:flex;align-items:center;padding:0 .5rem;position:relative;z-index:15;transition:all .2s cubic-bezier(.4,0,.2,1);will-change:transform;-webkit-user-select:none;user-select:none;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}.request-content{display:flex;align-items:center;height:100%;width:100%;position:relative;overflow:hidden}.request-item{position:relative;padding:8px 12px;margin:0 4px;border-radius:.375rem;display:flex;align-items:center;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);overflow:hidden;background-color:#fff9;box-shadow:0 1px 2px #00000005;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(229,231,235,.4)}.request-item:hover{background-color:#ffffffe6;transform:translateY(-1px);box-shadow:0 2px 5px #0000000d;border-color:#d1d5db99}.request-item:active{transform:translateY(0);box-shadow:0 1px 2px #00000008}.request-item.active{background:#eff6ffcc;border-color:#3b82f64d;box-shadow:0 2px 6px #3b82f61a,0 0 0 1px #3b82f626;position:relative}@keyframes shimmerGradient{0%{background-position:100% 50%}to{background-position:0% 50%}}.request-title{font-size:.875rem;color:#374151;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s ease}.request-item.active .request-title{color:#2563eb;font-weight:500;text-shadow:0 0 1px rgba(37,99,235,.1)}.request-action,.request-add-action{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background-color:transparent;transition:all .2s ease}.request-action:hover,.request-add-action:hover{background-color:#f3f4f6cc;transform:scale(1.1)}.request-action:active,.request-add-action:active{transform:scale(.95)}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#0f172a,#0f172af2);border-bottom-color:#1e293be6;box-shadow:0 2px 6px #00000026,0 1px 1px #0000001a}:host-context(.dark-mode) .request-item{background-color:#1e293b99;border-color:#33415566;box-shadow:0 1px 2px #0000001a}:host-context(.dark-mode) .request-item:hover{background-color:#1e293bcc;border-color:#47556999;box-shadow:0 2px 5px #00000026}:host-context(.dark-mode) .request-title{color:#e2e8f0}:host-context(.dark-mode) .request-item:hover .request-title{color:#f8fafc}:host-context(.dark-mode) .request-item.active{background:#1e3a8a4d;border-color:#3b82f666;box-shadow:0 2px 6px #1e40af40,0 0 0 1px #3b82f633}:host-context(.dark-mode) .request-item.active .request-title{color:#60a5fa;text-shadow:0 0 2px rgba(96,165,250,.2)}:host-context(.dark-mode) .request-action:hover,:host-context(.dark-mode) .request-add-action:hover{background-color:#334155cc}.request-item:hover{transform:translateY(-.5px);box-shadow:0 1px 3px #00000008}.request-item:hover:before{opacity:1}.request-item.active{background:linear-gradient(to right,#eff6ffcc,#dbeafe99);box-shadow:0 1px 3px #3b82f626;transform:translateZ(0)}@keyframes glowEffect{0%{opacity:.6;box-shadow:0 1px 2px #3b82f61a}50%{opacity:1;box-shadow:0 1px 3px #3b82f64d}to{opacity:.6;box-shadow:0 1px 2px #3b82f61a}}.request-title{font-size:.7rem;color:#374151;margin-right:.5rem;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;letter-spacing:.01em;transition:all .2s ease;position:relative}.request-item.active .request-title{color:#1e40af;font-weight:600;text-shadow:0 0 .5px rgba(37,99,235,.3);letter-spacing:.015em}.request-action{display:flex;align-items:center;justify-content:center;height:14px;width:14px;border-radius:3px;transition:all .2s ease;cursor:pointer;color:#9ca3af;border:none;background:transparent;padding:0;outline:none;position:relative;overflow:hidden;transform:translateZ(0)}.request-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 2px #0000000d}.request-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.close-action:hover{background-color:#ef444414;color:#ef4444}.close-action:focus-visible{outline-color:#ef4444;box-shadow:0 0 0 2px #ef44441a}.request-divider{width:1px;height:18px;background:linear-gradient(to bottom,#d1d5db1a,#d1d5db80,#d1d5db1a);margin:0 4px}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4755691a,#47556980,#4755691a)}.request-divider:before{content:\"\";position:absolute;top:0;bottom:0;left:-1px;width:3px;background:radial-gradient(ellipse at center,#ffffff80,#fff0 70%);opacity:0;transition:opacity .3s ease}.request-content:hover .request-divider:before{opacity:.7}.request-add-action{display:flex;align-items:center;justify-content:center;height:16px;width:16px;border-radius:3px;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#6b7280;background-color:transparent;border:none;padding:0;outline:none;position:relative;overflow:hidden}.request-add-action:hover{background-color:#3b82f614;color:#3b82f6;transform:translateY(-.5px) scale(1.05);box-shadow:0 1px 3px #3b82f626}.request-add-action:active{transform:translateY(.5px) scale(.97);transition:all .1s ease}.request-add-action:focus-visible{outline:1px solid #3b82f6;outline-offset:1px;box-shadow:0 0 0 2px #3b82f61a}.request-add-action:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle,#3b82f64d,#3b82f600 70%);opacity:0;transform:scale(0);transition:transform .4s ease,opacity .3s ease}.request-add-action:active:after{opacity:1;transform:scale(3);transition:transform .1s ease,opacity .1s ease}@keyframes subtlePulse{0%{box-shadow:0 0 #3b82f600;transform:scale(1)}50%{box-shadow:0 0 0 3px #3b82f626;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}.request-add-action-pulse{animation:subtlePulse 2s cubic-bezier(.4,0,.6,1) infinite}:host-context(.dark-mode) .cide-lyt-request{background:linear-gradient(to right,#111827f2,#1f2937e6);border-bottom:1px solid rgba(55,65,81,.5)}:host-context(.dark-mode) .request-title{color:#e5e7eb}:host-context(.dark-mode) .request-item.active{background:linear-gradient(to right,#1e3a8a26,#2563eb1a)}:host-context(.dark-mode) .request-item.active .request-title{color:#93c5fd}:host-context(.dark-mode) .request-action,:host-context(.dark-mode) .request-add-action{color:#9ca3af}:host-context(.dark-mode) .request-divider{background:linear-gradient(to bottom,#4b55634d,#6b728080,#4b55634d)}@keyframes slideIn{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}@keyframes slideOut{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(-5px)}}@keyframes flickerEffect{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #3b82f64d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #3b82f666}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #3b82f633}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #00000005}}@keyframes flickerEffectDark{0%{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}25%{opacity:.7;transform:scale(.98);box-shadow:0 2px 8px #60a5fa4d}50%{opacity:.9;transform:scale(1.02);box-shadow:0 4px 12px #60a5fa66}75%{opacity:.8;transform:scale(.99);box-shadow:0 2px 6px #60a5fa33}to{opacity:1;transform:scale(1);box-shadow:0 1px 2px #0000001a}}.request-item-enter{animation:slideIn .2s cubic-bezier(.4,0,.2,1)}.request-item-exit{animation:slideOut .2s cubic-bezier(.4,0,.2,1)}.request-item-flicker{animation:flickerEffect .4s cubic-bezier(.4,0,.2,1)}:host-context(.dark-mode) .request-item-flicker{animation:flickerEffectDark .4s cubic-bezier(.4,0,.2,1)}@media (max-width: 640px){.request-title{max-width:80px}}.request-item:focus,.request-action:focus,.request-add-action:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:host-context(.dark-mode) .request-item:focus,:host-context(.dark-mode) .request-action:focus,:host-context(.dark-mode) .request-add-action:focus{box-shadow:0 0 0 2px #60a5fa66}.cide-lyt-request:hover{box-shadow:0 3px 8px #00000012,0 1px 2px #0000000d;transform:translateY(-1px)}.request-content:empty .request-add-action{animation:pulseAttention 2s infinite}@keyframes pulseAttention{0%{box-shadow:0 0 #3b82f666;transform:scale(1)}70%{box-shadow:0 0 0 8px #3b82f600;transform:scale(1.05)}to{box-shadow:0 0 #3b82f600;transform:scale(1)}}\n"] }]
-        }], ctorParameters: () => [{ type: CideLytRequestService }], propDecorators: { requestItemElements: [{
+        }], propDecorators: { requestItemElements: [{
                 type: ViewChildren,
                 args: ['requestItemEl']
             }] } });
 
 class TabContentComponent {
+    requestService;
+    router;
+    cdr;
+    scrollContainerRef;
+    currentActiveTabId = null;
+    isRestoringScroll = false; // Flag to prevent saving scroll during restoration attempts
     constructor(requestService, router, // Inject Router to listen for NavigationEnd
     cdr) {
         this.requestService = requestService;
         this.router = router;
         this.cdr = cdr;
-        this.currentActiveTabId = null;
-        this.isRestoringScroll = false; // Flag to prevent saving scroll during restoration attempts
         // Modern Angular signal pattern: Use effect to react to active tab changes
         effect(() => {
             const activeTab = this.requestService.activeTab();
@@ -2710,30 +2706,30 @@ class TabContentComponent {
             delay(150).then(() => { this.isRestoringScroll = false; }); // Allow scroll event to settle
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabContentComponent, deps: [{ token: CideLytRequestService }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: TabContentComponent, isStandalone: true, selector: "cide-lyt-tab-content", viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, deps: [{ token: CideLytRequestService }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: TabContentComponent, isStandalone: true, selector: "cide-lyt-tab-content", viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: `
     <div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
       <router-outlet></router-outlet>
     </div>
-  `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;overflow:auto;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] }); }
+  `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;overflow:auto;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabContentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-tab-content', standalone: true, imports: [CommonModule, RouterModule], template: `
     <div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
       <router-outlet></router-outlet>
     </div>
   `, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;overflow:auto;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"] }]
-        }], ctorParameters: () => [{ type: CideLytRequestService }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollContainerRef: [{
+        }], ctorParameters: () => [{ type: CideLytRequestService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollContainerRef: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }] } });
 
 class CideLytLayoutWrapperComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n               id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }] }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\"\r\n               id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-layout-wrapper', standalone: true, imports: [
                         CideLytHeaderWrapperComponent,
@@ -2748,12 +2744,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
         }] });
 
 class CloudIdeLayoutComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.7", type: CloudIdeLayoutComponent, isStandalone: true, selector: "cide-lyt-wrapper", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeLayoutComponent, isStandalone: true, selector: "cide-lyt-wrapper", ngImport: i0, template: `
     <cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: CideLytLayoutWrapperComponent, selector: "cide-lyt-layout-wrapper" }] }); }
+  `, isInline: true, styles: [""], dependencies: [{ kind: "component", type: CideLytLayoutWrapperComponent, selector: "cide-lyt-layout-wrapper" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-wrapper', standalone: true, template: `
     <cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
@@ -2777,7 +2773,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-Dr4MO4MB.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-Bo-4LNLx.mjs').then(c => c.CideLytHomeWrapperComponent),
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
             sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
@@ -2826,15 +2822,13 @@ function setCSSVariable(key, value, platformId) {
     }
 }
 class CideLytThemeService {
-    constructor() {
-        // Modern Angular signals for reactive state management
-        this.selectedThemeSignal = signal("");
-        this.selectedTheme = this.selectedThemeSignal.asReadonly();
-        // Modern dependency injection
-        this.http = inject(HttpClient);
-        this.platformId = inject(PLATFORM_ID);
-        this.environment = inject(ENVIRONMENT_CONFIG);
-    }
+    // Modern Angular signals for reactive state management
+    selectedThemeSignal = signal("", ...(ngDevMode ? [{ debugName: "selectedThemeSignal" }] : []));
+    selectedTheme = this.selectedThemeSignal.asReadonly();
+    // Modern dependency injection
+    http = inject(HttpClient);
+    platformId = inject(PLATFORM_ID);
+    environment = inject(ENVIRONMENT_CONFIG);
     /**
      * Fetches the theme from the API and applies it to the document.
      * This method is intended to be called when the theme should actually be applied.
@@ -2907,10 +2901,10 @@ class CideLytThemeService {
     updateCSSVariable(key, value) {
         setCSSVariable(key, value, this.platformId);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytThemeService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytThemeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytThemeService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytThemeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytThemeService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2938,21 +2932,19 @@ function themeFactory(themeService, environmentConfig) {
 }
 
 class CacheManagerService {
-    constructor() {
-        this.sharedService = inject(CideLytSharedService);
-        // Computed cache statistics
-        this.cacheStats = computed(() => {
-            const info = this.sharedService.cacheInfo();
-            return {
-                ...info,
-                hitRatio: info.totalCached > 0 ? (info.validCached / info.totalCached) * 100 : 0,
-                memoryEstimate: this.estimateCacheMemoryUsage()
-            };
-        });
-        // Public access to cache state
-        this.isLoading = (pageCode) => this.sharedService.isLoading(pageCode);
-        this.getCachedData = (pageCode) => this.sharedService.getCachedPageData(pageCode);
-    }
+    sharedService = inject(CideLytSharedService);
+    // Computed cache statistics
+    cacheStats = computed(() => {
+        const info = this.sharedService.cacheInfo();
+        return {
+            ...info,
+            hitRatio: info.totalCached > 0 ? (info.validCached / info.totalCached) * 100 : 0,
+            memoryEstimate: this.estimateCacheMemoryUsage()
+        };
+    }, ...(ngDevMode ? [{ debugName: "cacheStats" }] : []));
+    // Public access to cache state
+    isLoading = (pageCode) => this.sharedService.isLoading(pageCode);
+    getCachedData = (pageCode) => this.sharedService.getCachedPageData(pageCode);
     /**
      * Get page data with caching - this is the main method components should use
      */
@@ -3036,10 +3028,10 @@ class CacheManagerService {
             // averageResponseTime could be implemented with timing tracking
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CacheManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CacheManagerService, providedIn: 'root' }); }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CacheManagerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CacheManagerService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CacheManagerService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CacheManagerService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3055,4 +3047,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImpor
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, CloudIdeLayoutService as e, CloudIdeLayoutComponent as f, CideLytSharedService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, AppStateService as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, processThemeVariable as p, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-D3xzVSNA.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DLceZY3Y.mjs.map