cloud-ide-layout 0.0.1 → 1.0.1

package/fesm2022/cloud-ide-layout-cloud-ide-layout-DqL3A73V.mjs

@@ -0,0 +1,2914 @@
+import * as i0 from '@angular/core';
+import { Injectable, inject, signal, computed, effect, Component, ElementRef, HostListener, ViewContainerRef, ViewChild, ViewChildren } from '@angular/core';
+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 { 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 { CommonModule, NgClass, NgFor, NgIf } from '@angular/common';
+import { trigger, state, style, transition, 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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CloudIdeLayoutService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytHeaderService {
+    constructor() {
+        this.headerVisible = false;
+    }
+    // Hide Header
+    hideHeader() {
+        this.headerVisible = false;
+        document.querySelector(`#cide-lyt-header-wrapper`)?.classList.add('cide-lyt-header-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-header-exist');
+    }
+    // Show Header
+    showHeader() {
+        this.headerVisible = true;
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytHeaderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytFileManagerService {
+    constructor() {
+        this.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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFileManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytSidebarService {
+    constructor() {
+        this.sidebarMenueVisible = false;
+        this.http = inject(HttpClient);
+    }
+    // method to get sidebar menues
+    getSidebarMenues(body) {
+        return this.http?.post(cidePath?.join([hostManagerRoutesUrl?.cideSuiteHost, coreRoutesUrl?.module, coreRoutesUrl?.getSidebarMenues]), body);
+    }
+    // Hide Sidebar
+    hideSidebar() {
+        this.sidebarMenueVisible = false;
+        document.querySelector(`#cide-lyt-sidebar-page`)?.classList.add('cide-lyt-sidebar-page-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-sidebar-exist');
+    }
+    // Show Sidebar
+    showSidebar() {
+        this.sidebarMenueVisible = true;
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidebarService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytFooterService {
+    constructor() {
+        this.footerVisible = false;
+    }
+    // Hide Footer
+    hideFooter() {
+        this.footerVisible = false;
+        document.querySelector(`#cide-lyt-footer-console-wrapper`)?.classList.add('cide-lyt-footer-console-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-footer-exist');
+    }
+    // Show Footer
+    showFooter() {
+        this.footerVisible = true;
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytFooterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytConsoleService {
+    constructor() {
+        this.headerVisible = false;
+    }
+    // Hide Console
+    hideConsole() {
+        this.headerVisible = false;
+        document.querySelector(`#cide-lyt-console-wrapper`)?.classList.add('cide-lyt-console-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-console-exist');
+    }
+    // Show Console
+    showConsole() {
+        this.headerVisible = true;
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytConsoleService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+    }
+    setContext(pageId, themeId) {
+        this._pageId = pageId;
+        this._themeId = themeId;
+    }
+    get pageId() {
+        return this._pageId;
+    }
+    get themeId() {
+        return this._themeId;
+    }
+    // Hide Sidedrawer
+    hideSidedrawer() {
+        this.sidedrawerVisible = false;
+        document.querySelector(`#cide-lyt-sidedrawer-wrapper`)?.classList.add('cide-lyt-sidedrawer-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-sidedrawer-exist');
+    }
+    // Show Sidedrawer  
+    showSidedrawer() {
+        this.sidedrawerVisible = true;
+        document.querySelector(`#cide-lyt-sidedrawer-wrapper`)?.classList.remove('cide-lyt-sidedrawer-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-sidedrawer-exist');
+    }
+    // Method to update drawer items from layout data
+    updateDrawerItems(layout) {
+        if (layout?.sytm_layout_drawer && layout.sytm_layout_drawer.length > 0) {
+            const items = layout.sytm_layout_drawer
+                .filter((item) => item.syth_status && item?.core_system_config?.syco_isactive) // Only show active items
+                .map(item => ({
+                status: item.syth_status,
+                configFor: item.syth_config_syco_for,
+                title: item.core_system_config?.syco_title,
+                icon: item.core_system_config?.syco_configuration.syco_icon,
+                description: item.core_system_config?.syco_desc || "",
+                isActive: item.core_system_config?.syco_isactive || false
+            }));
+            this.drawerItemsSignal.set(items);
+        }
+        else {
+            this.drawerItemsSignal.set([]); // Clear items if no drawer data
+        }
+    }
+    // Set the active component to display in the side drawer
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AppStateService {
+    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
+        effect(() => {
+            const currentUser = this.currentUserSignal();
+            const activeModule = this.activeModuleSignal();
+            const activeEntity = this.activeEntitySignal();
+            this.saveToLocalStorage({
+                user: currentUser,
+                activeModule: activeModule,
+                activeEntity: activeEntity
+            });
+        });
+        // Listen for localStorage changes from other tabs/windows
+        this.setupStorageListener();
+    }
+    /**
+     * Set the current user
+     */
+    setUser(user) {
+        this.currentUserSignal.set(user);
+    }
+    /**
+     * Update user data (partial update)
+     */
+    updateUser(updates) {
+        const currentUser = this.currentUserSignal();
+        if (currentUser) {
+            this.currentUserSignal.set({ ...currentUser, ...updates });
+        }
+    }
+    /**
+     * Clear user data
+     */
+    clearUser() {
+        this.currentUserSignal.set(null);
+    }
+    /**
+     * Get current user value (non-reactive)
+     */
+    getUserValue() {
+        return this.currentUserSignal();
+    }
+    /**
+     * Set the active module
+     */
+    setActiveModule(module) {
+        this.activeModuleSignal.set(module);
+    }
+    /**
+     * Get active module value (non-reactive)
+     */
+    getActiveModuleValue() {
+        return this.activeModuleSignal();
+    }
+    /**
+     * Set the active entity
+     */
+    setActiveEntity(entity) {
+        this.activeEntitySignal.set(entity);
+    }
+    /**
+     * Get active entity value (non-reactive)
+     */
+    getActiveEntityValue() {
+        return this.activeEntitySignal();
+    }
+    /**
+     * Manually refresh state from localStorage
+     * Call this method when you need to sync with external localStorage changes
+     */
+    refreshFromLocalStorage() {
+        this.loadFromLocalStorage();
+    }
+    /**
+     * Check if localStorage is available (browser environment)
+     */
+    isLocalStorageAvailable() {
+        try {
+            return typeof window !== 'undefined' && typeof localStorage !== 'undefined';
+        }
+        catch {
+            return false;
+        }
+    }
+    /**
+     * Save state to localStorage
+     */
+    saveToLocalStorage(data) {
+        if (!this.isLocalStorageAvailable()) {
+            return;
+        }
+        try {
+            if (data.user !== undefined) {
+                if (data.user) {
+                    localStorage.setItem('cide_auth_user', JSON.stringify(data.user));
+                }
+                else {
+                    localStorage.removeItem('cide_auth_user');
+                }
+            }
+            if (data.activeModule !== undefined) {
+                if (data.activeModule) {
+                    localStorage.setItem('cide_active_module', JSON.stringify(data.activeModule));
+                }
+                else {
+                    localStorage.removeItem('cide_active_module');
+                }
+            }
+            if (data.activeEntity !== undefined) {
+                if (data.activeEntity) {
+                    localStorage.setItem('cide_active_entity', JSON.stringify(data.activeEntity));
+                }
+                else {
+                    localStorage.removeItem('cide_active_entity');
+                }
+            }
+        }
+        catch (error) {
+            console.error('Error saving to localStorage:', error);
+        }
+    }
+    /**
+     * Load state from localStorage
+     */
+    loadFromLocalStorage() {
+        if (!this.isLocalStorageAvailable()) {
+            return;
+        }
+        try {
+            const userData = localStorage.getItem('cide_auth_user');
+            if (userData) {
+                const user = JSON.parse(userData);
+                this.currentUserSignal.set(user);
+            }
+            const moduleData = localStorage.getItem('cide_active_module');
+            if (moduleData) {
+                const module = JSON.parse(moduleData);
+                this.activeModuleSignal.set(module);
+            }
+            const entityData = localStorage.getItem('cide_active_entity');
+            if (entityData) {
+                const entity = JSON.parse(entityData);
+                this.activeEntitySignal.set(entity);
+            }
+        }
+        catch (error) {
+            console.error('Error loading from localStorage:', error);
+            // Clear corrupted data
+            if (this.isLocalStorageAvailable()) {
+                localStorage.removeItem('cide_auth_user');
+                localStorage.removeItem('cide_active_module');
+                localStorage.removeItem('cide_active_entity');
+            }
+        }
+    }
+    /**
+     * Setup storage event listener to handle external localStorage changes
+     */
+    setupStorageListener() {
+        if (!this.isLocalStorageAvailable()) {
+            return;
+        }
+        // Listen for storage events (triggered when localStorage is modified from other tabs/windows)
+        window.addEventListener('storage', (event) => {
+            if (!event.key)
+                return;
+            try {
+                // Handle user data changes
+                if (event.key === 'cide_auth_user') {
+                    if (event.newValue) {
+                        const user = JSON.parse(event.newValue);
+                        this.currentUserSignal.set(user);
+                    }
+                    else {
+                        this.currentUserSignal.set(null);
+                    }
+                }
+                // Handle active module changes
+                if (event.key === 'cide_active_module') {
+                    if (event.newValue) {
+                        const module = JSON.parse(event.newValue);
+                        this.activeModuleSignal.set(module);
+                    }
+                    else {
+                        this.activeModuleSignal.set(null);
+                    }
+                }
+                // Handle active entity changes
+                if (event.key === 'cide_active_entity') {
+                    if (event.newValue) {
+                        const entity = JSON.parse(event.newValue);
+                        this.activeEntitySignal.set(entity);
+                    }
+                    else {
+                        this.activeEntitySignal.set(null);
+                    }
+                }
+            }
+            catch (error) {
+                console.error('Error parsing localStorage update:', error);
+            }
+        });
+    }
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], 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;
+    }
+    /**
+     * Get current user value (non-reactive)
+     */
+    getCurrentUser() {
+        return this.appStateService.getUserValue();
+    }
+    /**
+     * Set user data
+     */
+    setUser(user) {
+        this.appStateService.setUser(user);
+    }
+    /**
+     * Update user data (partial update)
+     */
+    updateUser(updates) {
+        this.appStateService.updateUser(updates);
+    }
+    /**
+     * Clear user data
+     */
+    clearUser() {
+        this.appStateService.clearUser();
+    }
+    /**
+     * Check if user is authenticated
+     */
+    isUserAuthenticated() {
+        return this.appStateService.isAuthenticated();
+    }
+    /**
+     * Get user info object
+     */
+    getUserInfo() {
+        return this.appStateService.userInfo();
+    }
+    /**
+     * Get user ID
+     */
+    getUserId() {
+        const user = this.getCurrentUser();
+        return user?._id || null;
+    }
+    /**
+     * Get user name
+     */
+    getUserName() {
+        const userInfo = this.getUserInfo();
+        return userInfo?.name || null;
+    }
+    /**
+     * Get user email
+     */
+    getUserEmail() {
+        const userInfo = this.getUserInfo();
+        return userInfo?.email || null;
+    }
+    /**
+     * Get user username
+     */
+    getUserUsername() {
+        const user = this.getCurrentUser();
+        return user?.user_username || null;
+    }
+    /**
+     * Get user full name
+     */
+    getUserFullName() {
+        const user = this.getCurrentUser();
+        return user?.user_fullname || null;
+    }
+    /**
+     * Get user first name
+     */
+    getUserFirstName() {
+        const user = this.getCurrentUser();
+        return user?.user_firstname || null;
+    }
+    /**
+     * Get user last name
+     */
+    getUserLastName() {
+        const user = this.getCurrentUser();
+        return user?.user_lastname || null;
+    }
+    /**
+     * Get user mobile number
+     */
+    getUserMobile() {
+        const user = this.getCurrentUser();
+        return user?.user_mobileno || null;
+    }
+    /**
+     * Set the active module
+     */
+    setActiveModule(module) {
+        this.appStateService.setActiveModule(module);
+    }
+    /**
+     * Get active module value (non-reactive)
+     */
+    getActiveModule() {
+        return this.appStateService.getActiveModuleValue();
+    }
+    /**
+     * Get active module info
+     */
+    getActiveModuleInfo() {
+        return this.appStateService.activeModuleInfo();
+    }
+    /**
+     * Get active module ID
+     */
+    getActiveModuleId() {
+        const module = this.getActiveModule();
+        return module?._id || null;
+    }
+    /**
+     * Get active module title
+     */
+    getActiveModuleTitle() {
+        const moduleInfo = this.getActiveModuleInfo();
+        return moduleInfo?.title || null;
+    }
+    /**
+     * Get active module icon
+     */
+    getActiveModuleIcon() {
+        const moduleInfo = this.getActiveModuleInfo();
+        return moduleInfo?.icon || null;
+    }
+    /**
+     * Set a module as active by its ID
+     * This replaces the previous isModuleActive method to use setActiveModule instead of getActiveModuleId
+     */
+    setActiveModuleById(moduleId) {
+        return this.sidebarService.getSidebarMenues({ syme_type: "module", sort: 'asc', syme_title: "" }).pipe(map(response => {
+            const modules = response?.data || [];
+            const targetModule = modules.find(module => module._id === moduleId);
+            if (targetModule) {
+                this.setActiveModule(targetModule);
+                return true;
+            }
+            else {
+                console.warn(`Module with ID "${moduleId}" not found`);
+                return false;
+            }
+        }));
+    }
+    /**
+     * Check if a module is active (keeping the original functionality for backward compatibility)
+     */
+    isModuleActive(moduleId) {
+        const activeModuleId = this.getActiveModuleId();
+        return activeModuleId === moduleId;
+    }
+    /**
+     * Set the active entity
+     */
+    setActiveEntity(entity) {
+        this.appStateService.setActiveEntity(entity);
+    }
+    /**
+     * Get active entity value (non-reactive)
+     */
+    getActiveEntity() {
+        return this.appStateService.getActiveEntityValue();
+    }
+    /**
+     * Get active entity ID
+     */
+    getActiveEntityId() {
+        const entity = this.getActiveEntity();
+        return entity?._id || '';
+    }
+    /**
+     * Get active entity name
+     */
+    getActiveEntityName() {
+        const entity = this.getActiveEntity();
+        return entity?.syen_name || null;
+    }
+    /**
+     * Get active entity code
+     */
+    getActiveEntityCode() {
+        const entity = this.getActiveEntity();
+        return entity?.syen_entity_code || null;
+    }
+    /**
+     * Manually refresh state from localStorage
+     */
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: AppStateHelperService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytSharedService {
+    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
+            this.pageDataSubscription?.unsubscribe();
+            this.handleRouteChange();
+        });
+    }
+    /**
+     * Register tab management callback from request service
+     * This allows shared service to call request service without circular dependency
+     */
+    registerTabManagement(callback) {
+        this.tabManagementCallback = callback;
+        console.log('✅ Tab management callback registered');
+    }
+    /**
+     * Register request visibility callback from request service
+     * This allows shared service to control request wrapper visibility
+     */
+    registerRequestVisibility(callback) {
+        this.requestVisibilityCallback = callback;
+        console.log('✅ Request visibility callback registered');
+    }
+    /**
+     * Enhanced loadPageData with caching and deduplication
+     * @param body - Request payload
+     * @param forceRefresh - Force API call even if cached data exists
+     * @param customTTL - Custom cache TTL in milliseconds
+     */
+    loadPageData(body, forceRefresh = false, customTTL = this.DEFAULT_CACHE_TTL) {
+        const pageCode = body.sypg_page_code?.toString() || '';
+        if (!pageCode) {
+            return throwError(() => new Error('Page code is required'));
+        }
+        // Check if we have valid cached data and not forcing refresh
+        if (!forceRefresh && this.hasValidCache(pageCode)) {
+            console.log(`🔄 CACHE HIT: Using cached data for page code: ${pageCode}`);
+            const cachedData = this.pageDataCacheSignal()[pageCode];
+            return of(cachedData.response);
+        }
+        // Check if there's already an in-flight request for this page code
+        if (this.inflightRequests[pageCode]) {
+            console.log(`🔄 INFLIGHT REQUEST: Returning existing request for page code: ${pageCode}`);
+            return this.inflightRequests[pageCode];
+        }
+        // Set loading state
+        this.setLoadingState(pageCode, true);
+        console.log(`🌐 API CALL: Loading fresh data for page code: ${pageCode}`);
+        // Create new API request
+        const request$ = this.http.post(cidePath.join([hostManagerRoutesUrl.cideSuiteHost, designConfigRoutesUrl?.module, designConfigRoutesUrl?.getPageData]), body);
+        // Cache the observable to prevent duplicate requests
+        this.inflightRequests[pageCode] = request$.pipe(tap(response => {
+            console.log(`✅ API SUCCESS: Caching data for page code: ${pageCode}`);
+            this.cachePageData(pageCode, body, response, customTTL);
+            this.setLoadingState(pageCode, false);
+        }), catchError(error => {
+            console.error(`❌ API ERROR: Failed to load data for page code: ${pageCode}`, error);
+            this.setLoadingState(pageCode, false);
+            return throwError(() => error);
+        }), shareReplay(1) // Share the result with multiple subscribers
+        );
+        // Clean up inflight request after completion
+        this.inflightRequests[pageCode].subscribe({
+            complete: () => {
+                delete this.inflightRequests[pageCode];
+            },
+            error: () => {
+                delete this.inflightRequests[pageCode];
+            }
+        });
+        return this.inflightRequests[pageCode];
+    }
+    /**
+     * Consolidated method to load and process page data
+     * This replaces the separate calls in request service and shared wrapper
+     */
+    loadAndProcessPageData(body, options = {}) {
+        const { forceRefresh = false, customTTL = this.DEFAULT_CACHE_TTL, setTitle = true, setSidebarContext = true, updateLayout = true } = options;
+        return this.loadPageData(body, forceRefresh, customTTL).pipe(tap(response => {
+            if (response) {
+                console.log('🔍 SHARED SERVICE: loadAndProcessPageData', response);
+                // Process the response
+                if (updateLayout) {
+                    this.setPageData(response, body);
+                }
+                // Set page title
+                if (setTitle && response.data?.page?.sypg_title) {
+                    this.titleService.setTitle(response.data.page.sypg_title);
+                }
+                // Set sidebar context
+                if (setSidebarContext) {
+                    // This will be handled by the component that needs the context
+                    // as it's specific to the sidedrawer service
+                }
+            }
+        }));
+    }
+    /**
+     * Get cached page data without making API call
+     */
+    getCachedPageData(pageCode) {
+        const cached = this.pageDataCacheSignal()[pageCode];
+        return this.isCacheValid(cached) ? cached.response : null;
+    }
+    /**
+     * Check if loading for a specific page code
+     */
+    isLoading(pageCode) {
+        return this.loadingStates()[pageCode] || false;
+    }
+    /**
+     * Invalidate cache for specific page code
+     */
+    invalidateCache(pageCode) {
+        const cache = { ...this.pageDataCacheSignal() };
+        delete cache[pageCode];
+        this.pageDataCacheSignal.set(cache);
+        console.log(`🗑️ CACHE INVALIDATED: Removed cache for page code: ${pageCode}`);
+    }
+    /**
+     * Clear all cached data
+     */
+    clearAllCache() {
+        this.pageDataCacheSignal.set({});
+        this.loadingStateSignal.set({});
+        console.log('🗑️ CACHE CLEARED: All cached data removed');
+    }
+    /**
+     * Preload page data for better performance
+     */
+    preloadPageData(pageCodes) {
+        pageCodes.forEach(pageCode => {
+            if (!this.hasValidCache(pageCode) && !this.isLoading(pageCode)) {
+                this.loadPageData({ sypg_page_code: pageCode }).subscribe({
+                    next: () => console.log(`🚀 PRELOADED: Page data for ${pageCode}`),
+                    error: (err) => console.warn(`⚠️ PRELOAD FAILED: Could not preload ${pageCode}`, err)
+                });
+            }
+        });
+    }
+    // Private helper methods
+    hasValidCache(pageCode) {
+        const cached = this.pageDataCacheSignal()[pageCode];
+        return cached && this.isCacheValid(cached);
+    }
+    isCacheValid(cached) {
+        if (!cached)
+            return false;
+        return Date.now() - cached.timestamp < cached.ttl;
+    }
+    cachePageData(pageCode, request, response, ttl) {
+        const cache = { ...this.pageDataCacheSignal() };
+        cache[pageCode] = {
+            request,
+            response,
+            timestamp: Date.now(),
+            ttl
+        };
+        this.pageDataCacheSignal.set(cache);
+    }
+    setLoadingState(pageCode, loading) {
+        const loadingStates = { ...this.loadingStateSignal() };
+        if (loading) {
+            loadingStates[pageCode] = true;
+        }
+        else {
+            delete loadingStates[pageCode];
+        }
+        this.loadingStateSignal.set(loadingStates);
+    }
+    cleanExpiredCache() {
+        const cache = { ...this.pageDataCacheSignal() };
+        let cleaned = false;
+        Object.keys(cache).forEach(pageCode => {
+            if (!this.isCacheValid(cache[pageCode])) {
+                delete cache[pageCode];
+                cleaned = true;
+            }
+        });
+        if (cleaned) {
+            this.pageDataCacheSignal.set(cache);
+            console.log('🧹 CACHE CLEANUP: Removed expired cache entries');
+        }
+    }
+    setPageData(page_data_response, page_data_payload) {
+        // to set the controls data to the element service
+        console.log('🔍 SHARED SERVICE: setPageData', page_data_response, page_data_payload);
+        if (page_data_response?.data?.controls) {
+            // Set controls here
+            this.elementService.cide_element_data = { ...this.elementService.cide_element_data, ...page_data_response?.data?.controls };
+            this.elementService.is_cide_element_data_updated?.next(true);
+        }
+        // while doing this we need to think about not to touch if this page is not pening in the popup or drower insted of main window
+        // Set the layout data
+        console.log('🔍 Layout data:', page_data_response);
+        if (page_data_response?.data?.theme?.sytm_layout) {
+            console.log('🔍 SIDEBAR DEBUG - Layout data:', page_data_response?.data?.theme?.sytm_layout, page_data_payload);
+            // check is sidebar is hiden or not (default is visible)
+            if (page_data_response?.data?.theme?.sytm_layout?.sytm_layout_sidebar) {
+                const sidebarStatus = page_data_response?.data?.theme?.sytm_layout?.sytm_layout_sidebar?.status;
+                console.log('🔍 SIDEBAR DEBUG - Sidebar status found:', sidebarStatus);
+                if (!sidebarStatus) {
+                    console.log('🚫 SIDEBAR DEBUG - Hiding sidebar because status is false');
+                    this.sidebarService.hideSidebar();
+                }
+                else {
+                    console.log('✅ SIDEBAR DEBUG - Showing sidebar because status is true');
+                    this.sidebarService.showSidebar();
+                }
+            }
+            else {
+                console.log('⚠️ SIDEBAR DEBUG - No sidebar config found, hiding sidebar');
+                this.sidebarService.hideSidebar();
+            }
+            // check header visible or not
+            console.log('🔍 HEADER DEBUG - Header config found:', page_data_response?.data?.theme?.sytm_layout?.sytm_layout_header);
+            if (page_data_response?.data?.theme?.sytm_layout?.sytm_layout_header) {
+                if (!page_data_response?.data?.theme?.sytm_layout?.sytm_layout_header?.status) {
+                    this.headerService.hideHeader();
+                }
+                else {
+                    this.headerService.showHeader();
+                }
+            }
+            else {
+                this.headerService.hideHeader();
+            }
+            // check footer visible or not 
+            if (page_data_response?.data?.theme?.sytm_layout?.sytm_layout_footer) {
+                if (!page_data_response?.data?.theme?.sytm_layout?.sytm_layout_footer?.status) {
+                    this.footerService.hideFooter();
+                }
+                else {
+                    this.footerService.showFooter();
+                }
+            }
+            else {
+                this.footerService.hideFooter();
+            }
+            // check console visible or not
+            if (page_data_response?.data?.theme?.sytm_layout?.sytm_layout_console) {
+                if (!page_data_response?.data?.theme?.sytm_layout?.sytm_layout_console?.status) {
+                    this.consoleService.hideConsole();
+                }
+                else {
+                    this.consoleService.showConsole();
+                }
+            }
+            else {
+                this.consoleService.hideConsole();
+            }
+            // check for the request status and log it for debugging
+            console.log('🔍 REQUEST DEBUG - Request config found:', page_data_response?.data?.theme?.sytm_layout?.sytm_layout_request);
+            if (page_data_response?.data?.theme?.sytm_layout?.sytm_layout_request) {
+                const requestStatus = page_data_response?.data?.theme?.sytm_layout?.sytm_layout_request?.status;
+                console.log('🔍 REQUEST DEBUG - Request status:', requestStatus, 'Type:', typeof requestStatus);
+                // The request status controls whether this page should support tabs
+                // This is used by the request service to determine if tabs should be created
+                if (requestStatus === true) {
+                    console.log('✅ REQUEST DEBUG - Request is enabled for tabbing');
+                    // Show request wrapper when request is enabled
+                    if (this.requestVisibilityCallback) {
+                        this.requestVisibilityCallback(true);
+                        console.log('📋 REQUEST VISIBILITY - Showing request wrapper');
+                    }
+                }
+                else if (requestStatus === false) {
+                    console.log('🚫 REQUEST DEBUG - Request is disabled for tabbing');
+                    // Hide request wrapper when request is disabled
+                    if (this.requestVisibilityCallback) {
+                        this.requestVisibilityCallback(false);
+                        console.log('📋 REQUEST VISIBILITY - Hiding request wrapper');
+                    }
+                }
+                else {
+                    console.log('⚠️ REQUEST DEBUG - Unexpected request status value:', requestStatus);
+                    // Default to hiding request wrapper for unexpected values
+                    if (this.requestVisibilityCallback) {
+                        this.requestVisibilityCallback(false);
+                        console.log('📋 REQUEST VISIBILITY - Hiding request wrapper (unexpected value)');
+                    }
+                }
+            }
+            else {
+                console.log('⚠️ REQUEST DEBUG - No request config found, tabs will not be created');
+                // Hide request wrapper when no request config found
+                if (this.requestVisibilityCallback) {
+                    this.requestVisibilityCallback(false);
+                    console.log('📋 REQUEST VISIBILITY - Hiding request wrapper (no config)');
+                }
+            }
+        }
+    }
+    /**
+     * Handle route changes - moved from request service for better architecture
+     * This method loads page data and calls request service to manage tabs
+     */
+    handleRouteChange() {
+        const parsedUrl = this.router.parseUrl(this.router.url);
+        const currentRoutePath = '/' + (parsedUrl.root.children['primary']?.segments.map(s => s.path).join('/') || '');
+        const queryParams = parsedUrl.queryParams;
+        console.log('🔍 Route change:', {
+            currentRoutePath,
+            queryParams
+        });
+        // Get page code from route data
+        let route = this.router.routerState.snapshot.root;
+        while (route.firstChild) {
+            route = route.firstChild;
+        }
+        const pageCode = route.data && route.data['sypg_page_code'];
+        console.log('📄 Processing route with page code:', pageCode);
+        if (pageCode) {
+            const entityId = this.appState.getActiveEntityId();
+            console.log(`📡 Loading and processing page data for pageCode: ${pageCode}`);
+            this.pageDataSubscription = this.loadAndProcessPageData({ sypg_page_code: pageCode, sytm_entity_id_syen: entityId || undefined }, {
+                forceRefresh: false,
+                setTitle: true,
+                setSidebarContext: true,
+                updateLayout: true
+            }).pipe(take(1))
+                .subscribe({
+                next: (page_data_response) => {
+                    const layout = page_data_response?.data?.theme?.sytm_layout;
+                    // Update sidedrawer with processed layout
+                    this.sidedrawerService.updateDrawerItems(layout);
+                    // Sync sidebar active menu with loaded page
+                    this.syncSidebarActiveMenu(page_data_response, pageCode);
+                    if (layout?.sytm_layout_request?.status === true) {
+                        console.log('✅ Layout processed - calling request service to manage tabs');
+                        // Call request service to handle tab creation
+                        this.handleTabRequest(currentRoutePath, queryParams, layout, page_data_response, pageCode);
+                    }
+                    else {
+                        console.log('❌ Layout request disabled - tab not created');
+                    }
+                },
+                error: (err) => {
+                    console.error(`❌ Error loading page data for sypg_page_code '${pageCode}':`, err);
+                    this.sidedrawerService.updateDrawerItems(undefined);
+                }
+            });
+        }
+        else {
+            console.log('⚠️ No page code found in route data - clearing drawer');
+            this.sidedrawerService.updateDrawerItems(undefined);
+        }
+    }
+    /**
+     * Handle tab request by calling request service
+     */
+    handleTabRequest(currentRoutePath, queryParams, layout, pageData, pageCode) {
+        if (this.tabManagementCallback) {
+            console.log('🔄 Calling registered tab management callback');
+            this.tabManagementCallback(currentRoutePath, queryParams, layout, pageData, pageCode);
+        }
+        else {
+            console.log('⚠️ No tab management callback registered');
+        }
+    }
+    /**
+     * Sync the active menu in the sidebar based on the loaded page data.
+     * This ensures the correct module is highlighted in the sidebar.
+     */
+    syncSidebarActiveMenu(page_data_response, pageCode) {
+        console.log('🔍 SIDEBAR SYNC: Starting sidebar active menu sync for:', pageCode);
+        // Try to extract module information from route
+        const currentRoute = this.router.url;
+        const routeParts = currentRoute.split('/').filter(part => part);
+        let routeModuleName = '';
+        // Look for control-panel or module identifier in route
+        if (routeParts.includes('control-panel') && routeParts.length > 1) {
+            const moduleIndex = routeParts.indexOf('control-panel') + 1;
+            routeModuleName = routeParts[moduleIndex] || '';
+        }
+        else if (routeParts.length > 0) {
+            routeModuleName = routeParts[0];
+        }
+        console.log('🔍 SIDEBAR SYNC: Route module name:', routeModuleName);
+        console.log('🔍 SIDEBAR SYNC: Current route:', currentRoute);
+        console.log('🔍 SIDEBAR SYNC: Page code:', pageCode);
+        // Load sidebar modules and find the matching one
+        this.sidebarService.getSidebarMenues({ syme_type: "module", sort: 'asc', syme_title: "" })
+            .subscribe({
+            next: (modulesResponse) => {
+                const modules = modulesResponse?.data || [];
+                console.log('🔍 SIDEBAR SYNC: Available modules:', modules.map(m => ({ id: m._id, title: m.syme_title, path: m.syme_path })));
+                let matchedModule = null;
+                // Try to match by route path
+                if (routeModuleName) {
+                    matchedModule = modules.find(m => m.syme_path?.includes(routeModuleName) ||
+                        m.syme_title?.toLowerCase().includes(routeModuleName.toLowerCase()) ||
+                        routeModuleName.includes(m.syme_path || '') ||
+                        m.syme_path === routeModuleName);
+                    if (matchedModule) {
+                        console.log('✅ SIDEBAR SYNC: Matched module by route:', matchedModule.syme_title);
+                    }
+                }
+                // If not found, try to match by page code pattern
+                if (!matchedModule && pageCode) {
+                    matchedModule = modules.find(m => pageCode.includes(m.syme_path || '') ||
+                        (m.syme_path && pageCode.toLowerCase().includes(m.syme_path.toLowerCase())) ||
+                        m.syme_path === pageCode);
+                    if (matchedModule) {
+                        console.log('✅ SIDEBAR SYNC: Matched module by page code:', matchedModule.syme_title);
+                    }
+                }
+                // If still not found, try partial matching for common patterns
+                if (!matchedModule) {
+                    // Try to match common patterns like 'admin', 'dashboard', etc.
+                    const searchTerms = [routeModuleName, pageCode].filter(Boolean);
+                    for (const term of searchTerms) {
+                        matchedModule = modules.find(m => m.syme_title?.toLowerCase().includes(term.toLowerCase()) ||
+                            term.toLowerCase().includes(m.syme_title?.toLowerCase() || '') ||
+                            m.syme_path?.toLowerCase().includes(term.toLowerCase()) ||
+                            term.toLowerCase().includes(m.syme_path?.toLowerCase() || ''));
+                        if (matchedModule) {
+                            console.log('✅ SIDEBAR SYNC: Matched module by pattern:', matchedModule.syme_title, 'for term:', term);
+                            break;
+                        }
+                    }
+                }
+                // Check if we should set the matched module as active
+                if (matchedModule) {
+                    const currentActiveModule = this.appState.getActiveModule();
+                    // Be more conservative about overriding user selections
+                    // Only set the module if no module is currently active
+                    const shouldSetModule = !currentActiveModule;
+                    if (shouldSetModule) {
+                        console.log('🎯 SIDEBAR SYNC: No active module, setting:', matchedModule.syme_title, matchedModule._id);
+                        this.appState.setActiveModule(matchedModule);
+                    }
+                    else {
+                        console.log('✅ SIDEBAR SYNC: Module already active, respecting user selection:', currentActiveModule?.syme_title);
+                        console.log('🔍 SIDEBAR SYNC: Route suggests:', matchedModule.syme_title, '- not overriding');
+                    }
+                }
+                else {
+                    console.log('⚠️ SIDEBAR SYNC: No matching module found for page:', pageCode);
+                    console.log('🔍 SIDEBAR SYNC: Available modules:', modules.map(m => m.syme_title).join(', '));
+                    console.log('🔍 SIDEBAR SYNC: Searched for route:', routeModuleName, 'and page code:', pageCode);
+                }
+            },
+            error: (err) => {
+                console.error('❌ SIDEBAR SYNC: Error loading modules for sync:', err);
+            }
+        });
+    }
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSharedService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytSharedWrapperComponent {
+    constructor() {
+        this.shared_wrapper_setup_param = {};
+        this.page_data = {};
+        this.sharedService = inject(CideLytSharedService);
+        this.sidedrawerService = inject(CideLytSidedrawerService);
+        this.appState = inject(AppStateHelperService);
+    }
+    ngOnInit() {
+        // Load and process page data using modern approach
+        if (this.shared_wrapper_setup_param?.sypg_page_code) {
+            const entityId = this.appState.getActiveEntityId();
+            const page_data_payload = {
+                sypg_page_code: this.shared_wrapper_setup_param?.sypg_page_code,
+                sytm_entity_id_syen: entityId || undefined
+            };
+            console.log('🔍 Page data payload:', page_data_payload);
+            this.sharedService.loadAndProcessPageData(page_data_payload, {
+                setTitle: true,
+                setSidebarContext: true,
+                updateLayout: true
+            }).subscribe({
+                next: (page_data_response) => {
+                    console.log('✅ SHARED WRAPPER: Page data loaded and processed for:', page_data_payload.sypg_page_code);
+                    this.page_data = page_data_response?.data || {};
+                    // Sidebar context is automatically set by loadAndProcessPageData when setSidebarContext: true
+                    const pageId = page_data_response?.data?.page?._id || '';
+                    const themeId = page_data_response?.data?.theme?._id || '';
+                    this.sidedrawerService.setContext(pageId, themeId);
+                },
+                error: (err) => {
+                    console.error('❌ SHARED WRAPPER: Error loading page data:', err);
+                }
+            });
+        }
+    }
+    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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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 {
+    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({
+            next: (fileDetails) => {
+                if (fileDetails?.data?.length) {
+                    this.syen_photo = fileDetails?.data[0];
+                }
+            },
+            error: (error) => {
+                console.error('Error loading file details:', error);
+            }
+        });
+    }
+    /**
+     * Handles logo click to navigate back to control panel home
+     */
+    onLogoClick() {
+        this.router.navigate(['/control-panel']);
+    }
+    /**
+     * Updates the tooltip position based on mouse event
+     * Similar to the sidebar tooltip positioning
+     * @param event Mouse event from icon hover
+     */
+    updateTooltipPosition(event) {
+        // Find the tooltip element within the event target's parent
+        const iconElement = event.currentTarget;
+        const tooltip = iconElement.querySelector('.header-tooltip');
+        if (tooltip) {
+            // Ensure the tooltip is properly positioned
+            const rect = iconElement.getBoundingClientRect();
+            const headerRect = document.getElementById('cide-lyt-header-wrapper')?.getBoundingClientRect();
+            if (headerRect) {
+                // Adjust tooltip position if it would go outside the viewport
+                const viewportWidth = window.innerWidth;
+                const tooltipWidth = tooltip.offsetWidth;
+                // Center the tooltip under the icon
+                let leftPosition = '50%';
+                let transform = 'translateX(-50%)';
+                // Check if tooltip would extend beyond right edge
+                if (rect.left + tooltipWidth / 2 > viewportWidth) {
+                    leftPosition = 'auto';
+                    tooltip.style.right = '0';
+                    transform = 'translateX(0)';
+                }
+                // Check if tooltip would extend beyond left edge
+                if (rect.left - tooltipWidth / 2 < 0) {
+                    leftPosition = '0';
+                    tooltip.style.right = 'auto';
+                    transform = 'translateX(0)';
+                }
+                if (leftPosition !== 'auto' && leftPosition !== '0') {
+                    tooltip.style.left = leftPosition;
+                }
+                tooltip.style.transform = transform;
+            }
+        }
+    }
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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 {
+    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();
+    }
+    /**
+     * Sets the user status
+     * @param status The new status to set
+     * @param message Optional custom status message
+     */
+    setStatus(status, message) {
+        const statusData = {
+            status,
+            lastActive: new Date(),
+            message
+        };
+        this._userStatus.set(statusData);
+        this.statusSubject.next(statusData);
+        this.lastActivityTime = Date.now();
+    }
+    /**
+     * Marks user as active (resets away timer)
+     */
+    markUserActive() {
+        this.lastActivityTime = Date.now();
+        // If user was away, bring them back to online
+        if (this._userStatus().status === 'away') {
+            this.setStatus('online');
+        }
+    }
+    /**
+     * Gets CSS class for status color
+     */
+    getStatusColor(status) {
+        switch (status) {
+            case 'online': return 'tw-bg-green-500';
+            case 'away': return 'tw-bg-yellow-500';
+            case 'busy': return 'tw-bg-orange-500';
+            case 'do-not-disturb': return 'tw-bg-red-500';
+            case 'offline': return 'tw-bg-gray-400';
+            default: return 'tw-bg-gray-400';
+        }
+    }
+    /**
+     * Gets human-readable status text
+     */
+    getStatusText(status) {
+        const current = this._userStatus();
+        const baseText = this.getBaseStatusText(status);
+        return current.message ? `${baseText} - ${current.message}` : baseText;
+    }
+    getBaseStatusText(status) {
+        switch (status) {
+            case 'online': return 'Online';
+            case 'away': return 'Away';
+            case 'busy': return 'Busy';
+            case 'do-not-disturb': return 'Do not disturb';
+            case 'offline': return 'Offline';
+            default: return 'Unknown';
+        }
+    }
+    /**
+     * Initialize activity tracking for auto-away
+     */
+    initializeActivityTracking() {
+        if (typeof window === 'undefined')
+            return;
+        const events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart', 'click'];
+        events.forEach(event => {
+            document.addEventListener(event, () => {
+                this.markUserActive();
+            }, { passive: true });
+        });
+    }
+    /**
+     * Start the auto-away timer
+     */
+    startAutoAwayTimer() {
+        if (!this.autoAwayEnabled)
+            return;
+        interval(30000).subscribe({
+            next: () => {
+                const now = Date.now();
+                const timeSinceActivity = now - this.lastActivityTime;
+                if (timeSinceActivity > this.autoAwayTimeout &&
+                    this._userStatus().status === 'online') {
+                    this.setStatus('away', 'Auto-away due to inactivity');
+                }
+            }
+        });
+    }
+    /**
+     * Enable or disable auto-away functionality
+     */
+    setAutoAwayEnabled(enabled) {
+        this.autoAwayEnabled = enabled;
+    }
+    /**
+     * Set the auto-away timeout (in milliseconds)
+     */
+    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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytUserStatusService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytSidebarWrapperComponent {
+    // Add this getter to retrieve the menu tree for the selected module
+    get selectedModuleMenus() {
+        return this.core_system_menu || [];
+    }
+    /**
+     * Gets the CSS classes for the user status indicator
+     * Uses the injected user status service
+     */
+    getUserStatusClass() {
+        return this.userStatusService.statusColor();
+    }
+    /**
+     * Gets the tooltip text for the user status
+     * Uses the injected user status service
+     */
+    getUserStatusText() {
+        return this.userStatusService.statusText();
+    }
+    /**
+     * Sets the user status (delegates to service)
+     * @param status The new status to set
+     * @param message Optional custom status message
+     */
+    setUserStatus(status, message) {
+        this.userStatusService.setStatus(status, message);
+    }
+    /**
+     * Gets the current user status data
+     */
+    get currentUserStatus() {
+        return this.userStatusService.userStatus();
+    }
+    /**
+     * Gets the icon for the currently active module
+     * @returns The icon name for the active module or a default icon
+     */
+    getActiveModuleIcon() {
+        if (this.core_system_module && this.core_system_module.length > 0 && this.activeModuleId) {
+            const activeModule = this.core_system_module.find(m => m._id === this.activeModuleId);
+            return activeModule?.syme_icon || 'dashboard';
+        }
+        return 'dashboard';
+    }
+    // Add a click handler for menu navigation
+    onMenuClick(menu) {
+        if (menu.syme_path) {
+            // Check if this is an entity-related menu
+            // Navigate to entity list component
+            this.router.navigate([`/control-panel/${menu.syme_path}`]);
+            // window.location.hash = menu.syme_path;
+        }
+    }
+    /**
+     * Toggle section expand/collapse state
+     */
+    toggleSection(sectionId) {
+        this.expandedSections[sectionId] = !this.expandedSections[sectionId];
+        console.log('📂 SIDEBAR: Section', sectionId, 'expanded:', this.expandedSections[sectionId]);
+    }
+    /**
+     * Check if section is expanded
+     */
+    isSectionExpanded(sectionId) {
+        return this.expandedSections[sectionId] ?? true; // Default to expanded
+    }
+    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();
+            if (activeModule) {
+                console.log('🔄 SIDEBAR: Active module signal changed:', activeModule.syme_title);
+                // Update local state when active module changes
+                this.activeModuleId = activeModule._id;
+                // Always try to load menus when active module changes
+                this.loadMenusForModule(activeModule);
+            }
+        });
+    }
+    ngOnInit() {
+        // Modern ES2022+ pattern: Use Promise-based delays instead of nested setTimeout
+        const initializeAnimations = async () => {
+            await new Promise(resolve => setTimeout(resolve, 100));
+            this.animateItems = true;
+            await new Promise(resolve => setTimeout(resolve, 200));
+            this.animateSections = [true, true, true, true, true];
+        };
+        initializeAnimations();
+        // Get sidebar menu data with loading state tracking
+        this.sidebarService?.getSidebarMenues({ syme_type: "module", sort: 'asc', syme_title: "" })?.subscribe({
+            next: (res) => {
+                this.core_system_module = res?.data || [];
+                // Handle module initialization and active module setup
+                if (this.core_system_module.length > 0) {
+                    const activeModule = this.appState.activeModule();
+                    console.log('🔍 SIDEBAR: Modules loaded. Current active module:', activeModule?.syme_title || 'none');
+                    console.log('📊 SIDEBAR: Available modules:', this.core_system_module.map(m => m.syme_title).join(', '));
+                    if (activeModule) {
+                        // Active module exists, verify it's in the loaded modules
+                        const foundModule = this.core_system_module.find(m => m._id === activeModule._id);
+                        if (foundModule) {
+                            console.log('✅ SIDEBAR: Active module found in loaded modules:', foundModule.syme_title);
+                            // The effect should have already triggered, but ensure menus are loaded
+                            if (this.core_system_menu.length === 0) {
+                                console.log('🔄 SIDEBAR: No menus loaded yet, triggering load for active module');
+                                this.loadMenusForModule(activeModule);
+                            }
+                        }
+                        else {
+                            console.log('⚠️ SIDEBAR: Active module not found in loaded modules, setting first as active');
+                            this.setActiveMenuByIndex(0);
+                        }
+                    }
+                    else {
+                        console.log('📌 SIDEBAR: No active module, setting first module as active');
+                        this.setActiveMenuByIndex(0);
+                    }
+                }
+                // Modern ES2022+ pattern: Use Promise-based delay
+                const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+                delay(300).then(() => {
+                    this.moduleLoadComplete = true;
+                });
+            },
+            error: (err) => {
+                console.error('Error loading sidebar modules:', err);
+                this.moduleLoadComplete = true; // Set to true even on error to ensure UI is responsive
+            }
+        });
+        // collecte the width of the sidebar by using the style property
+        const cide_lyt_stack_wrapper_width = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--cide-lyt-stack-wrapper-width'));
+        const cide_lyt_sidebar_menu_width = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--cide-lyt-sidebar-menu-width'));
+        this.sidebarSetupData.cide_lyt_sidebar_width = (cide_lyt_stack_wrapper_width + cide_lyt_sidebar_menu_width);
+    }
+    /**
+     * Load menus for a specific module
+     * @param module The module to load menus for
+     */
+    loadMenusForModule(module) {
+        if (!module?._id) {
+            console.warn('🚫 SIDEBAR: Cannot load menus - no module ID provided');
+            return;
+        }
+        console.log('📂 SIDEBAR: Loading menus for module:', module.syme_title, 'ID:', module._id);
+        this.loadingMenus = true;
+        this.menuLoadComplete = false;
+        // Fetch menus for the selected module
+        this.sidebarService?.getSidebarMenues({
+            syme_id: module._id,
+            sort: 'asc'
+        })?.subscribe({
+            next: (res) => {
+                const menus = res?.data || [];
+                this.core_system_menu = menus;
+                this.loadingMenus = false;
+                console.log('✅ SIDEBAR: Loaded', menus, 'menus for module:', module.syme_title);
+                console.log('📋 SIDEBAR: Menu titles:', menus.map(m => m.syme_title).join(', '));
+                // Modern ES2022+ pattern: Use Promise-based delay
+                const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+                delay(200).then(() => {
+                    this.menuLoadComplete = true;
+                    console.log('🎯 SIDEBAR: Menu loading complete for:', module.syme_title);
+                });
+            },
+            error: (err) => {
+                console.error('❌ SIDEBAR: Error loading menus for module:', module.syme_title, err);
+                this.core_system_menu = [];
+                this.loadingMenus = false;
+                this.menuLoadComplete = true;
+            }
+        });
+    }
+    toggleSidebar() {
+        this.isCollapsed = !this.isCollapsed;
+        // Add animation class
+        const sidebarElement = this.elementRef.nativeElement.querySelector('.cide-lyt-sidebar');
+        sidebarElement.classList.add('animating');
+        // Remove animation class after animation completes
+        // Modern ES2022+ pattern: Use Promise-based delay
+        const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+        delay(300).then(() => {
+            sidebarElement.classList.remove('animating');
+        });
+        // this.sidebarService.toggleSidebar();
+    }
+    toggleUserMenu() {
+        this.showUserMenu = !this.showUserMenu;
+        // Close other menus if open
+        if (this.showUserMenu) {
+            this.showOptions = false;
+            this.showNotifications = false;
+        }
+        // Add subtle animation when opening menu
+        if (this.showUserMenu) {
+            this.animateMenuOpen('user-menu');
+        }
+    }
+    /**
+     * Sets the active menu item with animation
+     * @param moduleId The ID of the module to set as active
+     */
+    setActiveMenu(moduleId) {
+        if (this.activeModuleId === moduleId)
+            return;
+        // Set the active module in app state - the effect will handle local state updates
+        const selectedModule = this.core_system_module.find(m => m._id === moduleId);
+        if (selectedModule) {
+            this.appState.setActiveModule(selectedModule);
+            // The effect will automatically update this.activeModuleId and load menus
+        }
+        // You could trigger custom animations here
+    }
+    /**
+     * Sets the active menu item by index with animation
+     * @param index The index of the menu item
+     */
+    setActiveMenuByIndex(index) {
+        const selectedModule = this.core_system_module[index];
+        if (selectedModule) {
+            this.appState.setActiveModule(selectedModule);
+            // The effect will automatically update this.activeModuleId and load menus
+        }
+    }
+    /**
+     * Public method to set active module by ID from external components
+     * This is useful when you want to programmatically set the active module
+     * @param moduleId The ID of the module to set as active
+     * @returns boolean indicating if the module was found and set as active
+     */
+    setActiveModuleById(moduleId) {
+        const module = this.core_system_module.find(m => m._id === moduleId);
+        if (module) {
+            this.setActiveMenu(moduleId);
+            return true;
+        }
+        console.warn(`Module with ID "${moduleId}" not found in sidebar modules`);
+        return false;
+    }
+    /**
+     * Public method to get the currently active module ID
+     * @returns The ID of the currently active module, or empty string if none
+     */
+    getActiveModuleId() {
+        return this.activeModuleId;
+    }
+    /**
+     * Tracks hover state for enhanced visual feedback
+     * @param moduleId The ID of the hovered module, or empty string for none
+     */
+    onItemHover(moduleId) {
+        this.hoverModuleId = moduleId;
+    }
+    /**
+     * Adds subtle animations when opening dropdown menus
+     * @param menuId The ID of the menu element
+     */
+    animateMenuOpen(menuId) {
+        const menuElement = this.elementRef.nativeElement.querySelector(`.${menuId}`);
+        if (!menuElement)
+            return;
+        // First set initial state
+        menuElement.style.opacity = '0';
+        menuElement.style.transform = 'translateY(-8px) scale(0.95)';
+        // Then animate to final state
+        setTimeout(() => {
+            menuElement.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
+            menuElement.style.opacity = '1';
+            menuElement.style.transform = 'translateY(0) scale(1)';
+        }, 10);
+    }
+    /**
+     * Updates tooltip position for more accurate placement
+     * @param event MouseEvent from hovering
+     * @param tooltip The tooltip element
+     */
+    updateTooltipPosition(event, tooltipIndex) {
+        const tooltip = this.elementRef.nativeElement.querySelectorAll('.nav-tooltip')[tooltipIndex];
+        if (!tooltip)
+            return;
+        // Get the vertical position of the cursor
+        const cursorY = event.clientY;
+        // Set the tooltip position to match the cursor Y position
+        tooltip.style.top = `${cursorY}px`;
+        // Add a slight animation
+        tooltip.style.transition = 'opacity 0.2s ease, transform 0.2s ease';
+        tooltip.style.transform = 'translateY(-50%)';
+    }
+    toggleNotificationsPanel() {
+        this.showNotificationsPanel = !this.showNotificationsPanel;
+        this.showNotifications = this.showNotificationsPanel;
+        // Close other menus if open
+        if (this.showNotificationsPanel) {
+            this.showUserMenu = false;
+            this.showOptions = false;
+        }
+        // Add animation when opening panel
+        if (this.showNotificationsPanel) {
+            this.animateMenuOpen('notifications-panel');
+        }
+    }
+    toggleTheme() {
+        this.darkMode = !this.darkMode;
+        // Add dark mode class to sidebar element
+        const sidebarElement = this.elementRef.nativeElement.querySelector('.cide-lyt-sidebar');
+        if (this.darkMode) {
+            sidebarElement.classList.add('dark-mode');
+        }
+        else {
+            sidebarElement.classList.remove('dark-mode');
+        }
+    }
+    toggleOptions() {
+        this.showOptions = !this.showOptions;
+        // Close other menus if open
+        if (this.showOptions) {
+            this.showUserMenu = false;
+            this.showNotifications = false;
+        }
+        // Add subtle animation when opening menu
+        if (this.showOptions) {
+            this.animateMenuOpen('options-menu');
+        }
+    }
+    /**
+     * Toggle old-style collapsed sections (for backwards compatibility)
+     */
+    toggleCollapsedSection(section) {
+        this.collapsedSections[section] = !this.collapsedSections[section];
+    }
+    isSectionCollapsed(section) {
+        return this.collapsedSections[section];
+    }
+    onSearch() {
+        // Reset animation trigger when searching
+        this.resetAnimations();
+        // Mock search functionality - would be integrated with actual search service
+        if (this.searchText.trim() === '') {
+            this.searchResults = [];
+            return;
+        }
+        // Example search results - would come from actual data source
+        const allItems = [
+            { icon: 'settings', title: 'General Settings' },
+            { icon: 'payments', title: 'Billing & Payments' },
+            { icon: 'shield', title: 'Security Settings' },
+            { icon: 'person', title: 'Profile Settings' },
+            { icon: 'notifications', title: 'Notification Preferences' },
+            { icon: 'integration_instructions', title: 'API Integrations' },
+            { icon: 'key', title: 'API Keys' },
+            { icon: 'groups', title: 'Team Members' },
+            { icon: 'devices', title: 'Connected Devices' },
+            { icon: 'language', title: 'Language Settings' },
+        ];
+        // Simple text search on title
+        this.searchResults = allItems.filter(item => item.title.toLowerCase().includes(this.searchText.toLowerCase()));
+    }
+    onScroll(event) {
+        const scrollTop = event.target.scrollTop;
+        const sections = this.elementRef.nativeElement.querySelectorAll('.sidebar-section');
+        // Reset animations if scrolling back to top
+        if (scrollTop < 10) {
+            this.resetAnimations();
+            return;
+        }
+        // Animate sections as they come into view
+        sections.forEach((section, index) => {
+            if (index >= this.animateSections.length)
+                return;
+            const sectionTop = section.offsetTop;
+            const scrollPosition = scrollTop + 300; // Offset to trigger animation before fully visible
+            // When scrolling down and section comes into view
+            if (scrollPosition > sectionTop && !this.scrolledPast[index] && scrollTop > this.lastScrollTop) {
+                this.animateSections[index] = true;
+                this.scrolledPast[index] = true;
+            }
+            // When scrolling up to top, reset animation
+            if (scrollTop < 50 && this.lastScrollTop > scrollTop) {
+                this.resetAnimations();
+            }
+        });
+        this.lastScrollTop = scrollTop;
+    }
+    resetAnimations() {
+        this.animateSections = [false, false, false, false, false];
+        this.scrolledPast = [false, false, false, false, false];
+        // Re-trigger animations
+        setTimeout(() => {
+            this.animateSections = [true, true, true, true, true];
+        }, 50);
+    }
+    onDocumentClick(event) {
+        // Close dropdown menus when clicking outside
+        const clickedInside = this.elementRef.nativeElement.contains(event.target);
+        if (!clickedInside) {
+            this.showUserMenu = false;
+            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,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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: 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: [
+            trigger('slideInOut', [
+                state('in', style({
+                    opacity: 1,
+                    transform: 'translateY(0)',
+                    height: '*'
+                })),
+                state('out', style({
+                    opacity: 0,
+                    transform: 'translateY(-10px)',
+                    height: '0px'
+                })),
+                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: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-sidebar-wrapper', standalone: true, imports: [CideIconComponent, CideInputComponent, CommonModule, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent], animations: [
+                        trigger('slideInOut', [
+                            state('in', style({
+                                opacity: 1,
+                                transform: 'translateY(0)',
+                                height: '*'
+                            })),
+                            state('out', style({
+                                opacity: 0,
+                                transform: 'translateY(-10px)',
+                                height: '0px'
+                            })),
+                            transition('in => out', animate('200ms ease-in')),
+                            transition('out => in', animate('200ms ease-out'))
+                        ])
+                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module; track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index\" (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"] }]
+        }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+
+/**
+ * A custom route reuse strategy that allows storing and retrieving routes
+ * to persist component state, especially for tabbed navigation.
+ */
+class CustomRouteReuseStrategy {
+    constructor() {
+        this.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.
+    getPathKey(route) {
+        let path = route.pathFromRoot
+            .map(r => r.url.map(segment => segment.path).join('/'))
+            .filter(p => p.length > 0)
+            .join('/');
+        // If the route is marked for tab reuse and has query parameters,
+        // append them to the key in a sorted, consistent manner.
+        if (route.data && route.data['reuseTab'] && route.queryParamMap.keys.length > 0) {
+            const queryParams = route.queryParamMap.keys
+                .sort() // Ensure consistent order of query parameters
+                .map(key => `${key}=${route.queryParamMap.get(key)}`)
+                .join('&');
+            path += '?' + queryParams;
+        }
+        return path;
+    }
+    // Determines if this route (and its subtree) should be detached to be reused later.
+    shouldDetach(route) {
+        return !!(route.data && route.data['reuseTab']);
+    }
+    // Stores the detached route.
+    store(route, handle) {
+        const pathKey = this.getPathKey(route);
+        if (handle && route.data && route.data['reuseTab'] && pathKey) {
+            this.storedRoutes[pathKey] = handle;
+        }
+    }
+    // Determines if this route (and its subtree) should be reattached.
+    shouldAttach(route) {
+        const pathKey = this.getPathKey(route);
+        return !!pathKey && !!this.storedRoutes[pathKey];
+    }
+    // Retrieves the previously stored route.
+    retrieve(route) {
+        const pathKey = this.getPathKey(route);
+        if (!pathKey || !this.storedRoutes[pathKey]) {
+            return null;
+        }
+        return this.storedRoutes[pathKey];
+    }
+    // Determines if a route should be reused.
+    shouldReuseRoute(future, curr) {
+        return future.routeConfig === curr.routeConfig;
+    }
+    // Clears a stored route, typically when a tab is closed.
+    clearStoredRoute(pathKey) {
+        delete this.storedRoutes[pathKey];
+    }
+}
+
+/**
+ * Creates the default state for a new tab.
+ */
+const createDefaultComponentState = () => ({
+    sideDrawer: { isOpen: false, activeComponent: null, componentState: {} },
+    footer: { someData: '' },
+    console: { history: [] },
+});
+class TabStateService {
+    /**
+     * Adds a new tab to the state.
+     * @param title The title for the new tab.
+     * @param id An optional unique ID. If not provided, one will be generated.
+     * @returns The ID of the newly created tab.
+     */
+    addTab(title, id) {
+        const newTabId = id || `tab_${Date.now()}_${Math.random()}`;
+        const newTab = {
+            id: newTabId,
+            title,
+            componentState: createDefaultComponentState(),
+        };
+        const currentTabs = this._tabsState.getValue();
+        const newTabs = new Map(currentTabs).set(newTabId, newTab);
+        this._tabsState.next(newTabs);
+        this.setActiveTab(newTabId);
+        return newTabId;
+    }
+    /**
+     * Removes a tab from the state.
+     * @param tabIdToRemove The ID of the tab to remove.
+     */
+    removeTab(tabIdToRemove) {
+        const currentTabs = this._tabsState.getValue();
+        if (!currentTabs.has(tabIdToRemove)) {
+            return;
+        }
+        const newTabs = new Map(currentTabs);
+        newTabs.delete(tabIdToRemove);
+        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');
+    }
+    /**
+     * Sets the currently active tab.
+     * @param tabId The unique identifier of the tab to activate.
+     */
+    setActiveTab(tabId) {
+        if (this._activeTabId.getValue() !== tabId) {
+            this._activeTabId.next(tabId);
+        }
+    }
+    /**
+     * Updates the state for the currently active tab.
+     * This performs a deep merge to avoid overwriting nested state.
+     * @param partialState The partial state to update for the active tab.
+     */
+    updateActiveTabState(partialState) {
+        const activeId = this._activeTabId.getValue();
+        if (!activeId) {
+            console.warn('Cannot update state, no active tab.');
+            return;
+        }
+        const tabs = this._tabsState.getValue();
+        const activeTabState = tabs.get(activeId);
+        if (activeTabState) {
+            // Use lodash merge for a deep merge
+            const updatedState = merge({}, activeTabState, { componentState: partialState });
+            const newTabsState = new Map(tabs);
+            newTabsState.set(activeId, updatedState);
+            this._tabsState.next(newTabsState);
+        }
+    }
+    /**
+     * Gets an observable for a specific tab's state.
+     * @param tabId The ID of the tab to observe.
+     */
+    getTabState(tabId) {
+        return this._tabsState.pipe(map(tabs => tabs.get(tabId)));
+    }
+    /**
+     * Determines the ID of the next tab to activate when a tab is closed.
+     * @param idToRemove The ID of the tab being removed.
+     * @returns The ID of the next tab to activate, or null if no tabs are left.
+     */
+    getNextActiveTabId(idToRemove) {
+        const tabsMap = this._tabsState.getValue();
+        if (tabsMap.size <= 1) {
+            return null;
+        }
+        const tabIds = Array.from(tabsMap.keys());
+        const removedIndex = tabIds.indexOf(idToRemove);
+        // If it's the last tab in the list, activate the one before it. Otherwise, activate the next one.
+        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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: TabStateService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
+
+class CideLytRequestService {
+    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();
+        // Register tab management callback with shared service to avoid circular dependency
+        this.sharedService.registerTabManagement(this.handleRouteBasedTabManagement.bind(this));
+        // Register request visibility callback
+        this.sharedService.registerRequestVisibility(this.handleRequestVisibility.bind(this));
+    }
+    /**
+     * Handle request visibility changes from shared service
+     */
+    handleRequestVisibility(show) {
+        if (show) {
+            this.showRequest();
+        }
+        else {
+            this.hideRequest();
+        }
+    }
+    /**
+     * Handle sidebar sync when tab becomes active
+     */
+    handleSidebarSync(tabInfo) {
+        // The sidebar sync will be handled automatically by the shared service
+        // when page data is loaded, so we don't need additional logic here
+        console.log('🔗 REQUEST SERVICE: Tab activated, sidebar sync handled by shared service:', tabInfo.title);
+    }
+    /**
+     * Handle route-based tab management - called by shared service
+     * This method checks for existing tabs and creates/activates as needed
+     */
+    handleRouteBasedTabManagement(currentRoutePath, queryParams, layout, pageData, pageCode) {
+        console.log('handleRouteBasedTabManagement', currentRoutePath, queryParams, layout, pageData, pageCode);
+        const currentTabs = this.tabsSignal();
+        const tabAlreadyExists = currentTabs.find((t) => {
+            const tRoutePath = t.route.startsWith('/') ? t.route : '/' + t.route;
+            const tParamsMatch = JSON.stringify(t.params || {}) === JSON.stringify(queryParams || {});
+            return tRoutePath === currentRoutePath && tParamsMatch;
+        });
+        console.log('tabAlreadyExists', tabAlreadyExists);
+        if (!tabAlreadyExists) {
+            const title = pageData.data?.page?.sypg_title || pageCode.toString() || 'Untitled Tab';
+            console.log(`🆕 Adding new tab: ${title}`);
+            this.addTab(title, currentRoutePath, queryParams, layout);
+        }
+        else if (tabAlreadyExists && !tabAlreadyExists.active) {
+            console.log(`🔄 Activating existing tab: ${tabAlreadyExists.title}`);
+            this.activateTab(tabAlreadyExists.id);
+        }
+        else if (tabAlreadyExists && tabAlreadyExists.active) {
+            console.log(`🔄 Activating existing tab: ${tabAlreadyExists.title}`);
+            this.activateTab(tabAlreadyExists.id);
+        }
+    }
+    addTab(title, route, params, layout) {
+        console.log('addTab', title, route, params, layout);
+        const id = this.generateId();
+        const currentTabs = this.tabsSignal();
+        console.log('currentTabs', currentTabs, route);
+        // Check if a tab with the same route and params already exists
+        const existingTab = currentTabs.find((tab) => {
+            const paramsMatch = JSON.stringify(tab.params || {}) === JSON.stringify(params || {});
+            return tab.route === route && paramsMatch;
+        });
+        console.log('existingTab', existingTab);
+        if (existingTab) {
+            this.activateTab(existingTab.id);
+            return existingTab.id;
+        }
+        // Create new tab
+        const newTab = {
+            id,
+            title,
+            route,
+            params,
+            active: true,
+            layout,
+            sytm_page_id_sypg: '',
+            themeId: ''
+        };
+        // Deactivate all other tabs
+        currentTabs.forEach((tab) => tab.active = false);
+        console.log('currentTabs after deactivate', currentTabs, 'activateTab', id);
+        // Add new tab
+        this.tabsSignal.set([...currentTabs, newTab]);
+        this.activeTabIdSignal.set(id);
+        // Sync with TabStateService
+        this.tabStateService.addTab(title, id);
+        // Request visibility is now controlled by layout configuration in setPageData
+        // No need to automatically show request wrapper here
+        // Navigate to the new route
+        if (params) {
+            this.router.navigate([route], { queryParams: params });
+        }
+        else {
+            this.router.navigate([route]);
+        }
+        return id;
+    }
+    activateTab(tabId) {
+        console.log('🔍 REQUEST SERVICE: Activating tab:', tabId);
+        const tabs = this.tabsSignal();
+        const tabToActivate = tabs.find(tab => tab.id === tabId);
+        if (!tabToActivate) {
+            console.warn('⚠️ Tab not found:', tabId);
+            return;
+        }
+        // Update tabs: deactivate all, then activate the target
+        const updatedTabs = tabs.map(tab => ({
+            ...tab,
+            active: tab.id === tabId
+        }));
+        this.tabsSignal.set(updatedTabs);
+        this.activeTabIdSignal.set(tabId);
+        console.log('✅ REQUEST SERVICE: Tab activated:', tabToActivate.title);
+        // Navigate to the tab's route
+        this.router.navigate([tabToActivate.route], {
+            queryParams: tabToActivate.params || {},
+            replaceUrl: false
+        });
+        // Trigger sidebar sync for the activated tab by calling shared service
+        // The shared service will handle the sidebar sync when the route loads
+        console.log('🔗 REQUEST SERVICE: Sidebar sync will be handled by route change');
+    }
+    closeTab(id) {
+        const currentTabs = this.tabsSignal();
+        const tabIndex = currentTabs.findIndex((tab) => tab.id === id);
+        if (tabIndex === -1)
+            return;
+        const tabToClose = currentTabs[tabIndex];
+        const wasActive = tabToClose.active;
+        // Sync with TabStateService by removing the tab state
+        this.tabStateService.removeTab(id);
+        // Clear stored route from strategy
+        if (this.routeReuseStrategy instanceof CustomRouteReuseStrategy) {
+            let pathKey = tabToClose.route.startsWith('/') ? tabToClose.route.substring(1) : tabToClose.route;
+            if (tabToClose.params && Object.keys(tabToClose.params).length > 0) {
+                const queryParamsString = Object.keys(tabToClose.params)
+                    .sort()
+                    .map(key => `${key}=${tabToClose.params[key]}`)
+                    .join('&');
+                pathKey += '?' + queryParamsString;
+            }
+            this.routeReuseStrategy.clearStoredRoute(pathKey);
+        }
+        // Remove the tab from this service's list
+        const newTabs = currentTabs.filter((tab) => tab.id !== id);
+        // If we're closing the active tab, activate the next available tab
+        if (wasActive && newTabs.length > 0) {
+            const newActiveIndex = Math.max(0, Math.min(tabIndex, newTabs.length - 1));
+            const newActiveTab = newTabs[newActiveIndex];
+            // Update sidedrawer for the new active tab
+            this.sidedrawerService.updateDrawerItems(newActiveTab.layout);
+            newTabs[newActiveIndex].active = true;
+            this.activeTabIdSignal.set(newActiveTab.id);
+            this.tabStateService.setActiveTab(newActiveTab.id);
+            // Navigate to the new active tab's route
+            if (newActiveTab.params) {
+                this.router.navigate([newActiveTab.route], { queryParams: newActiveTab.params });
+            }
+            else {
+                this.router.navigate([newActiveTab.route]);
+            }
+        }
+        else if (newTabs.length === 0) {
+            this.activeTabIdSignal.set(null);
+            this.tabStateService.setActiveTab(null);
+            // Clear sidedrawer as no tabs are open
+            this.sidedrawerService.updateDrawerItems(undefined);
+        }
+        this.tabsSignal.set(newTabs);
+        // Request wrapper visibility is now controlled by layout configuration
+        // The wrapper will be hidden/shown based on sytm_layout_request.status in setPageData
+    }
+    // Hide Request
+    hideRequest() {
+        console.log('🚫 REQUEST SERVICE - Hiding request wrapper');
+        this.requestVisible = false;
+        document.querySelector(`#cide-lyt-request-wrapper`)?.classList.add('cide-lyt-request-wrapper-hide');
+        document.querySelector(`body`)?.classList.remove('cide-lyt-request-exist');
+    }
+    // Show Request
+    showRequest() {
+        console.log('✅ REQUEST SERVICE - Showing request wrapper');
+        this.requestVisible = true;
+        document.querySelector(`#cide-lyt-request-wrapper`)?.classList.remove('cide-lyt-request-wrapper-hide');
+        document.querySelector(`body`)?.classList.add('cide-lyt-request-exist');
+    }
+    generateId() {
+        return 'tab-' + Math.random().toString(36).substr(2, 9);
+    }
+    updateTabScrollPosition(tabId, scrollTop, scrollLeft) {
+        const currentTabs = this.tabsSignal();
+        const tabIndex = currentTabs.findIndex((t) => t.id === tabId);
+        if (tabIndex !== -1) {
+            const tabToUpdate = currentTabs[tabIndex];
+            tabToUpdate.scrollTop = scrollTop;
+            tabToUpdate.scrollLeft = scrollLeft;
+            // Create a new array reference to trigger change detection
+            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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytRequestService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+// Type guard for setState/getState
+function hasStateMethods(instance) {
+    return !!instance && typeof instance.getState === 'function' && typeof instance.setState === 'function';
+}
+// Type guard for NotesComponentState
+function isNotesComponentState(state) {
+    return !!state && typeof state === 'object' &&
+        'newNoteModel' in state &&
+        'isFormVisible' in state &&
+        'scrollTop' in state;
+}
+class CideLytSidedrawerWrapperComponent {
+    // Modern Angular v20 pattern: Use Signals directly
+    get drawerItems() { return this.sidedrawerService.drawerItems; }
+    get notesVisible() { return this.sidedrawerService.notesVisible; }
+    // Computed signal to determine if sidedrawer should be visible
+    get shouldShowSidedrawer() {
+        return computed(() => {
+            const items = this.drawerItems();
+            return items && items.length > 0;
+        });
+    }
+    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();
+            this.currentActiveComponent = configFor;
+            this.loadComponent(configFor);
+        }, { allowSignalWrites: true });
+        // Effect to track active tab changes
+        effect(() => {
+            const activeTabId = this.requestService.activeTabId();
+            console.log('🔍 SIDEDRAWER - Active tab changed:', activeTabId);
+            this.currentTabId = activeTabId;
+            if (activeTabId) {
+                console.log('🔍 SIDEDRAWER - Loading tab state for:', activeTabId);
+                this.tabStateService.getTabState(activeTabId).pipe(take$1(1)).subscribe(tabState => {
+                    console.log('🔍 SIDEDRAWER - Tab state loaded:', tabState);
+                    const sideDrawer = tabState?.componentState.sideDrawer;
+                    if (sideDrawer) {
+                        console.log('🔍 SIDEDRAWER - Restoring drawer state:', sideDrawer);
+                        // Restore activeComponent
+                        this.sidedrawerService.setActiveComponent(sideDrawer.activeComponent);
+                        // Modern ES2022+ pattern: Use Promise-based delay with microtask
+                        Promise.resolve().then(() => {
+                            if (sideDrawer.activeComponent && this.currentComponentRef && hasStateMethods(this.currentComponentRef.instance)) {
+                                const compState = sideDrawer.componentState?.[sideDrawer.activeComponent];
+                                // Add type guards for each component as needed
+                                if (sideDrawer.activeComponent === 'drowar_notes' && isNotesComponentState(compState)) {
+                                    this.currentComponentRef.instance.setState(compState);
+                                }
+                            }
+                        });
+                    }
+                    else {
+                        console.log('🔍 SIDEDRAWER - No drawer state found, clearing active component');
+                        this.sidedrawerService.setActiveComponent(null);
+                    }
+                });
+            }
+            else {
+                console.log('🔍 SIDEDRAWER - No active tab, clearing drawer state');
+                this.sidedrawerService.setActiveComponent(null);
+            }
+        }, { allowSignalWrites: true });
+        // 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.sidedrawerSetupData.cide_lyt_sidedrawer_width = (cide_lyt_sidedrawer_wrapper_width);
+    }
+    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-ds12wZbh.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-xd8IG3WP.mjs').then(m => m.CideLytDrawerThemeComponent);
+    }
+    async loadComponent(configFor) {
+        console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
+        // Always clear the container and destroy the previous component
+        this.notesContainer?.clear();
+        if (this.currentComponentRef) {
+            this.currentComponentRef.destroy();
+            this.currentComponentRef = null;
+        }
+        if (!configFor) {
+            console.log('🔍 SIDEDRAWER - No component to load, collapsing');
+            this.isExpanded = false;
+            this.saveSidedrawerState(null);
+            return;
+        }
+        console.log('🔍 SIDEDRAWER - Expanding and loading:', configFor);
+        this.isExpanded = true;
+        const componentLoader = this.componentMap[configFor];
+        console.log('🔍 SIDEDRAWER - Component loader found:', !!componentLoader);
+        if (componentLoader) {
+            try {
+                console.log('🔍 SIDEDRAWER - Importing component for:', configFor);
+                const componentType = await componentLoader();
+                console.log('🔍 SIDEDRAWER - Component imported successfully');
+                this.currentComponentRef = this.notesContainer.createComponent(componentType);
+                console.log('🔍 SIDEDRAWER - Component created successfully');
+                // Add the cide-lyt-sidedrawer-wrapper-child class to the created component
+                if (this.currentComponentRef.location.nativeElement) {
+                    this.currentComponentRef.location.nativeElement.classList.add('cide-lyt-sidedrawer-wrapper-child');
+                }
+                this.setComponentContext(configFor);
+                // Optionally restore state here if you have it
+                this.saveSidedrawerState(configFor);
+                console.log('🔍 SIDEDRAWER - Component setup completed');
+            }
+            catch (error) {
+                console.error(`🚨 SIDEDRAWER - Error loading component for ${configFor}:`, error);
+                this.isExpanded = false;
+            }
+        }
+        else {
+            console.warn(`⚠️ SIDEDRAWER - No component mapping found for configFor: ${configFor}`);
+            console.log('🔍 SIDEDRAWER - Available mappings:', Object.keys(this.componentMap));
+            this.isExpanded = false;
+        }
+    }
+    clearComponent(destroy = true) {
+        this.saveSidedrawerState();
+        this.notesContainer?.clear();
+        if (this.currentComponentRef && destroy) {
+            this.currentComponentRef.destroy();
+        }
+        this.currentComponentRef = null;
+    }
+    saveSidedrawerState(configForOverride) {
+        console.log('🔍 SIDEDRAWER - Saving state, current tab:', this.currentTabId);
+        if (!this.currentTabId) {
+            console.log('⚠️ SIDEDRAWER - No current tab, skipping state save');
+            return;
+        }
+        const activeComponent = configForOverride !== undefined ? configForOverride : this.currentActiveComponent;
+        console.log('🔍 SIDEDRAWER - Active component for save:', activeComponent);
+        let componentState = undefined;
+        if (this.currentComponentRef && hasStateMethods(this.currentComponentRef.instance) && activeComponent) {
+            const state = this.currentComponentRef.instance.getState();
+            // Add type guards for each component as needed
+            if (activeComponent === 'drowar_notes' && isNotesComponentState(state)) {
+                componentState = { [activeComponent]: state };
+            }
+            // Example for other components:
+            // else if (activeComponent === 'other_component' && isOtherComponentState(state)) {
+            //   componentState = { [activeComponent]: state };
+            // }
+        }
+        console.log('🔍 SIDEDRAWER - Updating tab state with:', {
+            isOpen: !!activeComponent,
+            activeComponent,
+            componentState
+        });
+        this.tabStateService.updateActiveTabState({
+            sideDrawer: {
+                isOpen: !!activeComponent,
+                activeComponent,
+                componentState
+            }
+        });
+    }
+    setComponentContext(configFor) {
+        // You can adjust this logic to pass different context data based on configFor if needed.
+        const context = this.getNotesContext(configFor); // Using your existing method for now.
+        if (this.currentComponentRef && context && this.currentComponentRef.setInput) {
+            // Pass context data
+            this.currentComponentRef.setInput('context', context);
+        }
+    }
+    // This function needs to be enhanced to handle contexts for different components
+    getNotesContext(configFor) {
+        switch (configFor) {
+            case 'drowar_notes': {
+                // Example for notes component context
+                const activeTab = this.requestService.activeTab(); // Use the computed signal for active tab
+                return {
+                    pageId: activeTab?.sytm_page_id_sypg,
+                    themeId: activeTab?.themeId,
+                    // Add other properties as needed for notes
+                };
+            }
+            case 'drawer_theme': {
+                // You can add theme context here if needed
+                return {};
+            }
+            default:
+                return null; // Or a default context if appropriate
+        }
+    }
+    onItemClick(item) {
+        const activeTabId = this.requestService.activeTabId();
+        console.log('🔍 SIDEDRAWER - Item clicked:', item);
+        console.log('🔍 SIDEDRAWER - Active tab ID:', activeTabId);
+        // Modern Angular v20 pattern: Use Signals directly
+        const activeComponent = this.sidedrawerService.activeComponent();
+        console.log('🔍 SIDEDRAWER - Current active component:', activeComponent);
+        console.log('🔍 SIDEDRAWER - Item configFor:', item.configFor);
+        if (activeComponent === item?.configFor) {
+            console.log('🔄 SIDEDRAWER - Same component clicked, toggling off');
+            const cide_lyt_sidedrawer_wrapper = document.querySelector('#cide-lyt-sidedrawer-wrapper');
+            const cide_lyt_outlet_wrapper = document.querySelector('#cide-lyt-outlet-wrapper');
+            if (cide_lyt_sidedrawer_wrapper instanceof HTMLElement && cide_lyt_outlet_wrapper instanceof HTMLElement) {
+                const width_of_prev = parseInt(cide_lyt_outlet_wrapper.style.width);
+                const width_of_next = parseInt(cide_lyt_sidedrawer_wrapper.style.width);
+                const width_of_next_default = 32;
+                const width_of_prev_default = width_of_prev + (width_of_next - width_of_next_default);
+                cide_lyt_outlet_wrapper.style.width = `${width_of_prev_default}px`;
+                cide_lyt_sidedrawer_wrapper.style.width = `${width_of_next_default}px`; // Fix: Cast to HTMLElement to access style property
+            }
+            this.sidedrawerService.setActiveComponent(null); // Destroy if same
+            this.saveSidedrawerState(null);
+        }
+        else {
+            console.log('✅ SIDEDRAWER - New component clicked, setting active:', item.configFor);
+            this.sidedrawerService.setActiveComponent(item.configFor); // Set new
+            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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytSidedrawerWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-sidedrawer-wrapper', standalone: true, imports: [
+                        NgClass,
+                        CideIconComponent,
+                        CideEleResizerDirective,
+                        CideEleSkeletonLoaderComponent,
+                        NgFor,
+                        NgIf,
+                        TooltipDirective
+                    ], 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"] }]
+        }], ctorParameters: () => [], propDecorators: { notesContainer: [{
+                type: ViewChild,
+                args: ['notesContainer', { read: ViewContainerRef }]
+            }] } });
+
+class CideLytFooterWrapperComponent {
+    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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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: [""] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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;
+    }
+    ngAfterViewInit() {
+        // Apply entrance animation to initial items
+        this.applyAnimations();
+        // Listen for changes in request items and apply animations
+        this.requestItemElements.changes.subscribe({
+            next: () => {
+                this.applyAnimations();
+            }
+        });
+    }
+    // Apply animations to request items
+    applyAnimations() {
+        if (!this.requestItemElements)
+            return;
+        this.requestItemElements.forEach((itemEl) => {
+            const element = itemEl.nativeElement;
+            element.classList.remove('request-item-enter');
+            void element.offsetWidth; // Force reflow
+            element.classList.add('request-item-enter');
+        });
+    }
+    // Apply flicker effect to clicked item
+    applyFlickerEffect(event) {
+        const target = event.currentTarget;
+        if (target) {
+            // Remove any existing flicker class
+            target.classList.remove('request-item-flicker');
+            // Force reflow to ensure the class removal is processed
+            void target.offsetWidth;
+            // Add flicker class to trigger animation
+            target.classList.add('request-item-flicker');
+            // Remove the class after animation completes
+            setTimeout(() => {
+                target.classList.remove('request-item-flicker');
+            }, 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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: [{
+                type: ViewChildren,
+                args: ['requestItemEl']
+            }] } });
+
+class TabContentComponent {
+    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();
+            if (activeTab && activeTab.id !== this.currentActiveTabId) {
+                this.currentActiveTabId = activeTab.id;
+                // Delay scroll restoration to ensure DOM is ready
+                const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+                delay(100).then(() => this.restoreScrollPosition(activeTab));
+            }
+        });
+        // Listen to route changes for scroll restoration
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe({
+            next: () => {
+                // Use signal to get active tab after navigation
+                const activeTab = this.requestService.activeTab();
+                if (activeTab && activeTab.id !== this.currentActiveTabId) {
+                    this.currentActiveTabId = activeTab.id;
+                    const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+                    delay(150).then(() => this.restoreScrollPosition(activeTab));
+                }
+            }
+        });
+    }
+    ngAfterViewInit() {
+        // Initial scroll restoration for the active tab
+        const activeTab = this.requestService.activeTab();
+        if (activeTab) {
+            this.currentActiveTabId = activeTab.id;
+            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+            delay(50).then(() => this.restoreScrollPosition(activeTab));
+        }
+    }
+    onScroll() {
+        if (this.isRestoringScroll || !this.scrollContainerRef || !this.currentActiveTabId) {
+            return;
+        }
+        const { scrollTop, scrollLeft } = this.scrollContainerRef.nativeElement;
+        this.requestService.updateTabScrollPosition(this.currentActiveTabId, scrollTop, scrollLeft);
+    }
+    restoreScrollPosition(tab) {
+        if (tab && this.scrollContainerRef?.nativeElement) {
+            this.isRestoringScroll = true;
+            const container = this.scrollContainerRef.nativeElement;
+            container.scrollTop = tab.scrollTop ?? 0;
+            container.scrollLeft = tab.scrollLeft ?? 0;
+            // Modern ES2022+ pattern: Use Promise-based delay
+            const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+            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: `
+    <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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.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: [{
+                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" }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-layout-wrapper', standalone: true, imports: [
+                        CideLytHeaderWrapperComponent,
+                        CideLytSidebarWrapperComponent,
+                        CideLytSidedrawerWrapperComponent,
+                        CideLytFooterWrapperComponent,
+                        CideLytConsoleWrapperComponent,
+                        RouterModule,
+                        CideLytRequestWrapperComponent,
+                        TabContentComponent
+                    ], 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>" }]
+        }] });
+
+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: `
+    <cide-lyt-layout-wrapper></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: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-wrapper', standalone: true, template: `
+    <cide-lyt-layout-wrapper></cide-lyt-layout-wrapper>
+  `, imports: [CideLytLayoutWrapperComponent] }]
+        }] });
+
+var cloudIdeLayout_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CloudIdeLayoutComponent: CloudIdeLayoutComponent
+});
+
+const layoutRoutes = {
+    path: "control-panel",
+    loadComponent: () => Promise.resolve().then(function () { return cloudIdeLayout_component; }).then(c => c.CloudIdeLayoutComponent),
+    // canActivate: [authGuard]
+};
+const layoutControlPannelChildRoutes = [{
+        path: "",
+        pathMatch: "full",
+        redirectTo: "home"
+    },
+    {
+        path: "home",
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-DEdsEiaq.mjs').then(c => c.CideLytHomeWrapperComponent),
+        data: {
+            reuseTab: true, // For CustomRouteReuseStrategy
+            sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
+        }
+    }];
+// {
+//     path: "admin-home",
+//     loadComponent: () => import('../../../cloud-ide-admin/src/lib/admin-module/home/home-wrapper/cide-adm-home-wrapper.component').then(c => c.CideAdmHomeWrapperComponent),
+//     data: {
+//         reuseTab: true, // For CustomRouteReuseStrategy
+//         sypg_page_code: "cide_adm_home" // Example: Ensure this page code is configured in your backend
+//     }
+// }];
+// ]
+
+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);
+    }
+    /**
+     * Get page data with caching - this is the main method components should use
+     */
+    getPageData(pageCode, forceRefresh = false) {
+        return this.sharedService.loadAndProcessPageData({ sypg_page_code: pageCode }, { forceRefresh, setTitle: true, setSidebarContext: true, updateLayout: true });
+    }
+    /**
+     * Preload multiple pages for better performance
+     */
+    preloadPages(pageCodes) {
+        console.log(`🚀 PRELOADING: Starting preload for ${pageCodes.length} pages`);
+        this.sharedService.preloadPageData(pageCodes);
+    }
+    /**
+     * Invalidate specific page cache
+     */
+    invalidatePage(pageCode) {
+        this.sharedService.invalidateCache(pageCode);
+    }
+    /**
+     * Clear all cache
+     */
+    clearCache() {
+        this.sharedService.clearAllCache();
+    }
+    /**
+     * Get cache status for debugging
+     */
+    getCacheStatus() {
+        const cache = this.sharedService.pageDataCache();
+        const loadingStates = this.sharedService.loadingStates();
+        const allPageCodes = new Set([
+            ...Object.keys(cache),
+            ...Object.keys(loadingStates)
+        ]);
+        return Array.from(allPageCodes).map(pageCode => ({
+            pageCode,
+            cached: !!cache[pageCode],
+            expired: cache[pageCode] ? !this.isCacheValid(cache[pageCode]) : false,
+            loading: !!loadingStates[pageCode]
+        }));
+    }
+    /**
+     * Estimate memory usage of cache (rough estimate)
+     */
+    estimateCacheMemoryUsage() {
+        const cache = this.sharedService.pageDataCache();
+        const jsonString = JSON.stringify(cache);
+        const bytes = new Blob([jsonString]).size;
+        if (bytes < 1024)
+            return `${bytes} B`;
+        if (bytes < 1024 * 1024)
+            return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+    /**
+     * Check if cache entry is valid
+     */
+    isCacheValid(cached) {
+        if (!cached)
+            return false;
+        return Date.now() - cached.timestamp < cached.ttl;
+    }
+    /**
+     * Export cache data for debugging or backup
+     */
+    exportCacheData() {
+        return JSON.stringify(this.sharedService.pageDataCache(), null, 2);
+    }
+    /**
+     * Get performance metrics
+     */
+    getPerformanceMetrics() {
+        const stats = this.cacheStats();
+        const loadingStates = this.sharedService.loadingStates();
+        return {
+            totalPages: stats.totalCached,
+            cachedPages: stats.validCached,
+            loadingPages: Object.keys(loadingStates).length,
+            cacheHitRatio: stats.hitRatio,
+            // 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' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.7", ngImport: i0, type: CacheManagerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+/*
+ * Public API Surface of cloud-ide-layout
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CloudIdeLayoutService as d, CloudIdeLayoutComponent as e, CideLytSharedService as f, layoutControlPannelChildRoutes as g, CustomRouteReuseStrategy as h, AppStateService as i, CideLytUserStatusService as j, CacheManagerService as k, layoutRoutes as l };
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DqL3A73V.mjs.map