cloud-ide-layout 1.0.310 → 1.0.315

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-CtwH_gd2.mjs → cloud-ide-layout-cloud-ide-layout-CHxwtcdw.mjs}

@@ -1,5 +1,7 @@
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, computed, effect, DestroyRef, Component, Injector, runInInjectionContext, ViewChild, ElementRef, HostListener, ChangeDetectionStrategy, ComponentRef, ViewContainerRef, ViewChildren, viewChild, input, InjectionToken, PLATFORM_ID, output } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule, NgClass, NgFor, NgIf, NgComponentOutlet, isPlatformBrowser } from '@angular/common';
 import { HttpClient } from '@angular/common/http';
 import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, commonRoutesUrl, designConfigRoutesUrl, generateStringFromObject } from 'cloud-ide-lms-model';
 import { BehaviorSubject, Observable, throwError, of, interval, take as take$1, firstValueFrom } from 'rxjs';
@@ -7,16 +9,13 @@ import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged }
 import * as i2$1 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule, ActivatedRoute } from '@angular/router';
 import { Title, DomSanitizer } from '@angular/platform-browser';
-import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, ConfirmationService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
-import * as i1 from '@angular/common';
-import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
+import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, ConfirmationService, WebSocketNotificationService, NotificationApiService, OPEN_AI_ASSISTANT_ACTION, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, FloatingContainerShortcutsService, CIDE_AI_DRAWER_COMPONENT, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
 import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN, CideSharedOrgStructureComponent } from 'cloud-ide-shared';
 import * as i2 from '@angular/forms';
 import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, transition, style, animate } from '@angular/animations';
 import { merge } from 'lodash-es';
-import { AiDrawerComponent } from 'cloud-ide-ai';
 import { CloudIdeAuthService } from 'cloud-ide-auth';
 
 class CloudIdeLayoutService {
@@ -2507,6 +2506,7 @@ class CideLytHeaderWrapperComponent {
     floatingContainerService = inject(CideEleFloatingContainerService);
     notificationSettingsService = inject(NotificationSettingsService);
     sidebarService = inject(CideLytSidebarService);
+    openAiAction = inject(OPEN_AI_ASSISTANT_ACTION, { optional: true });
     // Track sidebar collapsed state
     isSidebarCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "isSidebarCollapsed" }] : []));
     // Track sidebar visibility state
@@ -3786,6 +3786,12 @@ class CideLytHeaderWrapperComponent {
             this.notificationSettingsService.playNotificationSound();
         }
     }
+    /**
+     * Open AI Assistant (navigate or toggle drawer when OPEN_AI_ASSISTANT_ACTION is provided).
+     */
+    openAiAssistant() {
+        this.openAiAction?.();
+    }
     /**
      * Open notification settings in floating container
      */
