cloud-ide-layout 1.0.101 → 1.0.105

package/fesm2022/{cloud-ide-layout-cloud-ide-layout-DRRm5GZh.mjs → cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs}

@@ -1,21 +1,21 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, signal, computed, effect, DestroyRef, ViewChild, Component, ElementRef, HostListener, ChangeDetectionStrategy, ComponentRef, ViewContainerRef, ViewChildren, viewChild, input, InjectionToken, PLATFORM_ID, output } from '@angular/core';
+import { Injectable, inject, signal, computed, effect, DestroyRef, Component, ViewChild, ElementRef, HostListener, ChangeDetectionStrategy, ComponentRef, ViewContainerRef, ViewChildren, viewChild, input, InjectionToken, PLATFORM_ID, output } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
 import { cidePath, hostManagerRoutesUrl, coreRoutesUrl, commonRoutesUrl, designConfigRoutesUrl, generateStringFromObject } from 'cloud-ide-lms-model';
 import { Observable, throwError, of, BehaviorSubject, interval, take as take$1, firstValueFrom } from 'rxjs';
 import { map, filter, tap, catchError, shareReplay, take, distinctUntilChanged } from 'rxjs/operators';
-import * as i2 from '@angular/router';
+import * as i2$1 from '@angular/router';
 import { Router, NavigationEnd, RouteReuseStrategy, RouterModule } from '@angular/router';
