npm - cloud-ide-layout - Versions diffs - 1.0.92 → 1.0.94 - Mend

cloud-ide-layout 1.0.92 → 1.0.94

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-CyEZSzvb.mjs → cloud-ide-layout-cloud-ide-layout-D46EBbU_.mjs} RENAMED Viewed

@@ -7,7 +7,7 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
 import * as i2 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
 import { Title } from '@angular/platform-browser';
-import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, WebSocketNotificationService, NotificationApiService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
+import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, CideThemeService, WebSocketNotificationService, NotificationApiService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
 import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
@@ -1266,7 +1266,7 @@ class CideLytFloatingEntitySelectionService {
         }
         try {
             // Use relative import to avoid circular dependency
-            const module = await import('./cloud-ide-layout-floating-entity-selection.component-D3QqLVUa.mjs');
+            const module = await import('./cloud-ide-layout-floating-entity-selection.component-CuU4517x.mjs');
             if (module.CideLytFloatingEntitySelectionComponent) {
                 this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
                 console.log('✅ Entity selection component registered successfully');
@@ -1359,6 +1359,8 @@ class CideLytHeaderWrapperComponent {
     financialYearService = inject(FINANCIAL_YEAR_SERVICE_TOKEN);
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     destroyRef = inject(DestroyRef);
+    // Inject theme service for independent theme management
+    themeService = inject(CideThemeService);
     // Signals for year data
     financialYears = signal([], ...(ngDevMode ? [{ debugName: "financialYears" }] : []));
     academicYears = signal([], ...(ngDevMode ? [{ debugName: "academicYears" }] : []));
@@ -1370,7 +1372,7 @@ class CideLytHeaderWrapperComponent {
     notifications = signal([], ...(ngDevMode ? [{ debugName: "notifications" }] : []));
     unreadCount = computed(() => this.wsNotificationService?.unreadNotificationsCount() || 0, ...(ngDevMode ? [{ debugName: "unreadCount" }] : []));
     isNotificationDropdownOpen = signal(false, ...(ngDevMode ? [{ debugName: "isNotificationDropdownOpen" }] : []));
-    notificationItems = [];
+    notificationItems = signal([], ...(ngDevMode ? [{ debugName: "notificationItems" }] : []));
     // Animation and undo state
     animatingNotifications = signal(new Set(), ...(ngDevMode ? [{ debugName: "animatingNotifications" }] : []));
     recentlyRemovedNotifications = signal(new Map(), ...(ngDevMode ? [{ debugName: "recentlyRemovedNotifications" }] : []));
@@ -1504,21 +1506,16 @@ class CideLytHeaderWrapperComponent {
         });
     }
     ngOnInit() {
-        // Initialize dark mode from localStorage
-        if (typeof document !== 'undefined' && typeof localStorage !== 'undefined') {
-            const isDarkMode = localStorage.getItem('cide-dark-mode') === 'true';
-            this.darkMode.set(isDarkMode);
-            if (isDarkMode) {
-                const root = document.documentElement;
-                const body = document.body;
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-            }
+        // Subscribe to theme service for reactive theme updates
+        this.themeService.getEffectiveTheme$()
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(theme => {
+            this.darkMode.set(theme === 'dark');
             // Update theme menu item based on current state
             this.updateThemeMenuItem();
-        }
+        });
+        // Set initial darkMode state from theme service
+        this.darkMode.set(this.themeService.isDarkMode());
         this.loadFinancialYears();
         this.loadAcademicYears();
         // Initialize notification dropdown with empty state
@@ -1675,7 +1672,7 @@ class CideLytHeaderWrapperComponent {
         // For now, show first 20 notifications (increased from 10 for better UX)
         const notificationsToShow = notifs.slice(0, 20);
         // Map notifications to dropdown items
-        this.notificationItems = notificationsToShow.map(notif => ({
+        const items = notificationsToShow.map(notif => ({
             id: notif.id,
             label: notif.title,
             icon: this.getNotificationIcon(notif.type),
@@ -1686,14 +1683,14 @@ class CideLytHeaderWrapperComponent {
         // Add action buttons if there are notifications
         if (notifs.length > 0) {
             // Add divider before actions
-            this.notificationItems.push({
+            items.push({
                 id: 'divider-1',
                 label: '',
                 divider: true
             });
             // Add "Mark All as Read" if there are unread notifications
             if (unreadCount > 0) {
-                this.notificationItems.push({
+                items.push({
                     id: 'mark-all-read',
                     label: 'Mark All as Read',
                     icon: 'done_all',
@@ -1701,7 +1698,7 @@ class CideLytHeaderWrapperComponent {
                 });
             }
             // Add "Clear All" option (only if there are notifications)
-            this.notificationItems.push({
+            items.push({
                 id: 'clear-all',
                 label: 'Clear All',
                 icon: 'clear_all',
@@ -1710,7 +1707,7 @@ class CideLytHeaderWrapperComponent {
                 hoverBgColor: 'hover:tw-bg-red-50'
             });
             // Add divider before "View All"
-            this.notificationItems.push({
+            items.push({
                 id: 'divider-2',
                 label: '',
                 divider: true
@@ -1719,7 +1716,7 @@ class CideLytHeaderWrapperComponent {
             const viewAllLabel = notifs.length > 20
                 ? `View All Notifications (${notifs.length})`
                 : 'View All Notifications';
-            this.notificationItems.push({
+            items.push({
                 id: 'view-all',
                 label: viewAllLabel,
                 icon: 'list',
@@ -1727,14 +1724,16 @@ class CideLytHeaderWrapperComponent {
             });
         }
         else {
-            this.notificationItems = [{
-                    id: 'no-notifications',
-                    label: 'No notifications',
-                    icon: 'notifications_off',
-                    iconColor: 'tw-text-gray-400',
-                    disabled: true
-                }];
+            items.push({
+                id: 'no-notifications',
+                label: 'No notifications',
+                icon: 'notifications_off',
+                iconColor: 'tw-text-gray-400',
+                disabled: true
+            });
         }
+        // Set the signal with the complete array
+        this.notificationItems.set(items);
     }
     /**
      * Get icon for notification type
@@ -2483,28 +2482,10 @@ class CideLytHeaderWrapperComponent {
      * Toggle dark mode theme
      */
     toggleTheme() {
-        this.darkMode.set(!this.darkMode());
-        // Apply dark mode to root element (html/body) for global theme switching
-        if (typeof document !== 'undefined') {
-            const root = document.documentElement;
-            const body = document.body;
-            if (this.darkMode()) {
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-                // Save to localStorage
-                localStorage.setItem('cide-dark-mode', 'true');
-            }
-            else {
-                root.removeAttribute('data-theme');
-                root.classList.remove('dark-mode');
-                body.removeAttribute('data-theme');
-                body.classList.remove('dark-mode');
-                // Remove from localStorage
-                localStorage.removeItem('cide-dark-mode');
-            }
-        }
+        // Use the CIDE Element Library theme service for theme management
+        // The service handles DOM manipulation, localStorage, and theme application
+        this.themeService.toggleTheme();
+        // Note: darkMode signal is automatically updated via the subscription in ngOnInit
     }
     /**
      * Update theme menu item label and icon based on current theme
@@ -2582,12 +2563,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 dark:tw-bg-gray-800 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 dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 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 dark:tw-text-gray-100 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 dark: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 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 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 dark:[&::-webkit-scrollbar-track]:tw-bg-gray-700 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 dark:[&::-webkit-scrollbar-thumb]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 dark:[&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-400 [&::-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 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 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.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"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 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 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 dark:tw-bg-blue-400 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 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 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 dark:tw-text-gray-400 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 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 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 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 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 dark:tw-text-blue-300\">{{ 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 dark:tw-text-gray-100 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 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 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 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 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 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 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 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}: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,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}: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"] }] });
+    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 dark:tw-bg-gray-800 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 dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 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 dark:tw-text-gray-100 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 dark: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 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 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 dark:[&::-webkit-scrollbar-track]:tw-bg-gray-700 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 dark:[&::-webkit-scrollbar-thumb]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 dark:[&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-400 [&::-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 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 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.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"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 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 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 dark:tw-bg-blue-400 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 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 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 dark:tw-text-gray-400 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 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 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 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 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 dark:tw-text-blue-300\">{{ 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 dark:tw-text-gray-100 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 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 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 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 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 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 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 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}: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,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}: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 dark:tw-bg-gray-800 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 dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 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 dark:tw-text-gray-100 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 dark: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 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 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 dark:[&::-webkit-scrollbar-track]:tw-bg-gray-700 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 dark:[&::-webkit-scrollbar-thumb]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 dark:[&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-400 [&::-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 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 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.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"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 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 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 dark:tw-bg-blue-400 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 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 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 dark:tw-text-gray-400 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 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 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 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 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 dark:tw-text-blue-300\">{{ 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 dark:tw-text-gray-100 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 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 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 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 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 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 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 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}: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,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}: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"] }]
+                        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 dark:tw-bg-gray-800 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 dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 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 dark:tw-text-gray-100 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 dark: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 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 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 dark:[&::-webkit-scrollbar-track]:tw-bg-gray-700 [&::-webkit-scrollbar-thumb]:tw-bg-blue-400 dark:[&::-webkit-scrollbar-thumb]:tw-bg-blue-500 [&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-500 dark:[&::-webkit-scrollbar-thumb:hover]:tw-bg-blue-400 [&::-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 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 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.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"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 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 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 dark:tw-bg-blue-400 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 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 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 dark:tw-text-gray-400 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 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 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 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 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 dark:tw-text-blue-300\">{{ 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 dark:tw-text-gray-100 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 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 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 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 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 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 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 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 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,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));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 rgb(var(--tw-gray-200-rgb) / .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,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));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:rgb(var(--tw-gray-50-rgb) / .8);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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:rgb(var(--tw-white-rgb) / 1);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-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}: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,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}: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']
@@ -2865,6 +2846,7 @@ class CideLytSidebarWrapperComponent {
     appState = inject(AppStateHelperService);
     router = inject(Router);
     userStatusService = inject(CideLytUserStatusService);
+    themeService = inject(CideThemeService);
     constructor() {
         // React to active module changes using signal effects
         effect(() => {
@@ -3113,28 +3095,11 @@ class CideLytSidebarWrapperComponent {
         }
     }
     toggleTheme() {
-        this.darkMode.set(!this.darkMode());
-        // Apply dark mode to root element (html/body) for global theme switching
-        if (typeof document !== 'undefined') {
-            const root = document.documentElement;
-            const body = document.body;
-            if (this.darkMode()) {
-                root.setAttribute('data-theme', 'dark');
-                root.classList.add('dark-mode');
-                body.setAttribute('data-theme', 'dark');
-                body.classList.add('dark-mode');
-                // Save to localStorage
-                localStorage.setItem('cide-dark-mode', 'true');
-            }
-            else {
-                root.removeAttribute('data-theme');
-                root.classList.remove('dark-mode');
-                body.removeAttribute('data-theme');
-                body.classList.remove('dark-mode');
-                // Remove from localStorage
-                localStorage.removeItem('cide-dark-mode');
-            }
-        }
+        // Use the CIDE Element Library theme service for theme management
+        // The service handles DOM manipulation, localStorage, and theme application
+        this.themeService.toggleTheme();
+        // Update local darkMode signal
+        this.darkMode.set(this.themeService.isDarkMode());
     }
     toggleOptions() {
         this.showOptions.set(!this.showOptions());
@@ -3915,8 +3880,8 @@ class CideLytSidedrawerWrapperComponent {
     }
     ngOnInit() {
         // Initialize the component map (You'd likely populate this from a config or service)
-        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-BVpmljBj.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-C6j_3h1a.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-D-qC2FCM.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-DtB7gIrr.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4439,7 +4404,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-BbM68mdM.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-Cbk5odwJ.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -6007,4 +5972,4 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
  */
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-CyEZSzvb.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-D46EBbU_.mjs.map