@@ -3819,12 +3825,12 @@ class CideLytHeaderWrapperComponent {
         this.floatingContainerService.bringToFront(containerId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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        <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n        @if (isSidebarVisible()) {\n        <button\n            class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n            (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n            role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n            [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n            <cide-ele-icon size=\"sm\" type=\"none\">\n                {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n            </cide-ele-icon>\n        </button>\n        }\n\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        <!-- Financial Year Dropdown -->\n        @if (!isStudent()) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        }\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\" (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 #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\" [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\n                class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n                <!-- Header - Fixed/Sticky -->\n                <div\n                    class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 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\n                            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\n                                class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n                                Notifications</h3>\n                            @if (unreadCount() > 0) {\n                            <span\n                                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\">{{\n                                unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n                            (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n                            title=\"Notification Settings\">\n                            <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n                        </button>\n                        @if (unreadCount() > 0) {\n                        <button 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()\" title=\"Mark all as read\">\n                            <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                        </button>\n                        }\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\" 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\n                    class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n                    @if (notifications().length === 0) {\n                    <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n                        <cide-ele-icon\n                            class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n                        <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n                            notifications yet</p>\n                        <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n                            up!</p>\n                    </div>\n                    } @else {\n                    @for (notif of notifications().slice(0, 15); track notif.id) {\n                    <div 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 tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\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-blue-50]=\"!isNotificationRead(notif)\"\n                        [class.dark:tw-bg-gray-700]=\"!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)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                        (click)=\"onNotificationItemClick(notif)\">\n                        <!-- Icon/Avatar -->\n                        <div class=\"tw-flex-shrink-0 tw-relative\">\n                            <div\n                                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 cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                    [altText]=\"getNotificationName(notif)\" 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)\n                                    }}</cide-ele-icon>\n                                }\n                            </div>\n                            <!-- Green online indicator -->\n                            <div\n                                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\">\n                            </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\n                                        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\">{{\n                                            getNotificationName(notif) }}</span><span\n                                            class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n                                            getNotificationAction(notif) }}</span>\n                                    </h4>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n                                        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\n                                        class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n                                    </div>\n                                    }\n                                    @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                    <button 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\n                                class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 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\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n                                <p\n                                    class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n                                    {{ notif.data.comment }}</p>\n                            </div>\n                            }\n\n                            <!-- File -->\n                            @if (notif.data?.file) {\n                            <div\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    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-700 dark:tw-text-blue-300\">{{\n                                        getFileIcon(notif.data.file.type) }}</span>\n                                </div>\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <p\n                                        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\">\n                                        {{ notif.data.file.name }}</p>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n                                        notif.data.file.size }}</p>\n                                </div>\n                                <cide-ele-icon\n                                    class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 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\"\n                                    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-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 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\"\n                                    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\" [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'\"\n                            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:200;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-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.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;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.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){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:24px!important;height:24px!important;background:transparent!important;padding:0!important;margin-right:.25rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:20px;height:20px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:26px;height:26px;margin:0}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:22px;height:22px;font-size:.6rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1.1rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\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", "step", "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.3.15", 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        <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n        @if (isSidebarVisible()) {\n        <button\n            class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n            (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n            role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n            [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n            <cide-ele-icon size=\"sm\" type=\"none\">\n                {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n            </cide-ele-icon>\n        </button>\n        }\n\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        <!-- Financial Year Dropdown -->\n        @if (!isStudent()) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        }\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\" (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        <!-- AI Assistant button (when OPEN_AI_ASSISTANT_ACTION is provided) -->\n        @if (openAiAction) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <button type=\"button\"\n                class=\"header-icon tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/30 tw-transition-colors tw-cursor-pointer\"\n                (click)=\"openAiAssistant()\" (keydown.enter)=\"openAiAssistant()\" (keydown.space)=\"openAiAssistant()\"\n                tabindex=\"0\" role=\"button\" aria-label=\"Open AI Assistant\" title=\"Open AI Assistant (Alt + A)\">\n                <cide-ele-icon>smart_toy</cide-ele-icon>\n            </button>\n            <div class=\"header-tooltip\">AI Assistant (Alt + A)</div>\n        </div>\n        }\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\" [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\n                class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n                <!-- Header - Fixed/Sticky -->\n                <div\n                    class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 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\n                            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\n                                class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n                                Notifications</h3>\n                            @if (unreadCount() > 0) {\n                            <span\n                                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\">{{\n                                unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n                            (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n                            title=\"Notification Settings\">\n                            <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n                        </button>\n                        @if (unreadCount() > 0) {\n                        <button 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()\" title=\"Mark all as read\">\n                            <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                        </button>\n                        }\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\" 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\n                    class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n                    @if (notifications().length === 0) {\n                    <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n                        <cide-ele-icon\n                            class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n                        <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n                            notifications yet</p>\n                        <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n                            up!</p>\n                    </div>\n                    } @else {\n                    @for (notif of notifications().slice(0, 15); track notif.id) {\n                    <div 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 tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\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-blue-50]=\"!isNotificationRead(notif)\"\n                        [class.dark:tw-bg-gray-700]=\"!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)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                        (click)=\"onNotificationItemClick(notif)\">\n                        <!-- Icon/Avatar -->\n                        <div class=\"tw-flex-shrink-0 tw-relative\">\n                            <div\n                                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 cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                    [altText]=\"getNotificationName(notif)\" 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)\n                                    }}</cide-ele-icon>\n                                }\n                            </div>\n                            <!-- Green online indicator -->\n                            <div\n                                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\">\n                            </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\n                                        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\">{{\n                                            getNotificationName(notif) }}</span><span\n                                            class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n                                            getNotificationAction(notif) }}</span>\n                                    </h4>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n                                        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\n                                        class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n                                    </div>\n                                    }\n                                    @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                    <button 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\n                                class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 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\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n                                <p\n                                    class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n                                    {{ notif.data.comment }}</p>\n                            </div>\n                            }\n\n                            <!-- File -->\n                            @if (notif.data?.file) {\n                            <div\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    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-700 dark:tw-text-blue-300\">{{\n                                        getFileIcon(notif.data.file.type) }}</span>\n                                </div>\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <p\n                                        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\">\n                                        {{ notif.data.file.name }}</p>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n                                        notif.data.file.size }}</p>\n                                </div>\n                                <cide-ele-icon\n                                    class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 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\"\n                                    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-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 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\"\n                                    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\" [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'\"\n                            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:200;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-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.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;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.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){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;background:transparent!important;padding:0!important;margin-right:.125rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:18px;height:18px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:22px;height:22px;margin:0;min-width:22px;min-height:22px}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:20px;height:20px;font-size:.55rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1rem!important}.header-dropdown-container cide-ele-icon{font-size:.9rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\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", "step", "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.3.15", 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        <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n        @if (isSidebarVisible()) {\n        <button\n            class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n            (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n            role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n            [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n            <cide-ele-icon size=\"sm\" type=\"none\">\n                {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n            </cide-ele-icon>\n        </button>\n        }\n\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        <!-- Financial Year Dropdown -->\n        @if (!isStudent()) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        }\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\" (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 #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\" [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\n                class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n                <!-- Header - Fixed/Sticky -->\n                <div\n                    class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 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\n                            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\n                                class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n                                Notifications</h3>\n                            @if (unreadCount() > 0) {\n                            <span\n                                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\">{{\n                                unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n                            (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n                            title=\"Notification Settings\">\n                            <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n                        </button>\n                        @if (unreadCount() > 0) {\n                        <button 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()\" title=\"Mark all as read\">\n                            <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                        </button>\n                        }\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\" 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\n                    class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n                    @if (notifications().length === 0) {\n                    <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n                        <cide-ele-icon\n                            class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n                        <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n                            notifications yet</p>\n                        <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n                            up!</p>\n                    </div>\n                    } @else {\n                    @for (notif of notifications().slice(0, 15); track notif.id) {\n                    <div 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 tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\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-blue-50]=\"!isNotificationRead(notif)\"\n                        [class.dark:tw-bg-gray-700]=\"!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)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                        (click)=\"onNotificationItemClick(notif)\">\n                        <!-- Icon/Avatar -->\n                        <div class=\"tw-flex-shrink-0 tw-relative\">\n                            <div\n                                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 cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                    [altText]=\"getNotificationName(notif)\" 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)\n                                    }}</cide-ele-icon>\n                                }\n                            </div>\n                            <!-- Green online indicator -->\n                            <div\n                                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\">\n                            </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\n                                        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\">{{\n                                            getNotificationName(notif) }}</span><span\n                                            class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n                                            getNotificationAction(notif) }}</span>\n                                    </h4>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n                                        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\n                                        class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n                                    </div>\n                                    }\n                                    @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                    <button 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\n                                class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 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\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n                                <p\n                                    class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n                                    {{ notif.data.comment }}</p>\n                            </div>\n                            }\n\n                            <!-- File -->\n                            @if (notif.data?.file) {\n                            <div\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    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-700 dark:tw-text-blue-300\">{{\n                                        getFileIcon(notif.data.file.type) }}</span>\n                                </div>\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <p\n                                        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\">\n                                        {{ notif.data.file.name }}</p>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n                                        notif.data.file.size }}</p>\n                                </div>\n                                <cide-ele-icon\n                                    class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 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\"\n                                    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-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 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\"\n                                    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\" [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'\"\n                            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:200;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-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.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;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.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){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:24px!important;height:24px!important;background:transparent!important;padding:0!important;margin-right:.25rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:20px;height:20px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:26px;height:26px;margin:0}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:22px;height:22px;font-size:.6rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1.1rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\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        <!-- Sidebar Toggle Button - Only visible on small screens when sidebar is visible -->\n        @if (isSidebarVisible()) {\n        <button\n            class=\"header-sidebar-toggle tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-gray-900 tw-transition-all tw-duration-300 tw-cursor-pointer tw-mr-1 md:!tw-hidden\"\n            (click)=\"toggleSidebar()\" (keydown.enter)=\"toggleSidebar()\" (keydown.space)=\"toggleSidebar()\" tabindex=\"0\"\n            role=\"button\" [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\"\n            [attr.title]=\"isSidebarCollapsed() ? 'Expand sidebar menu' : 'Collapse sidebar menu'\">\n            <cide-ele-icon size=\"sm\" type=\"none\">\n                {{ isSidebarCollapsed() ? 'menu' : 'menu_open' }}\n            </cide-ele-icon>\n        </button>\n        }\n\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        <!-- Financial Year Dropdown -->\n        @if (!isStudent()) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\" (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        }\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\" (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        <!-- AI Assistant button (when OPEN_AI_ASSISTANT_ACTION is provided) -->\n        @if (openAiAction) {\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <button type=\"button\"\n                class=\"header-icon tw-flex tw-items-center tw-justify-center tw-rounded-lg tw-text-gray-600 hover:tw-text-blue-600 hover:tw-bg-blue-50 dark:hover:tw-bg-blue-900/30 tw-transition-colors tw-cursor-pointer\"\n                (click)=\"openAiAssistant()\" (keydown.enter)=\"openAiAssistant()\" (keydown.space)=\"openAiAssistant()\"\n                tabindex=\"0\" role=\"button\" aria-label=\"Open AI Assistant\" title=\"Open AI Assistant (Alt + A)\">\n                <cide-ele-icon>smart_toy</cide-ele-icon>\n            </button>\n            <div class=\"header-tooltip\">AI Assistant (Alt + A)</div>\n        </div>\n        }\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown #notificationDropdown [items]=\"notificationItems()\" [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\" [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\n                class=\"tw-w-full tw-min-w-0 sm:tw-min-w-[380px] tw-max-w-[calc(100vw-24px)] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden tw-text-gray-900 dark:tw-text-gray-100\">\n                <!-- Header - Fixed/Sticky -->\n                <div\n                    class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-white dark:tw-bg-gray-800 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\n                            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\n                                class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">\n                                Notifications</h3>\n                            @if (unreadCount() > 0) {\n                            <span\n                                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\">{{\n                                unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200\"\n                            (click)=\"openNotificationSettings(); $event.stopPropagation()\"\n                            title=\"Notification Settings\">\n                            <cide-ele-icon class=\"!tw-text-xs\">settings</cide-ele-icon>\n                        </button>\n                        @if (unreadCount() > 0) {\n                        <button 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()\" title=\"Mark all as read\">\n                            <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                        </button>\n                        }\n                        <button type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-600 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-100 dark:hover:tw-bg-gray-600 hover:tw-text-gray-900 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\" 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\n                    class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\">\n                    @if (notifications().length === 0) {\n                    <div class=\"tw-py-16 tw-px-4 tw-text-center tw-bg-white dark:tw-bg-gray-800\">\n                        <cide-ele-icon\n                            class=\"!tw-text-6xl !tw-text-gray-300 dark:!tw-text-gray-600 tw-mb-3\">notifications_off</cide-ele-icon>\n                        <p class=\"tw-m-0 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400 tw-font-medium\">No\n                            notifications yet</p>\n                        <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-500\">You're all caught\n                            up!</p>\n                    </div>\n                    } @else {\n                    @for (notif of notifications().slice(0, 15); track notif.id) {\n                    <div 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 tw-bg-white dark:tw-bg-gray-800 tw-text-gray-900 dark:tw-text-gray-100\"\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-blue-50]=\"!isNotificationRead(notif)\"\n                        [class.dark:tw-bg-gray-700]=\"!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)\" [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                        (click)=\"onNotificationItemClick(notif)\">\n                        <!-- Icon/Avatar -->\n                        <div class=\"tw-flex-shrink-0 tw-relative\">\n                            <div\n                                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 cideEleFileImage [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                    [altText]=\"getNotificationName(notif)\" 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)\n                                    }}</cide-ele-icon>\n                                }\n                            </div>\n                            <!-- Green online indicator -->\n                            <div\n                                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\">\n                            </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\n                                        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\">{{\n                                            getNotificationName(notif) }}</span><span\n                                            class=\"tw-font-normal tw-text-gray-800 dark:tw-text-gray-300\"> {{\n                                            getNotificationAction(notif) }}</span>\n                                    </h4>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-500 tw-mt-0.5\">{{\n                                        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\n                                        class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\">\n                                    </div>\n                                    }\n                                    @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                    <button 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\n                                class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-700 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\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-500 dark:tw-border-l-blue-500\">\n                                <p\n                                    class=\"tw-m-0 tw-text-[10px] tw-text-gray-800 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">\n                                    {{ notif.data.comment }}</p>\n                            </div>\n                            }\n\n                            <!-- File -->\n                            @if (notif.data?.file) {\n                            <div\n                                class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-100 dark:tw-bg-gray-700 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                <div\n                                    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-700 dark:tw-text-blue-300\">{{\n                                        getFileIcon(notif.data.file.type) }}</span>\n                                </div>\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <p\n                                        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\">\n                                        {{ notif.data.file.name }}</p>\n                                    <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-600 dark:tw-text-gray-400\">{{\n                                        notif.data.file.size }}</p>\n                                </div>\n                                <cide-ele-icon\n                                    class=\"!tw-text-sm !tw-text-blue-600 dark:!tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-700 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\"\n                                    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-800 dark:tw-text-gray-300 hover:tw-bg-gray-100 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\"\n                                    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\" [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'\"\n                            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:200;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-sidebar-toggle{display:flex;align-items:center;justify-content:center;border:none;background:transparent;outline:none;transition:background-color .2s ease;position:relative;flex-shrink:0}.header-sidebar-toggle:hover{background-color:rgb(var(--tw-gray-100-rgb) / .8)}.header-sidebar-toggle:active{background-color:rgb(var(--tw-gray-200-rgb) / .8)}.header-sidebar-toggle:focus-visible{outline:2px solid #3b82f6;outline-offset:2px;border-radius:.5rem}.header-sidebar-toggle cide-ele-icon{transition:transform .2s ease,opacity .2s ease;display:inline-block;transform-origin:center}.header-sidebar-toggle:hover cide-ele-icon{transform:scale(1.1)}:root[data-theme=dark] .header-sidebar-toggle,:root.dark-mode .header-sidebar-toggle{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-sidebar-toggle:hover,:root.dark-mode .header-sidebar-toggle:hover{background-color:var(--cide-theme-hover-bg-color);color:var(--cide-theme-color-brand-primary)}.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;padding-left:2.5rem!important}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon-wrapper{left:.5rem!important;z-index:1}::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:-2px;right:-2px;min-width:18px;height:18px;border-radius:9px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:10px;display:flex!important;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 2px 4px #ef444466;font-weight:700;z-index:10;transition:all .2s ease;line-height:1;border:2px solid #ffffff}.header-icon:hover .header-badge{transform:scale(1.15);box-shadow:0 3px 6px #ef444480}.header-icon.notification-icon{position:relative;overflow:visible}.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){.cide-lyt-header{padding:0 .5rem;flex-wrap:nowrap;min-height:var(--cide-lyt-header-wrapper-height);height:var(--cide-lyt-header-wrapper-height);z-index:10001!important}.header-sidebar-toggle{width:20px!important;height:20px!important;min-width:20px!important;min-height:20px!important;background:transparent!important;padding:0!important;margin-right:.125rem!important}.header-sidebar-toggle:hover{background:transparent!important;color:var(--cide-theme-color-brand-primary)!important}.header-logo-container{padding:0;gap:.25rem!important}.header-logo-container img,.header-logo-container cide-ele-icon{width:18px;height:18px}.cide-lyt-header .tw-text-md{display:block!important;font-size:.7rem!important;font-weight:600!important;max-width:calc(100vw - 120px);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-left:-4px;line-height:normal}@media (min-width: 640px){.cide-lyt-header .tw-text-md{font-size:.75rem!important;max-width:calc(100vw - 180px)}}.header-search-container{display:none}.header-icons-container{gap:.25rem;flex-wrap:nowrap;justify-content:flex-end}.header-icon{width:22px;height:22px;margin:0;min-width:22px;min-height:22px}.header-year-pill{padding:0;font-size:.6rem;min-height:22px;height:22px;border:none;background:transparent;box-shadow:none}.header-year-pill-text{max-width:35px;font-size:.55rem}.profile-avatar{width:20px;height:20px;font-size:.55rem}.header-divider{display:none}.header-dropdown-container{margin:0}.header-badge{min-width:12px;height:12px;font-size:7px;padding:0 2px;top:-1px;right:-1px;border-width:1px}.header-icon cide-ele-icon{font-size:1rem!important}.header-dropdown-container cide-ele-icon{font-size:.9rem!important}}@media (max-width: 480px){.cide-lyt-header{padding:0 .25rem}.cide-lyt-header .tw-text-md{display:inline-block!important;max-width:calc(100vw - 100px);flex:1 1 auto;min-width:0;font-size:.7rem!important}.header-year-pill-text{display:none}.header-year-pill{width:auto;justify-content:center;background:transparent!important;border:none!important;box-shadow:none!important}.header-icons-container{gap:.125rem}}@media (min-width: 769px) and (max-width: 1024px){.header-search-container{max-width:400px;margin:0 1.5rem}.header-icons-container{gap:.75rem}}@media (max-width: 768px) and (orientation: landscape){.cide-lyt-header{min-height:var(--cide-lyt-header-wrapper-height);padding:.375rem .75rem}.header-search-container{order:0;flex:0 1 auto;max-width:250px;margin:0 1rem}}.notification-scroll-container{max-height:450px;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar{width:6px;height:6px}.notification-scroll-container::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.notification-scroll-container::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:3px}.notification-scroll-container::-webkit-scrollbar-thumb:hover{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container{background-color:#fff!important;color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container *{color:inherit}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-900{color:#111827!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-800{color:#1f2937!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-700{color:#374151!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-600{color:#4b5563!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-gray-500{color:#6b7280!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-text-blue-600{color:#2563eb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-white{background-color:#fff!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-50{background-color:#f9fafb!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-gray-100{background-color:#f3f4f6!important}:root:not([data-theme=dark]):not(.dark-mode) .notification-scroll-container .tw-bg-blue-50{background-color:#eff6ff!important}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerTemplate: [{
                 type: ViewChild,
                 args: ['triggerTemplate']
@@ -5569,8 +5575,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-Hn2nrgKY.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-CXPGGtwn.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-BOi1MJHw.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-BUElHERM.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -6608,8 +6614,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             }] } });
 
 class CideLytLayoutWrapperComponent {
+    /** AI drawer component when provided via token (avoids direct cloud-ide-ai import). */
+    aiDrawerComponent = inject(CIDE_AI_DRAWER_COMPONENT, { optional: true });
+    constructor() {
+        // Ensure floating container shortcuts (including AI Alt+A) are registered when layout loads
+        inject(FloatingContainerShortcutsService);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLayoutWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   <cide-ai-drawer></cide-ai-drawer>\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }, { kind: "component", type: AiDrawerComponent, selector: "cide-ai-drawer" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CideLytLayoutWrapperComponent, isStandalone: true, selector: "cide-lyt-layout-wrapper", ngImport: i0, template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   @if (aiDrawerComponent) {\r\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\r\n   }\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"], dependencies: [{ kind: "component", type: CideLytHeaderWrapperComponent, selector: "cide-lyt-header-wrapper" }, { kind: "component", type: CideLytSidebarWrapperComponent, selector: "cide-lyt-sidebar-wrapper" }, { kind: "component", type: CideLytSidedrawerWrapperComponent, selector: "cide-lyt-sidedrawer-wrapper" }, { kind: "component", type: CideLytFooterWrapperComponent, selector: "cide-lyt-footer-wrapper" }, { kind: "component", type: CideLytConsoleWrapperComponent, selector: "cide-lyt-console-wrapper" }, { kind: "ngmodule", type: RouterModule }, { kind: "component", type: CideLytRequestWrapperComponent, selector: "cide-lyt-request-wrapper" }, { kind: "component", type: TabContentComponent, selector: "cide-lyt-tab-content" }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytLayoutWrapperComponent, decorators: [{
             type: Component,
@@ -6622,9 +6634,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         RouterModule,
                         CideLytRequestWrapperComponent,
                         TabContentComponent,
-                        AiDrawerComponent
-                    ], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   <cide-ai-drawer></cide-ai-drawer>\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"] }]
-        }] });
+                        NgComponentOutlet
+                    ], template: "<div class=\"tw-w-full tw-table tw-h-screen tw-relative\" id=\"cide-lyt-layout-wrapper\">\r\n   @if (aiDrawerComponent) {\r\n      <ng-container [ngComponentOutlet]=\"aiDrawerComponent\"></ng-container>\r\n   }\r\n   <!-- We will use here Header  -->\r\n   <cide-lyt-header-wrapper class=\"tw-table-row tw-h-0\"></cide-lyt-header-wrapper>\r\n   <!-- we will use here request tabs -->\r\n   <div class=\"tw-table-row\" id=\"cide-lyt-sidebar-page-wrapper\">\r\n      <div class=\"cide-lyt-sidebar-page-wrapper tw-h-full  tw-w-screen\" id=\"cide-lyt-sidebar-page-inner-wrapper\">\r\n         <!-- We will use here Sidebar -->\r\n         <cide-lyt-sidebar-wrapper id=\"cide-lyt-sidebar-page\"\r\n            class=\"cide-lyt-sidebar-page-hide\"></cide-lyt-sidebar-wrapper>\r\n         <!-- We will use here Router Outlet -->\r\n         <div class=\"cide-lyt-page-wrapper tw-block tw-h-full tw-w-full\" id=\"cide-lyt-page-wrapper\">\r\n            <cide-lyt-request-wrapper class=\"tw-w-[inherit] tw-h-auto\"></cide-lyt-request-wrapper>\r\n            <div class=\"cide-lyt-outlet-sidedrawer-wrapper tw-table-row\" id=\"cide-lyt-outlet-sidedrawer-wrapper\">\r\n               <div class=\"tw-w-full tw-h-full tw-overflow-y-auto cide-scrollbar-width-thin\"\r\n                  id=\"cide-lyt-outlet-wrapper\">\r\n                  <cide-lyt-tab-content></cide-lyt-tab-content>\r\n               </div>\r\n               <!-- We will use here Side Drawer -->\r\n               <cide-lyt-sidedrawer-wrapper></cide-lyt-sidedrawer-wrapper>\r\n            </div>\r\n         </div>\r\n      </div>\r\n   </div>\r\n   <div class=\"cide-lyt-footer-console-wrapper cide-lyt-footer-console-wrapper-hide tw-relative tw-table-row tw-h-0\"\r\n      id=\"cide-lyt-footer-console-wrapper\">\r\n      <!-- We will use here footer -->\r\n      <cide-lyt-footer-wrapper></cide-lyt-footer-wrapper>\r\n      <!-- We will use here Console -->\r\n      <cide-lyt-console-wrapper></cide-lyt-console-wrapper>\r\n   </div>\r\n</div>", styles: ["#cide-lyt-layout-wrapper{display:table;width:100%;height:100vh;position:relative;overflow:hidden}#cide-lyt-layout-wrapper>*{display:table-row}#cide-lyt-sidebar-page-wrapper{display:table-row;height:100%}#cide-lyt-page-wrapper{display:block;height:100%;width:100%;overflow:hidden}#cide-lyt-outlet-wrapper{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch}@media screen and (max-width: 768px){#cide-lyt-layout-wrapper{display:flex;flex-direction:column;height:100vh;height:100dvh;overflow:hidden}#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{display:block;flex-shrink:0;height:auto;min-height:var(--cide-lyt-header-wrapper-height);width:100%}#cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.cide-lyt-sidebar-page-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;width:100%;position:relative;overflow:hidden}#cide-lyt-sidebar-page{display:block;position:fixed;top:var(--cide-lyt-header-wrapper-height);left:0;bottom:0;right:0;z-index:9999;pointer-events:none;transform:none!important;transition:none!important}#cide-lyt-page-wrapper{display:flex;flex-direction:column;flex:1;min-width:0;min-height:0;width:100%;overflow:hidden}#cide-lyt-page-wrapper>cide-lyt-request-wrapper{flex-shrink:0;width:100%}#cide-lyt-outlet-sidedrawer-wrapper{display:flex;flex-direction:row;flex:1;min-height:0;overflow:hidden}#cide-lyt-outlet-wrapper{flex:1;min-width:0;min-height:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain}#cide-lyt-footer-console-wrapper{display:flex;flex-direction:column;flex-shrink:0;height:auto;width:100%;overflow:hidden}#cide-lyt-footer-console-wrapper>cide-lyt-footer-wrapper{display:none;flex-shrink:0;height:var(--cide-lyt-footer-wrapper-height);width:100%}#cide-lyt-footer-console-wrapper>cide-lyt-console-wrapper{flex-shrink:0;height:auto;width:100%}body{overflow-x:hidden;width:100%}@supports (-webkit-touch-callout: none){#cide-lyt-layout-wrapper{height:-webkit-fill-available}}}@media screen and (min-width: 769px) and (max-width: 1024px){#cide-lyt-outlet-wrapper{padding:.75rem}.cide-lyt-sidebar-page-wrapper{max-width:100%}}@media screen and (max-width: 480px){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}.cide-lyt-page-wrapper{padding:0}#cide-lyt-sidedrawer-wrapper{width:0!important;min-width:0!important;transform:translate(100%)}#cide-lyt-outlet-wrapper{width:100%}#cide-lyt-footer-console-wrapper{flex-direction:column}}@media screen and (max-width: 768px) and (orientation: landscape){#cide-lyt-layout-wrapper>cide-lyt-header-wrapper{min-height:var(--cide-lyt-header-wrapper-height)}#cide-lyt-outlet-wrapper{padding:.5rem}}@media (hover: none) and (pointer: coarse){#cide-lyt-outlet-wrapper{-webkit-overflow-scrolling:touch;scroll-behavior:smooth}#cide-lyt-layout-wrapper{-webkit-user-select:none;-moz-user-select:none;user-select:none}#cide-lyt-outlet-wrapper *{-webkit-user-select:text;-moz-user-select:text;user-select:text}}@media print{#cide-lyt-layout-wrapper{display:block;height:auto}#cide-lyt-sidebar-page-wrapper,#cide-lyt-footer-console-wrapper{display:none}#cide-lyt-outlet-wrapper{overflow:visible;height:auto}}\n"] }]
+        }], ctorParameters: () => [] });
 
 class CloudIdeLayoutComponent {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
@@ -6974,11 +6986,11 @@ class CideLytSharedWrapperComponent {
         this.componentContextService.close(fallbackRoute, containerId);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSharedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb_data: { classPropertyName: "breadcrumb_data", publicName: "breadcrumb_data", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: CideEleBreadcrumbComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-w-full tw-max-w-full tw-top-0 tw-z-10 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm breadcrumb-bar\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-0.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-py-0 tw-min-w-0 tw-overflow-hidden tw-min-h-[24px] md:tw-min-h-0\">\n      <!-- Breadcrumb - Compact on all screens -->\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden tw-order-1\">\n        <cide-ele-breadcrumb [style]=\"'modern'\" [compact]=\"true\"\n          (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <!-- Breadcrumb Actions - Inline and compact -->\n      <div class=\"tw-w-auto tw-flex-shrink-0 tw-order-2\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"tw-flex-1 tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden tw-min-h-0 tw-pr-1\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%;width:100%}:host>div{display:flex;flex-direction:column;height:100%;width:100%}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}@media (max-width: 768px){.breadcrumb-bar{min-height:0}.breadcrumb-bar>div{min-height:22px;padding-top:1px;padding-bottom:1px}}@media (max-width: 479px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.5625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center;gap:.1rem!important}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 480px) and (max-width: 640px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden}}@media (min-width: 641px) and (max-width: 1024px){::ng-deep [breadcrumb-actions]{flex-shrink:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.6875rem;width:100%}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:wrap;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:100%;overflow:visible}}@media (min-width: 1025px){::ng-deep [breadcrumb-actions]{flex-shrink:0;width:auto;margin-top:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.75rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap;align-items:center;gap:.25rem}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:visible}}\n"], dependencies: [{ kind: "component", type: CideEleBreadcrumbComponent, selector: "cide-ele-breadcrumb", inputs: ["items", "style", "separator", "showHomeIcon", "homeIcon", "maxItems", "showDropdownOnOverflow", "dropdownOptions", "clickableItems", "showTooltips", "responsive", "compact", "animated", "loadingInput", "disabled", "contextId", "pageCode"], outputs: ["itemClick", "dropdownOptionClick", "homeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: CideLytSharedWrapperComponent, isStandalone: true, selector: "cide-lyt-shared-wrapper", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null }, breadcrumb_data: { classPropertyName: "breadcrumb_data", publicName: "breadcrumb_data", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "breadcrumb", first: true, predicate: CideEleBreadcrumbComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-w-full tw-max-w-full tw-top-0 tw-z-10 tw-bg-white tw-border-b tw-border-gray-200 breadcrumb-bar\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-0.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-py-0 tw-min-w-0 tw-overflow-hidden tw-min-h-0 breadcrumb-bar-inner\">\n      <!-- Breadcrumb - Compact on all screens -->\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden tw-order-1 tw-flex tw-items-center tw-min-h-0\">\n        <cide-ele-breadcrumb [style]=\"'modern'\" [compact]=\"true\"\n          (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <!-- Breadcrumb Actions - Inline and compact -->\n      <div class=\"tw-w-auto tw-flex-shrink-0 tw-order-2 breadcrumb-actions-slot\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"tw-flex-1 tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden tw-min-h-0 tw-pr-1 cide-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%;width:100%}:host>div{display:flex;flex-direction:column;height:100%;width:100%}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}@media (max-width: 768px){.cide-page-content{padding-left:0!important;padding-right:.25rem!important}}.breadcrumb-bar{box-shadow:none}.breadcrumb-bar-inner{padding-top:0;padding-bottom:0}::ng-deep [breadcrumb-actions] button[cideEleButton],::ng-deep [breadcrumb-actions] cide-ele-button{min-height:22px!important;padding:2px 6px!important;font-size:.6875rem!important;line-height:1!important}::ng-deep [breadcrumb-actions] button[cideEleButton] .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button cide-ele-icon{font-size:.75rem!important}@media (max-width: 768px){.breadcrumb-bar{min-height:0;padding:0}.breadcrumb-bar-inner{min-height:0;padding:0 2px;align-items:center;gap:2px}.breadcrumb-bar-inner>div:first-child{min-height:0;align-items:center;min-width:0}.breadcrumb-actions-slot,::ng-deep [breadcrumb-actions]{display:flex!important;align-items:center;gap:2px!important;min-height:0}::ng-deep .breadcrumb-bar-inner cide-ele-breadcrumb,::ng-deep .breadcrumb-bar-inner .breadcrumb-container{line-height:1!important;min-height:0!important;padding:0!important;font-size:8px!important}::ng-deep .breadcrumb-bar-inner cide-ele-breadcrumb cide-ele-icon{font-size:8px!important}::ng-deep [breadcrumb-actions] button[cideEleButton],::ng-deep [breadcrumb-actions] cide-ele-button{min-height:20px!important;height:20px!important;padding:0 5px!important;font-size:.625rem!important;line-height:1!important;min-width:20px!important;border-radius:4px!important}::ng-deep [breadcrumb-actions] button[cideEleButton] .tw-icon-container,::ng-deep [breadcrumb-actions] button[cideEleButton] i.material-symbols-outlined,::ng-deep [breadcrumb-actions] cide-ele-button cide-ele-icon,::ng-deep [breadcrumb-actions] cide-ele-button .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button i.material-symbols-outlined{font-size:14px!important}::ng-deep [breadcrumb-actions]>*{flex-shrink:0}}@media (max-width: 479px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.5625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center;gap:.1rem!important}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 480px) and (max-width: 640px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden}}@media (min-width: 641px) and (max-width: 1024px){::ng-deep [breadcrumb-actions]{flex-shrink:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.6875rem;width:100%}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:wrap;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:100%;overflow:visible}}@media (min-width: 1025px){::ng-deep [breadcrumb-actions]{flex-shrink:0;width:auto;margin-top:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.75rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap;align-items:center;gap:.25rem}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:visible}}\n"], dependencies: [{ kind: "component", type: CideEleBreadcrumbComponent, selector: "cide-ele-breadcrumb", inputs: ["items", "style", "separator", "showHomeIcon", "homeIcon", "maxItems", "showDropdownOnOverflow", "dropdownOptions", "clickableItems", "showTooltips", "responsive", "compact", "animated", "loadingInput", "disabled", "contextId", "pageCode"], outputs: ["itemClick", "dropdownOptionClick", "homeClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideLytSharedWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-lyt-shared-wrapper', standalone: true, imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-w-full tw-max-w-full tw-top-0 tw-z-10 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm breadcrumb-bar\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-0.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-py-0 tw-min-w-0 tw-overflow-hidden tw-min-h-[24px] md:tw-min-h-0\">\n      <!-- Breadcrumb - Compact on all screens -->\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden tw-order-1\">\n        <cide-ele-breadcrumb [style]=\"'modern'\" [compact]=\"true\"\n          (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <!-- Breadcrumb Actions - Inline and compact -->\n      <div class=\"tw-w-auto tw-flex-shrink-0 tw-order-2\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"tw-flex-1 tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden tw-min-h-0 tw-pr-1\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%;width:100%}:host>div{display:flex;flex-direction:column;height:100%;width:100%}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}@media (max-width: 768px){.breadcrumb-bar{min-height:0}.breadcrumb-bar>div{min-height:22px;padding-top:1px;padding-bottom:1px}}@media (max-width: 479px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.5625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center;gap:.1rem!important}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 480px) and (max-width: 640px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden}}@media (min-width: 641px) and (max-width: 1024px){::ng-deep [breadcrumb-actions]{flex-shrink:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.6875rem;width:100%}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:wrap;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:100%;overflow:visible}}@media (min-width: 1025px){::ng-deep [breadcrumb-actions]{flex-shrink:0;width:auto;margin-top:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.75rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap;align-items:center;gap:.25rem}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:visible}}\n"] }]