-import { Title } from '@angular/platform-browser';
-import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, CideThemeService, WebSocketNotificationService, NotificationApiService, CideInputComponent, CideIconComponent, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent, CideEleButtonComponent } from 'cloud-ide-element';
+import { Title, DomSanitizer } from '@angular/platform-browser';
+import { CideEleFileManagerService, CideElementsService, CideEleFloatingContainerService, NotificationService, CideIconComponent, CideEleButtonComponent, CideInputComponent, CideSelectComponent, CideThemeService, WebSocketNotificationService, NotificationApiService, CideEleDropdownComponent, CideEleFileImageDirective, CideEleResizerDirective, TooltipDirective, CideSpinnerComponent, CideEleSkeletonLoaderComponent, KeyboardShortcutService, CideEleFloatingContainerManagerComponent, CideEleGlobalNotificationsComponent, CideEleBreadcrumbComponent } from 'cloud-ide-element';
 import * as i1 from '@angular/common';
 import { CommonModule, NgClass, NgFor, NgIf, isPlatformBrowser } from '@angular/common';
 import { FINANCIAL_YEAR_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, AUTH_SERVICE_TOKEN, authGuard, ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
+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';
-import * as i2$1 from '@angular/forms';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 
 class CloudIdeLayoutService {
     constructor() { }
@@ -1218,16 +1218,18 @@ class CideLytSharedService {
                 // Check if we should set the matched module as active
                 if (matchedModule) {
                     const currentActiveModule = this.appState.getActiveModule();
-                    // Be more conservative about overriding user selections
-                    // Only set the module if no module is currently active
-                    const shouldSetModule = !currentActiveModule;
-                    if (shouldSetModule) {
-                        console.log('🎯 SIDEBAR SYNC: No active module, setting:', matchedModule.syme_title, matchedModule._id);
+                    // Always update the active module if the route suggests a different module
+                    // The route is the source of truth when navigating
+                    const isDifferentModule = !currentActiveModule ||
+                        currentActiveModule._id !== matchedModule._id ||
+                        currentActiveModule.syme_path !== matchedModule.syme_path;
+                    if (isDifferentModule) {
+                        console.log('🎯 SIDEBAR SYNC: Updating active module to match route:', matchedModule.syme_title, matchedModule._id);
+                        console.log('🔍 SIDEBAR SYNC: Previous active module:', currentActiveModule?.syme_title || 'none');
                         this.appState.setActiveModule(matchedModule);
                     }
                     else {
-                        console.log('✅ SIDEBAR SYNC: Module already active, respecting user selection:', currentActiveModule?.syme_title);
-                        console.log('🔍 SIDEBAR SYNC: Route suggests:', matchedModule.syme_title, '- not overriding');
+                        console.log('✅ SIDEBAR SYNC: Active module already matches route:', currentActiveModule?.syme_title);
                     }
                 }
                 else {
@@ -1266,7 +1268,7 @@ class CideLytFloatingEntitySelectionService {
         }
         try {
             // Use relative import to avoid circular dependency
-            const module = await import('./cloud-ide-layout-floating-entity-selection.component-BBuHkMIR.mjs');
+            const module = await import('./cloud-ide-layout-floating-entity-selection.component-CfkiqZHY.mjs');
             if (module.CideLytFloatingEntitySelectionComponent) {
                 this.containerService.registerComponent('entity-selection-header', module.CideLytFloatingEntitySelectionComponent);
                 console.log('✅ Entity selection component registered successfully');
@@ -1345,6 +1347,683 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 }]
         }], ctorParameters: () => [] });
 
+/**
+ * Default Notification Settings
+ */
+const DEFAULT_SETTINGS = {
+    soundEnabled: true,
+    soundVolume: 70,
+    soundType: 'default',
+    snoozeEnabled: false,
+    snoozeDuration: 30,
+    quietHoursEnabled: false,
+    quietHoursStart: '22:00',
+    quietHoursEnd: '08:00',
+    desktopNotifications: true,
+    showPreview: true,
+    groupNotifications: true
+};
+/**
+ * Notification Settings Service
+ * Manages user notification preferences with localStorage persistence
+ */
+class NotificationSettingsService {
+    settingsSignal = signal({ ...DEFAULT_SETTINGS }, ...(ngDevMode ? [{ debugName: "settingsSignal" }] : []));
+    // Public computed signal
+    settings = computed(() => this.settingsSignal(), ...(ngDevMode ? [{ debugName: "settings" }] : []));
+    // Individual computed signals for convenience
+    soundEnabled = computed(() => this.settings().soundEnabled, ...(ngDevMode ? [{ debugName: "soundEnabled" }] : []));
+    soundVolume = computed(() => this.settings().soundVolume, ...(ngDevMode ? [{ debugName: "soundVolume" }] : []));
+    soundType = computed(() => this.settings().soundType, ...(ngDevMode ? [{ debugName: "soundType" }] : []));
+    quietHoursEnabled = computed(() => this.settings().quietHoursEnabled, ...(ngDevMode ? [{ debugName: "quietHoursEnabled" }] : []));
+    isQuietHours = computed(() => this.isCurrentlyQuietHours(), ...(ngDevMode ? [{ debugName: "isQuietHours" }] : []));
+    constructor() {
+        // Load from localStorage on initialization
+        this.loadFromLocalStorage();
+        // Save to localStorage whenever settings change
+        effect(() => {
+            const settings = this.settingsSignal();
+            this.saveToLocalStorage(settings);
+        });
+    }
+    /**
+     * Update notification settings
+     */
+    updateSettings(updates) {
+        this.settingsSignal.update(current => ({ ...current, ...updates }));
+    }
+    /**
+     * Reset to default settings
+     */
+    reset() {
+        this.settingsSignal.set({ ...DEFAULT_SETTINGS });
+    }
+    /**
+     * Check if currently in quiet hours
+     */
+    isCurrentlyQuietHours() {
+        const settings = this.settings();
+        if (!settings.quietHoursEnabled) {
+            return false;
+        }
+        const now = new Date();
+        const currentTime = now.getHours() * 60 + now.getMinutes(); // minutes since midnight
+        const startTime = this.timeToMinutes(settings.quietHoursStart);
+        const endTime = this.timeToMinutes(settings.quietHoursEnd);
+        // Handle quiet hours that span midnight
+        if (startTime > endTime) {
+            // Quiet hours span midnight (e.g., 22:00 to 08:00)
+            return currentTime >= startTime || currentTime < endTime;
+        }
+        else {
+            // Quiet hours within same day
+            return currentTime >= startTime && currentTime < endTime;
+        }
+    }
+    /**
+     * Convert time string (HH:mm) to minutes since midnight
+     */
+    timeToMinutes(time) {
+        const [hours, minutes] = time.split(':').map(Number);
+        return hours * 60 + minutes;
+    }
+    /**
+     * Play notification sound based on settings
+     */
+    playNotificationSound() {
+        const settings = this.settings();
+        if (!settings.soundEnabled || settings.soundType === 'none') {
+            return;
+        }
+        if (this.isCurrentlyQuietHours()) {
+            return; // Don't play sound during quiet hours
+        }
+        try {
+            // Create audio context for sound generation
+            // Handle browser autoplay policy - resume if suspended
+            const AudioContextClass = window.AudioContext || window.webkitAudioContext;
+            const audioContext = new AudioContextClass();
+            if (audioContext.state === 'suspended') {
+                audioContext.resume();
+            }
+            const volume = settings.soundVolume / 100;
+            const currentTime = audioContext.currentTime;
+            // Configure based on sound type
+            switch (settings.soundType) {
+                case 'gentle':
+                    this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
+                    break;
+                case 'alert':
+                    this.playTone(audioContext, 1000, 800, 0.2, volume, 'square');
+                    break;
+                case 'chime':
+                    // Play a chord (C-E-G)
+                    this.playTone(audioContext, 523.25, 523.25, 0.3, volume * 0.7, 'sine', 0); // C5
+                    this.playTone(audioContext, 659.25, 659.25, 0.3, volume * 0.7, 'sine', 0.05); // E5
+                    this.playTone(audioContext, 783.99, 783.99, 0.3, volume * 0.7, 'sine', 0.1); // G5
+                    break;
+                case 'default':
+                default:
+                    this.playTone(audioContext, 800, 600, 0.15, volume, 'sine');
+                    break;
+            }
+        }
+        catch (error) {
+            console.warn('Failed to play notification sound:', error);
+        }
+    }
+    /**
+     * Play a single tone
+     */
+    playTone(audioContext, startFreq, endFreq, duration, volume, type = 'sine', delay = 0) {
+        const oscillator = audioContext.createOscillator();
+        const gainNode = audioContext.createGain();
+        oscillator.type = type;
+        oscillator.connect(gainNode);
+        gainNode.connect(audioContext.destination);
+        const startTime = audioContext.currentTime + delay;
+        // Set frequency
+        if (startFreq === endFreq) {
+            oscillator.frequency.setValueAtTime(startFreq, startTime);
+        }
+        else {
+            oscillator.frequency.setValueAtTime(startFreq, startTime);
+            oscillator.frequency.exponentialRampToValueAtTime(endFreq, startTime + duration);
+        }
+        // Set volume envelope (fade in/out)
+        gainNode.gain.setValueAtTime(0, startTime);
+        gainNode.gain.linearRampToValueAtTime(volume, startTime + 0.01);
+        gainNode.gain.linearRampToValueAtTime(volume, startTime + duration - 0.05);
+        gainNode.gain.linearRampToValueAtTime(0, startTime + duration);
+        // Play sound
+        oscillator.start(startTime);
+        oscillator.stop(startTime + duration);
+    }
+    /**
+     * Load settings from localStorage
+     */
+    loadFromLocalStorage() {
+        try {
+            const stored = localStorage.getItem('cide_notification_settings');
+            if (stored) {
+                const settings = JSON.parse(stored);
+                this.settingsSignal.set({ ...DEFAULT_SETTINGS, ...settings });
+            }
+        }
+        catch (error) {
+            console.warn('Failed to load notification settings from localStorage:', error);
+        }
+    }
+    /**
+     * Save settings to localStorage
+     */
+    saveToLocalStorage(settings) {
+        try {
+            localStorage.setItem('cide_notification_settings', JSON.stringify(settings));
+        }
+        catch (error) {
+            console.warn('Failed to save notification settings to localStorage:', error);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * Notification Settings Component
+ * Allows users to configure notification preferences
+ */
+class NotificationSettingsComponent {
+    fb = inject(FormBuilder);
+    settingsService = inject(NotificationSettingsService);
+    notificationService = inject(NotificationService);
+    destroyRef = inject(DestroyRef);
+    settingsForm;
+    soundTypeOptions = [
+        { value: 'default', label: 'Default' },
+        { value: 'gentle', label: 'Gentle' },
+        { value: 'alert', label: 'Alert' },
+        { value: 'chime', label: 'Chime' },
+        { value: 'none', label: 'None' }
+    ];
+    ngOnInit() {
+        const settings = this.settingsService.settings();
+        this.settingsForm = this.fb.group({
+            soundEnabled: [settings.soundEnabled],
+            soundVolume: [settings.soundVolume, [Validators.min(0), Validators.max(100)]],
+            soundType: [settings.soundType],
+            snoozeEnabled: [settings.snoozeEnabled],
+            snoozeDuration: [settings.snoozeDuration, [Validators.min(5), Validators.max(1440)]],
+            quietHoursEnabled: [settings.quietHoursEnabled],
+            quietHoursStart: [settings.quietHoursStart],
+            quietHoursEnd: [settings.quietHoursEnd],
+            desktopNotifications: [settings.desktopNotifications],
+            showPreview: [settings.showPreview],
+            groupNotifications: [settings.groupNotifications]
+        });
+        // Auto-save on form changes
+        this.settingsForm.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => {
+            this.save();
+        });
+    }
+    testSound() {
+        this.settingsService.playNotificationSound();
+    }
+    save() {
+        if (this.settingsForm.valid) {
+            this.settingsService.updateSettings(this.settingsForm.value);
+            this.notificationService.success('Notification settings saved');
+        }
+    }
+    reset() {
+        this.settingsService.reset();
+        const settings = this.settingsService.settings();
+        this.settingsForm.patchValue(settings, { emitEvent: false });
+        this.notificationService.info('Settings reset to defaults');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: NotificationSettingsComponent, isStandalone: true, selector: "cide-lyt-notification-settings", ngImport: i0, template: `
+    <div class="tw-p-4 tw-space-y-6 tw-bg-white dark:tw-bg-gray-800">
+      <!-- Header -->
+      <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
+        <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
+          <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
+        </div>
+        <div>
+          <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
+          <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
+        </div>
+      </div>
+
+      <form [formGroup]="settingsForm" class="tw-space-y-6">
+        <!-- Sound Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
+          
+          <!-- Enable Sound -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('soundEnabled')?.value"
+                (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('soundEnabled')?.value) {
+            <!-- Sound Type -->
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
+              <cide-ele-select
+                formControlName="soundType"
+                [options]="soundTypeOptions"
+                placeholder="Select sound type">
+              </cide-ele-select>
+            </div>
+
+            <!-- Sound Volume -->
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
+                <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
+                <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
+              </div>
+              <input 
+                type="range" 
+                formControlName="soundVolume"
+                min="0" 
+                max="100" 
+                step="5"
+                class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
+              <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
+                <span>0%</span>
+                <span>100%</span>
+              </div>
+            </div>
+
+            <!-- Test Sound Button -->
+            <button
+              type="button"
+              cideEleButton
+              variant="outline"
+              size="sm"
+              (click)="testSound()"
+              class="tw-w-full">
+              <cide-ele-icon>play_arrow</cide-ele-icon>
+              Test Sound
+            </button>
+          }
+        </div>
+
+        <!-- Quiet Hours -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
+          
+          <!-- Enable Quiet Hours -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('quietHoursEnabled')?.value"
+                (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('quietHoursEnabled')?.value) {
+            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <div>
+                <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
+                <cide-ele-input
+                  type="time"
+                  formControlName="quietHoursStart"
+                  placeholder="22:00">
+                </cide-ele-input>
+              </div>
+              <div>
+                <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
+                <cide-ele-input
+                  type="time"
+                  formControlName="quietHoursEnd"
+                  placeholder="08:00">
+                </cide-ele-input>
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Snooze Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
+          
+          <!-- Enable Snooze -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('snoozeEnabled')?.value"
+                (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('snoozeEnabled')?.value) {
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
+              <cide-ele-input
+                type="number"
+                formControlName="snoozeDuration"
+                min="5"
+                max="1440"
+                placeholder="30">
+              </cide-ele-input>
+            </div>
+          }
+        </div>
+
+        <!-- Other Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
+          
+          <!-- Desktop Notifications -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('desktopNotifications')?.value"
+                (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
+          <button
+            type="button"
+            cideEleButton
+            variant="outline"
+            size="sm"
+            (click)="reset()"
+            class="tw-flex-1">
+            Reset
+          </button>
+          <button
+            type="button"
+            cideEleButton
+            variant="primary"
+            size="sm"
+            (click)="save()"
+            class="tw-flex-1">
+            Save Settings
+          </button>
+        </div>
+      </form>
+    </div>
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { 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: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: NotificationSettingsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-notification-settings', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        CideIconComponent,
+                        CideEleButtonComponent,
+                        CideInputComponent,
+                        CideSelectComponent
+                    ], template: `
+    <div class="tw-p-4 tw-space-y-6 tw-bg-white dark:tw-bg-gray-800">
+      <!-- Header -->
+      <div class="tw-flex tw-items-center tw-gap-2 tw-pb-3 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
+        <div class="tw-w-8 tw-h-8 tw-bg-blue-500 tw-rounded-lg tw-flex tw-items-center tw-justify-center">
+          <cide-ele-icon class="tw-text-white">settings</cide-ele-icon>
+        </div>
+        <div>
+          <h3 class="tw-m-0 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Notification Settings</h3>
+          <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Customize your notification preferences</p>
+        </div>
+      </div>
+
+      <form [formGroup]="settingsForm" class="tw-space-y-6">
+        <!-- Sound Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Sound Settings</h4>
+          
+          <!-- Enable Sound -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">volume_up</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Sound</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Play sound when receiving notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('soundEnabled')?.value"
+                (change)="settingsForm.get('soundEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('soundEnabled')?.value) {
+            <!-- Sound Type -->
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Sound Type</label>
+              <cide-ele-select
+                formControlName="soundType"
+                [options]="soundTypeOptions"
+                placeholder="Select sound type">
+              </cide-ele-select>
+            </div>
+
+            <!-- Sound Volume -->
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <div class="tw-flex tw-items-center tw-justify-between tw-mb-2">
+                <label class="tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300">Volume</label>
+                <span class="tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ settingsForm.get('soundVolume')?.value }}%</span>
+              </div>
+              <input 
+                type="range" 
+                formControlName="soundVolume"
+                min="0" 
+                max="100" 
+                step="5"
+                class="tw-w-full tw-h-2 tw-bg-gray-200 tw-rounded-lg tw-appearance-none tw-cursor-pointer dark:tw-bg-gray-700 tw-accent-blue-600">
+              <div class="tw-flex tw-justify-between tw-text-[10px] tw-text-gray-400 tw-mt-1">
+                <span>0%</span>
+                <span>100%</span>
+              </div>
+            </div>
+
+            <!-- Test Sound Button -->
+            <button
+              type="button"
+              cideEleButton
+              variant="outline"
+              size="sm"
+              (click)="testSound()"
+              class="tw-w-full">
+              <cide-ele-icon>play_arrow</cide-ele-icon>
+              Test Sound
+            </button>
+          }
+        </div>
+
+        <!-- Quiet Hours -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Quiet Hours</h4>
+          
+          <!-- Enable Quiet Hours -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">schedule</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Quiet Hours</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Mute notifications during specified hours</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('quietHoursEnabled')?.value"
+                (change)="settingsForm.get('quietHoursEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('quietHoursEnabled')?.value) {
+            <div class="tw-grid tw-grid-cols-2 tw-gap-3 tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <div>
+                <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Start Time</label>
+                <cide-ele-input
+                  type="time"
+                  formControlName="quietHoursStart"
+                  placeholder="22:00">
+                </cide-ele-input>
+              </div>
+              <div>
+                <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">End Time</label>
+                <cide-ele-input
+                  type="time"
+                  formControlName="quietHoursEnd"
+                  placeholder="08:00">
+                </cide-ele-input>
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Snooze Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Snooze</h4>
+          
+          <!-- Enable Snooze -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">snooze</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Enable Snooze</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Temporarily pause notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('snoozeEnabled')?.value"
+                (change)="settingsForm.get('snoozeEnabled')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+
+          @if (settingsForm.get('snoozeEnabled')?.value) {
+            <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+              <label class="tw-block tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-mb-2">Snooze Duration (minutes)</label>
+              <cide-ele-input
+                type="number"
+                formControlName="snoozeDuration"
+                min="5"
+                max="1440"
+                placeholder="30">
+              </cide-ele-input>
+            </div>
+          }
+        </div>
+
+        <!-- Other Settings -->
+        <div class="tw-space-y-3">
+          <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide">Other Settings</h4>
+          
+          <!-- Desktop Notifications -->
+          <div class="tw-flex tw-items-center tw-justify-between tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg">
+            <div class="tw-flex tw-items-center tw-gap-2">
+              <cide-ele-icon class="tw-text-gray-600 dark:tw-text-gray-400">desktop_windows</cide-ele-icon>
+              <div>
+                <label class="tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">Desktop Notifications</label>
+                <p class="tw-m-0 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Show browser notifications</p>
+              </div>
+            </div>
+            <label class="tw-relative tw-inline-flex tw-items-center tw-cursor-pointer">
+              <input 
+                type="checkbox" 
+                [checked]="settingsForm.get('desktopNotifications')?.value"
+                (change)="settingsForm.get('desktopNotifications')?.setValue($any($event.target).checked)"
+                class="tw-sr-only tw-peer">
+              <div class="tw-w-11 tw-h-6 tw-bg-gray-200 peer-focus:tw-outline-none peer-focus:tw-ring-4 peer-focus:tw-ring-blue-300 dark:peer-focus:tw-ring-blue-800 dark:peer-focus:tw-ring-offset-gray-800 tw-rounded-full peer dark:tw-bg-gray-700 peer-checked:after:tw-translate-x-full peer-checked:after:tw-border-white after:tw-content-[''] after:tw-absolute after:tw-top-[2px] after:tw-left-[2px] after:tw-bg-white after:tw-border-gray-300 after:tw-border after:tw-rounded-full after:tw-h-5 after:tw-w-5 after:tw-transition-all dark:tw-border-gray-600 peer-checked:tw-bg-blue-600"></div>
+            </label>
+          </div>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="tw-flex tw-gap-2 tw-pt-4 tw-border-t tw-border-gray-200 dark:tw-border-gray-700">
+          <button
+            type="button"
+            cideEleButton
+            variant="outline"
+            size="sm"
+            (click)="reset()"
+            class="tw-flex-1">
+            Reset
+          </button>
+          <button
+            type="button"
+            cideEleButton
+            variant="primary"
+            size="sm"
+            (click)="save()"
+            class="tw-flex-1">
+            Save Settings
+          </button>
+        </div>
+      </form>
+    </div>
+  `, styles: [":host{display:block}\n"] }]
+        }] });
+
 class CideLytHeaderWrapperComponent {
     triggerTemplate;
     financialYearTriggerTemplate;
@@ -1493,6 +2172,8 @@ class CideLytHeaderWrapperComponent {
     authService = inject(AUTH_SERVICE_TOKEN);
     wsNotificationService = inject(WebSocketNotificationService);
     notificationApiService = inject(NotificationApiService);
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    notificationSettingsService = inject(NotificationSettingsService);
     constructor() {
         // Trigger page-data workflow for header (without rendering breadcrumb)
         const entityId = this.appStateService.activeEntity()?._id || undefined;
@@ -1553,6 +2234,8 @@ class CideLytHeaderWrapperComponent {
                 next: (notification) => {
                     console.log('[Notifications] New notification received:', notification);
                     this.loadNotifications();
+                    // Play notification sound based on user settings
+                    this.playNotificationSound();
                 },
                 error: (error) => {
                     console.error('[Notifications] Error in notification stream:', error);
@@ -2562,13 +3245,53 @@ class CideLytHeaderWrapperComponent {
             }
         }
     }
+    /**
+     * Play notification sound based on user settings
+     */
+    playNotificationSound() {
+        if (this.notificationSettingsService) {
+            this.notificationSettingsService.playNotificationSound();
+        }
+    }
+    /**
+     * Open notification settings in floating container
+     */
+    async openNotificationSettings() {
+        // Ensure component is registered
+        if (!this.floatingContainerService.isComponentRegistered('notification-settings')) {
+            this.floatingContainerService.registerComponent('notification-settings', NotificationSettingsComponent);
+        }
+        const containerId = this.floatingContainerService.show({
+            id: `notification-settings-${Date.now()}`,
+            title: 'Notification Settings',
+            icon: 'settings',
+            width: '500px',
+            height: '600px',
+            minWidth: '400px',
+            minHeight: '450px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            backdrop: false,
+            componentId: 'notification-settings',
+            componentConfig: {
+                inputs: {},
+                outputs: {}
+            }
+        });
+        this.floatingContainerService.bringToFront(containerId);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems()\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden notification-scroll-container\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"isNotificationRead(notif)\"\n                                [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n                                [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n                                [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-scroll-container{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)}\n"], dependencies: [{ kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "directive", type: CideEleFileImageDirective, selector: "[cideEleFileImage]", inputs: ["fileId", "altText"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytHeaderWrapperComponent, isStandalone: true, selector: "cide-lyt-header-wrapper", viewQueries: [{ propertyName: "triggerTemplate", first: true, predicate: ["triggerTemplate"], descendants: true }, { propertyName: "financialYearTriggerTemplate", first: true, predicate: ["financialYearTriggerTemplate"], descendants: true }, { propertyName: "academicYearTriggerTemplate", first: true, predicate: ["academicYearTriggerTemplate"], descendants: true }, { propertyName: "notificationTriggerTemplate", first: true, predicate: ["notificationTriggerTemplate"], descendants: true }, { propertyName: "notificationDropdown", first: true, predicate: ["notificationDropdown"], descendants: true }], ngImport: i0, template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems()\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button \n                            type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200\"\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 \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800\">\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 class=\"!tw-text-6xl !tw-text-gray-200 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-500 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400 dark:tw-text-gray-500\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800\"\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)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-scroll-container{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)}\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.1.7", ngImport: i0, type: CideLytHeaderWrapperComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-lyt-header-wrapper', imports: [CideInputComponent, CommonModule, CideIconComponent,
-                        CideEleDropdownComponent, CideEleFileImageDirective], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems()\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        @if (unreadCount() > 0) {\n                            <button \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden notification-scroll-container\">\n                    @if (notifications().length === 0) {\n                        <div class=\"tw-py-16 tw-px-4 tw-text-center\">\n                            <cide-ele-icon class=\"!tw-text-6xl !tw-text-gray-200 tw-mb-3\">notifications_off</cide-ele-icon>\n                            <p class=\"tw-m-0 tw-text-sm tw-text-gray-500 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out\"\n                                [class.tw-border-l-2]=\"!isNotificationRead(notif)\"\n                                [class.tw-border-l-blue-500]=\"!isNotificationRead(notif)\"\n                                [class.dark:tw-border-l-blue-400]=\"!isNotificationRead(notif)\"\n                                [class.tw-bg-white]=\"isNotificationRead(notif)\"\n                                [class.dark:tw-bg-gray-800]=\"isNotificationRead(notif)\"\n                                [class.-tw-translate-x-full]=\"isNotificationAnimating(notif)\"\n                                [class.tw-opacity-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-max-h-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-overflow-hidden]=\"isNotificationAnimating(notif)\"\n                                [class.tw-mb-0]=\"isNotificationAnimating(notif)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-scroll-container{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)}\n"] }]
+                        CideEleDropdownComponent, CideEleFileImageDirective], template: "<header id=\"cide-lyt-header-wrapper\" class=\"cide-lyt-header tw-w-full tw-select-none cide-lyt-header-wrapper-hide\">\n    <!-- Logo Section -->\n    <div class=\"tw-flex tw-items-center  tw-gap-3\">\n        <div class=\"header-logo-container tw-flex tw-items-center tw-gap-3 tw-cursor-pointer\" (click)=\"onLogoClick()\"\n            (keydown.enter)=\"onLogoClick()\" (keydown.space)=\"onLogoClick()\" tabindex=\"0\" role=\"button\"\n            aria-label=\"Navigate to home\" title=\"Click to go to control panel home\">\n            @if (appStateService.activeEntity()?.syen_photo_id_cyfm) {\n            <img cideEleFileImage [fileId]=\"(appStateService.activeEntity()?.syen_photo_id_cyfm  || '')\"\n                [altText]=\"'Entity Logo'\" class=\"tw-w-8 tw-h-8 tw-object-contain\">\n            } @else {\n            <cide-ele-icon name=\"business\" class=\"tw-w-8 tw-h-8 tw-text-blue-600\"></cide-ele-icon>\n            }\n\n        </div>\n        @if (appStateService.activeEntity()?.syen_name) {\n        <span\n            class=\"tw-text-md tw-font-semibold tw-text-blue-600 hover:tw-text-blue-800 tw-cursor-pointer sm:block tw-transition-colors tw-duration-200 hover:tw-underline\"\n            (click)=\"onEntityNameClick()\" title=\"Click to switch entity\">\n            {{ appStateService.activeEntity()?.syen_name }}\n        </span>\n        }\n    </div>\n    <!-- Search Section -->\n    <div class=\"header-search-container\">\n        <cide-ele-input id=\"cide_lyt_header_search\" placeholder=\"Search...\" leadingIcon=\"search\"\n            size=\"md\"></cide-ele-input>\n    </div>\n\n    <!-- Icons Section -->\n    <div class=\"header-icons-container\">\n        <!-- Financial Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"financialYearItems()\" [config]=\"financialYearConfig\"\n                [triggerTemplate]=\"financialYearTriggerTemplate\"\n                (itemClick)=\"onFinancialYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Financial Year</div>\n        </div>\n        \n        <ng-template #financialYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">calendar_today</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentFinancialYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Academic Year Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"academicYearItems()\" [config]=\"academicYearConfig\"\n                [triggerTemplate]=\"academicYearTriggerTemplate\"\n                (itemClick)=\"onAcademicYearClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Academic Year</div>\n        </div>\n        \n        <ng-template #academicYearTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-year-pill\">\n                <cide-ele-icon size=\"2xs\" type=\"none\" class=\"tw-mr-1\">school</cide-ele-icon>\n                <span class=\"header-year-pill-text\">{{ currentAcademicYearName() }}</span>\n            </div>\n        </ng-template>\n\n        <!-- Notifications Dropdown -->\n        <div class=\"header-dropdown-container\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown \n                #notificationDropdown\n                [items]=\"notificationItems()\" \n                [config]=\"notificationConfig\"\n                [triggerTemplate]=\"notificationTriggerTemplate\"\n                [menuTemplate]=\"notificationMenuTemplate\"\n                (itemClick)=\"onNotificationClick($event)\">\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">Notifications</div>\n        </div>\n        \n        <ng-template #notificationTriggerTemplate let-isOpen=\"isOpen\">\n            <div class=\"header-icon notification-icon\" [class.active]=\"isOpen\">\n                <cide-ele-icon>notifications</cide-ele-icon>\n                @if (unreadCount() > 0) {\n                    <div class=\"header-badge\">{{ unreadCount() > 99 ? '99+' : unreadCount() }}</div>\n                }\n            </div>\n        </ng-template>\n\n        <!-- Custom Notification Menu Template -->\n        <ng-template #notificationMenuTemplate let-items=\"items\">\n            <div class=\"tw-min-w-[380px] tw-bg-white dark:tw-bg-gray-800 tw-rounded-xl tw-shadow-2xl tw-overflow-hidden\">\n                <!-- Header - Fixed/Sticky -->\n                <div class=\"tw-sticky tw-top-0 tw-z-10 tw-px-2.5 tw-py-1 tw-bg-gradient-to-r tw-from-white dark:tw-from-gray-800 tw-to-gray-50 dark:tw-to-gray-700 tw-flex tw-justify-between tw-items-center tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-backdrop-blur-sm\">\n                    <div class=\"tw-flex tw-items-center tw-gap-1\">\n                        <div class=\"tw-w-5 tw-h-5 tw-bg-blue-500 tw-rounded tw-flex tw-items-center tw-justify-center tw-shadow-sm\">\n                            <cide-ele-icon class=\"!tw-text-[10px] !tw-text-white\">notifications</cide-ele-icon>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                            <h3 class=\"tw-m-0 tw-text-[10px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-none\">Notifications</h3>\n                            @if (unreadCount() > 0) {\n                                <span class=\"tw-bg-red-500 tw-text-white tw-px-1 tw-py-0 tw-rounded-full tw-text-[7px] tw-font-bold tw-leading-none tw-animate-pulse\">{{ unreadCount() }}</span>\n                            }\n                        </div>\n                    </div>\n                    <div class=\"tw-flex tw-items-center tw-gap-0.5\">\n                        <button \n                            type=\"button\"\n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200\"\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 \n                                type=\"button\"\n                                class=\"tw-bg-blue-500 tw-text-white tw-px-1 tw-py-0.5 tw-rounded tw-text-[8px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex tw-items-center tw-gap-0.5 tw-shadow-sm hover:tw-bg-blue-600 hover:tw-scale-105\"\n                                (click)=\"markAllAsRead(); $event.stopPropagation()\"\n                                title=\"Mark all as read\">\n                                <cide-ele-icon class=\"!tw-text-[9px]\">done_all</cide-ele-icon>\n                            </button>\n                        }\n                        <button \n                            type=\"button\" \n                            class=\"tw-bg-transparent tw-border-none tw-p-0.5 tw-cursor-pointer tw-text-gray-400 dark:tw-text-gray-400 tw-flex tw-items-center tw-justify-center tw-rounded tw-transition-all tw-duration-200 hover:tw-bg-gray-200 dark:hover:tw-bg-gray-600 hover:tw-text-gray-700 dark:hover:tw-text-gray-200 hover:tw-rotate-90\"\n                            (click)=\"closeNotificationDropdown($event)\"\n                            title=\"Close\">\n                            <cide-ele-icon class=\"!tw-text-xs\">close</cide-ele-icon>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Notifications List -->\n                <div class=\"tw-overflow-x-hidden notification-scroll-container tw-bg-white dark:tw-bg-gray-800\">\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 class=\"!tw-text-6xl !tw-text-gray-200 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-500 dark:tw-text-gray-400 tw-font-medium\">No notifications yet</p>\n                            <p class=\"tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-400 dark:tw-text-gray-500\">You're all caught up!</p>\n                        </div>\n                    } @else {\n                        @for (notif of notifications().slice(0, 15); track notif.id) {\n                            <div \n                                class=\"tw-flex tw-items-start tw-px-3 tw-py-2 tw-cursor-pointer tw-transition-all tw-duration-300 tw-relative tw-gap-2 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 last:tw-border-b-0 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 tw-transform tw-ease-in-out tw-bg-white dark:tw-bg-gray-800\"\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)\"\n                                [class.tw-p-0]=\"isNotificationAnimating(notif)\"\n                                (click)=\"onNotificationItemClick(notif)\">\n                                <!-- Icon/Avatar -->\n                                <div class=\"tw-flex-shrink-0 tw-relative\">\n                                    <div class=\"tw-w-9 tw-h-9 tw-rounded-full tw-overflow-hidden tw-bg-gradient-to-br tw-from-blue-500 tw-to-blue-600 tw-flex tw-items-center tw-justify-center tw-shadow-sm tw-ring-1 tw-ring-white\">\n                                        @if (getNotificationAvatar(notif)) {\n                                            <img \n                                                cideEleFileImage \n                                                [fileId]=\"getNotificationAvatar(notif) || ''\"\n                                                [altText]=\"getNotificationName(notif)\"\n                                                class=\"tw-w-full tw-h-full tw-object-cover\">\n                                        } @else {\n                                            <cide-ele-icon class=\"!tw-text-base !tw-text-white\">{{ getNotificationIcon(notif.type) }}</cide-ele-icon>\n                                        }\n                                    </div>\n                                    <!-- Green online indicator -->\n                                    <div class=\"tw-absolute tw-bottom-0 tw-right-0 tw-w-2 tw-h-2 tw-bg-green-500 tw-rounded-full tw-border tw-border-white\"></div>\n                                </div>\n\n                                <!-- Content -->\n                                <div class=\"tw-flex-1 tw-min-w-0\">\n                                    <!-- Title and relative time -->\n                                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-1.5 tw-mb-0.5\">\n                                        <div class=\"tw-flex-1 tw-min-w-0\">\n                                            <h4 class=\"tw-m-0 tw-text-[11px] tw-font-bold tw-text-gray-900 dark:tw-text-gray-100 tw-leading-tight\">\n                                                <span class=\"tw-text-blue-600 dark:tw-text-blue-400\">{{ getNotificationName(notif) }}</span><span class=\"tw-font-normal tw-text-gray-700 dark:tw-text-gray-300\"> {{ getNotificationAction(notif) }}</span>\n                                            </h4>\n                                            <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-400 dark:tw-text-gray-500 tw-mt-0.5\">{{ getTimeAgo(notif.timestamp) }}</p>\n                                        </div>\n                                        <div class=\"tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0\">\n                                            @if (!isNotificationRead(notif)) {\n                                                <div class=\"tw-w-1.5 tw-h-1.5 tw-rounded-full tw-bg-blue-500 dark:tw-bg-blue-400 tw-animate-pulse\"></div>\n                                            }\n                                            @if (isNotificationAnimating(notif) && isNotificationUndoable(notif)) {\n                                                <button \n                                                    type=\"button\"\n                                                    (click)=\"undoNotificationRemoval(getNotificationId(notif)); $event.stopPropagation()\"\n                                                    class=\"tw-px-2 tw-py-0.5 tw-text-[9px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900 tw-border tw-border-blue-200 dark:tw-border-blue-700 tw-rounded-md tw-cursor-pointer tw-transition-all tw-duration-200 hover:tw-bg-blue-100 dark:hover:tw-bg-blue-800 hover:tw-border-blue-300 dark:hover:tw-border-blue-600 hover:tw-scale-105 tw-whitespace-nowrap tw-animate-pulse\">\n                                                    Undo\n                                                </button>\n                                            }\n                                        </div>\n                                    </div>\n                                    \n                                    <!-- Message -->\n                                    @if (notif.message && notif.message !== notif.title) {\n                                        <p class=\"tw-m-0 tw-mt-1 tw-text-[10px] tw-text-gray-600 dark:tw-text-gray-400 tw-leading-snug tw-line-clamp-2\">\n                                            {{ notif.message }}\n                                        </p>\n                                    }\n                                    \n                                    <!-- Comment -->\n                                    @if (notif.data?.comment) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-rounded-md tw-border-l-2 tw-border-l-blue-400 dark:tw-border-l-blue-500\">\n                                            <p class=\"tw-m-0 tw-text-[10px] tw-text-gray-700 dark:tw-text-gray-300 tw-leading-snug tw-italic tw-line-clamp-2\">{{ notif.data.comment }}</p>\n                                        </div>\n                                    }\n                                    \n                                    <!-- File -->\n                                    @if (notif.data?.file) {\n                                        <div class=\"tw-mt-1.5 tw-py-1.5 tw-px-2.5 tw-bg-gray-50 dark:tw-bg-gray-700 tw-border tw-border-gray-200 dark:tw-border-gray-600 tw-rounded-md tw-flex tw-items-center tw-gap-2\">\n                                            <div class=\"tw-w-7 tw-h-7 tw-bg-blue-100 dark:tw-bg-blue-900 tw-rounded-md tw-flex tw-items-center tw-justify-center tw-flex-shrink-0\">\n                                                <span class=\"tw-text-[9px] tw-font-bold tw-text-blue-600 dark:tw-text-blue-300\">{{ getFileIcon(notif.data.file.type) }}</span>\n                                            </div>\n                                            <div class=\"tw-flex-1 tw-min-w-0\">\n                                                <p class=\"tw-m-0 tw-text-[10px] tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap\">{{ notif.data.file.name }}</p>\n                                                <p class=\"tw-m-0 tw-text-[9px] tw-text-gray-500 dark:tw-text-gray-400\">{{ notif.data.file.size }}</p>\n                                            </div>\n                                            <cide-ele-icon class=\"!tw-text-sm tw-text-blue-500 dark:tw-text-blue-400 tw-cursor-pointer tw-transition-all tw-duration-200 tw-flex-shrink-0 hover:tw-text-blue-600 dark:hover:tw-text-blue-300 hover:tw-scale-110\">download</cide-ele-icon>\n                                        </div>\n                                    }\n                                    \n                                    <!-- Action Buttons -->\n                                    @if (notif.action_label) {\n                                        <div class=\"tw-mt-1.5 tw-flex tw-gap-1.5\">\n                                            @if (notif.action_label.toLowerCase().includes('decline')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-bg-white dark:tw-bg-gray-800 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-gray-700 dark:tw-text-gray-300 hover:tw-bg-gray-50 dark:hover:tw-bg-gray-700 hover:tw-border-gray-400 dark:hover:tw-border-gray-500 hover:tw-scale-105\">Decline</button>\n                                            }\n                                            @if (notif.action_label.toLowerCase().includes('accept')) {\n                                                <button type=\"button\" class=\"tw-py-1 tw-px-3 tw-border tw-border-blue-600 dark:tw-border-blue-500 tw-bg-blue-600 dark:tw-bg-blue-500 tw-rounded-md tw-text-[10px] tw-font-semibold tw-cursor-pointer tw-transition-all tw-duration-200 tw-text-white hover:tw-bg-blue-700 dark:hover:tw-bg-blue-600 hover:tw-border-blue-700 dark:hover:tw-border-blue-600 hover:tw-scale-105\">Accept</button>\n                                            }\n                                        </div>\n                                    }\n                                </div>\n                            </div>\n                        }\n                    }\n                </div>\n\n            </div>\n        </ng-template>\n\n        <div class=\"header-divider\"></div>\n\n        <!-- Profile with Dropdown -->\n        <div class=\"header-icon user-profile\" (mouseenter)=\"updateTooltipPosition($event)\">\n            <cide-ele-dropdown [items]=\"profileItems\" [config]=\"profileConfig\"\n                [triggerTemplate]=\"triggerTemplate\"\n                (itemClick)=\"onProfileClick($event)\">\n                <ng-template #triggerTemplate>\n                    @if (appStateService.currentUser()?.user_photo_id_cyfm) {\n                    <div class=\"profile-avatar\">\n                        <img cideEleFileImage [fileId]=\"(appStateService.currentUser()?.user_photo_id_cyfm || '')\"\n                            [altText]=\"'User Profile Photo'\" class=\"tw-w-full tw-h-full tw-object-cover tw-rounded-full\">\n                    </div>\n                    } @else {\n                    <div class=\"profile-avatar\">\n                        <cide-ele-icon name=\"person\" class=\"tw-w-6 tw-h-6 tw-text-white\"></cide-ele-icon>\n                    </div>\n                    }\n                </ng-template>\n            </cide-ele-dropdown>\n            <div class=\"header-tooltip\">My Account</div>\n        </div>\n    </div>\n</header>", styles: [".cide-lyt-header{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(to right,rgb(var(--tw-white-rgb) / .95),rgb(var(--tw-gray-50-rgb) / .95));box-shadow:0 2px 8px #00000008;padding:0 1rem;position:relative;z-index:20;transition:all .3s cubic-bezier(.4,0,.2,1);will-change:transform;border-bottom:1px solid rgb(var(--tw-gray-200-rgb) / .8);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.header-logo-container{height:100%;display:flex;align-items:center;padding:.5rem 0;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);border-radius:8px;outline:none}.header-logo-container img{height:30px;max-height:100%;transition:all .3s ease;border-radius:5px;overflow:hidden;box-shadow:0 1px 4px #0000000d}.header-logo-container:hover img{transform:scale(1.03);filter:brightness(1.05);box-shadow:0 2px 6px #00000014}.header-logo-container:after{content:\"\";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(to bottom right,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));transform:rotate(30deg);opacity:0;transition:transform .6s ease,opacity .6s ease;pointer-events:none}.header-logo-container:hover:after,.header-logo-container:focus:after{opacity:1;transform:rotate(30deg) translate(50%,50%)}.header-search-container{flex-grow:1;max-width:600px;margin:0 2rem;position:relative;transition:all .3s ease}::ng-deep .header-search-container #cide_lyt_header_search{width:100%;background-color:rgb(var(--tw-gray-50-rgb) / .8);border-radius:20px!important;transition:all .3s ease;overflow:visible;transform:translateZ(0)}::ng-deep .header-search-container #cide_lyt_header_search:hover{box-shadow:0 3px 12px #00000014;background-color:rgb(var(--tw-white-rgb) / 1);transform:translateY(-1px)}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-input{background-color:transparent;font-size:.85rem!important;letter-spacing:.01em}::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:#6b7280b3!important;font-size:1.1rem!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within{transform:translateY(-1px) scale(1.01)}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-input{border-color:#3b82f6!important}::ng-deep .header-search-container #cide_lyt_header_search:focus-within .cide-input-leading-icon{color:#3b82f6!important}.header-icons-container{display:flex;align-items:center;gap:1rem}.header-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-dropdown-container{position:relative;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;color:#374151;border-radius:.4rem;margin:0 2px}.header-icon:before{content:\"\";position:absolute;inset:0;background-color:#3b82f61a;border-radius:.5rem;opacity:0;transform:scale(.8);transition:all .2s cubic-bezier(.4,0,.2,1)}.header-icon:hover:before{opacity:1;transform:scale(1)}.header-icon:hover{color:#3b82f6}.header-icon:active{transform:scale(.95)}.header-tooltip{position:absolute;bottom:-26px;left:50%;transform:translate(-50%);background-color:rgb(var(--tw-gray-700-rgb) / .9);color:rgb(var(--tw-white-rgb) / 1);padding:.25rem .6rem;border-radius:.25rem;font-size:.7rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 5px #0003;letter-spacing:.01em;will-change:transform,opacity}.header-tooltip:before{content:\"\";position:absolute;bottom:100%;left:50%;transform:translate(-50%);border-width:5px;border-style:solid;border-color:transparent transparent rgba(55,65,81,.9) transparent}.header-icon:hover .header-tooltip{opacity:1;transform:translate(-50%) translateY(0)}.header-badge{position:absolute;top:0;right:0;min-width:16px;height:16px;border-radius:8px;background-color:#ef4444;color:rgb(var(--tw-white-rgb) / 1);font-size:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;box-shadow:0 1px 3px #ef44444d;font-weight:600;z-index:2;transition:all .2s ease}.header-icon:hover .header-badge{transform:scale(1.1)}.header-divider{height:20px;width:1px;background-color:#e5e7ebcc;margin:0 6px}.header-year-dropdown-wrapper{position:relative;display:flex;align-items:center;justify-content:center}.header-year-pill{position:relative;display:flex;align-items:center;padding:.25rem .625rem;background:linear-gradient(135deg,#3b82f61a,#2563eb26);border:1px solid rgba(59,130,246,.3);border-radius:9999px;color:#2563eb;font-size:.6875rem;font-weight:600;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;white-space:nowrap;box-shadow:0 1px 2px #3b82f61a;min-height:22px;height:22px;line-height:1}.header-year-pill:hover{background:linear-gradient(135deg,#3b82f626,#2563eb33);border-color:#3b82f666;transform:translateY(-1px);box-shadow:0 2px 6px #3b82f626}.header-year-pill-text{max-width:180px;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.01em;line-height:1;display:inline-block}::ng-deep .header-dropdown-container .dropdown-trigger{background:transparent!important;border:none!important;border-radius:0!important;padding:0!important;width:100%!important;height:100%!important;min-width:auto!important;box-shadow:none!important;display:flex!important;align-items:center!important;justify-content:center!important;transition:none!important;cursor:pointer!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover{background:transparent!important}::ng-deep .header-dropdown-container .dropdown-trigger:hover .header-year-pill{background:linear-gradient(135deg,#3b82f626,#2563eb33)!important;border-color:#3b82f666!important;transform:translateY(-1px)!important;box-shadow:0 2px 6px #3b82f626!important}::ng-deep .header-dropdown-container .dropdown-trigger:focus,::ng-deep .header-dropdown-container .dropdown-trigger:focus-visible,::ng-deep .header-dropdown-container .dropdown-trigger:active{outline:none!important;box-shadow:0 2px 6px #3b82f626!important}.profile-avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#2563eb);color:rgb(var(--tw-white-rgb) / 1);font-size:.75rem;font-weight:600;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 6px #2563eb33;transition:all .2s cubic-bezier(.4,0,.2,1);letter-spacing:-.5px;cursor:pointer;border:2px solid transparent}.profile-avatar:hover,.header-icon:hover .profile-avatar{transform:scale(1.08);box-shadow:0 3px 8px #2563eb4d;border-color:#3b82f64d}::ng-deep .user-profile .dropdown-trigger{background:transparent!important;border:none!important;padding:0!important;width:auto!important;height:auto!important;border-radius:0!important}::ng-deep .user-profile .dropdown-trigger:hover{background:transparent!important}::ng-deep .user-profile .dropdown-trigger:focus,::ng-deep .user-profile .dropdown-trigger:focus-visible,::ng-deep .user-profile .dropdown-trigger:active{outline:none!important;box-shadow:none!important}:root[data-theme=dark] .cide-lyt-header,:root.dark-mode .cide-lyt-header{background:linear-gradient(to right,var(--cide-theme-light-color),var(--cide-theme-hover-bg-color));border-bottom-color:var(--cide-theme-border-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .header-icon,:root.dark-mode .header-icon{color:var(--cide-theme-text-color)}:root[data-theme=dark] .header-icon.notification-icon,:root.dark-mode .header-icon.notification-icon{color:#d1d5db}:root[data-theme=dark] .header-icon.notification-icon:hover,:root.dark-mode .header-icon.notification-icon:hover{color:#60a5fa}:root[data-theme=dark] .header-divider,:root.dark-mode .header-divider{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .header-year-pill,:root.dark-mode .header-year-pill{background:linear-gradient(135deg,#60a5fa33,#3b82f640);border-color:#60a5fa80;color:#60a5fa}:root[data-theme=dark] .header-year-pill .header-year-pill-text,:root.dark-mode .header-year-pill .header-year-pill-text{color:#60a5fa}:root[data-theme=dark] .header-year-pill cide-ele-icon,:root.dark-mode .header-year-pill cide-ele-icon{color:#60a5fa!important}:root[data-theme=dark] .header-year-pill:hover,:root.dark-mode .header-year-pill:hover{background:linear-gradient(135deg,#60a5fa4d,#3b82f659);border-color:#60a5fa99;color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover .header-year-pill-text,:root.dark-mode .header-year-pill:hover .header-year-pill-text{color:#93c5fd}:root[data-theme=dark] .header-year-pill:hover cide-ele-icon,:root.dark-mode .header-year-pill:hover cide-ele-icon{color:#93c5fd!important}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search{background-color:var(--cide-theme-hover-bg-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search:hover,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search:hover{background-color:var(--cide-theme-light-color);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}:root[data-theme=dark] ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon,:root.dark-mode ::ng-deep .header-search-container #cide_lyt_header_search .cide-input-leading-icon{color:var(--cide-theme-label-color)!important}.header-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;transition:all .2s cubic-bezier(.4,0,.2,1);border:2px solid transparent;box-shadow:0 2px 4px #0000001a}.header-avatar:hover{border-color:#3b82f6;transform:scale(1.05);box-shadow:0 3px 6px #3b82f64d}@media (max-width: 768px){.header-search-container{margin:0 1rem}.header-icons-container{gap:.5rem}}@media (max-width: 640px){.header-search-container{max-width:200px;margin:0 .5rem}}.notification-scroll-container{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)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { triggerTemplate: [{
                 type: ViewChild,
                 args: ['triggerTemplate']
@@ -2818,11 +3541,18 @@ class CideLytSidebarWrapperComponent {
         return 'dashboard';
     }
     // Add a click handler for menu navigation
-    onMenuClick(menu) {
+    onMenuClick(menu, event) {
+        // Prevent event propagation to avoid triggering parent click handlers
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         if (menu.syme_path) {
             // Navigate without reloading the menu - just route navigation
             // The menu should not reload unless the module actually changes
-            this.router.navigate([`/control-panel/${menu.syme_path}`]);
+            this.router.navigate([`/control-panel/${menu.syme_path}`]).catch(err => {
+                console.error('Navigation error:', err);
+            });
         }
     }
     /**
@@ -2864,6 +3594,13 @@ class CideLytSidebarWrapperComponent {
                 }
             }
         });
+        // Subscribe to router events to prevent unwanted module changes on navigation
+        // Only listen to NavigationEnd events to avoid triggering on every navigation event
+        this.router.events.pipe(filter(event => event instanceof NavigationEnd)).subscribe((event) => {
+            // Don't trigger module change on menu navigation - only on actual module selection
+            // The active module should only change when user explicitly clicks a module icon
+            console.log('📍 SIDEBAR: Navigation ended to', event.url, '- not changing active module');
+        });
     }
     ngOnInit() {
         // Initialize dark mode from localStorage
@@ -2999,8 +3736,14 @@ class CideLytSidebarWrapperComponent {
     /**
      * Sets the active menu item with animation
      * @param moduleId The ID of the module to set as active
+     * @param event Optional click event to prevent propagation
      */
-    setActiveMenu(moduleId) {
+    setActiveMenu(moduleId, event) {
+        // Prevent event propagation to avoid triggering unwanted side effects
+        if (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
         if (this.activeModuleId === moduleId)
             return;
         // Set the active module in app state - the effect will handle local state updates
@@ -3226,7 +3969,7 @@ class CideLytSidebarWrapperComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSidebarWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytSidebarWrapperComponent, isStandalone: true, selector: "cide-lyt-sidebar-wrapper", host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n                                (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }, { kind: "directive", type: TooltipDirective, selector: "[cideEleTooltip]", inputs: ["cideEleTooltip", "tooltipColor", "tooltipBg", "tooltipPlacement", "tooltipType", "tooltipDelay", "tooltipDir", "tooltipShowArrow", "tooltipMultiline", "tooltipMaxWidth", "tooltipInteractive", "tooltipClass"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], animations: [
             trigger('slideInOut', [
                 state('in', style({
                     opacity: 1,
@@ -3298,7 +4041,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                             transition('visible => removing', animate('300ms ease-in-out')),
                             transition('* => visible', animate('200ms ease-out'))
                         ])
-                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu)\"\n                                (keydown.enter)=\"onMenuClick(menu)\" (keydown.space)=\"onMenuClick(menu)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
+                    ], template: "<nav class=\"cide-lyt-sidebar tw-flex tw-h-full tw-select-none\" [class.collapsed]=\"isCollapsed()\">\n    <!-- First tier sidebar (Icon only) -->\n    <div class=\"cide-lyt-stack tw-h-full tw-flex tw-flex-col tw-items-center tw-border-r tw-border-gray-100\">\n        <!-- Scrollable content -->\n        <div class=\"sidebar-scroll-content\">\n            <!-- Collapse/Expand toggle -->\n            <div class=\"nav-item collapse-toggle\" tabindex=\"0\" (click)=\"toggleSidebar()\"\n                (keydown.enter)=\"toggleSidebar()\">\n                <div class=\"nav-tooltip\">{{isCollapsed() ? 'Expand' : 'Collapse'}} Sidebar</div>\n                <cide-ele-icon size=\"xs\" type=\"box\" class=\"tw-text-gray-500 hover:tw-text-gray-700\">\n                    {{isCollapsed() ? 'chevron_right' : 'chevron_left'}}\n                </cide-ele-icon>\n            </div> <!-- Main navigation icons - Enhanced Design -->\n            <div class=\"tw-flex tw-flex-col tw-gap-4\">\n                @for (core_system_module_item of core_system_module(); track $index) {\n                <div class=\"nav-item tw-relative tw-group\" (click)=\"setActiveMenu(core_system_module_item._id, $event)\"\n                    [cideEleTooltip]=\"core_system_module_item.syme_title\" [tooltipShowArrow]=\"true\"\n                    tooltipPlacement=\"right\"\n                    [ngClass]=\"{'nav-item-active': activeModuleId === core_system_module_item._id}\"\n                    (mouseenter)=\"onItemHover(core_system_module_item._id)\" (mouseleave)=\"onItemHover('')\"\n                    [tabindex]=\"$index.toString()\" (keydown.enter)=\"setActiveMenu(core_system_module_item._id, $event)\">\n\n                    <!-- Notification Badge with enhanced design -->\n                    @if (core_system_module_item?.syme_ping) {\n                    <div class=\"nav-badge tw-absolute -tw-top-1 -tw-right-1 tw-w-1.5 tw-h-1.5 tw-rounded-full tw-animate-ping\"\n                        style=\"background-color: var(--cide-theme-error-color);\">\n                    </div>\n                    }\n\n                    <!-- Enhanced icon with better visual effects -->\n                    <div\n                        class=\"tw-p-2 tw-rounded-xl tw-transition-all tw-duration-200 tw-ease-in-out\n                                group-hover:tw-bg-blue-50 group-hover:tw-shadow-md group-hover:tw-scale-105\n                                tw-border-2 tw-border-transparent\n                                {{activeModuleId === core_system_module_item._id ? 'tw-bg-blue-100 tw-border-blue-200 tw-shadow-sm' : 'tw-bg-gray-50'}}\">\n                        <cide-ele-icon type=\"box\" size=\"xs\"\n                            class=\"tw-transition-all tw-duration-200 tw-ease-in-out\n                                              {{activeModuleId === core_system_module_item._id ? 'tw-text-blue-600' : 'tw-text-gray-600 group-hover:tw-text-blue-500'}}\">\n                            {{core_system_module_item?.syme_icon || 'dashboard'}}\n                        </cide-ele-icon>\n                    </div>\n\n                    <!-- Modern active indicator -->\n                    @if (activeModuleId === core_system_module_item._id) {\n                    <div\n                        class=\"nav-indicator tw-absolute tw-left-0 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-w-1 tw-h-8 tw-bg-blue-500 tw-rounded-r-full tw-shadow-lg tw-transition-all tw-duration-300\">\n                    </div>\n                    }\n                </div>\n                }\n            </div>\n        </div>\n    </div> <!-- Second tier sidebar (Expanded view) -->\n    <div class=\"cide-lyt-sidebar-menu tw-h-full tw-overflow-hidden tw-shadow-sm\">\n        <div class=\"tw-flex tw-flex-col tw-h-full\">\n            <!-- Header section with search and options -->\n            <div class=\"sidebar-header tw-p-2.5 tw-border-b tw-border-gray-100\">\n                <!-- Title with back button - Clean layout without online indicator -->\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2.5\">\n                    <button\n                        class=\"back-button tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors tw-flex-shrink-0\"\n                        [cideEleTooltip]=\"'Back to home'\" tooltipPlacement=\"bottom\">\n                        <cide-ele-icon type=\"none\" size=\"xs\" class=\"tw-transition-transform hover:tw-scale-110\">{{\n                            getActiveModuleIcon() }}</cide-ele-icon>\n                    </button>\n                    <div class=\"tw-flex-1 tw-min-w-0\">\n                        <h2 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-truncate tw-leading-5\">\n                            {{ appState.getActiveModuleTitle() || 'Menu' }}\n                        </h2>\n                        <p class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n                            Module Dashboard\n                        </p>\n                    </div>\n                </div>\n\n                <!-- Search and options -->\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                    <div class=\"search-wrapper tw-relative tw-flex-1\">\n                        <cide-ele-input type=\"text\" leadingIcon=\"search\" size=\"xs\" placeholder=\"Search settings...\"\n                            [clearInput]=\"true\" [ngModel]=\"searchText()\" (ngModelChange)=\"onSearchTextChange($event)\" (input)=\"onSearch()\">\n                        </cide-ele-input>\n                        <div\n                            class=\"search-shortcut tw-absolute tw-right-3 tw-top-1/2 -tw-translate-y-1/2 tw-bg-gray-100 tw-text-gray-500 tw-rounded tw-px-1.5 tw-py-0.5 tw-text-xs\">\n                            \u2318K</div>\n                    </div>\n                    <button\n                        class=\"tw-ml-2 tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100 hover:tw-text-gray-700 tw-transition-colors\"\n                        (click)=\"toggleOptions()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">more_vert</cide-ele-icon>\n                    </button>\n\n                    <!-- Options dropdown menu -->\n                    <div *ngIf=\"showOptions()\"\n                        class=\"options-menu tw-absolute tw-right-4 tw-top-16 tw-mt-2 tw-w-48 tw-rounded-md tw-shadow-lg tw-bg-white tw-ring-1 tw-ring-black tw-ring-opacity-5 tw-divide-y tw-divide-gray-100 tw-z-10\">\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">refresh</cide-ele-icon>\n                                Refresh\n                            </a>\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">sync</cide-ele-icon>\n                                Sync settings\n                            </a>\n                        </div>\n                        <div class=\"tw-py-1\">\n                            <a href=\"#\"\n                                class=\"tw-group tw-flex tw-items-center tw-px-4 tw-py-2 tw-text-sm tw-text-gray-700 hover:tw-bg-gray-100\">\n                                <cide-ele-icon class=\"tw-mr-3 tw-text-gray-500 tw-group-hover:tw-text-gray-600\"\n                                    type=\"none\" size=\"xs\">help_outline</cide-ele-icon>\n                                Help & support\n                            </a>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Menu items with categories -->\n            <div class=\"sidebar-content tw-overflow-y-auto tw-flex-1\" (scroll)=\"onScroll($event)\">\n                <!-- Search results if searching -->\n                <div *ngIf=\"searchText()\" class=\"sidebar-section tw-p-2.5\">\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <h3 class=\"tw-text-xs tw-font-semibold tw-text-gray-500\">SEARCH RESULTS</h3>\n                        <span class=\"tw-text-xs tw-text-gray-500\">{{searchResults().length}} items</span>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length > 0\" class=\"tw-space-y-1\">\n                        <a *ngFor=\"let item of searchResults()\" href=\"#\"\n                            class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50\">\n                            <cide-ele-icon class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                size=\"xs\">{{item.icon}}</cide-ele-icon>\n                            <span class=\"tw-text-sm tw-text-gray-700\">{{item.title}}</span>\n                        </a>\n                    </div>\n\n                    <div *ngIf=\"searchResults().length === 0\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">search_off</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No results for \"{{searchText()}}\"</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Try another search term</p>\n                    </div>\n                </div>\n\n                <!-- Only show these sections if not searching -->\n                <ng-container *ngIf=\"!searchText()\">\n                    <!-- Loading state -->\n                    <div *ngIf=\"loadingMenus()\" class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-spinner variant=\"circle\" size=\"xs\"></cide-ele-spinner>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">Loading menus...</p>\n                    </div>\n\n                    <!-- Dynamic menu tree -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete()\" class=\"sidebar-section tw-p-2.5\"\n                        [class.animate-in]=\"animateSections()[0]\">\n                        <ng-container\n                            *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: selectedModuleMenus, level: 0}\"></ng-container>\n                    </div>\n\n                    <!-- Empty state -->\n                    <div *ngIf=\"!loadingMenus() && menuLoadComplete() && selectedModuleMenus.length === 0\"\n                        class=\"tw-p-4 tw-text-center\">\n                        <div class=\"tw-flex tw-justify-center tw-mb-3\">\n                            <cide-ele-icon class=\"tw-text-gray-400\" type=\"none\" size=\"md\">folder_open</cide-ele-icon>\n                        </div>\n                        <p class=\"tw-text-sm tw-text-gray-500\">No menus available</p>\n                        <p class=\"tw-text-xs tw-text-gray-400 tw-mt-1\">Select a module to view its menus</p>\n                    </div>\n                </ng-container>\n\n                <!-- Recursive menu template -->\n                <ng-template #recursiveMenu let-menus let-level=\"level\">\n                    <div [class.tw-ml-0]=\"level > 0\">\n                        <div *ngFor=\"let menu of menus\" class=\"tw-mb-2\">\n                            <!-- Title type items (section headers) -->\n                            <div *ngIf=\"menu.syme_type === 'title'\" class=\"tw-mb-1.5\">\n                                <h3 class=\"tw-text-[10px] tw-font-medium tw-text-gray-400 tw-uppercase tw-mb-1 tw-tracking-wider\">{{\n                                    menu.syme_title }}</h3>\n                                <!-- Render children of title -->\n                                <ng-container *ngIf=\"menu.children && menu.children.length > 0\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </ng-container>\n                            </div>\n\n                            <!-- Section type items (collapsible sections) -->\n                            <div *ngIf=\"menu.syme_type === 'section'\" class=\"tw-mb-2\">\n                                <!-- Section header (clickable to expand/collapse) -->\n                                <button (click)=\"toggleSection(menu._id)\" (keydown.enter)=\"toggleSection(menu._id)\"\n                                    (keydown.space)=\"toggleSection(menu._id)\"\n                                    class=\"section-header tw-w-full tw-flex tw-items-center tw-px-2 tw-py-1 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors tw-text-left\"\n                                    [class.tw-bg-blue-50]=\"isSectionExpanded(menu._id)\" type=\"button\" tabindex=\"0\"\n                                    role=\"button\" [attr.aria-expanded]=\"isSectionExpanded(menu._id)\"\n                                    [attr.aria-label]=\"'Toggle ' + menu.syme_title + ' section'\">\n\n                                    <!-- Section Icon (left side, like other menu items) -->\n                                    <cide-ele-icon class=\"tw-mr-1.5 tw-text-gray-400\" type=\"none\" size=\"2xs\">{{\n                                        menu.syme_icon || 'folder' }}</cide-ele-icon>\n\n                                    <!-- Section Title -->\n                                    <span class=\"tw-text-xs tw-font-medium tw-text-gray-700\">{{ menu.syme_title\n                                        }}</span>\n\n                                    <!-- Right side icons container -->\n                                    <div class=\"tw-ml-auto tw-flex tw-items-center tw-space-x-1.5\">\n                                        <!-- Child Count Badge -->\n                                        <span *ngIf=\"menu.children && menu.children.length > 0\"\n                                            class=\"tw-px-1.5 tw-py-0.5 tw-bg-gray-200 tw-text-gray-500 tw-rounded-full tw-text-[10px] tw-font-medium\">\n                                            {{ menu.children.length }}\n                                        </span>\n\n                                        <!-- Expand/Collapse Icon (right side) -->\n                                        <cide-ele-icon class=\"tw-text-gray-400 tw-transition-transform tw-duration-200\"\n                                            [class.tw-rotate-90]=\"isSectionExpanded(menu._id)\" type=\"none\"\n                                            size=\"2xs\">chevron_right</cide-ele-icon>\n                                    </div>\n                                </button>\n\n                                <!-- Section Content (collapsible) -->\n                                <div *ngIf=\"isSectionExpanded(menu._id) && menu.children && menu.children.length > 0\"\n                                    class=\"section-content tw-mt-1 tw-ml-2 tw-border-l tw-border-gray-200 tw-pl-2.5\"\n                                    [@slideInOut]=\"isSectionExpanded(menu._id) ? 'in' : 'out'\">\n                                    <ng-container\n                                        *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                                </div>\n                            </div>\n\n                            <!-- Menu type items (clickable links) -->\n                            <a *ngIf=\"menu.syme_type === 'menu'\" (click)=\"onMenuClick(menu, $event)\"\n                                (keydown.enter)=\"onMenuClick(menu, $event)\" (keydown.space)=\"onMenuClick(menu, $event)\" tabindex=\"0\"\n                                role=\"button\"\n                                class=\"menu-item tw-flex tw-items-center tw-px-2 tw-py-1.5 tw-rounded-md hover:tw-bg-gray-50 tw-cursor-pointer tw-transition-colors\">\n                                <cide-ele-icon *ngIf=\"menu.syme_icon\" class=\"tw-mr-2 tw-text-gray-500\" type=\"none\"\n                                    size=\"xs\">{{ menu.syme_icon }}</cide-ele-icon>\n                                <span class=\"tw-text-sm tw-text-gray-700\">{{ menu.syme_title }}</span>\n                                <cide-ele-icon *ngIf=\"menu.children && menu.children.length > 0\"\n                                    class=\"tw-ml-auto tw-text-gray-400\" type=\"none\"\n                                    size=\"2xs\">chevron_right</cide-ele-icon>\n                            </a>\n\n                            <!-- Render nested children for menu items -->\n                            <ng-container\n                                *ngIf=\"menu.syme_type === 'menu' && menu.children && menu.children.length > 0\">\n                                <ng-container\n                                    *ngTemplateOutlet=\"recursiveMenu; context: {$implicit: menu.children, level: level + 1}\"></ng-container>\n                            </ng-container>\n                        </div>\n                    </div>\n                </ng-template>\n            </div>\n\n            <!-- Notification panel (overlays content when shown) -->\n            <div *ngIf=\"showNotifications()\" class=\"notification-panel tw-absolute tw-inset-0 tw-bg-white tw-z-20\">\n                <div class=\"tw-p-4 tw-border-b tw-border-gray-100 tw-flex tw-justify-between tw-items-center\">\n                    <h3 class=\"tw-text-sm tw-font-medium\">Notifications</h3>\n                    <button class=\"tw-p-1.5 tw-rounded-lg tw-text-gray-500 hover:tw-bg-gray-100\"\n                        (click)=\"toggleNotificationsPanel()\">\n                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                    </button>\n                </div>\n\n                <div class=\"tw-p-4\">\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-mb-4\">\n                        <div class=\"tw-text-xs tw-text-gray-500\">Today</div>\n                        <button class=\"tw-text-xs tw-text-blue-500 hover:tw-text-blue-600\" (click)=\"markAllAsRead()\">Mark all as read</button>\n                    </div>\n\n                    <div class=\"tw-space-y-3\">\n                        @for (notification of notifications(); track notification.id) {\n                            <div \n                                [@notificationRemove]=\"notification.state\"\n                                class=\"notification-item tw-p-3 tw-rounded-lg tw-border-l-4 tw-relative tw-group\"\n                                [class.tw-border-blue-500]=\"notification.unread\"\n                                [class.tw-border-transparent]=\"!notification.unread\"\n                                [class.tw-bg-blue-50]=\"notification.unread\">\n                                <div class=\"tw-flex tw-gap-3\">\n                                    <div\n                                        class=\"tw-w-8 tw-h-8 tw-rounded-full tw-flex tw-items-center tw-justify-center\"\n                                        [class.tw-bg-blue-100]=\"notification.unread\"\n                                        [class.tw-bg-gray-100]=\"!notification.unread\"\n                                        [class.tw-text-blue-500]=\"notification.unread\"\n                                        [class.tw-text-gray-500]=\"!notification.unread\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">{{ notification.icon }}</cide-ele-icon>\n                                    </div>\n                                    <div class=\"tw-flex-1\">\n                                        <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ notification.title }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">{{ notification.message }}</div>\n                                        <div class=\"tw-text-xs tw-text-gray-400 tw-mt-2\">{{ notification.time }}</div>\n                                    </div>\n                                    <button \n                                        class=\"tw-opacity-0 group-hover:tw-opacity-100 tw-transition-opacity tw-p-1 tw-rounded hover:tw-bg-gray-200 tw-text-gray-500 hover:tw-text-gray-700\"\n                                        (click)=\"removeNotification(notification.id)\"\n                                        title=\"Remove notification\">\n                                        <cide-ele-icon type=\"none\" size=\"xs\">close</cide-ele-icon>\n                                    </button>\n                                </div>\n                            </div>\n                        }\n                        @if (notifications().length === 0) {\n                            <div class=\"tw-p-8 tw-text-center\">\n                                <cide-ele-icon class=\"tw-text-gray-400 tw-mb-2\" type=\"none\" size=\"md\">notifications_none</cide-ele-icon>\n                                <p class=\"tw-text-sm tw-text-gray-500\">No notifications</p>\n                            </div>\n                        }\n                    </div>\n                </div>\n            </div>\n\n            <!-- Storage info at bottom -->\n            <div class=\"sidebar-footer tw-p-2 tw-border-t tw-border-gray-100\">\n                <!-- for info display -->\n            </div>\n        </div>\n    </div>\n\n    <!-- Resizer -->\n    <div parentElementSelector=\"#cide-lyt-sidebar-page-inner-wrapper\"\n        [minPrevSize]=\"sidebarSetupData.cide_lyt_sidebar_width\" prevElementSelector=\"#cide-lyt-sidebar-page\"\n        nextElementSelector=\"#cide-lyt-page-wrapper\" cideEleResizer direction=\"horizontal\">\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\n    </div>\n</nav>", styles: [".cide-lyt-sidebar{display:flex;box-shadow:0 4px 12px #0000000d;overflow:hidden;background-color:var(--cide-theme-sidebar-color);--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);--sidebar-shadow-color: rgba(0, 0, 0, .05);transition:width .3s cubic-bezier(.4,0,.2,1);max-height:100%;isolation:isolate;will-change:width;position:relative;width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width));min-width:calc(var(--cide-lyt-stack-wrapper-width) + var(--cide-lyt-sidebar-menu-width))}.cide-lyt-sidebar.resizing,#cide-lyt-sidebar-page.resizing{transition:none!important}.cide-lyt-sidebar.collapsed{width:var(--cide-lyt-stack-wrapper-width)!important;min-width:var(--cide-lyt-stack-wrapper-width)!important;animation:collapseEffect .3s forwards}.cide-lyt-sidebar:not(.collapsed){animation:expandEffect .3s forwards}@keyframes collapseEffect{0%{box-shadow:0 4px 12px var(--sidebar-shadow-color)}to{box-shadow:0 2px 8px var(--sidebar-shadow-color)}}@keyframes expandEffect{0%{box-shadow:0 2px 8px var(--sidebar-shadow-color)}to{box-shadow:0 4px 12px var(--sidebar-shadow-color)}}.cide-lyt-sidebar.animating{transition:width .3s cubic-bezier(.25,.46,.45,.94)}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{width:0;opacity:0;visibility:hidden;transform:translate(-10px);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1),visibility .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1)}.cide-lyt-sidebar:not(.collapsed) .cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);opacity:1;visibility:visible;transform:translate(0);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s}.cide-lyt-stack{background:linear-gradient(to bottom,var(--cide-theme-sidebar-color),var(--cide-theme-light-color));z-index:10;border-right:1px solid var(--cide-theme-light-color);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:0 0 1.5rem;transition:all .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-theme-color-brand-primary) transparent;position:relative;will-change:transform;scroll-behavior:smooth;box-shadow:inset -1px 0 0 var(--sidebar-shadow-color)}.cide-lyt-stack:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.cide-lyt-stack.scrolled-down:before{opacity:1}.cide-lyt-stack.scrolled-up:after{opacity:1}.cide-lyt-stack{position:relative;z-index:1;-webkit-overflow-scrolling:touch;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-stack::-webkit-scrollbar{width:2px}.cide-lyt-stack::-webkit-scrollbar-track{background:transparent;margin:10px 0}.cide-lyt-stack::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:4px}.cide-lyt-stack:hover::-webkit-scrollbar-thumb{background:var(--cide-ele-scrollbar-thumb-hover, #9ca3af)}.cide-lyt-stack:hover::-webkit-scrollbar{width:3px}.cide-lyt-stack:before,.cide-lyt-stack:after,.sidebar-content:before,.sidebar-content:after,.notification-panel:before,.notification-panel:after,.user-menu:before,.user-menu:after,.options-menu:before,.options-menu:after{content:\"\";position:absolute;left:0;right:0;height:24px;z-index:5;pointer-events:none;opacity:0;transition:opacity .3s ease}.cide-lyt-stack:before,.sidebar-content:before,.notification-panel:before,.user-menu:before,.options-menu:before{top:0;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack:after,.sidebar-content:after,.notification-panel:after,.user-menu:after,.options-menu:after{bottom:0;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),rgb(var(--tw-white-rgb) / 0))}.cide-lyt-stack.is-scrollable-top:before,.sidebar-content.is-scrollable-top:before,.notification-panel.is-scrollable-top:before,.user-menu.is-scrollable-top:before,.options-menu.is-scrollable-top:before{opacity:1}.cide-lyt-stack.is-scrollable-bottom:after,.sidebar-content.is-scrollable-bottom:after,.notification-panel.is-scrollable-bottom:after,.user-menu.is-scrollable-bottom:after,.options-menu.is-scrollable-bottom:after{opacity:1}.collapse-toggle{margin-bottom:.5rem;position:relative;transition:all .3s cubic-bezier(.4,0,.2,1);z-index:5;border-radius:50%;overflow:hidden}.collapse-toggle:before{content:\"\";position:absolute;inset:0;background:var(--cide-theme-label-color);opacity:0;transition:opacity .2s ease;z-index:-1}.collapse-toggle:hover{transform:scale(1.1)}.collapse-toggle:hover:before{opacity:1}.collapse-toggle:active{transform:scale(.95);transition:transform .1s ease}.collapse-toggle:focus-visible{outline:2px solid var(--cide-theme-color-brand-primary);outline-offset:2px}.sidebar-scroll-content{width:100%;position:relative;z-index:1;overflow-y:auto;overflow-x:hidden;flex-grow:1;display:flex;flex-direction:column;align-items:center;padding:1rem 0;gap:.5rem;max-height:calc(100% - 8rem)}.nav-item{position:relative;width:30px;height:30px;display:flex;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;margin:4px 0;border-radius:10px;box-shadow:0 0 #3b82f600;transform-origin:center;overflow:hidden;color:var(--cide-theme-text-color)}.nav-item:before{content:\"\";position:absolute;inset:0;background:radial-gradient(circle at center,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.01));opacity:0;transition:opacity .3s ease;z-index:-1}.nav-item:hover{background-color:color-mix(in srgb,var(--cide-theme-light-color) 90%,transparent);transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:hover:before{opacity:1}.nav-item:active{transition:all .1s ease;transform:translateY(-1px);box-shadow:0 2px 6px var(--cide-theme-shadow-color)}.nav-item:active{transform:translateY(1px);transition:all .1s ease}.nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.12));box-shadow:0 2px 8px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15);transform:translateZ(0);color:var(--cide-theme-color-brand-primary)}.nav-item-active:after{content:\"\";position:absolute;bottom:-2px;left:30%;right:30%;height:2px;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),var(--cide-theme-color-brand-primary),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));border-radius:1px;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%{opacity:.4}50%{opacity:1}to{opacity:.4}}.nav-item-active:hover{background:linear-gradient(135deg,#3b82f61a,#3b82f626)}.nav-badge{z-index:5;transition:all .3s ease}.nav-item:hover .nav-badge{transform:scale(1.1)}.nav-tooltip{position:fixed;left:64px;top:50%;transform:translateY(-50%) translate(-5px);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.4rem .75rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s cubic-bezier(.4,0,.2,1);z-index:1000;box-shadow:0 2px 8px var(--cide-theme-shadow-color);letter-spacing:.01em;will-change:transform,opacity;max-width:220px;text-overflow:ellipsis;overflow:hidden;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}.nav-tooltip:before{content:\"\";position:absolute;top:50%;right:100%;transform:translateY(-50%);border-width:6px;border-style:solid;border-color:transparent var(--sidebar-tooltip-bg) transparent transparent;filter:drop-shadow(-2px 0px 1px rgba(0,0,0,.1))}.nav-item:hover .nav-tooltip{opacity:1;transform:translateY(-50%) translate(0);box-shadow:0 3px 12px var(--cide-theme-shadow-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color));border-radius:.5rem}.nav-item-active:before{opacity:0}.active-nav-icon{color:var(--cide-lyt-sidebar-nav-item-color-active)!important;filter:drop-shadow(0 0 3px rgba(59,130,246,.3))}.nav-indicator{position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:60%;background:var(--cide-theme-color-brand-primary);border-radius:0 4px 4px 0;opacity:0;transition:all .3s ease;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5)}.nav-item-active .nav-indicator{opacity:1;left:0}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.sidebar-scroll-content .nav-item{opacity:0;animation:fadeSlideIn .5s forwards}.sidebar-scroll-content .nav-item:nth-child(1){animation-delay:.05s}.sidebar-scroll-content .nav-item:nth-child(2){animation-delay:.1s}.sidebar-scroll-content .nav-item:nth-child(3){animation-delay:.15s}.sidebar-scroll-content .nav-item:nth-child(4){animation-delay:.2s}.sidebar-scroll-content .nav-item:nth-child(5){animation-delay:.25s}.sidebar-scroll-content .nav-item:nth-child(6){animation-delay:.3s}.sidebar-scroll-content .nav-item:nth-child(7){animation-delay:.35s}.sidebar-scroll-content .nav-item:nth-child(8){animation-delay:.4s}.sidebar-scroll-content .nav-item:nth-child(9){animation-delay:.45s}.sidebar-scroll-content .nav-item:nth-child(10){animation-delay:.5s}.sidebar-scroll-content .nav-item:nth-child(11){animation-delay:.55s}.sidebar-scroll-content .nav-item:nth-child(12){animation-delay:.6s}.sidebar-scroll-content .nav-item:nth-child(13){animation-delay:.65s}.sidebar-scroll-content .nav-item:nth-child(14){animation-delay:.7s}.sidebar-scroll-content .nav-item:nth-child(15){animation-delay:.75s}cide-ele-icon[type=box]{cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:.5rem;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden}cide-ele-icon[type=box]:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translateY(-1px)}cide-ele-icon[type=box]:active{transform:translateY(0)}.theme-toggle{position:relative;overflow:hidden;padding:.5rem;border-radius:12px;background-color:transparent;border:2px solid transparent;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:2.5rem;height:2.5rem}.theme-toggle:after{content:\"\";position:absolute;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at center,rgba(59,130,246,.2) 0%,transparent 70%);opacity:0;transition:opacity .3s ease;border-radius:.5rem}.theme-toggle:hover{background-color:var(--cide-theme-hover-bg-color, rgb(var(--tw-gray-100-rgb) / 1));border-color:var(--cide-theme-color-brand-primary, rgba(59, 130, 246, .3));transform:translateY(-1px);box-shadow:0 4px 12px #0000001a}.theme-toggle:hover:after{opacity:1}.theme-toggle:focus{outline:none;box-shadow:0 0 0 3px #3b82f64d}.theme-toggle cide-ele-icon{color:var(--cide-theme-icon-color, #6b7280);transition:all .2s ease;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center}.theme-toggle:hover cide-ele-icon{color:var(--cide-theme-color-brand-primary, #3b82f6);transform:scale(1.1) rotate(10deg)}.dark-mode .theme-toggle:after{background:radial-gradient(circle at center,rgba(96,165,250,.2) 0%,transparent 70%)}.dark-mode .theme-toggle:hover{background-color:var(--cide-theme-dark-hover-bg-color, rgba(55, 65, 81, 1));border-color:var(--cide-theme-color-brand-primary, rgba(96, 165, 250, .3))}.notification-badge{font-size:.65rem;min-width:20px;height:20px;box-shadow:0 2px 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.25);transform-origin:center;position:relative;animation:pulseNotification 2s infinite;overflow:hidden;background-color:var(--cide-theme-color-brand-primary);color:var(--cide-theme-light-color)}.notification-badge:before{content:\"\";position:absolute;inset:0;background:linear-gradient(135deg,rgb(var(--tw-white-rgb) / .3),rgb(var(--tw-white-rgb) / 0));opacity:0;transition:opacity .3s ease}.notification-badge:hover:before{opacity:1}@keyframes pulseNotification{0%{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.4);transform:scale(1)}40%{transform:translateY(-5px)}50%{box-shadow:0 0 0 4px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1.05)}60%{transform:translateY(-2px)}to{box-shadow:0 0 rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0);transform:scale(1)}}.user-avatar{transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;box-shadow:0 2px 5px #00000014;z-index:2}.user-avatar:hover{transform:scale(1.08);box-shadow:0 4px 12px #00000026}.user-avatar:before{content:\"\";position:absolute;inset:-3px;background:radial-gradient(circle,rgba(59,130,246,.3),transparent 70%);opacity:0;transition:opacity .3s ease;z-index:-1;border-radius:50%}.user-avatar:hover:before{opacity:1}.user-status{position:absolute;bottom:0;right:0;width:10px;height:10px;border-radius:50%;border:2px solid white;transition:all .3s ease}.user-status.online{background-color:#10b981;animation:statusPulse 2s infinite}.user-status.busy{background-color:#f59e0b}.user-status.offline{background-color:#6b7280}.user-status.dnd{background-color:#ef4444}@keyframes statusPulse{0%{box-shadow:0 0 #10b98166}70%{box-shadow:0 0 0 6px #10b98100}to{box-shadow:0 0 #10b98100}}.dark-mode .user-avatar{box-shadow:0 2px 5px #0003}.dark-mode .user-avatar:before{background:radial-gradient(circle,rgba(96,165,250,.4),transparent 70%)}.dark-mode .user-status{border-color:#0f172a}.user-dropdown{position:relative}.user-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);z-index:30;margin-left:10px;margin-bottom:5px;max-height:80vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);box-shadow:0 10px 25px #0000001a;border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:absolute;left:100%;bottom:0;margin-top:.5rem;margin-left:.5rem;width:14rem;border-radius:.375rem;box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color);background-color:var(--cide-theme-sidebar-color);border:1px solid var(--cide-theme-border-color);z-index:50;overflow:hidden}.user-menu a{color:var(--cide-theme-text-color);transition:background-color .2s ease}.user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.user-menu .tw-text-red-700{color:var(--cide-theme-error-color)}.user-menu::-webkit-scrollbar{width:3px}.user-menu::-webkit-scrollbar-track{background:transparent}.user-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.user-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.user-status{transition:all .3s ease;box-shadow:0 0 0 2px var(--cide-theme-sidebar-color)}.user-status.online{animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 #22c55e66,0 0 0 2px var(--cide-theme-sidebar-color)}70%{box-shadow:0 0 0 4px #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}to{box-shadow:0 0 #22c55e00,0 0 0 2px var(--cide-theme-sidebar-color)}}.cide-lyt-sidebar-menu{width:var(--cide-lyt-sidebar-menu-width);background-color:var(--cide-theme-sidebar-color);border-left:1px solid rgb(var(--tw-gray-100-rgb) / 1);transition:width .3s cubic-bezier(.4,0,.2,1),opacity .3s cubic-bezier(.4,0,.2,1) .1s,visibility .3s cubic-bezier(.4,0,.2,1) .1s,transform .3s cubic-bezier(.4,0,.2,1) .1s;display:flex;flex-direction:column;overflow:hidden;max-height:100%;position:relative;will-change:width,opacity,transform;opacity:1;visibility:visible;transform:translate(0)}.sidebar-header{background-color:var(--cide-theme-sidebar-color);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--cide-theme-border-color);padding:1rem .75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.sidebar-header.scrolled{box-shadow:0 4px 10px -8px var(--cide-theme-shadow-color)}.back-button{transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%}.back-button:hover{transform:translate(-2px);background-color:rgb(var(--tw-gray-100-rgb) / 1)}.back-button:active{transform:translate(-1px) scale(.95)}.search-wrapper{position:relative;transition:all .3s ease}.search-wrapper:focus-within{transform:translateY(-1px)}.search-shortcut{font-size:.65rem;opacity:.7;letter-spacing:.02em;pointer-events:none;padding:.1rem .3rem;background-color:rgb(var(--tw-gray-100-rgb) / .8);border-radius:.25rem;border:1px solid rgb(var(--tw-gray-200-rgb) / .8);transition:all .3s ease}.search-wrapper:focus-within .search-shortcut{opacity:.5}.options-menu{animation:fadeInUp .2s cubic-bezier(.4,0,.2,1);box-shadow:0 4px 12px #0000001a;max-height:70vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);border-radius:.75rem;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.options-menu::-webkit-scrollbar{width:3px}.options-menu::-webkit-scrollbar-track{background:transparent}.options-menu::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.options-menu:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{position:relative;padding:.25rem 0}.sidebar-section:not(:first-child):before{content:\"\";height:1px;background:linear-gradient(to right,#e5e7eb00,#e5e7eb80,#e5e7eb00);position:absolute;top:0;left:10%;right:10%}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;position:relative;display:inline-block;padding:0 .5rem;color:var(--cide-theme-label-color)}.tw-text-xs.tw-font-semibold.tw-text-gray-500:after{content:\"\";position:absolute;height:3px;width:2rem;background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.5),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));bottom:-4px;left:.5rem;border-radius:3px;transition:width .3s ease}.sidebar-section:hover .tw-text-xs.tw-font-semibold.tw-text-gray-500:after{width:3rem}.menu-item{text-decoration:none;transition:all .25s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;margin:2px 0;border-radius:.5rem;transform:translateZ(0);color:var(--cide-theme-text-color)}.menu-item:hover{transform:translate(3px);background-color:var(--cide-theme-light-color);box-shadow:0 1px 3px var(--sidebar-shadow-color)}.active-menu-item{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.08);position:relative;box-shadow:0 2px 5px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1)}.active-menu-item:after{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background:linear-gradient(to bottom,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));border-radius:0 2px 2px 0;box-shadow:0 0 6px rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.3);animation:pulseLeftBorder 2s infinite}@keyframes pulseLeftBorder{0%{opacity:.7}50%{opacity:1}to{opacity:.7}}:root[data-theme=dark] .active-menu-item,:root.dark-mode .active-menu-item{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 5px var(--cide-theme-shadow-color)}:root[data-theme=dark] .active-menu-item:after,:root.dark-mode .active-menu-item:after{background:linear-gradient(to bottom,var(--cide-theme-primary-color),var(--cide-theme-info-color));box-shadow:0 0 8px #60a5fa66}.quick-actions{transition:all .3s ease;opacity:0;transform:translate(5px);z-index:2}.menu-item:hover .quick-actions{opacity:1;transform:translate(0)}.badge{font-size:.7rem;padding:1px 5px;transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.menu-item:hover .badge{background-color:#d1d5db}.new-badge{animation:pulse 2s infinite;z-index:1}@keyframes pulse{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 4px #3b82f600}to{box-shadow:0 0 #3b82f600}}.toggle-switch{display:inline-flex;align-items:center;transition:all .2s ease}.toggle-switch:hover{transform:scale(1.05)}.toggle-track{position:relative;cursor:pointer;transition:background-color .3s ease;overflow:hidden}.toggle-track:after{content:\"\";position:absolute;top:50%;left:50%;width:5px;height:5px;background:rgb(var(--tw-white-rgb) / .7);opacity:0;border-radius:100%;transform:scale(1) translate(-50%,-50%);transform-origin:50% 50%}.toggle-track.clicked:after{animation:ripple .6s ease-out}@keyframes ripple{0%{opacity:1;transform:scale(0) translate(-50%,-50%)}to{opacity:0;transform:scale(20) translate(-50%,-50%)}}.alert-box{animation:fadeIn .5s cubic-bezier(.4,0,.2,1);box-shadow:0 2px 8px #fde04726;border-radius:.5rem;position:relative;overflow:hidden}.alert-box:before{content:\"\";position:absolute;inset:0;background-image:url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fef3c7' fill-opacity='0.4' fill-rule='evenodd'%3E%3Ccircle cx='3' cy='3' r='3'/%3E%3Ccircle cx='13' cy='13' r='3'/%3E%3C/g%3E%3C/svg%3E\");opacity:.3;pointer-events:none}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.notification-panel{animation:fadeIn .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;max-height:100vh;scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);padding:.75rem;border-radius:.75rem}.notification-panel::-webkit-scrollbar{width:3px}.notification-panel::-webkit-scrollbar-track{background:transparent}.notification-panel::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.notification-panel:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.notification-item{transition:all .2s cubic-bezier(.4,0,.2,1);cursor:pointer;border-radius:.5rem;margin-bottom:.5rem;position:relative;overflow:hidden;word-wrap:break-word;overflow-wrap:break-word}.notification-item:hover{background-color:rgb(var(--tw-gray-100-rgb) / 1);transform:translate(1px)}.notification-item:active{transform:scale(.99)}.notification-item.unread:before{content:\"\";position:absolute;left:0;top:0;height:100%;width:3px;background-color:var(--cide-theme-color-brand-primary);border-radius:0 2px 2px 0}.sidebar-footer{background-color:var(--cide-theme-light-color);position:sticky;bottom:0;z-index:10;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-top:1px solid var(--cide-theme-border-color);padding:.75rem;transition:all .3s ease;color:var(--cide-theme-text-color)}.upgrade-button{transition:all .2s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;border-radius:.5rem;color:var(--cide-theme-text-color)}.upgrade-button:hover{background-color:rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1);transform:translateY(-1px)}.upgrade-button:active{transform:translateY(0) scale(.98)}.upgrade-button:after{content:\"\";position:absolute;width:12px;height:12px;background-image:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'%3E%3C/polygon%3E%3C/svg%3E\");top:5px;right:10px;opacity:.5;transform:scale(0);transition:all .3s ease}.upgrade-button:hover:after{transform:scale(1) rotate(20deg);animation:float 3s ease-in-out infinite}@keyframes float{0%,to{transform:scale(1) rotate(5deg) translate(0)}50%{transform:scale(1.1) rotate(-5deg) translate(-2px,-2px)}}.storage-bar{background-color:#e5e7eb80;overflow:hidden;border-radius:4px;height:6px;position:relative}.storage-fill{background:linear-gradient(to right,var(--cide-theme-color-brand-primary),var(--cide-theme-secondary-color));transition:width 1s cubic-bezier(.4,0,.2,1);position:relative;height:100%;border-radius:4px}.storage-fill:after{content:\"\";position:absolute;inset:0;background:linear-gradient(90deg,rgb(var(--tw-white-rgb) / 0),rgb(var(--tw-white-rgb) / .2),rgb(var(--tw-white-rgb) / 0));animation:shimmer 2s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.plan-features{transition:all .3s ease;padding:.5rem;border-radius:.5rem}.plan-features:hover{background-color:rgb(var(--tw-gray-100-rgb) / .5)}.feature-item{display:flex;align-items:center;margin:.25rem 0;position:relative;padding-left:1.25rem;color:var(--cide-theme-text-color)}.feature-item:before{content:\"\\2713\";position:absolute;left:0;color:var(--cide-theme-color-brand-primary);font-size:.7rem;top:50%;transform:translateY(-50%)}.sidebar-content{scrollbar-width:thin;scrollbar-color:var(--cide-ele-scrollbar-thumb, #d1d5db) var(--cide-ele-scrollbar-track, transparent);flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:0 .75rem;transition:all .3s ease;position:relative;scroll-behavior:smooth;scroll-padding:1rem;overscroll-behavior:contain;color:var(--cide-theme-text-color)}.sidebar-content:after{content:\"\";position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(to top,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content:before{content:\"\";position:absolute;top:0;left:0;right:0;height:30px;background:linear-gradient(to bottom,color-mix(in srgb,var(--cide-theme-sidebar-color) 90%,transparent),transparent);pointer-events:none;opacity:0;transition:opacity .3s ease;z-index:2}.sidebar-content.scrolled-down:before{opacity:1}.sidebar-content.scrolled-up:after{opacity:1}.sidebar-content::-webkit-scrollbar{width:3px}.sidebar-content::-webkit-scrollbar-track{background:transparent}.sidebar-content::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.sidebar-content:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.cide-lyt-sidebar *::-webkit-scrollbar{width:3px}.cide-lyt-sidebar *::-webkit-scrollbar-track{background:var(--cide-ele-scrollbar-track, transparent)}.cide-lyt-sidebar *::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb, #d1d5db);border-radius:20px;opacity:.7}.cide-lyt-sidebar *:hover::-webkit-scrollbar-thumb{background-color:var(--cide-ele-scrollbar-thumb-hover, #9ca3af);opacity:1}.sidebar-section{transition:all .3s ease-out;transform:translateY(0);opacity:1}.sidebar-section.animate-in{animation:slideInUp .4s cubic-bezier(.4,0,.2,1) forwards}@keyframes slideInUp{0%{opacity:.5;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}.sidebar-section:nth-child(1).animate-in{animation-delay:.1s}.sidebar-section:nth-child(2).animate-in{animation-delay:.2s}.sidebar-section:nth-child(3).animate-in{animation-delay:.3s}.sidebar-section:nth-child(4).animate-in{animation-delay:.4s}.sidebar-section:nth-child(5).animate-in{animation-delay:.5s}:host ::ng-deep cide-ele-input{width:100%}:host ::ng-deep .cide-input-field{border-radius:8px;background-color:#f9fafb;border:1px solid transparent;transition:all .2s cubic-bezier(.4,0,.2,1)}:host ::ng-deep .cide-input-field:focus-within{border-color:#d1d5db;background-color:#fff;box-shadow:0 2px 8px #0000000d;transform:translateY(-1px)}.cide-lyt-sidebar *:focus{outline:none;box-shadow:0 0 0 2px #3b82f64d}:root[data-theme=dark] .cide-lyt-sidebar,:root.dark-mode .cide-lyt-sidebar,html[data-theme=dark] .cide-lyt-sidebar,html.dark-mode .cide-lyt-sidebar{--sidebar-tooltip-bg: var(--cide-theme-dark-color);--sidebar-tooltip-color: var(--cide-theme-light-color);background-color:var(--cide-theme-sidebar-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] .cide-lyt-stack,:root.dark-mode .cide-lyt-stack,html[data-theme=dark] .cide-lyt-stack,html.dark-mode .cide-lyt-stack{background-color:var(--cide-theme-dark-color);border-right-color:var(--cide-theme-border-color)}:root[data-theme=dark] .cide-lyt-stack:before,:root[data-theme=dark] .cide-lyt-stack:after,:root[data-theme=dark] .sidebar-content:before,:root[data-theme=dark] .sidebar-content:after,:root.dark-mode .cide-lyt-stack:before,:root.dark-mode .cide-lyt-stack:after,:root.dark-mode .sidebar-content:before,:root.dark-mode .sidebar-content:after{background:linear-gradient(to bottom,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .sidebar-content:after,:root[data-theme=dark] .cide-lyt-stack:after,:root.dark-mode .sidebar-content:after,:root.dark-mode .cide-lyt-stack:after{background:linear-gradient(to top,var(--cide-theme-dark-color),transparent)}:root[data-theme=dark] .cide-lyt-sidebar-menu,:root.dark-mode .cide-lyt-sidebar-menu{background-color:var(--cide-theme-dark-color);border-left-color:var(--cide-theme-border-color)}:root[data-theme=dark] .sidebar-header,:root[data-theme=dark] .sidebar-footer,:root.dark-mode .sidebar-header,:root.dark-mode .sidebar-footer{background-color:var(--cide-theme-light-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .tw-text-gray-700,:root.dark-mode .tw-text-gray-700{color:var(--cide-theme-text-color)}:root[data-theme=dark] .tw-text-gray-500,:root.dark-mode .tw-text-gray-500{color:var(--cide-theme-label-color)}:root[data-theme=dark] .tw-bg-gray-50,:root[data-theme=dark] .menu-item:hover,:root.dark-mode .tw-bg-gray-50,:root.dark-mode .menu-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .tw-bg-gray-100,:root.dark-mode .tw-bg-gray-100{background-color:var(--cide-theme-light-color)}:root[data-theme=dark] .tw-bg-gray-200,:root.dark-mode .tw-bg-gray-200{background-color:var(--cide-theme-border-color)}:root[data-theme=dark] .nav-item:hover:before,:root.dark-mode .nav-item:hover:before{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .back-button:hover,:root.dark-mode .back-button:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .sidebar-section:not(:first-child):before,:root.dark-mode .sidebar-section:not(:first-child):before{background:linear-gradient(to right,transparent 0%,var(--cide-theme-border-color) 50%,transparent 100%)}:root[data-theme=dark] .toggle-track:after,:root.dark-mode .toggle-track:after{background:#00000080}:root[data-theme=dark] .alert-box:before,:root.dark-mode .alert-box:before{opacity:.2}:root[data-theme=dark] :host ::ng-deep .cide-input-field,:root.dark-mode :host ::ng-deep .cide-input-field{background-color:var(--cide-theme-light-color);color:var(--cide-theme-text-color)}:root[data-theme=dark] :host ::ng-deep .cide-input-field:focus-within,:root.dark-mode :host ::ng-deep .cide-input-field:focus-within{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-dark-color)}.nav-item-active .nav-indicator{animation:pulseIndicator 2s infinite}@keyframes pulseIndicator{0%{box-shadow:0 0 #3b82f666}70%{box-shadow:0 0 0 3px #3b82f600}to{box-shadow:0 0 #3b82f600}}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}@media screen and (max-width: 1024px){.cide-lyt-sidebar-menu{width:220px}.sidebar-content{padding:0 .25rem}.tw-text-xs.tw-font-semibold.tw-text-gray-500{font-size:.65rem}}@media screen and (max-width: 768px){.cide-lyt-sidebar-menu{position:fixed;width:100%;max-width:280px;left:72px;z-index:40;box-shadow:0 10px 25px #00000026;border-radius:0 1rem 1rem 0}.cide-lyt-sidebar.collapsed .cide-lyt-sidebar-menu{left:-100%}.sidebar-overlay{position:fixed;inset:0;background-color:#0000004d;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:35}.sidebar-overlay.active{opacity:1;pointer-events:auto}}.cide-lyt-sidebar,.cide-lyt-stack,.cide-lyt-sidebar-menu,.sidebar-logo,.nav-item,.menu-item,.user-avatar,.upgrade-button,.storage-fill,.notification-item,.sidebar-section.animate-in{transform:translateZ(0);backface-visibility:hidden;perspective:1000px;will-change:transform,opacity}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background:linear-gradient(135deg,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.15),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),.1));box-shadow:0 2px 8px #1e40af40}:root[data-theme=dark] .nav-item-active:after,:root.dark-mode .nav-item-active:after{background:linear-gradient(to right,rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0),rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.6),rgba(var(--cide-theme-color-brand-primary-rgb, 59, 130, 246),0));box-shadow:0 0 5px rgba(var(--cide-theme-secondary-color-rgb, 74, 222, 128),.5)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color);box-shadow:0 2px 8px var(--cide-theme-shadow-color)}:root[data-theme=dark] .nav-tooltip,:root.dark-mode .nav-tooltip{background-color:var(--cide-theme-tooltip-dark-bg);box-shadow:0 3px 10px var(--cide-theme-shadow-color);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}:root[data-theme=dark] .nav-tooltip:before,:root.dark-mode .nav-tooltip:before{border-color:transparent var(--cide-theme-tooltip-dark-bg) transparent transparent}.text-theme-primary{color:var(--cide-theme-color-brand-primary)}.text-theme-secondary{color:var(--cide-theme-secondary-color)}.text-theme-text{color:var(--cide-theme-text-color)}.text-theme-label{color:var(--cide-theme-label-color)}.bg-theme-primary{background-color:var(--cide-theme-color-brand-primary)}.bg-theme-secondary{background-color:var(--cide-theme-secondary-color)}.bg-theme-light{background-color:var(--cide-theme-light-color)}.bg-theme-dark{background-color:var(--cide-theme-dark-color)}.bg-theme-sidebar{background-color:var(--cide-theme-sidebar-color)}.border-theme-light{border-color:var(--cide-theme-light-color)}.border-theme-primary{border-color:var(--cide-theme-color-brand-primary)}.hover-bg-theme-light:hover{background-color:var(--cide-theme-light-color)}.hover-text-theme-primary:hover{color:var(--cide-theme-color-brand-primary)}.tw-text-gray-500{color:var(--cide-theme-icon-color)}.hover\\:tw-text-gray-700:hover{color:var(--cide-theme-icon-hover-color)}.tw-text-gray-700{color:var(--cide-theme-text-color)}.tw-text-red-500,.tw-text-red-600,.tw-text-red-700{color:var(--cide-theme-error-color)}.tw-bg-gray-200{background-color:var(--cide-theme-border-color)}.hover\\:tw-bg-gray-100:hover{background-color:var(--cide-theme-hover-bg-color)}.tw-bg-white{background-color:var(--cide-theme-sidebar-color)}.tw-bg-green-500{background-color:var(--cide-theme-success-color)}.tw-border-gray-100,.tw-divide-gray-100{border-color:var(--cide-theme-border-color)}.tw-shadow-lg{box-shadow:0 10px 15px -3px var(--cide-theme-shadow-color),0 4px 6px -2px var(--cide-theme-shadow-color)}.tw-shadow-sm,.hover\\:tw-shadow:hover{box-shadow:0 1px 2px 0 var(--cide-theme-shadow-color)}.active-nav-icon{color:var(--cide-theme-color-brand-primary)!important}.nav-item{display:flex;align-items:center;justify-content:center;position:relative;border-radius:.375rem}.nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}.nav-item:hover cide-ele-icon{color:var(--cide-theme-icon-hover-color)}.nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-color-brand-primary) 10%,var(--cide-theme-light-color))}.nav-item-active cide-ele-icon{color:var(--cide-theme-color-brand-primary)}.nav-indicator{opacity:0;transition:opacity .2s ease}.nav-item-active .nav-indicator{opacity:1}.nav-tooltip{position:absolute;left:100%;top:50%;transform:translateY(-50%);background-color:var(--sidebar-tooltip-bg);color:var(--sidebar-tooltip-color);padding:.25rem .5rem;border-radius:.25rem;font-size:.75rem;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease;margin-left:.5rem;z-index:30;box-shadow:0 2px 8px var(--cide-theme-shadow-color)}.nav-item:hover .nav-tooltip{opacity:1}.nav-badge{position:absolute;top:-.25rem;right:-.25rem;width:.375rem;height:.375rem;border-radius:9999px;background-color:var(--cide-theme-error-color);animation:ping 1s cubic-bezier(0,0,.2,1) infinite}@keyframes ping{75%,to{transform:scale(2);opacity:0}}.user-avatar{width:2.5rem;height:2.5rem;border-radius:9999px;overflow:hidden;background-color:var(--cide-theme-border-color);border:2px solid var(--cide-theme-sidebar-color);box-shadow:0 1px 2px var(--cide-theme-shadow-color);cursor:pointer;transition:box-shadow .2s ease}.user-avatar:hover{box-shadow:0 2px 4px var(--cide-theme-shadow-color)}.user-status{position:absolute;bottom:0;right:0;width:.75rem;height:.75rem;border-radius:9999px;background-color:var(--cide-theme-success-color);border:2px solid var(--cide-theme-sidebar-color)}:root[data-theme=dark] .nav-item:hover,:root.dark-mode .nav-item:hover{background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .nav-item-active,:root.dark-mode .nav-item-active{background-color:color-mix(in srgb,var(--cide-theme-primary-color) 30%,var(--cide-theme-dark-color))}:root[data-theme=dark] .user-avatar,:root.dark-mode .user-avatar{border-color:var(--cide-theme-border-color);background-color:var(--cide-theme-hover-bg-color)}:root[data-theme=dark] .user-status,:root.dark-mode .user-status{border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu,:root.dark-mode .user-menu{background-color:var(--cide-theme-sidebar-color);border-color:var(--cide-theme-border-color)}:root[data-theme=dark] .user-menu a,:root.dark-mode .user-menu a{color:var(--cide-theme-text-color)}:root[data-theme=dark] .user-menu a:hover,:root.dark-mode .user-menu a:hover{background-color:var(--cide-theme-hover-bg-color)}.section-header{transition:all .2s ease;border:1px solid transparent}.section-header:hover{background-color:#f8fafc!important;border-color:#e2e8f0}.section-header:focus{outline:none;box-shadow:0 0 0 2px #3b82f6;border-color:#3b82f6}.section-content{overflow:hidden;transition:all .3s ease}.section-header .tw-rotate-90{transform:rotate(90deg)}.section-content .tw-border-l{border-left-color:#d1d5db}.section-header:hover .tw-text-gray-500{color:#6b7280}.section-header:hover .tw-text-gray-800{color:#374151}\n"] }]
         }], ctorParameters: () => [], propDecorators: { onDocumentClick: [{
                 type: HostListener,
                 args: ['document:click', ['$event']]
@@ -3958,8 +4701,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-BTgVotrr.mjs').then(m => m.CideLytSidedrawerNotesComponent);
-        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-Bi1TTe5I.mjs').then(m => m.CideLytDrawerThemeComponent);
+        this.componentMap['drowar_notes'] = () => import('./cloud-ide-layout-sidedrawer-notes.component-CBaWZcFe.mjs').then(m => m.CideLytSidedrawerNotesComponent);
+        this.componentMap['drawer_theme'] = () => import('./cloud-ide-layout-drawer-theme.component-Cht8K9ql.mjs').then(m => m.CideLytDrawerThemeComponent);
     }
     async loadComponent(configFor) {
         console.log('🔍 SIDEDRAWER - Loading component:', configFor, 'Current tab:', this.currentTabId);
@@ -4123,7 +4866,617 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 args: ['notesContainer', { read: ViewContainerRef }]
             }] } });
 
+/**
+ * Shortcuts Panel Component
+ * Displays all registered keyboard shortcuts (system and user-defined)
+ */
+class ShortcutsPanelComponent {
+    keyboardShortcutService = inject(KeyboardShortcutService);
+    sanitizer = inject(DomSanitizer);
+    shortcuts = signal([], ...(ngDevMode ? [{ debugName: "shortcuts" }] : []));
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    viewMode = signal('grouped', ...(ngDevMode ? [{ debugName: "viewMode" }] : []));
+    filteredShortcuts = computed(() => {
+        const query = this.searchQuery().toLowerCase();
+        if (!query)
+            return this.shortcuts();
+        return this.shortcuts().filter(shortcut => shortcut.title.toLowerCase().includes(query) ||
+            shortcut.description?.toLowerCase().includes(query) ||
+            shortcut.keyCombination.toLowerCase().includes(query) ||
+            shortcut.category.toLowerCase().includes(query));
+    }, ...(ngDevMode ? [{ debugName: "filteredShortcuts" }] : []));
+    categories = computed(() => {
+        const cats = new Set();
+        this.shortcuts().forEach(s => {
+            if (s.category)
+                cats.add(s.category);
+        });
+        return Array.from(cats).sort();
+    }, ...(ngDevMode ? [{ debugName: "categories" }] : []));
+    ngOnInit() {
+        this.loadShortcuts();
+    }
+    /**
+     * Load all shortcuts from services
+     */
+    loadShortcuts() {
+        const displayShortcuts = [];
+        // Load from KeyboardShortcutService
+        const keyboardShortcuts = this.keyboardShortcutService.getAllShortcuts();
+        keyboardShortcuts.forEach(shortcut => {
+            displayShortcuts.push(this.convertToDisplay(shortcut));
+        });
+        // TODO: Load from AppShortcutService when available
+        // For now, only KeyboardShortcutService shortcuts are loaded
+        // Sort by category, then by title
+        displayShortcuts.sort((a, b) => {
+            if (a.category !== b.category) {
+                return a.category.localeCompare(b.category);
+            }
+            return a.title.localeCompare(b.title);
+        });
+        this.shortcuts.set(displayShortcuts);
+    }
+    /**
+     * Convert KeyboardShortcut to ShortcutDisplay
+     */
+    convertToDisplay(shortcut) {
+        const extended = shortcut;
+        return {
+            id: shortcut.id,
+            title: extended.title || shortcut.description || shortcut.id,
+            description: shortcut.description,
+            keyCombination: this.formatKeyCombination(shortcut),
+            category: extended.category || 'general',
+            isUserDefined: extended.isUserDefined || false,
+            featuredHTML: extended.featuredHTML
+        };
+    }
+    /**
+     * Format key combination string
+     */
+    formatKeyCombination(shortcut) {
+        const parts = [];
+        if (shortcut.ctrlKey)
+            parts.push('Ctrl');
+        if (shortcut.altKey)
+            parts.push('Alt');
+        if (shortcut.shiftKey)
+            parts.push('Shift');
+        if (shortcut.metaKey)
+            parts.push('Meta');
+        parts.push(shortcut.key.toUpperCase());
+        return parts.join(' + ');
+    }
+    /**
+     * Get shortcuts by category
+     */
+    getShortcutsByCategory(category) {
+        return this.filteredShortcuts().filter(s => s.category === category);
+    }
+    /**
+     * Get key parts for display
+     */
+    getKeyParts(keyCombination) {
+        return keyCombination.split(' + ');
+    }
+    /**
+     * Sanitize HTML content
+     */
+    sanitizeHTML(html) {
+        if (!html)
+            return '';
+        return this.sanitizer.sanitize(1, html); // SecurityContext.HTML = 1
+    }
+    /**
+     * Toggle view mode
+     */
+    toggleView() {
+        this.viewMode.set(this.viewMode() === 'grouped' ? 'list' : 'grouped');
+    }
+    /**
+     * Handle search query change
+     */
+    onSearchChange() {
+        // Computed signal will automatically update
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: ShortcutsPanelComponent, isStandalone: true, selector: "cide-lyt-shortcuts-panel", ngImport: i0, template: `
+    <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
+      <!-- View Toggle -->
+      <div class="tw-flex tw-items-center tw-justify-end tw-mb-4">
+        <button
+          type="button"
+          cideEleButton
+          variant="outline"
+          size="sm"
+          (click)="toggleView()">
+          <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
+          {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
+        </button>
+      </div>
+
+      <!-- Search -->
+      <div class="tw-relative">
+        <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
+        <input
+          type="text"
+          [value]="searchQuery()"
+          (input)="searchQuery.set($any($event.target).value)"
+          placeholder="Search shortcuts..."
+          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-700 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
+      </div>
+
+      <!-- Shortcuts Content -->
+      @if (filteredShortcuts().length === 0) {
+        <div class="tw-py-12 tw-text-center">
+          <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
+          <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
+        </div>
+      } @else {
+        @if (viewMode() === 'grouped') {
+          <!-- Grouped View -->
+          @for (category of categories(); track category) {
+            <div class="tw-space-y-2">
+              <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
+                {{ category }}
+              </h4>
+              <div class="tw-space-y-2">
+                @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
+                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                    @if (shortcut.featuredHTML) {
+                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                        <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
+                      </div>
+                    }
+                    <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
+                      <div class="tw-flex-1">
+                        <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
+                          <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
+                            {{ shortcut.title }}
+                          </h5>
+                          @if (shortcut.isUserDefined) {
+                            <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
+                          }
+                        </div>
+                        @if (shortcut.description) {
+                          <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
+                        }
+                      </div>
+                      <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
+                        @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
+                          <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
+                            {{ key }}
+                          </kbd>
+                          @if (!isLast) {
+                            <span class="tw-text-gray-400 tw-text-xs">+</span>
+                          }
+                        }
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        } @else {
+          <!-- List View -->
+          <div class="tw-space-y-2">
+            @for (shortcut of filteredShortcuts(); track shortcut.id) {
+              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                @if (shortcut.featuredHTML) {
+                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                    <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
+                  </div>
+                }
+                <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
+                  <div class="tw-flex-1">
+                    <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
+                      <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
+                        {{ shortcut.title }}
+                      </h5>
+                      @if (shortcut.isUserDefined) {
+                        <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
+                      }
+                    </div>
+                    @if (shortcut.description) {
+                      <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
+                    }
+                    @if (shortcut.category) {
+                      <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
+                        {{ shortcut.category }}
+                      </span>
+                    }
+                  </div>
+                  <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
+                    @for (key of getKeyParts(shortcut.keyCombination); track $index) {
+                      <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
+                        {{ key }}
+                      </kbd>
+                      @if (!$last) {
+                        <span class="tw-text-gray-400 tw-text-xs">+</span>
+                      }
+                    }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ShortcutsPanelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-shortcuts-panel', standalone: true, imports: [CommonModule, FormsModule, CideIconComponent, CideEleButtonComponent], template: `
+    <div class="tw-p-6 tw-space-y-4 tw-bg-white dark:tw-bg-gray-900">
+      <!-- View Toggle -->
+      <div class="tw-flex tw-items-center tw-justify-end tw-mb-4">
+        <button
+          type="button"
+          cideEleButton
+          variant="outline"
+          size="sm"
+          (click)="toggleView()">
+          <cide-ele-icon>{{ viewMode() === 'grouped' ? 'view_list' : 'category' }}</cide-ele-icon>
+          {{ viewMode() === 'grouped' ? 'List View' : 'Grouped View' }}
+        </button>
+      </div>
+
+      <!-- Search -->
+      <div class="tw-relative">
+        <cide-ele-icon class="tw-absolute tw-left-2 tw-top-1/2 tw-transform -tw-translate-y-1/2 tw-text-gray-400">search</cide-ele-icon>
+        <input
+          type="text"
+          [value]="searchQuery()"
+          (input)="searchQuery.set($any($event.target).value)"
+          placeholder="Search shortcuts..."
+          class="tw-w-full tw-pl-8 tw-pr-3 tw-py-2 tw-text-sm tw-border tw-border-gray-300 dark:tw-border-gray-600 tw-rounded-lg tw-bg-white dark:tw-bg-gray-700 tw-text-gray-900 dark:tw-text-gray-100 focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500">
+      </div>
+
+      <!-- Shortcuts Content -->
+      @if (filteredShortcuts().length === 0) {
+        <div class="tw-py-12 tw-text-center">
+          <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-2">keyboard_off</cide-ele-icon>
+          <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">No shortcuts found</p>
+        </div>
+      } @else {
+        @if (viewMode() === 'grouped') {
+          <!-- Grouped View -->
+          @for (category of categories(); track category) {
+            <div class="tw-space-y-2">
+              <h4 class="tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase tw-tracking-wide tw-mt-4 tw-mb-2">
+                {{ category }}
+              </h4>
+              <div class="tw-space-y-2">
+                @for (shortcut of getShortcutsByCategory(category); track shortcut.id) {
+                  <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                    @if (shortcut.featuredHTML) {
+                      <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                        <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
+                      </div>
+                    }
+                    <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
+                      <div class="tw-flex-1">
+                        <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
+                          <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
+                            {{ shortcut.title }}
+                          </h5>
+                          @if (shortcut.isUserDefined) {
+                            <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
+                          }
+                        </div>
+                        @if (shortcut.description) {
+                          <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
+                        }
+                      </div>
+                      <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
+                        @for (key of getKeyParts(shortcut.keyCombination); track $index; let isLast = $last) {
+                          <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
+                            {{ key }}
+                          </kbd>
+                          @if (!isLast) {
+                            <span class="tw-text-gray-400 tw-text-xs">+</span>
+                          }
+                        }
+                      </div>
+                    </div>
+                  </div>
+                }
+              </div>
+            </div>
+          }
+        } @else {
+          <!-- List View -->
+          <div class="tw-space-y-2">
+            @for (shortcut of filteredShortcuts(); track shortcut.id) {
+              <div class="tw-p-3 tw-bg-gray-50 dark:tw-bg-gray-700/50 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-600 hover:tw-border-blue-500 dark:hover:tw-border-blue-400 tw-transition-colors">
+                @if (shortcut.featuredHTML) {
+                  <div class="tw-mb-2 tw-p-2 tw-bg-white dark:tw-bg-gray-800 tw-rounded tw-border tw-border-gray-200 dark:tw-border-gray-600">
+                    <div [innerHTML]="sanitizeHTML(shortcut.featuredHTML)"></div>
+                  </div>
+                }
+                <div class="tw-flex tw-items-start tw-justify-between tw-gap-3">
+                  <div class="tw-flex-1">
+                    <div class="tw-flex tw-items-center tw-gap-2 tw-mb-1">
+                      <h5 class="tw-m-0 tw-text-sm tw-font-medium tw-text-gray-900 dark:tw-text-gray-100">
+                        {{ shortcut.title }}
+                      </h5>
+                      @if (shortcut.isUserDefined) {
+                        <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-bg-blue-50 dark:tw-bg-blue-900/30 tw-rounded">Custom</span>
+                      }
+                    </div>
+                    @if (shortcut.description) {
+                      <p class="tw-m-0 tw-text-xs tw-text-gray-600 dark:tw-text-gray-400">{{ shortcut.description }}</p>
+                    }
+                    @if (shortcut.category) {
+                      <span class="tw-inline-block tw-mt-1 tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-medium tw-text-gray-500 dark:tw-text-gray-400 tw-bg-gray-100 dark:tw-bg-gray-600 tw-rounded">
+                        {{ shortcut.category }}
+                      </span>
+                    }
+                  </div>
+                  <div class="tw-flex tw-items-center tw-gap-1 tw-flex-shrink-0">
+                    @for (key of getKeyParts(shortcut.keyCombination); track $index) {
+                      <kbd class="tw-px-2 tw-py-1 tw-text-xs tw-font-semibold tw-text-gray-700 dark:tw-text-gray-300 tw-bg-gray-200 dark:tw-bg-gray-600 tw-border tw-border-gray-300 dark:tw-border-gray-500 tw-rounded tw-shadow-sm">
+                        {{ key }}
+                      </kbd>
+                      @if (!$last) {
+                        <span class="tw-text-gray-400 tw-text-xs">+</span>
+                      }
+                    }
+                  </div>
+                </div>
+              </div>
+            }
+          </div>
+        }
+      }
+    </div>
+  `, styles: [":host{display:block}kbd{font-family:ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;font-size:.75rem;line-height:1.5}\n"] }]
+        }] });
+
+/**
+ * Settings Container Component
+ * Main settings panel with left sidebar navigation and content area
+ */
+class SettingsContainerComponent {
+    selectedSection = signal('notifications', ...(ngDevMode ? [{ debugName: "selectedSection" }] : []));
+    sections = signal([
+        {
+            id: 'notifications',
+            title: 'Notifications',
+            icon: 'notifications',
+            description: 'Manage notification preferences',
+            component: NotificationSettingsComponent
+        },
+        {
+            id: 'shortcuts',
+            title: 'Keyboard Shortcuts',
+            icon: 'keyboard',
+            description: 'View and manage keyboard shortcuts',
+            component: ShortcutsPanelComponent
+        },
+        {
+            id: 'appearance',
+            title: 'Appearance',
+            icon: 'palette',
+            description: 'Customize theme and display'
+        },
+        {
+            id: 'account',
+            title: 'Account',
+            icon: 'account_circle',
+            description: 'Manage your account settings'
+        },
+        {
+            id: 'security',
+            title: 'Security',
+            icon: 'lock',
+            description: 'Password and security settings'
+        },
+        {
+            id: 'privacy',
+            title: 'Privacy',
+            icon: 'privacy_tip',
+            description: 'Privacy and data settings'
+        }
+    ], ...(ngDevMode ? [{ debugName: "sections" }] : []));
+    currentSection = computed(() => {
+        return this.sections().find(s => s.id === this.selectedSection());
+    }, ...(ngDevMode ? [{ debugName: "currentSection" }] : []));
+    ngOnInit() {
+        // Initialize with first section if none selected
+        if (!this.selectedSection() && this.sections().length > 0) {
+            this.selectedSection.set(this.sections()[0].id);
+        }
+    }
+    selectSection(sectionId) {
+        this.selectedSection.set(sectionId);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SettingsContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: SettingsContainerComponent, isStandalone: true, selector: "cide-lyt-settings-container", ngImport: i0, template: `
+    <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
+      <!-- Left Sidebar Navigation -->
+      <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
+        <!-- Header -->
+        <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
+          <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
+          <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
+        </div>
+
+        <!-- Navigation List -->
+        <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
+          @for (section of sections(); track section.id) {
+            <button
+              type="button"
+              (click)="selectSection(section.id)"
+              [ngClass]="{
+                'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
+                'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
+              }"
+              class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700">
+              <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
+              <div class="tw-flex-1 tw-min-w-0">
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
+                  @if (section.badge) {
+                    <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
+                  }
+                </div>
+                @if (section.description) {
+                  <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
+                }
+              </div>
+            </button>
+          }
+        </nav>
+      </div>
+
+      <!-- Main Content Area -->
+      <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
+        <!-- Content Header -->
+        <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
+          @if (currentSection()) {
+            <div class="tw-flex tw-items-center tw-justify-between">
+              <div>
+                <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
+                  {{ currentSection()?.title }}
+                </h3>
+                @if (currentSection()?.description) {
+                  <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
+                    {{ currentSection()?.description }}
+                  </p>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Content Body -->
+        <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
+          @switch (selectedSection()) {
+            @case ('notifications') {
+              <cide-lyt-notification-settings></cide-lyt-notification-settings>
+            }
+            @case ('shortcuts') {
+              <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
+            }
+            @default {
+              <div class="tw-p-6">
+                <div class="tw-text-center tw-py-12">
+                  <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
+                  <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
+                    {{ currentSection()?.title || 'Settings' }}
+                  </h4>
+                  <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
+                    {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
+                  </p>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      </div>
+    </div>
+  `, isInline: true, styles: [":host{display:block;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: NotificationSettingsComponent, selector: "cide-lyt-notification-settings" }, { kind: "component", type: ShortcutsPanelComponent, selector: "cide-lyt-shortcuts-panel" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: SettingsContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-lyt-settings-container', standalone: true, imports: [
+                        CommonModule,
+                        CideIconComponent,
+                        NotificationSettingsComponent,
+                        ShortcutsPanelComponent
+                    ], template: `
+    <div class="tw-flex tw-h-full tw-bg-white dark:tw-bg-gray-900">
+      <!-- Left Sidebar Navigation -->
+      <div class="tw-w-64 tw-border-r tw-border-gray-200 dark:tw-border-gray-700 tw-bg-gray-50 dark:tw-bg-gray-800 tw-flex tw-flex-col">
+        <!-- Header -->
+        <div class="tw-px-4 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700">
+          <h2 class="tw-m-0 tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">Settings</h2>
+          <p class="tw-m-0 tw-mt-1 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400">Manage your preferences</p>
+        </div>
+
+        <!-- Navigation List -->
+        <nav class="tw-flex-1 tw-overflow-y-auto tw-p-2">
+          @for (section of sections(); track section.id) {
+            <button
+              type="button"
+              (click)="selectSection(section.id)"
+              [ngClass]="{
+                'tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-text-blue-600 dark:tw-text-blue-400': selectedSection() === section.id,
+                'tw-text-gray-700 dark:tw-text-gray-300': selectedSection() !== section.id
+              }"
+              class="tw-w-full tw-flex tw-items-center tw-gap-3 tw-px-3 tw-py-2.5 tw-mb-1 tw-rounded-lg tw-transition-colors tw-text-left hover:tw-bg-gray-100 dark:hover:tw-bg-gray-700">
+              <cide-ele-icon class="tw-text-lg">{{ section.icon }}</cide-ele-icon>
+              <div class="tw-flex-1 tw-min-w-0">
+                <div class="tw-flex tw-items-center tw-gap-2">
+                  <span class="tw-text-sm tw-font-medium tw-truncate">{{ section.title }}</span>
+                  @if (section.badge) {
+                    <span class="tw-px-1.5 tw-py-0.5 tw-text-[10px] tw-font-semibold tw-text-white tw-bg-blue-500 tw-rounded">{{ section.badge }}</span>
+                  }
+                </div>
+                @if (section.description) {
+                  <p class="tw-m-0 tw-mt-0.5 tw-text-xs tw-text-gray-500 dark:tw-text-gray-400 tw-truncate">{{ section.description }}</p>
+                }
+              </div>
+            </button>
+          }
+        </nav>
+      </div>
+
+      <!-- Main Content Area -->
+      <div class="tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden">
+        <!-- Content Header -->
+        <div class="tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 dark:tw-border-gray-700 tw-bg-white dark:tw-bg-gray-900">
+          @if (currentSection()) {
+            <div class="tw-flex tw-items-center tw-justify-between">
+              <div>
+                <h3 class="tw-m-0 tw-text-lg tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100">
+                  {{ currentSection()?.title }}
+                </h3>
+                @if (currentSection()?.description) {
+                  <p class="tw-m-0 tw-mt-1 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
+                    {{ currentSection()?.description }}
+                  </p>
+                }
+              </div>
+            </div>
+          }
+        </div>
+
+        <!-- Content Body -->
+        <div class="tw-flex-1 tw-overflow-y-auto tw-bg-white dark:tw-bg-gray-900">
+          @switch (selectedSection()) {
+            @case ('notifications') {
+              <cide-lyt-notification-settings></cide-lyt-notification-settings>
+            }
+            @case ('shortcuts') {
+              <cide-lyt-shortcuts-panel></cide-lyt-shortcuts-panel>
+            }
+            @default {
+              <div class="tw-p-6">
+                <div class="tw-text-center tw-py-12">
+                  <cide-ele-icon class="tw-text-4xl tw-text-gray-300 dark:tw-text-gray-600 tw-mb-3">{{ currentSection()?.icon || 'settings' }}</cide-ele-icon>
+                  <h4 class="tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-1">
+                    {{ currentSection()?.title || 'Settings' }}
+                  </h4>
+                  <p class="tw-text-sm tw-text-gray-500 dark:tw-text-gray-400">
+                    {{ currentSection()?.description || 'Select a section from the sidebar to view settings.' }}
+                  </p>
+                </div>
+              </div>
+            }
+          }
+        </div>
+      </div>
+    </div>
+  `, styles: [":host{display:block;height:100%}\n"] }]
+        }] });
+
 class CideLytFooterWrapperComponent {
+    floatingContainerService = inject(CideEleFloatingContainerService);
     footerSetupData = {
         cide_lyt_footer_height: 0
     };
@@ -4132,12 +5485,44 @@ class CideLytFooterWrapperComponent {
         const cide_lyt_sidedrawer_wrapper_width = parseInt(window.getComputedStyle(document.documentElement).getPropertyValue('--cide-lyt-sidedrawer-wrapper-width'));
         this.footerSetupData.cide_lyt_footer_height = (cide_lyt_sidedrawer_wrapper_width);
     }
+    /**
+     * Open settings panel in floating container
+     */
+    async openSettingsPanel() {
+        // Ensure component is registered
+        if (!this.floatingContainerService.isComponentRegistered('settings-container')) {
+            this.floatingContainerService.registerComponent('settings-container', SettingsContainerComponent);
+        }
+        const containerId = this.floatingContainerService.show({
+            id: `settings-container-${Date.now()}`,
+            title: 'Settings',
+            icon: 'settings',
+            width: '900px',
+            height: '700px',
+            minWidth: '700px',
+            minHeight: '500px',
+            maxWidth: '95vw',
+            maxHeight: '95vh',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            backdrop: false,
+            componentId: 'settings-container',
+            componentConfig: {
+                inputs: {},
+                outputs: {}
+            }
+        });
+        this.floatingContainerService.bringToFront(containerId);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CideLytFooterWrapperComponent, isStandalone: true, selector: "cide-lyt-footer-wrapper", ngImport: i0, template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"tw-flex tw-items-center tw-gap-1.5\">\r\n        <cide-ele-icon \r\n            size=\"3xs\" \r\n            class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \r\n            type=\"none\"\r\n            (click)=\"openSettingsPanel()\"\r\n            title=\"Settings\">\r\n            settings\r\n        </cide-ele-icon>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>", styles: [""], dependencies: [{ kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "directive", type: CideEleResizerDirective, selector: "[cideEleResizer]", inputs: ["direction", "to", "prevElementSelector", "nextElementSelector", "parentElementSelector", "minPrevSize", "minNextSize", "usePercentage"], outputs: ["resizeStart", "resizing", "resizeEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFooterWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>" }]
+            args: [{ selector: 'cide-lyt-footer-wrapper', standalone: true, imports: [CideIconComponent, CideEleResizerDirective], template: "<div\r\n    class=\"cide-footer tw-w-full tw-justify-between tw-flex tw-h-5 tw-select-none tw-px-1\">\r\n    <!-- Resizer -->\r\n    <div parentElementSelector=\"#cide-lyt-layout-wrapper\" prevElementSelector=\"#cide-lyt-sidebar-page-wrapper\"\r\n        nextElementSelector=\"#cide-lyt-footer-console-wrapper\" [minNextSize]=\"footerSetupData.cide_lyt_footer_height\" cideEleResizer direction=\"vertical\">\r\n        <div class=\"cide-lyt-devider-track tw-w-full tw-h-full\"></div>\r\n    </div>\r\n    <div></div>\r\n    <div class=\"tw-flex tw-items-center tw-gap-1.5\">\r\n        <cide-ele-icon \r\n            size=\"3xs\" \r\n            class=\"tw-mt-0.5 tw-cursor-pointer tw-text-gray-500 dark:tw-text-gray-400 hover:tw-text-blue-600 dark:hover:tw-text-blue-400 tw-transition-colors\" \r\n            type=\"none\"\r\n            (click)=\"openSettingsPanel()\"\r\n            title=\"Settings\">\r\n            settings\r\n        </cide-ele-icon>\r\n        <cide-ele-icon size=\"3xs\" class=\"tw-mt-0.5\" type=\"none\">contact_support</cide-ele-icon>\r\n    </div>\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 class CideLytConsoleWrapperComponent {
@@ -4264,12 +5649,12 @@ class TabContentComponent {
             delay(150).then(() => { this.isRestoringScroll = false; }); // Allow scroll event to settle
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, deps: [{ token: CideLytRequestService }, { token: i2.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, deps: [{ token: CideLytRequestService }, { token: i2$1.Router }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: TabContentComponent, isStandalone: true, selector: "cide-lyt-tab-content", viewQueries: [{ propertyName: "scrollContainerRef", first: true, predicate: ["scrollContainer"], descendants: true }], ngImport: i0, template: `
     <div class="tab-content-container" #scrollContainer (scroll)="onScroll()">
       <router-outlet></router-outlet>
     </div>
-  `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
+  `, isInline: true, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2$1.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TabContentComponent, decorators: [{
             type: Component,
@@ -4278,7 +5663,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       <router-outlet></router-outlet>
     </div>
   `, styles: [":host{height:100%;display:flex;flex-direction:column}.tab-content-container{height:100%;width:100%;position:relative;display:flex;flex-direction:column;flex:1}::ng-deep router-outlet+*{height:100%;flex:1;display:flex;flex-direction:column}::ng-deep cide-lyt-home-wrapper,::ng-deep cide-adm-home-wrapper,::ng-deep cide-adm-entity,::ng-deep cide-adm-entity-list{height:100%!important;flex:1!important;display:flex!important;flex-direction:column!important}\n"] }]
-        }], ctorParameters: () => [{ type: CideLytRequestService }, { type: i2.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollContainerRef: [{
+        }], ctorParameters: () => [{ type: CideLytRequestService }, { type: i2$1.Router }, { type: i0.ChangeDetectorRef }], propDecorators: { scrollContainerRef: [{
                 type: ViewChild,
                 args: ['scrollContainer']
             }] } });
@@ -4463,11 +5848,11 @@ class CideLytSharedWrapperComponent {
         this.router.navigate(['/control-panel']);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", 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-table tw-max-w-full tw-overflow-hidden\">\r\n  <div\r\n    class=\"tw-sticky tw-table-row tw-w-full tw-max-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5 tw-min-w-0 tw-overflow-hidden\">\r\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden\">\r\n        <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\r\n      </div>\r\n      <div class=\"tw-flex-shrink-0 tw-ml-4\">\r\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tw-table-row tw-h-full tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\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.1.7", 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-table tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-table-row tw-w-full tw-max-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5 tw-min-w-0 tw-overflow-hidden\">\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden\">\n        <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <div class=\"tw-flex-shrink-0 tw-ml-4\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"tw-table-row tw-h-full tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\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.1.7", ngImport: i0, type: CideLytSharedWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-lyt-shared-wrapper', imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-table tw-max-w-full tw-overflow-hidden\">\r\n  <div\r\n    class=\"tw-sticky tw-table-row tw-w-full tw-max-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\r\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5 tw-min-w-0 tw-overflow-hidden\">\r\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden\">\r\n        <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\r\n      </div>\r\n      <div class=\"tw-flex-shrink-0 tw-ml-4\">\r\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"tw-table-row tw-h-full tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden\">\r\n    <ng-content></ng-content>\r\n  </div>\r\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\n"] }]
+            args: [{ selector: 'cide-lyt-shared-wrapper', imports: [CideEleBreadcrumbComponent], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tw-w-full tw-h-full tw-table tw-max-w-full tw-overflow-hidden\">\n  <div\n    class=\"tw-sticky tw-table-row tw-w-full tw-max-w-full tw-top-0 tw-z-50 tw-bg-white tw-border-b tw-border-gray-200 tw-shadow-sm\">\n    <div class=\"tw-flex tw-items-center tw-justify-between tw-px-4 tw-py-0.5 tw-min-w-0 tw-overflow-hidden\">\n      <div class=\"tw-flex-1 tw-min-w-0 tw-overflow-hidden\">\n        <cide-ele-breadcrumb style=\"modern\" [compact]=\"true\" (homeClick)=\"onBreadcrumbHomeClick()\"></cide-ele-breadcrumb>\n      </div>\n      <div class=\"tw-flex-shrink-0 tw-ml-4\">\n        <ng-content select=\"[breadcrumb-actions]\"></ng-content>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"tw-table-row tw-h-full tw-w-full tw-max-w-full tw-overflow-y-auto tw-overflow-x-hidden\">\n    <ng-content></ng-content>\n  </div>\n</div>", styles: [":host{display:block;height:100%}:host>div{display:flex;flex-direction:column}::ng-deep cide-lyt-shared-wrapper{height:100%!important;display:block!important;width:100%!important}\n"] }]
         }], ctorParameters: () => [] });
 
 const layoutRoutes = {
@@ -4482,7 +5867,7 @@ const layoutControlPannelChildRoutes = [{
     },
     {
         path: "home",
-        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-C2pZdXgX.mjs').then(c => c.CideLytHomeWrapperComponent),
+        loadComponent: () => import('./cloud-ide-layout-home-wrapper.component-BHRtEqmU.mjs').then(c => c.CideLytHomeWrapperComponent),
         canActivate: [authGuard],
         data: {
             reuseTab: true, // For CustomRouteReuseStrategy
@@ -5791,7 +7176,7 @@ class CideLytFloatingEntityRightsSharingComponent {
         }
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [CideIconComponent], () => [i2$1.ɵNgNoValidate, i2$1.NgControlStatus, i2$1.NgControlStatusGroup, i2$1.FormGroupDirective, i2$1.FormControlName, CideInputComponent]] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSpinnerComponent, selector: "cide-ele-spinner", inputs: ["size", "type"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, deferBlockDependencies: [() => [CideIconComponent], () => [i2.ɵNgNoValidate, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormGroupDirective, i2.FormControlName, CideInputComponent]] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytFloatingEntityRightsSharingComponent, decorators: [{
             type: Component,
@@ -6049,5 +7434,5 @@ var floatingEntityRightsSharing_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
-//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-DRRm5GZh.mjs.map
+export { AppStateHelperService as A, CideLytSharedWrapperComponent as C, ENVIRONMENT_CONFIG as E, NotificationSettingsService as N, CideLytSidebarService as a, CideLytRequestService as b, CideLytSidedrawerService as c, CideLytThemeService as d, AppStateService as e, CloudIdeLayoutService as f, CloudIdeLayoutComponent as g, CideLytSharedService as h, layoutControlPannelChildRoutes as i, CustomRouteReuseStrategy as j, CideLytUserStatusService as k, layoutRoutes as l, CacheManagerService as m, CideLytFileManagerService as n, CideLytFloatingEntityRightsSharingComponent as o, processThemeVariable as p, CideLytFloatingEntityRightsSharingService as q, setCSSVariable as s, themeFactory as t };
+//# sourceMappingURL=cloud-ide-layout-cloud-ide-layout-BamR8RAT.mjs.map