cloud-ide-layout 1.0.84 → 1.0.85

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-qWunqMqT.mjs → cloud-ide-layout-cloud-ide-layout-COUO1y65.mjs}

@@ -1266,7 +1266,7 @@ class CideLytFloatingEntitySelectionService {
         }
         try {
             // Use relative import to avoid circular dependency
-            const module = await import('./cloud-ide-layout-floating-entity-selection.component-DZty1dA0.mjs');
+            const module = await import('./cloud-ide-layout-floating-entity-selection.component-SKLqTZWa.mjs');
             if (module.CideLytFloatingEntitySelectionComponent) {
                 this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
                 console.log('✅ Entity selection component registered successfully');
@@ -1371,6 +1371,9 @@ class CideLytHeaderWrapperComponent {
     unreadCount = computed(() => this.wsNotificationService?.unreadNotificationsCount() || 0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
     isNotificationDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isNotificationDropdownOpen" }] : []));
     notificationItems = [];
+    // Animation and undo state
+    animatingNotifications = signal(new Set(), ...(ngDevMode ? [{ debugName: "animatingNotifications" }] : []));
+    recentlyRemovedNotifications = signal(new Map(), ...(ngDevMode ? [{ debugName: "recentlyRemovedNotifications" }] : []));
     // Dark mode signal
     darkMode = signal(false, ...(ngDevMode ? [{ debugName: "darkMode" }] : []));
     // Financial Year Dropdown Configuration
@@ -1759,17 +1762,134 @@ class CideLytHeaderWrapperComponent {
         };
         return colorMap[type] || 'tw-text-gray-500';
     }
+    /**
+     * Check if notification is undoable based on type
+     */
+    isNotificationUndoable(notification) {
+        // System notifications are not undoable
+        if (notification.type === 'system') {
+            return false;
+        }
+        // Error notifications are not undoable
+        if (notification.type === 'error') {
+            return false;
+        }
+        // Success notifications might be undoable (e.g., "Marked as read" can be undone)
+        if (notification.type === 'success') {
+            return true;
+        }
+        // Info and warning notifications are undoable
+        return notification.type === 'info' || notification.type === 'warning';
+    }
     /**
      * Handle notification item click (from custom template)
      */
     onNotificationItemClick(notification) {
-        // Mark notification as read when clicked
-        this.markNotificationAsRead(String(notification.id));
+        const notificationId = String(notification.id);
+        // Check if undoable
+        const isUndoable = this.isNotificationUndoable(notification);
+        if (isUndoable) {
+            // Add animation class (start slide-out animation)
+            this.animatingNotifications.update(animating => {
+                const newSet = new Set(animating);
+                newSet.add(notificationId);
+                return newSet;
+            });
+            // Store notification for undo with timeout
+            const timeoutId = setTimeout(() => {
+                // After 5 seconds, actually mark as read and remove
+                this.markNotificationAsRead(notificationId, true); // skipAnimation = true
+                this.animatingNotifications.update(animating => {
+                    const newSet = new Set(animating);
+                    newSet.delete(notificationId);
+                    return newSet;
+                });
+                this.recentlyRemovedNotifications.update(removed => {
+                    const newMap = new Map(removed);
+                    newMap.delete(notificationId);
+                    return newMap;
+                });
+                // Remove from list after timeout
+                this.notifications.update(notifs => notifs.filter(n => String(n.id) !== notificationId));
+                this.updateNotificationDropdown();
+            }, 5000); // 5 seconds to undo
+            this.recentlyRemovedNotifications.update(removed => {
+                const newMap = new Map(removed);
+                newMap.set(notificationId, { notification, timeoutId });
+                return newMap;
+            });
+            // Don't remove from list immediately - keep it visible with animation and undo button
+            // It will be removed after 5 seconds if not undone
+        }
+        else {
+            // Not undoable - mark as read immediately with animation
+            this.animatingNotifications.update(animating => {
+                const newSet = new Set(animating);
+                newSet.add(notificationId);
+                return newSet;
+            });
+            // Remove from view after animation
+            setTimeout(() => {
+                this.markNotificationAsRead(notificationId, true);
+                this.notifications.update(notifs => notifs.filter(n => String(n.id) !== notificationId));
+                this.updateNotificationDropdown();
+                this.animatingNotifications.update(animating => {
+                    const newSet = new Set(animating);
+                    newSet.delete(notificationId);
+                    return newSet;
+                });
+            }, 300); // Wait for animation to complete
+        }
         // Navigate to action URL if available
         if (notification?.action_url) {
             this.router.navigate([notification.action_url]);
         }
     }
+    /**
+     * Undo notification removal
+     */
+    undoNotificationRemoval(notificationId) {
+        const removed = this.recentlyRemovedNotifications().get(notificationId);
+        if (!removed)
+            return;
+        // Clear timeout
+        clearTimeout(removed.timeoutId);
+        // Remove from animating set (restore animation state)
+        this.animatingNotifications.update(animating => {
+            const newSet = new Set(animating);
+            newSet.delete(notificationId);
+            return newSet;
+        });
+        // Notification should still be in the list, just restore its state
+        // The notification is already in the list, we just need to remove the animation classes
+        // Remove from recently removed
+        this.recentlyRemovedNotifications.update(removed => {
+            const newMap = new Map(removed);
+            newMap.delete(notificationId);
+            return newMap;
+        });
+        this.updateNotificationDropdown();
+    }
+    /**
+     * Check if notification is animating (being removed)
+     */
+    isNotificationAnimating(notification) {
+        const notificationId = String(notification.id);
+        return this.animatingNotifications().has(notificationId);
+    }
+    /**
+     * Check if notification can be undone (is currently animating/removed)
+     */
+    canUndoNotification(notification) {
+        const notificationId = String(notification.id);
+        return this.animatingNotifications().has(notificationId) || this.recentlyRemovedNotifications().has(notificationId);
+    }
+    /**
+     * Get notification ID as string (helper for template)
+     */
+    getNotificationId(notification) {
+        return String(notification.id);
+    }
     /**
      * Check if notification is read
      */
@@ -1925,8 +2045,17 @@ class CideLytHeaderWrapperComponent {
     /**
      * Mark a single notification as read
      */
-    markNotificationAsRead(notificationId) {
+    markNotificationAsRead(notificationId, skipAnimation = false) {
         console.log('[Notifications] Marking as read:', notificationId);
+        // If not skipping animation, check if it's undoable
+        if (!skipAnimation) {
+            const notification = this.notifications().find(n => String(n.id) === notificationId);
+            if (notification && this.isNotificationUndoable(notification)) {
+                // Handle through onNotificationItemClick for undo functionality
+                this.onNotificationItemClick(notification);
+                return;
+            }
+        }
         // Mark in WebSocket service
         if (this.wsNotificationService) {
             this.wsNotificationService.markAsRead(notificationId);
@@ -2453,12 +2582,12 @@ class CideLytHeaderWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: 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=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white tw-to-gray-50 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 hover:tw-text-gray-700 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden [&::-webkit-scrollbar]:tw-w-1.5 [&::-webkit-scrollbar-track]:tw-bg-gray-100 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb]:tw-rounded-full\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 last:tw-border-b-0 hover:tw-bg-gray-50\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 tw-animate-pulse\"></div>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-rounded-md tw-border-l-2 tw-border-l-blue-400\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 tw-bg-white tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 hover:tw-bg-gray-50 hover:tw-border-gray-400 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 tw-bg-blue-600 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 hover:tw-border-blue-700 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</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-dropdown-container{position:relative;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}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.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"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: 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=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white tw-to-gray-50 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 hover:tw-text-gray-700 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden [&::-webkit-scrollbar]:tw-w-1.5 [&::-webkit-scrollbar-track]:tw-bg-gray-100 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb]:tw-rounded-full\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 last:tw-border-b-0 hover:tw-bg-gray-50 tw-transform tw-ease-in-out\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n                                [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n                                [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 hover:tw-border-blue-300 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-rounded-md tw-border-l-2 tw-border-l-blue-400\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 tw-bg-white tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 hover:tw-bg-gray-50 hover:tw-border-gray-400 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 tw-bg-blue-600 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 hover:tw-border-blue-700 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</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-dropdown-container{position:relative;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}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#3b82f633,#2563eb40);border-color:#3b82f666;color:var(--cide-theme-primary-color)}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#3b82f640,#2563eb4d);border-color:#3b82f680}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-header-wrapper', imports: [CideInputComponent, CommonModule, CideIconComponent,
-                        CideEleDropdownComponent, CideEleFileImageDirective], 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=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white tw-to-gray-50 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 hover:tw-text-gray-700 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden [&::-webkit-scrollbar]:tw-w-1.5 [&::-webkit-scrollbar-track]:tw-bg-gray-100 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb]:tw-rounded-full\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-200 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 last:tw-border-b-0 hover:tw-bg-gray-50\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 tw-animate-pulse\"></div>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-rounded-md tw-border-l-2 tw-border-l-blue-400\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 tw-bg-white tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 hover:tw-bg-gray-50 hover:tw-border-gray-400 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 tw-bg-blue-600 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 hover:tw-border-blue-700 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</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-dropdown-container{position:relative;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}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}.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"] }]
+                        CideEleDropdownComponent, CideEleFileImageDirective], 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=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white tw-to-gray-50 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 hover:tw-text-gray-700 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden [&::-webkit-scrollbar]:tw-w-1.5 [&::-webkit-scrollbar-track]:tw-bg-gray-100 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb]:tw-rounded-full\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 last:tw-border-b-0 hover:tw-bg-gray-50 tw-transform tw-ease-in-out\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n                                [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n                                [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 tw-bg-blue-50 tw-border tw-border-blue-200 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 hover:tw-border-blue-300 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-rounded-md tw-border-l-2 tw-border-l-blue-400\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 tw-border tw-border-gray-200 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 tw-bg-white tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 hover:tw-bg-gray-50 hover:tw-border-gray-400 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 tw-bg-blue-600 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 hover:tw-border-blue-700 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</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-dropdown-container{position:relative;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}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.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;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#3b82f633,#2563eb40);border-color:#3b82f666;color:var(--cide-theme-primary-color)}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#3b82f640,#2563eb4d);border-color:#3b82f680}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.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: () => [], propDecorators: { triggerTemplate: [{
                 type: ViewChild,
                 args: ['triggerTemplate']
@@ -3081,7 +3210,7 @@ class CideLytSidebarWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\r\n    <!-- First tier sidebar (Icon only) -->\r\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n        <!-- Scrollable content -->\r\n        <div class=\"sidebar-scroll-content\">\r\n            <!-- Collapse/Expand toggle -->\r\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n                (keydown.enter)=\"toggleSidebar()\">\r\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n                </cide-ele-icon>\r\n            </div> <!-- Main navigation icons - Enhanced Design -->\r\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n                @for (core_system_module_item of core_system_module(); track $index) {\r\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n                    tooltipPlacement=\"right\"\r\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n                    <!-- Notification Badge with enhanced design -->\r\n                    @if (core_system_module_item?.syme_ping) {\r\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\"\r\n                        style=\"background-color: var(--cide-theme-error-color);\">\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Enhanced icon with better visual effects -->\r\n                    <div\r\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n                                tw-border-2 tw-border-transparent\r\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n                        <cide-ele-icon type=\"box\" size=\"xs\"\r\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n                        </cide-ele-icon>\r\n                    </div>\r\n\r\n                    <!-- Modern active indicator -->\r\n                    @if (activeModuleId === core_system_module_item._id) {\r\n                    <div\r\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\">\r\n                    </div>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div> <!-- Second tier sidebar (Expanded view) -->\r\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n            <!-- Header section with search and options -->\r\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\r\n                <!-- Title with back button - Clean layout without online indicator -->\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\r\n                    <button\r\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\"\r\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n                            getActiveModuleIcon() }}</cide-ele-icon>\r\n                    </button>\r\n                    <div class=\"tw-flex-1 tw-min-w-0\">\r\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n                        </h2>\r\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n                            Module Dashboard\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Search and options -->\r\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n                        </cide-ele-input>\r\n                        <div\r\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\">\r\n                            \u2318K</div>\r\n                    </div>\r\n                    <button\r\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\"\r\n                        (click)=\"toggleOptions()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n                    </button>\r\n\r\n                    <!-- Options dropdown menu -->\r\n                    <div *ngIf=\"showOptions()\"\r\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\">\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n                                Refresh\r\n                            </a>\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n                                Sync settings\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n                                Help & support\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Menu items with categories -->\r\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n                <!-- Search results if searching -->\r\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\r\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Only show these sections if not searching -->\r\n                <ng-container *ngIf=\"!searchText()\">\r\n                    <!-- Loading state -->\r\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n                    </div>\r\n\r\n                    <!-- Dynamic menu tree -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\r\n                        [class.animate-in]=\"animateSections()[0]\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n                    </div>\r\n\r\n                    <!-- Empty state -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n                        class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- Recursive menu template -->\r\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n                    <div [class.tw-ml-0]=\"level > 0\">\r\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n                            <!-- Title type items (section headers) -->\r\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n                                    menu.syme_title }}</h3>\r\n                                <!-- Render children of title -->\r\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n\r\n                            <!-- Section type items (collapsible sections) -->\r\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n                                <!-- Section header (clickable to expand/collapse) -->\r\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n                                    (keydown.space)=\"toggleSection(menu._id)\"\r\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n                                    <!-- Section Icon (left side, like other menu items) -->\r\n                                    <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n                                    <!-- Section Title -->\r\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n                                        }}</span>\r\n\r\n                                    <!-- Right side icons container -->\r\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n                                        <!-- Child Count Badge -->\r\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\r\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\">\r\n                                            {{ menu.children.length }}\r\n                                        </span>\r\n\r\n                                        <!-- Expand/Collapse Icon (right side) -->\r\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\r\n                                    </div>\r\n                                </button>\r\n\r\n                                <!-- Section Content (collapsible) -->\r\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Menu type items (clickable links) -->\r\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n                                role=\"button\"\r\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\r\n                            </a>\r\n\r\n                            <!-- Render nested children for menu items -->\r\n                            <ng-container\r\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n            <!-- Notification panel (overlays content when shown) -->\r\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n                        (click)=\"toggleNotificationsPanel()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"tw-p-4\">\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n                        <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n                    </div>\r\n\r\n                    <div class=\"tw-space-y-3\">\r\n                        <div\r\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n                                        with improved visualizations.</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n                                    </div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Storage info at bottom -->\r\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\r\n                <!-- for info display -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px)}.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%;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:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.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}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\r\n    <!-- First tier sidebar (Icon only) -->\r\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n        <!-- Scrollable content -->\r\n        <div class=\"sidebar-scroll-content\">\r\n            <!-- Collapse/Expand toggle -->\r\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n                (keydown.enter)=\"toggleSidebar()\">\r\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n                </cide-ele-icon>\r\n            </div> <!-- Main navigation icons - Enhanced Design -->\r\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n                @for (core_system_module_item of core_system_module(); track $index) {\r\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n                    tooltipPlacement=\"right\"\r\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n                    <!-- Notification Badge with enhanced design -->\r\n                    @if (core_system_module_item?.syme_ping) {\r\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\"\r\n                        style=\"background-color: var(--cide-theme-error-color);\">\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Enhanced icon with better visual effects -->\r\n                    <div\r\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n                                tw-border-2 tw-border-transparent\r\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n                        <cide-ele-icon type=\"box\" size=\"xs\"\r\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n                        </cide-ele-icon>\r\n                    </div>\r\n\r\n                    <!-- Modern active indicator -->\r\n                    @if (activeModuleId === core_system_module_item._id) {\r\n                    <div\r\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\">\r\n                    </div>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div> <!-- Second tier sidebar (Expanded view) -->\r\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n            <!-- Header section with search and options -->\r\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\r\n                <!-- Title with back button - Clean layout without online indicator -->\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\r\n                    <button\r\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\"\r\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n                            getActiveModuleIcon() }}</cide-ele-icon>\r\n                    </button>\r\n                    <div class=\"tw-flex-1 tw-min-w-0\">\r\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n                        </h2>\r\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n                            Module Dashboard\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Search and options -->\r\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n                        </cide-ele-input>\r\n                        <div\r\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\">\r\n                            \u2318K</div>\r\n                    </div>\r\n                    <button\r\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\"\r\n                        (click)=\"toggleOptions()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n                    </button>\r\n\r\n                    <!-- Options dropdown menu -->\r\n                    <div *ngIf=\"showOptions()\"\r\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\">\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n                                Refresh\r\n                            </a>\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n                                Sync settings\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n                                Help & support\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Menu items with categories -->\r\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n                <!-- Search results if searching -->\r\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\r\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Only show these sections if not searching -->\r\n                <ng-container *ngIf=\"!searchText()\">\r\n                    <!-- Loading state -->\r\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n                    </div>\r\n\r\n                    <!-- Dynamic menu tree -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\r\n                        [class.animate-in]=\"animateSections()[0]\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n                    </div>\r\n\r\n                    <!-- Empty state -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n                        class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- Recursive menu template -->\r\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n                    <div [class.tw-ml-0]=\"level > 0\">\r\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n                            <!-- Title type items (section headers) -->\r\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n                                    menu.syme_title }}</h3>\r\n                                <!-- Render children of title -->\r\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n\r\n                            <!-- Section type items (collapsible sections) -->\r\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n                                <!-- Section header (clickable to expand/collapse) -->\r\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n                                    (keydown.space)=\"toggleSection(menu._id)\"\r\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n                                    <!-- Section Icon (left side, like other menu items) -->\r\n                                    <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n                                    <!-- Section Title -->\r\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n                                        }}</span>\r\n\r\n                                    <!-- Right side icons container -->\r\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n                                        <!-- Child Count Badge -->\r\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\r\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\">\r\n                                            {{ menu.children.length }}\r\n                                        </span>\r\n\r\n                                        <!-- Expand/Collapse Icon (right side) -->\r\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\r\n                                    </div>\r\n                                </button>\r\n\r\n                                <!-- Section Content (collapsible) -->\r\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Menu type items (clickable links) -->\r\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n                                role=\"button\"\r\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\r\n                            </a>\r\n\r\n                            <!-- Render nested children for menu items -->\r\n                            <ng-container\r\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n            <!-- Notification panel (overlays content when shown) -->\r\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n                        (click)=\"toggleNotificationsPanel()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"tw-p-4\">\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n                        <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n                    </div>\r\n\r\n                    <div class=\"tw-space-y-3\">\r\n                        <div\r\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n                                        with improved visualizations.</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n                                    </div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Storage info at bottom -->\r\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\r\n                <!-- for info display -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px)}.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%;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 var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:#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:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#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 var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#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:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     opacity: 1,
@@ -3115,7 +3244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             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()\">\r\n    <!-- First tier sidebar (Icon only) -->\r\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n        <!-- Scrollable content -->\r\n        <div class=\"sidebar-scroll-content\">\r\n            <!-- Collapse/Expand toggle -->\r\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n                (keydown.enter)=\"toggleSidebar()\">\r\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n                </cide-ele-icon>\r\n            </div> <!-- Main navigation icons - Enhanced Design -->\r\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n                @for (core_system_module_item of core_system_module(); track $index) {\r\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n                    tooltipPlacement=\"right\"\r\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n                    <!-- Notification Badge with enhanced design -->\r\n                    @if (core_system_module_item?.syme_ping) {\r\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\"\r\n                        style=\"background-color: var(--cide-theme-error-color);\">\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Enhanced icon with better visual effects -->\r\n                    <div\r\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n                                tw-border-2 tw-border-transparent\r\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n                        <cide-ele-icon type=\"box\" size=\"xs\"\r\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n                        </cide-ele-icon>\r\n                    </div>\r\n\r\n                    <!-- Modern active indicator -->\r\n                    @if (activeModuleId === core_system_module_item._id) {\r\n                    <div\r\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\">\r\n                    </div>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div> <!-- Second tier sidebar (Expanded view) -->\r\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n            <!-- Header section with search and options -->\r\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\r\n                <!-- Title with back button - Clean layout without online indicator -->\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\r\n                    <button\r\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\"\r\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n                            getActiveModuleIcon() }}</cide-ele-icon>\r\n                    </button>\r\n                    <div class=\"tw-flex-1 tw-min-w-0\">\r\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n                        </h2>\r\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n                            Module Dashboard\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Search and options -->\r\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n                        </cide-ele-input>\r\n                        <div\r\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\">\r\n                            \u2318K</div>\r\n                    </div>\r\n                    <button\r\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\"\r\n                        (click)=\"toggleOptions()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n                    </button>\r\n\r\n                    <!-- Options dropdown menu -->\r\n                    <div *ngIf=\"showOptions()\"\r\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\">\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n                                Refresh\r\n                            </a>\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n                                Sync settings\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n                                Help & support\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Menu items with categories -->\r\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n                <!-- Search results if searching -->\r\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\r\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Only show these sections if not searching -->\r\n                <ng-container *ngIf=\"!searchText()\">\r\n                    <!-- Loading state -->\r\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n                    </div>\r\n\r\n                    <!-- Dynamic menu tree -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\r\n                        [class.animate-in]=\"animateSections()[0]\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n                    </div>\r\n\r\n                    <!-- Empty state -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n                        class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- Recursive menu template -->\r\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n                    <div [class.tw-ml-0]=\"level > 0\">\r\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n                            <!-- Title type items (section headers) -->\r\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n                                    menu.syme_title }}</h3>\r\n                                <!-- Render children of title -->\r\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n\r\n                            <!-- Section type items (collapsible sections) -->\r\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n                                <!-- Section header (clickable to expand/collapse) -->\r\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n                                    (keydown.space)=\"toggleSection(menu._id)\"\r\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n                                    <!-- Section Icon (left side, like other menu items) -->\r\n                                    <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n                                    <!-- Section Title -->\r\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n                                        }}</span>\r\n\r\n                                    <!-- Right side icons container -->\r\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n                                        <!-- Child Count Badge -->\r\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\r\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\">\r\n                                            {{ menu.children.length }}\r\n                                        </span>\r\n\r\n                                        <!-- Expand/Collapse Icon (right side) -->\r\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\r\n                                    </div>\r\n                                </button>\r\n\r\n                                <!-- Section Content (collapsible) -->\r\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Menu type items (clickable links) -->\r\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n                                role=\"button\"\r\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\r\n                            </a>\r\n\r\n                            <!-- Render nested children for menu items -->\r\n                            <ng-container\r\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n            <!-- Notification panel (overlays content when shown) -->\r\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n                        (click)=\"toggleNotificationsPanel()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"tw-p-4\">\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n                        <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n                    </div>\r\n\r\n                    <div class=\"tw-space-y-3\">\r\n                        <div\r\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n                                        with improved visualizations.</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n                                    </div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Storage info at bottom -->\r\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\r\n                <!-- for info display -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px)}.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%;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:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}.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}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
+                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\r\n    <!-- First tier sidebar (Icon only) -->\r\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\r\n        <!-- Scrollable content -->\r\n        <div class=\"sidebar-scroll-content\">\r\n            <!-- Collapse/Expand toggle -->\r\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\r\n                (keydown.enter)=\"toggleSidebar()\">\r\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\r\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\r\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\r\n                </cide-ele-icon>\r\n            </div> <!-- Main navigation icons - Enhanced Design -->\r\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\r\n                @for (core_system_module_item of core_system_module(); track $index) {\r\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\r\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\r\n                    tooltipPlacement=\"right\"\r\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\r\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\r\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\r\n\r\n                    <!-- Notification Badge with enhanced design -->\r\n                    @if (core_system_module_item?.syme_ping) {\r\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\"\r\n                        style=\"background-color: var(--cide-theme-error-color);\">\r\n                    </div>\r\n                    }\r\n\r\n                    <!-- Enhanced icon with better visual effects -->\r\n                    <div\r\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\r\n                                tw-border-2 tw-border-transparent\r\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\r\n                        <cide-ele-icon type=\"box\" size=\"xs\"\r\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\r\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\r\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\r\n                        </cide-ele-icon>\r\n                    </div>\r\n\r\n                    <!-- Modern active indicator -->\r\n                    @if (activeModuleId === core_system_module_item._id) {\r\n                    <div\r\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\">\r\n                    </div>\r\n                    }\r\n                </div>\r\n                }\r\n            </div>\r\n        </div>\r\n    </div> <!-- Second tier sidebar (Expanded view) -->\r\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\r\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\r\n            <!-- Header section with search and options -->\r\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\r\n                <!-- Title with back button - Clean layout without online indicator -->\r\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\r\n                    <button\r\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\"\r\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\r\n                            getActiveModuleIcon() }}</cide-ele-icon>\r\n                    </button>\r\n                    <div class=\"tw-flex-1 tw-min-w-0\">\r\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\r\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\r\n                        </h2>\r\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\r\n                            Module Dashboard\r\n                        </p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Search and options -->\r\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\r\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\r\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\r\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\r\n                        </cide-ele-input>\r\n                        <div\r\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\">\r\n                            \u2318K</div>\r\n                    </div>\r\n                    <button\r\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\"\r\n                        (click)=\"toggleOptions()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\r\n                    </button>\r\n\r\n                    <!-- Options dropdown menu -->\r\n                    <div *ngIf=\"showOptions()\"\r\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\">\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\r\n                                Refresh\r\n                            </a>\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\r\n                                Sync settings\r\n                            </a>\r\n                        </div>\r\n                        <div class=\"tw-py-1\">\r\n                            <a href=\"#\"\r\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\">\r\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\r\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\r\n                                Help & support\r\n                            </a>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Menu items with categories -->\r\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\r\n                <!-- Search results if searching -->\r\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\r\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\r\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\r\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\r\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\r\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\r\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\r\n                        </a>\r\n                    </div>\r\n\r\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\r\n                    </div>\r\n                </div>\r\n\r\n                <!-- Only show these sections if not searching -->\r\n                <ng-container *ngIf=\"!searchText()\">\r\n                    <!-- Loading state -->\r\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\r\n                    </div>\r\n\r\n                    <!-- Dynamic menu tree -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\r\n                        [class.animate-in]=\"animateSections()[0]\">\r\n                        <ng-container\r\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\r\n                    </div>\r\n\r\n                    <!-- Empty state -->\r\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\r\n                        class=\"tw-p-4 tw-text-center\">\r\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\r\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\r\n                        </div>\r\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\r\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\r\n                    </div>\r\n                </ng-container>\r\n\r\n                <!-- Recursive menu template -->\r\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\r\n                    <div [class.tw-ml-0]=\"level > 0\">\r\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\r\n                            <!-- Title type items (section headers) -->\r\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-3\">\r\n                                <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-2\">{{\r\n                                    menu.syme_title }}</h3>\r\n                                <!-- Render children of title -->\r\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </ng-container>\r\n                            </div>\r\n\r\n                            <!-- Section type items (collapsible sections) -->\r\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\r\n                                <!-- Section header (clickable to expand/collapse) -->\r\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\r\n                                    (keydown.space)=\"toggleSection(menu._id)\"\r\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\r\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\r\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\r\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\r\n\r\n                                    <!-- Section Icon (left side, like other menu items) -->\r\n                                    <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\" size=\"xs\">{{\r\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\r\n\r\n                                    <!-- Section Title -->\r\n                                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-800\">{{ menu.syme_title\r\n                                        }}</span>\r\n\r\n                                    <!-- Right side icons container -->\r\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-2\">\r\n                                        <!-- Child Count Badge -->\r\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\r\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\">\r\n                                            {{ menu.children.length }}\r\n                                        </span>\r\n\r\n                                        <!-- Expand/Collapse Icon (right side) -->\r\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\r\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\r\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\r\n                                    </div>\r\n                                </button>\r\n\r\n                                <!-- Section Content (collapsible) -->\r\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\r\n                                    class=\"section-content tw-mt-2 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-3\"\r\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\r\n                                    <ng-container\r\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                                </div>\r\n                            </div>\r\n\r\n                            <!-- Menu type items (clickable links) -->\r\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\r\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\r\n                                role=\"button\"\r\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\r\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\r\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\r\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\r\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\r\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\r\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\r\n                            </a>\r\n\r\n                            <!-- Render nested children for menu items -->\r\n                            <ng-container\r\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\r\n                                <ng-container\r\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\r\n                            </ng-container>\r\n                        </div>\r\n                    </div>\r\n                </ng-template>\r\n            </div>\r\n\r\n            <!-- Notification panel (overlays content when shown) -->\r\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\r\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\r\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\r\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\r\n                        (click)=\"toggleNotificationsPanel()\">\r\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\r\n                    </button>\r\n                </div>\r\n\r\n                <div class=\"tw-p-4\">\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\r\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\r\n                        <button class=\"tw-text-xs tw-text-blue-500\">Mark all as read</button>\r\n                    </div>\r\n\r\n                    <div class=\"tw-space-y-3\">\r\n                        <div\r\n                            class=\"notification-item tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border-l-4 tw-border-blue-500\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">notifications</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New feature available</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Try our new analytics dashboard\r\n                                        with improved visualizations.</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">Just now</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n\r\n                        <div class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-border-transparent\">\r\n                            <div class=\"tw-flex tw-gap-3\">\r\n                                <div\r\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\">\r\n                                    <cide-ele-icon type=\"none\" size=\"xs\">person_add</cide-ele-icon>\r\n                                </div>\r\n                                <div class=\"tw-flex-1\">\r\n                                    <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">New team member</div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Jane Smith has joined your team.\r\n                                    </div>\r\n                                    <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">2 hours ago</div>\r\n                                </div>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n\r\n            <!-- Storage info at bottom -->\r\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\r\n                <!-- for info display -->\r\n            </div>\r\n        </div>\r\n    </div>\r\n\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\r\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\r\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px)}.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%;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 var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:#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:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:#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 var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,#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:var(--cide-theme-border-color) transparent;flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-theme-border-color);border-radius:20px;opacity:.5}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-theme-icon-color);opacity:.7}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:transparent}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:#d1d5db80;border-radius:20px}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:#9ca3af80}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}:root[data-theme=dark] *::-webkit-scrollbar-thumb,:root.dark-mode *::-webkit-scrollbar-thumb{background-color:#47556980}:root[data-theme=dark] *:hover::-webkit-scrollbar-thumb,:root.dark-mode *:hover::-webkit-scrollbar-thumb{background-color:#64748b99}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3702,8 +3831,8 @@ class CideLytSidedrawerWrapperComponent {
     }
     ngOnInit() {
         // Initialize the component map (You'd likely populate this from a config or service)
-        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CMszUJYF.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CJL8zTEz.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-ZCQepxKt.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-MA26_cUn.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4226,7 +4355,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-LRKeCj1z.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-BlSTPcdu.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -5794,4 +5923,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-qWunqMqT.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-COUO1y65.mjs.map