+            args: [{ selector: 'cide-lyt-shared-wrapper', standalone: true, imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-flex tw-flex-col tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-w-full tw-max-w-full tw-top-0 tw-z-10 tw-bg-white tw-border-b tw-border-gray-200 breadcrumb-bar\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-gap-0.5 md:tw-gap-1 tw-px-0.5 md:tw-px-1 tw-py-0 tw-min-w-0 tw-overflow-hidden tw-min-h-0 breadcrumb-bar-inner\">\n      <!-- Breadcrumb - Compact on all screens -->\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden tw-order-1 tw-flex tw-items-center tw-min-h-0\">\n        <cide-ele-breadcrumb [style]=\"'modern'\" [compact]=\"true\"\n          (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <!-- Breadcrumb Actions - Inline and compact -->\n      <div class=\"tw-w-auto tw-flex-shrink-0 tw-order-2 breadcrumb-actions-slot\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n\n  </div>\n\n  <div class=\"tw-flex-1 tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden tw-min-h-0 tw-pr-1 cide-page-content\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%;width:100%}:host>div{display:flex;flex-direction:column;height:100%;width:100%}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}@media (max-width: 768px){.cide-page-content{padding-left:0!important;padding-right:.25rem!important}}.breadcrumb-bar{box-shadow:none}.breadcrumb-bar-inner{padding-top:0;padding-bottom:0}::ng-deep [breadcrumb-actions] button[cideEleButton],::ng-deep [breadcrumb-actions] cide-ele-button{min-height:22px!important;padding:2px 6px!important;font-size:.6875rem!important;line-height:1!important}::ng-deep [breadcrumb-actions] button[cideEleButton] .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button cide-ele-icon{font-size:.75rem!important}@media (max-width: 768px){.breadcrumb-bar{min-height:0;padding:0}.breadcrumb-bar-inner{min-height:0;padding:0 2px;align-items:center;gap:2px}.breadcrumb-bar-inner>div:first-child{min-height:0;align-items:center;min-width:0}.breadcrumb-actions-slot,::ng-deep [breadcrumb-actions]{display:flex!important;align-items:center;gap:2px!important;min-height:0}::ng-deep .breadcrumb-bar-inner cide-ele-breadcrumb,::ng-deep .breadcrumb-bar-inner .breadcrumb-container{line-height:1!important;min-height:0!important;padding:0!important;font-size:8px!important}::ng-deep .breadcrumb-bar-inner cide-ele-breadcrumb cide-ele-icon{font-size:8px!important}::ng-deep [breadcrumb-actions] button[cideEleButton],::ng-deep [breadcrumb-actions] cide-ele-button{min-height:20px!important;height:20px!important;padding:0 5px!important;font-size:.625rem!important;line-height:1!important;min-width:20px!important;border-radius:4px!important}::ng-deep [breadcrumb-actions] button[cideEleButton] .tw-icon-container,::ng-deep [breadcrumb-actions] button[cideEleButton] i.material-symbols-outlined,::ng-deep [breadcrumb-actions] cide-ele-button cide-ele-icon,::ng-deep [breadcrumb-actions] cide-ele-button .tw-icon-container,::ng-deep [breadcrumb-actions] cide-ele-button i.material-symbols-outlined{font-size:14px!important}::ng-deep [breadcrumb-actions]>*{flex-shrink:0}}@media (max-width: 479px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.5625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center;gap:.1rem!important}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden;text-overflow:ellipsis}}@media (min-width: 480px) and (max-width: 640px){::ng-deep [breadcrumb-actions]{flex-shrink:0;display:flex;justify-content:flex-end;margin-top:0}::ng-deep cide-ele-breadcrumb{font-size:.625rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap!important;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:hidden}}@media (min-width: 641px) and (max-width: 1024px){::ng-deep [breadcrumb-actions]{flex-shrink:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.6875rem;width:100%}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:wrap;align-items:center}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:100%;overflow:visible}}@media (min-width: 1025px){::ng-deep [breadcrumb-actions]{flex-shrink:0;width:auto;margin-top:0;margin-left:1rem}::ng-deep cide-ele-breadcrumb{font-size:.75rem;width:auto}::ng-deep cide-ele-breadcrumb nav ol{flex-wrap:nowrap;align-items:center;gap:.25rem}::ng-deep cide-ele-breadcrumb .breadcrumb-container{width:auto;overflow:visible}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { breadcrumb: [{ type: i0.ViewChild, args: [i0.forwardRef(() => CideEleBreadcrumbComponent), { isSignal: true }] }], shared_wrapper_setup_param: [{ type: i0.Input, args: [{ isSignal: true, alias: "shared_wrapper_setup_param", required: false }] }], breadcrumb_data: [{ type: i0.Input, args: [{ isSignal: true, alias: "breadcrumb_data", required: false }] }] } });
 
 /**
@@ -7301,7 +7313,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-Ck2BJXHI.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-pCEuuz_n.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_home" // Used by RequestService to fetch tab properties
@@ -7309,7 +7321,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "dashboard-manager",
-        loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-DWI877xM.mjs').then(c => c.DashboardManagerComponent),
+        loadComponent: () => import('./cloud-ide-layout-dashboard-manager.component-CqSfpOX9.mjs').then(c => c.DashboardManagerComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_dashboard_manager"
@@ -7317,7 +7329,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "api-endpoint-manager",
-        loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-BoP-1zNl.mjs').then(c => c.ApiEndpointManagerComponent),
+        loadComponent: () => import('./cloud-ide-layout-api-endpoint-manager.component-CHTjlIjV.mjs').then(c => c.ApiEndpointManagerComponent),
         canActivate: [authGuard],
         data: {
             sypg_page_code: "cide_lyt_api_endpoint_manager"
@@ -9143,4 +9155,4 @@ var floatingEntitySelection_component = /*#__PURE__*/Object.freeze({
  */
 
 export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, RightsService as R, CideLytSidebarService as a, CideLytSidedrawerService as b, CideLytThemeService as c, CloudIdeLayoutService as d, CloudIdeLayoutComponent as e, CideLytSharedService as f, ComponentContextService as g, layoutControlPannelChildRoutes as h, CustomRouteReuseStrategy as i, CideLytRequestService as j, AppStateService as k, layoutRoutes as l, CideLytUserStatusService as m, CacheManagerService as n, CideLytFileManagerService as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingComponent as q, CideLytFloatingEntityRightsSharingService as r, setCSSVariable as s, themeFactory as t, CideLytFloatingEntitySelectionComponent as u, CideLytFloatingEntitySelectionService as v };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-CtwH_gd2.mjs.map
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-CHxwtcdw.mjs.map