@weeehaoooz/talos-ui 0.1.0 → 0.1.2

package/fesm2022/weeehaoooz-talos-ui-nav.mjs

@@ -1,9 +1,9 @@
 import { NgComponentOutlet, NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, model, Component, inject, output, computed, signal, ViewEncapsulation, ElementRef, NgModule } from '@angular/core';
-import { LucideChevronDown, LucideSun, LucideMoon, LucideMonitor, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideSearch } from '@lucide/angular';
+import { input, model, Component, inject, output, computed, ViewEncapsulation, signal, ElementRef, NgModule } from '@angular/core';
+import { LucideChevronDown, LucideMonitor, LucideMoon, LucideSun, LucidePanelLeftOpen, LucidePanelLeftClose, LucideCircleHelp, LucideSettings, LucidePanelLeft, LucideChevronsUpDown, LucideX, LucideSearch, LucideMenu } from '@lucide/angular';
 import { LayoutService } from '@weeehaoooz/talos-ui/layout';
-import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback/tooltip';
+import { TalosTooltipDirective } from '@weeehaoooz/talos-ui/feedback';
 import { Router } from '@angular/router';
 
 class TalosNavGroupComponent {
@@ -203,6 +203,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                 }]
         }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], route: [{ type: i0.Input, args: [{ isSignal: true, alias: "route", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
+class TalosThemeMorphIconComponent {
+    /** Target theme mode: 'system' | 'light' | 'dark' */
+    mode = input('system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    /** Icon dimension in pixels (defaults to 16px for balanced optical sizing) */
+    size = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    /** Effective mode */
+    effectiveMode = computed(() => this.mode() || 'system', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "effectiveMode" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosThemeMorphIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosThemeMorphIconComponent, isStandalone: true, selector: "talos-theme-morph-icon", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.width.px": "size()", "style.height.px": "size()", "style.--morph-size.px": "size()" }, classAttribute: "talos-theme-morph-icon-host" }, ngImport: i0, template: `
+    <span class="talos-theme-morph-container" [attr.data-mode]="effectiveMode()">
+      <span class="morph-icon-slot mode-system" [class.is-active]="effectiveMode() === 'system'">
+        <svg lucideMonitor [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-dark" [class.is-active]="effectiveMode() === 'dark'">
+        <svg lucideMoon [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-light" [class.is-active]="effectiveMode() === 'light'">
+        <svg lucideSun [size]="size()"></svg>
+      </span>
+    </span>
+  `, isInline: true, styles: [".talos-theme-morph-icon-host{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0;vertical-align:middle;pointer-events:none;-webkit-user-select:none;user-select:none;width:var(--morph-size, 16px);height:var(--morph-size, 16px);min-width:var(--morph-size, 16px);min-height:var(--morph-size, 16px);box-sizing:border-box;overflow:visible}.talos-theme-morph-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:visible}.talos-theme-morph-container .morph-icon-slot{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(.2) rotate(90deg);opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;box-sizing:border-box;transition:transform .38s cubic-bezier(.34,1.45,.64,1),opacity .22s ease,visibility .38s step-end}.talos-theme-morph-container .morph-icon-slot svg,.talos-theme-morph-container .morph-icon-slot lucide-icon,.talos-theme-morph-container .morph-icon-slot i-lucide,.talos-theme-morph-container .morph-icon-slot .lucide{display:block;width:100%;height:100%;color:currentColor}.talos-theme-morph-container .morph-icon-slot.is-active{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .28s ease,visibility 0s linear}.talos-theme-morph-container .morph-icon-slot.mode-system.is-active{transform:translate(-50%,-50%) scale(1) rotate(0)}.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-dark,.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-system{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-system,.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-dark{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}\n"], dependencies: [{ kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideSun, selector: "svg[lucideSun]" }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosThemeMorphIconComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'talos-theme-morph-icon', imports: [LucideMonitor, LucideMoon, LucideSun], template: `
+    <span class="talos-theme-morph-container" [attr.data-mode]="effectiveMode()">
+      <span class="morph-icon-slot mode-system" [class.is-active]="effectiveMode() === 'system'">
+        <svg lucideMonitor [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-dark" [class.is-active]="effectiveMode() === 'dark'">
+        <svg lucideMoon [size]="size()"></svg>
+      </span>
+      <span class="morph-icon-slot mode-light" [class.is-active]="effectiveMode() === 'light'">
+        <svg lucideSun [size]="size()"></svg>
+      </span>
+    </span>
+  `, encapsulation: ViewEncapsulation.None, host: {
+                        'class': 'talos-theme-morph-icon-host',
+                        '[style.width.px]': 'size()',
+                        '[style.height.px]': 'size()',
+                        '[style.--morph-size.px]': 'size()'
+                    }, styles: [".talos-theme-morph-icon-host{display:inline-flex;align-items:center;justify-content:center;position:relative;line-height:0;vertical-align:middle;pointer-events:none;-webkit-user-select:none;user-select:none;width:var(--morph-size, 16px);height:var(--morph-size, 16px);min-width:var(--morph-size, 16px);min-height:var(--morph-size, 16px);box-sizing:border-box;overflow:visible}.talos-theme-morph-container{display:flex;align-items:center;justify-content:center;position:relative;width:100%;height:100%;overflow:visible}.talos-theme-morph-container .morph-icon-slot{position:absolute;top:50%;left:50%;width:100%;height:100%;transform:translate(-50%,-50%) scale(.2) rotate(90deg);opacity:0;visibility:hidden;display:flex;align-items:center;justify-content:center;pointer-events:none;will-change:transform,opacity;box-sizing:border-box;transition:transform .38s cubic-bezier(.34,1.45,.64,1),opacity .22s ease,visibility .38s step-end}.talos-theme-morph-container .morph-icon-slot svg,.talos-theme-morph-container .morph-icon-slot lucide-icon,.talos-theme-morph-container .morph-icon-slot i-lucide,.talos-theme-morph-container .morph-icon-slot .lucide{display:block;width:100%;height:100%;color:currentColor}.talos-theme-morph-container .morph-icon-slot.is-active{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:1;visibility:visible;pointer-events:auto;transition:transform .42s cubic-bezier(.34,1.45,.64,1),opacity .28s ease,visibility 0s linear}.talos-theme-morph-container .morph-icon-slot.mode-system.is-active{transform:translate(-50%,-50%) scale(1) rotate(0)}.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-dark,.talos-theme-morph-container[data-mode=system] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-system{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}.talos-theme-morph-container[data-mode=dark] .morph-icon-slot.mode-light{transform:translate(-50%,-50%) scale(.2) rotate(-90deg)}.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-system,.talos-theme-morph-container[data-mode=light] .morph-icon-slot.mode-dark{transform:translate(-50%,-50%) scale(.2) rotate(90deg)}\n"] }]
+        }], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
 class TalosNavThemeToggleComponent {
     layoutService = inject(LayoutService, { optional: true });
     /** Explicit 3-way theme mode: 'system' | 'light' | 'dark' */
@@ -211,9 +258,15 @@ class TalosNavThemeToggleComponent {
     /** Current dark mode state (boolean fallback for backward compatibility) */
     isDarkMode = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isDarkMode" }] : /* istanbul ignore next */ []));
-    /** Whether to show the text label beside the toggle */
-    showLabel = input(true, /* @ts-ignore */
-    ...(ngDevMode ? [{ debugName: "showLabel" }] : /* istanbul ignore next */ []));
+    /** Optional explicit collapsed state override */
+    collapsed = input(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "collapsed" }] : /* istanbul ignore next */ []));
+    /** Icon size in pixels */
+    iconSize = input(16, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    /** Tooltip position */
+    tooltipPosition = input('right', /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
     /** Label shown for system mode */
     systemLabel = input('System Mode', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "systemLabel" }] : /* istanbul ignore next */ []));
@@ -223,15 +276,23 @@ class TalosNavThemeToggleComponent {
     /** Label shown for dark mode */
     darkLabel = input('Dark Mode', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "darkLabel" }] : /* istanbul ignore next */ []));
-    /** Optional custom tooltip text when collapsed */
+    /** Optional custom tooltip text override */
     tooltip = input(undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "tooltip" }] : /* istanbul ignore next */ []));
-    /** Output event when the toggle is clicked */
+    /** Output event when theme is toggled or clicked */
     themeToggle = output();
-    /** Output event with next theme mode ('system' | 'light' | 'dark') */
+    /** Output event with selected theme mode ('system' | 'light' | 'dark') */
     themeModeChange = output();
     /** Output event with next dark mode state */
     isDarkModeChange = output();
+    /** Effective collapsed state */
+    isCollapsed = computed(() => {
+        const ext = this.collapsed();
+        if (ext !== undefined)
+            return ext;
+        return this.layoutService?.isLeftNavCollapsed() ?? false;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isCollapsed" }] : /* istanbul ignore next */ []));
     /** Computed effective theme mode */
     effectiveMode = computed(() => {
         const mode = this.themeMode();
@@ -263,17 +324,28 @@ class TalosNavThemeToggleComponent {
     computedAriaLabel = computed(() => {
         const current = this.currentModeLabel();
         const nextModeName = this.nextMode() === 'system' ? this.systemLabel() : this.nextMode() === 'dark' ? this.darkLabel() : this.lightLabel();
-        return `Current theme: ${current}. Switch to ${nextModeName}`;
+        return `Current theme: ${current}. Click to switch to ${nextModeName}`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedAriaLabel" }] : /* istanbul ignore next */ []));
-    /** Computed tooltip for collapsed sidebar state */
+    /** Computed tooltip */
     computedTooltip = computed(() => {
-        const isCollapsed = this.layoutService?.isLeftNavCollapsed() ?? false;
-        if (!isCollapsed)
-            return null;
-        return this.tooltip() || `Theme: ${this.currentModeLabel()}`;
+        if (this.tooltip() !== undefined) {
+            return this.tooltip() || '';
+        }
+        const current = this.currentModeLabel();
+        const nextModeName = this.nextMode() === 'system' ? this.systemLabel() : this.nextMode() === 'dark' ? this.darkLabel() : this.lightLabel();
+        return `Theme: ${current} (Click for ${nextModeName})`;
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "computedTooltip" }] : /* istanbul ignore next */ []));
+    /** Set mode directly */
+    setMode(mode) {
+        if (this.effectiveMode() === mode)
+            return;
+        this.themeToggle.emit();
+        this.themeModeChange.emit(mode);
+        this.isDarkModeChange.emit(mode === 'dark');
+    }
+    /** Cycle to next mode */
     handleToggle() {
         const next = this.nextMode();
         this.themeToggle.emit();
@@ -281,75 +353,39 @@ class TalosNavThemeToggleComponent {
         this.isDarkModeChange.emit(next === 'dark');
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavThemeToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TalosNavThemeToggleComponent, isStandalone: true, selector: "talos-nav-theme-toggle", inputs: { themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, showLabel: { classPropertyName: "showLabel", publicName: "showLabel", isSignal: true, isRequired: false, transformFunction: null }, systemLabel: { classPropertyName: "systemLabel", publicName: "systemLabel", isSignal: true, isRequired: false, transformFunction: null }, lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeToggle: "themeToggle", themeModeChange: "themeModeChange", isDarkModeChange: "isDarkModeChange" }, host: { properties: { "class.is-collapsed": "layoutService?.isLeftNavCollapsed() ?? false" }, classAttribute: "talos-nav-theme-toggle-host" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: TalosNavThemeToggleComponent, isStandalone: true, selector: "talos-nav-theme-toggle", inputs: { themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, systemLabel: { classPropertyName: "systemLabel", publicName: "systemLabel", isSignal: true, isRequired: false, transformFunction: null }, lightLabel: { classPropertyName: "lightLabel", publicName: "lightLabel", isSignal: true, isRequired: false, transformFunction: null }, darkLabel: { classPropertyName: "darkLabel", publicName: "darkLabel", isSignal: true, isRequired: false, transformFunction: null }, tooltip: { classPropertyName: "tooltip", publicName: "tooltip", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { themeToggle: "themeToggle", themeModeChange: "themeModeChange", isDarkModeChange: "isDarkModeChange" }, host: { properties: { "class.is-collapsed": "isCollapsed()" }, classAttribute: "talos-nav-theme-toggle-host" }, ngImport: i0, template: `
     <button
       type="button"
       class="theme-toggle-btn"
       (click)="handleToggle()"
       [attr.aria-label]="computedAriaLabel()"
-      [talosTooltip]="computedTooltip() || ''"
-      [tooltipDisabled]="!layoutService?.isLeftNavCollapsed()"
-      tooltipPosition="right">
+      [talosTooltip]="computedTooltip()"
+      [tooltipPosition]="tooltipPosition()">
       <span class="theme-toggle-icon">
-        @if (effectiveMode() === 'system') {
-          <svg lucideMonitor [size]="16"></svg>
-        } @else if (effectiveMode() === 'dark') {
-          <svg lucideMoon [size]="16"></svg>
-        } @else {
-          <svg lucideSun [size]="16"></svg>
-        }
-      </span>
-      @if (showLabel()) {
-        <span class="theme-toggle-label">{{ currentModeLabel() }}</span>
-      }
-      <span
-        class="theme-toggle-indicator"
-        [class.is-system]="effectiveMode() === 'system'"
-        [class.is-light]="effectiveMode() === 'light'"
-        [class.is-dark]="effectiveMode() === 'dark'"
-        aria-hidden="true">
-        <span class="indicator-thumb"></span>
+        <talos-theme-morph-icon [mode]="effectiveMode()" [size]="iconSize()" />
       </span>
     </button>
-  `, isInline: true, styles: [":host{display:block;width:100%}.theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;gap:9px;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}.theme-toggle-icon svg,.theme-toggle-icon lucide-icon{width:15px;height:15px}.theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator{width:40px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:44px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .22s cubic-bezier(.4,0,.2,1);transform:translate(0)}.theme-toggle-indicator.is-system{background:var(--talos-border-color, #94a3b8)}.theme-toggle-indicator.is-system .indicator-thumb{transform:translate(0)}.theme-toggle-indicator.is-light{background:#f59e0b}.theme-toggle-indicator.is-light .indicator-thumb{transform:translate(12px)}.theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(24px)}:host(.is-collapsed) .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-label{display:none!important;opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;visibility:hidden;pointer-events:none}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;visibility:hidden;pointer-events:none}\n"], dependencies: [{ kind: "component", type: LucideSun, selector: "svg[lucideSun]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
+  `, isInline: true, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;box-sizing:border-box;padding:0;margin:0 auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 1px 3px #00000014}.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb)}.theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:currentColor;transition:transform .2s cubic-bezier(.4,0,.2,1);position:relative}.theme-toggle-btn .theme-toggle-icon talos-theme-morph-icon,.theme-toggle-btn .theme-toggle-icon svg,.theme-toggle-btn .theme-toggle-icon lucide-icon{width:16px;height:16px}.theme-toggle-btn:active .theme-toggle-icon{transform:scale(.88)}:host-context(.is-collapsed),:host(.is-collapsed){display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 auto!important}:host-context(.is-collapsed) .theme-toggle-btn,:host(.is-collapsed) .theme-toggle-btn{width:38px!important;height:36px!important;margin:0 auto!important}\n"], dependencies: [{ kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TalosNavThemeToggleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'talos-nav-theme-toggle', imports: [LucideSun, LucideMoon, LucideMonitor, TalosTooltipDirective], template: `
+            args: [{ selector: 'talos-nav-theme-toggle', imports: [TalosThemeMorphIconComponent, TalosTooltipDirective], template: `
     <button
       type="button"
       class="theme-toggle-btn"
       (click)="handleToggle()"
       [attr.aria-label]="computedAriaLabel()"
-      [talosTooltip]="computedTooltip() || ''"
-      [tooltipDisabled]="!layoutService?.isLeftNavCollapsed()"
-      tooltipPosition="right">
+      [talosTooltip]="computedTooltip()"
+      [tooltipPosition]="tooltipPosition()">
       <span class="theme-toggle-icon">
-        @if (effectiveMode() === 'system') {
-          <svg lucideMonitor [size]="16"></svg>
-        } @else if (effectiveMode() === 'dark') {
-          <svg lucideMoon [size]="16"></svg>
-        } @else {
-          <svg lucideSun [size]="16"></svg>
-        }
-      </span>
-      @if (showLabel()) {
-        <span class="theme-toggle-label">{{ currentModeLabel() }}</span>
-      }
-      <span
-        class="theme-toggle-indicator"
-        [class.is-system]="effectiveMode() === 'system'"
-        [class.is-light]="effectiveMode() === 'light'"
-        [class.is-dark]="effectiveMode() === 'dark'"
-        aria-hidden="true">
-        <span class="indicator-thumb"></span>
+        <talos-theme-morph-icon [mode]="effectiveMode()" [size]="iconSize()" />
       </span>
     </button>
   `, host: {
                         'class': 'talos-nav-theme-toggle-host',
-                        '[class.is-collapsed]': 'layoutService?.isLeftNavCollapsed() ?? false'
-                    }, styles: [":host{display:block;width:100%}.theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;gap:9px;white-space:nowrap;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1),width .25s cubic-bezier(.4,0,.2,1)}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}.theme-toggle-icon svg,.theme-toggle-icon lucide-icon{width:15px;height:15px}.theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator{width:40px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:44px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #00000040;transition:transform .22s cubic-bezier(.4,0,.2,1);transform:translate(0)}.theme-toggle-indicator.is-system{background:var(--talos-border-color, #94a3b8)}.theme-toggle-indicator.is-system .indicator-thumb{transform:translate(0)}.theme-toggle-indicator.is-light{background:#f59e0b}.theme-toggle-indicator.is-light .indicator-thumb{transform:translate(12px)}.theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}.theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(24px)}:host(.is-collapsed) .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-label{display:none!important;opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;visibility:hidden;pointer-events:none}:host(.is-collapsed) .theme-toggle-btn .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;visibility:hidden;pointer-events:none}\n"] }]
-        }], propDecorators: { themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], showLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLabel", required: false }] }], systemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemLabel", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], isDarkModeChange: [{ type: i0.Output, args: ["isDarkModeChange"] }] } });
+                        '[class.is-collapsed]': 'isCollapsed()'
+                    }, styles: [":host{display:inline-flex;align-items:center;justify-content:center}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:38px;height:36px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;box-sizing:border-box;padding:0;margin:0 auto;transition:background-color .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease}.theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 1px 3px #00000014}.theme-toggle-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--talos-primary-color, #2563eb)}.theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;color:currentColor;transition:transform .2s cubic-bezier(.4,0,.2,1);position:relative}.theme-toggle-btn .theme-toggle-icon talos-theme-morph-icon,.theme-toggle-btn .theme-toggle-icon svg,.theme-toggle-btn .theme-toggle-icon lucide-icon{width:16px;height:16px}.theme-toggle-btn:active .theme-toggle-icon{transform:scale(.88)}:host-context(.is-collapsed),:host(.is-collapsed){display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;margin:0 auto!important}:host-context(.is-collapsed) .theme-toggle-btn,:host(.is-collapsed) .theme-toggle-btn{width:38px!important;height:36px!important;margin:0 auto!important}\n"] }]
+        }], propDecorators: { themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }], iconSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconSize", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], systemLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "systemLabel", required: false }] }], lightLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "lightLabel", required: false }] }], darkLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "darkLabel", required: false }] }], tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltip", required: false }] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], isDarkModeChange: [{ type: i0.Output, args: ["isDarkModeChange"] }] } });
 
 class SideNavComponent {
     layoutService = inject(LayoutService, { optional: true });
@@ -463,7 +499,7 @@ class SideNavComponent {
         this.itemClick.emit(item);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SideNavComponent, isStandalone: true, selector: "talos-side-nav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null }, headerComponentInputs: { classPropertyName: "headerComponentInputs", publicName: "headerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyComponent: { classPropertyName: "bodyComponent", publicName: "bodyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyComponentInputs: { classPropertyName: "bodyComponentInputs", publicName: "bodyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerComponent: { classPropertyName: "footerComponent", publicName: "footerComponent", isSignal: true, isRequired: false, transformFunction: null }, footerComponentInputs: { classPropertyName: "footerComponentInputs", publicName: "footerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, navGroups: { classPropertyName: "navGroups", publicName: "navGroups", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", themeToggle: "themeToggle", themeModeChange: "themeModeChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "class.is-collapsed": "isCollapsed()", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"", "attr.aria-hidden": "isCollapsed()" }, classAttribute: "talos-side-nav-host" }, ngImport: i0, template: "<div class=\"side-nav-inner\">\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\n            @if (logoComponent(); as comp) {\n            <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n            } @else if (logoTemplate(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n            } @else {\n            <ng-content select=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\"\n          [active]=\"(item.id && activeItemId() === item.id) || !!item.active\" (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\"\n            [active]=\"item.id ? activeItemId() === item.id : !!item.active\" (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        @if (showThemeToggle()) {\n        <talos-nav-theme-toggle\n          [themeMode]=\"themeMode()\"\n          [isDarkMode]=\"isDarkMode()\"\n          (themeToggle)=\"themeToggle.emit()\"\n          (themeModeChange)=\"themeModeChange.emit($event)\"\n        />\n        }\n\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\"\n          [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Collapse/Expand Bar -->\n        <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <span class=\"collapse-bar-icon\">\n            @if (isCollapsed()) {\n            <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n            } @else {\n            <svg lucidePanelLeftClose [size]=\"16\"></svg>\n            }\n          </span>\n          <span class=\"collapse-bar-text\">Collapse sidebar</span>\n        </button>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed .theme-toggle-btn,talos-side-nav.is-collapsed .theme-toggle-btn,.talos-side-nav-host.is-collapsed .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .theme-toggle-btn .theme-toggle-icon,talos-side-nav.is-collapsed .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host.is-collapsed .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host.is-collapsed .theme-toggle-label,talos-side-nav.is-collapsed .theme-toggle-label,.talos-side-nav-host.is-collapsed .theme-toggle-label{opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .theme-toggle-indicator,talos-side-nav.is-collapsed .theme-toggle-indicator,.talos-side-nav-host.is-collapsed .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-collapse-bar,talos-side-nav.is-collapsed .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-collapse-bar{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}talos-nav-theme-toggle .theme-toggle-btn,.talos-nav-theme-toggle-host .theme-toggle-btn,.talos-side-nav-host .theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);gap:9px;white-space:nowrap}talos-nav-theme-toggle .theme-toggle-btn:hover,.talos-nav-theme-toggle-host .theme-toggle-btn:hover,.talos-side-nav-host .theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn:hover .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn:hover .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon svg,talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon svg,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon svg,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon lucide-icon{width:15px;height:15px}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-label,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-label,.talos-side-nav-host .theme-toggle-btn .theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator{width:30px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:40px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:translate(0)}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(14px)}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: TalosNavGroupComponent, selector: "talos-nav-group", inputs: ["title", "collapsible", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: TalosNavItemComponent, selector: "talos-nav-item", inputs: ["label", "icon", "active", "badge", "disabled", "route", "tooltip", "collapsed"], outputs: ["itemClick"] }, { kind: "component", type: TalosNavThemeToggleComponent, selector: "talos-nav-theme-toggle", inputs: ["themeMode", "isDarkMode", "showLabel", "systemLabel", "lightLabel", "darkLabel", "tooltip"], outputs: ["themeToggle", "themeModeChange", "isDarkModeChange"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: SideNavComponent, isStandalone: true, selector: "talos-side-nav", inputs: { collapsed: { classPropertyName: "collapsed", publicName: "collapsed", isSignal: true, isRequired: false, transformFunction: null }, headerComponent: { classPropertyName: "headerComponent", publicName: "headerComponent", isSignal: true, isRequired: false, transformFunction: null }, headerComponentInputs: { classPropertyName: "headerComponentInputs", publicName: "headerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, headerTemplate: { classPropertyName: "headerTemplate", publicName: "headerTemplate", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, bodyComponent: { classPropertyName: "bodyComponent", publicName: "bodyComponent", isSignal: true, isRequired: false, transformFunction: null }, bodyComponentInputs: { classPropertyName: "bodyComponentInputs", publicName: "bodyComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, bodyTemplate: { classPropertyName: "bodyTemplate", publicName: "bodyTemplate", isSignal: true, isRequired: false, transformFunction: null }, footerComponent: { classPropertyName: "footerComponent", publicName: "footerComponent", isSignal: true, isRequired: false, transformFunction: null }, footerComponentInputs: { classPropertyName: "footerComponentInputs", publicName: "footerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, footerTemplate: { classPropertyName: "footerTemplate", publicName: "footerTemplate", isSignal: true, isRequired: false, transformFunction: null }, showHeader: { classPropertyName: "showHeader", publicName: "showHeader", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, navGroups: { classPropertyName: "navGroups", publicName: "navGroups", isSignal: true, isRequired: false, transformFunction: null }, footerItems: { classPropertyName: "footerItems", publicName: "footerItems", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { collapsed: "collapsedChange", themeToggle: "themeToggle", themeModeChange: "themeModeChange", itemClick: "itemClick" }, host: { attributes: { "role": "navigation" }, properties: { "class.is-collapsed": "isCollapsed()", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"", "attr.aria-hidden": "isCollapsed()" }, classAttribute: "talos-side-nav-host" }, ngImport: i0, template: "<div class=\"side-nav-inner\">\n  <!-- Mobile Close Header Bar (Visible on mobile <= 768px when side nav is 100% full screen) -->\n  <div class=\"side-nav-mobile-close-bar\">\n    <span class=\"mobile-close-title\">Components</span>\n    <button type=\"button\" class=\"mobile-close-btn\" (click)=\"toggleCollapse()\" aria-label=\"Close menu\">\n      <svg lucideX [size]=\"18\"></svg>\n    </button>\n  </div>\n\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\n            @if (logoComponent(); as comp) {\n            <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n            } @else if (logoTemplate(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n            } @else {\n            <ng-content select=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\" tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\" [active]=\"(item.id && activeItemId() === item.id) || !!item.active\"\n          (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\" [active]=\"item.id ? activeItemId() === item.id : !!item.active\"\n            (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        <!-- User Profile Card -->\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\" [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\" tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Actions Bar (Collapse + Theme Toggle) -->\n        <div class=\"footer-actions-row\">\n          <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n            [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n            [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\" [tooltipDisabled]=\"!isCollapsed()\"\n            tooltipPosition=\"right\">\n            <span class=\"collapse-bar-icon\">\n              @if (isCollapsed()) {\n              <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n              } @else {\n              <svg lucidePanelLeftClose [size]=\"16\"></svg>\n              }\n            </span>\n            <span class=\"collapse-bar-text\">Collapse sidebar</span>\n          </button>\n\n          @if (showThemeToggle()) {\n          <talos-nav-theme-toggle [themeMode]=\"themeMode()\" [isDarkMode]=\"isDarkMode()\"\n            (themeToggle)=\"themeToggle.emit()\" (themeModeChange)=\"themeModeChange.emit($event)\" />\n          }\n        </div>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .side-nav-mobile-close-bar,:root.dark :host .side-nav-mobile-close-bar,[data-theme=dark] :host .side-nav-mobile-close-bar,[data-mode=dark] :host .side-nav-mobile-close-bar,.dark :host .side-nav-mobile-close-bar,.dark-theme :host .side-nav-mobile-close-bar,:host.dark-theme .side-nav-mobile-close-bar,talos-side-nav.dark-theme .side-nav-mobile-close-bar,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar{background:#090d16;border-color:#ffffff14}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,:root.dark :host .side-nav-mobile-close-bar .mobile-close-title,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-title,.dark :host .side-nav-mobile-close-bar .mobile-close-title,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-title,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-title{color:#f8fafc}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,.dark :host .side-nav-mobile-close-bar .mobile-close-btn,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover{background:#131d31;color:#f8fafc;border-color:#fff3}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed talos-nav-theme-toggle,:host.is-collapsed .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed talos-nav-theme-toggle,talos-side-nav.is-collapsed .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-actions-row,talos-side-nav.is-collapsed .footer-actions-row,.talos-side-nav-host.is-collapsed .footer-actions-row{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%}:host.is-collapsed .footer-actions-row .footer-collapse-bar,talos-side-nav.is-collapsed .footer-actions-row .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-actions-row .footer-collapse-bar{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;flex:none}:host.is-collapsed .footer-actions-row talos-nav-theme-toggle,:host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed .footer-actions-row talos-nav-theme-toggle,talos-side-nav.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed .footer-actions-row talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-mobile-close-bar{display:none}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}.footer-actions-row{display:flex;align-items:center;gap:8px;width:100%}.footer-actions-row .footer-collapse-bar{flex:1;min-width:0}.footer-actions-row talos-nav-theme-toggle,.footer-actions-row .talos-nav-theme-toggle-host{flex-shrink:0}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}@media(max-width:768px){:host,talos-side-nav,.talos-side-nav-host{position:fixed;inset:60px 0 0;width:100vw!important;max-width:100vw!important;width:100%!important;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:90;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));box-shadow:none;transform:translate(0);visibility:visible;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility .25s cubic-bezier(.4,0,.2,1)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:100vw!important;max-width:100vw!important;width:100%!important;transform:translate(-100%)!important;visibility:hidden!important;pointer-events:none!important;box-shadow:none!important}:host .side-nav-mobile-close-bar,talos-side-nav .side-nav-mobile-close-bar,.talos-side-nav-host .side-nav-mobile-close-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));background:var(--talos-nav-bg, var(--nav-bg, #ffffff));flex-shrink:0}:host .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-title{font-size:14px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));letter-spacing:-.01em}:host .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease}:host .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn:hover{background:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-text-color, var(--text-color, #0f172a));border-color:var(--talos-primary, #3b82f6)}:host .side-nav-header,talos-side-nav .side-nav-header,.talos-side-nav-host .side-nav-header{display:none}:host .side-nav-body,talos-side-nav .side-nav-body,.talos-side-nav-host .side-nav-body{padding:16px}:host .nav-link,talos-side-nav .nav-link,.talos-side-nav-host .nav-link{height:42px;padding:0 12px;font-size:14px}:host .nav-link .nav-label,talos-side-nav .nav-link .nav-label,.talos-side-nav-host .nav-link .nav-label{max-width:none}:host .theme-toggle-label,:host .user-info,talos-side-nav .theme-toggle-label,talos-side-nav .user-info,.talos-side-nav-host .theme-toggle-label,.talos-side-nav-host .user-info{max-width:none}:host .footer-collapse-bar,talos-side-nav .footer-collapse-bar,.talos-side-nav-host .footer-collapse-bar{display:none!important}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucidePanelLeft, selector: "svg[lucidePanelLeft], svg[lucideSidebar]" }, { kind: "component", type: LucideChevronsUpDown, selector: "svg[lucideChevronsUpDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "component", type: TalosNavGroupComponent, selector: "talos-nav-group", inputs: ["title", "collapsible", "collapsed"], outputs: ["collapsedChange"] }, { kind: "component", type: TalosNavItemComponent, selector: "talos-nav-item", inputs: ["label", "icon", "active", "badge", "disabled", "route", "tooltip", "collapsed"], outputs: ["itemClick"] }, { kind: "component", type: TalosNavThemeToggleComponent, selector: "talos-nav-theme-toggle", inputs: ["themeMode", "isDarkMode", "collapsed", "iconSize", "tooltipPosition", "systemLabel", "lightLabel", "darkLabel", "tooltip"], outputs: ["themeToggle", "themeModeChange", "isDarkModeChange"] }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: SideNavComponent, decorators: [{
             type: Component,
@@ -474,6 +510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LucideChevronsUpDown,
                         LucidePanelLeftOpen,
                         LucidePanelLeftClose,
+                        LucideX,
                         TalosNavGroupComponent,
                         TalosNavItemComponent,
                         TalosNavThemeToggleComponent,
@@ -485,7 +522,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         '[attr.data-theme]': 'isDarkMode() ? "dark" : "light"',
                         '[attr.aria-hidden]': 'isCollapsed()',
                         'role': 'navigation'
-                    }, template: "<div class=\"side-nav-inner\">\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\n            @if (logoComponent(); as comp) {\n            <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n            } @else if (logoTemplate(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n            } @else {\n            <ng-content select=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\"\n          [active]=\"(item.id && activeItemId() === item.id) || !!item.active\" (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\"\n            [active]=\"item.id ? activeItemId() === item.id : !!item.active\" (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        @if (showThemeToggle()) {\n        <talos-nav-theme-toggle\n          [themeMode]=\"themeMode()\"\n          [isDarkMode]=\"isDarkMode()\"\n          (themeToggle)=\"themeToggle.emit()\"\n          (themeModeChange)=\"themeModeChange.emit($event)\"\n        />\n        }\n\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\"\n          [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Collapse/Expand Bar -->\n        <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [tooltipDisabled]=\"!isCollapsed()\"\n          tooltipPosition=\"right\">\n          <span class=\"collapse-bar-icon\">\n            @if (isCollapsed()) {\n            <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n            } @else {\n            <svg lucidePanelLeftClose [size]=\"16\"></svg>\n            }\n          </span>\n          <span class=\"collapse-bar-text\">Collapse sidebar</span>\n        </button>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed .theme-toggle-btn,talos-side-nav.is-collapsed .theme-toggle-btn,.talos-side-nav-host.is-collapsed .theme-toggle-btn{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .theme-toggle-btn .theme-toggle-icon,talos-side-nav.is-collapsed .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host.is-collapsed .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;margin:0}:host.is-collapsed .theme-toggle-label,talos-side-nav.is-collapsed .theme-toggle-label,.talos-side-nav-host.is-collapsed .theme-toggle-label{opacity:0;max-width:0;width:0;padding:0;margin:0;flex:0 0 0;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .theme-toggle-indicator,talos-side-nav.is-collapsed .theme-toggle-indicator,.talos-side-nav-host.is-collapsed .theme-toggle-indicator{display:none!important;opacity:0;max-width:0;width:0!important;height:0!important;padding:0!important;margin:0!important;border:none!important;flex:0 0 0!important;overflow:hidden;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-collapse-bar,talos-side-nav.is-collapsed .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-collapse-bar{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}talos-nav-theme-toggle .theme-toggle-btn,.talos-nav-theme-toggle-host .theme-toggle-btn,.talos-side-nav-host .theme-toggle-btn{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-color, var(--text-color, #0f172a));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);gap:9px;white-space:nowrap}talos-nav-theme-toggle .theme-toggle-btn:hover,.talos-nav-theme-toggle-host .theme-toggle-btn:hover,.talos-side-nav-host .theme-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn:hover .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn:hover .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn:hover .theme-toggle-icon{color:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0;color:var(--talos-primary-color, var(--primary-color, #2563eb));transition:color .15s ease}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon svg,talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon svg,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-icon lucide-icon,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon svg,.talos-side-nav-host .theme-toggle-btn .theme-toggle-icon lucide-icon{width:15px;height:15px}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-label,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-label,.talos-side-nav-host .theme-toggle-btn .theme-toggle-label{flex:1;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;transform:translate(0);max-width:140px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator{width:30px;height:16px;border-radius:9999px;background:var(--talos-border-color, #cbd5e1);position:relative;flex-shrink:0;display:flex;align-items:center;padding:2px;box-sizing:border-box;opacity:1;max-width:40px;transition:background-color .2s ease,opacity .18s cubic-bezier(.4,0,.2,1),max-width .25s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator .indicator-thumb{display:block;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .2s cubic-bezier(.4,0,.2,1);transform:translate(0)}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark{background:var(--talos-primary-color, var(--primary-color, #2563eb))}talos-nav-theme-toggle .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-nav-theme-toggle-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb,.talos-side-nav-host .theme-toggle-btn .theme-toggle-indicator.is-dark .indicator-thumb{transform:translate(14px)}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}\n"] }]
+                    }, template: "<div class=\"side-nav-inner\">\n  <!-- Mobile Close Header Bar (Visible on mobile <= 768px when side nav is 100% full screen) -->\n  <div class=\"side-nav-mobile-close-bar\">\n    <span class=\"mobile-close-title\">Components</span>\n    <button type=\"button\" class=\"mobile-close-btn\" (click)=\"toggleCollapse()\" aria-label=\"Close menu\">\n      <svg lucideX [size]=\"18\"></svg>\n    </button>\n  </div>\n\n  <!-- Header -->\n  @if (showHeader()) {\n  <div class=\"side-nav-header\">\n    @if (headerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: headerComponentInputs()\" />\n    } @else if (headerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-header]\">\n      <div class=\"default-nav-header\">\n        <ng-content select=\"[side-nav-brand]\">\n          @if (showLogo()) {\n          <div class=\"brand-wrapper\" title=\"Logo\">\n            @if (logoComponent(); as comp) {\n            <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n            } @else if (logoTemplate(); as tmpl) {\n            <ng-container *ngTemplateOutlet=\"tmpl\" />\n            } @else {\n            <ng-content select=\"[side-nav-logo]\" />\n            }\n          </div>\n          }\n        </ng-content>\n\n        @if (showToggle()) {\n        <button type=\"button\" class=\"hamburger-toggle-btn\" (click)=\"toggleCollapse()\"\n          [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\" tooltipPosition=\"right\">\n          <svg lucidePanelLeft class=\"toggle-icon\" [size]=\"18\"></svg>\n        </button>\n        }\n      </div>\n    </ng-content>\n    }\n  </div>\n  }\n\n  <!-- Body Navigation Items -->\n  <div class=\"side-nav-body\">\n    @if (bodyComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: bodyComponentInputs()\" />\n    } @else if (bodyTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else if (navGroups().length > 0) {\n    <nav class=\"nav-groups-container\" aria-label=\"Sidebar Navigation\">\n      @for (group of navGroups(); track group.title || $index) {\n      <talos-nav-group [title]=\"group.title\" [collapsible]=\"group.collapsible ?? false\"\n        [collapsed]=\"group.collapsed ?? false\">\n        @for (item of group.items; track item.id || item.label) {\n        <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [badge]=\"item.badge\" [disabled]=\"item.disabled ?? false\"\n          [collapsed]=\"isCollapsed()\" [active]=\"(item.id && activeItemId() === item.id) || !!item.active\"\n          (itemClick)=\"selectItem(item)\" />\n        }\n      </talos-nav-group>\n      }\n    </nav>\n    } @else {\n    <!-- Projected content slot for custom body content -->\n    <ng-content select=\"[side-nav-body]\" />\n    <ng-content />\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"side-nav-footer\">\n    @if (footerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: footerComponentInputs()\" />\n    } @else if (footerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[side-nav-footer]\">\n      <div class=\"default-nav-footer\">\n        @if (footerItems().length > 0) {\n        <ul class=\"footer-nav-list\">\n          @for (item of footerItems(); track item.id || item.label) {\n          <talos-nav-item [label]=\"item.label\" [icon]=\"item.icon\" [disabled]=\"item.disabled ?? false\"\n            [collapsed]=\"isCollapsed()\" [active]=\"item.id ? activeItemId() === item.id : !!item.active\"\n            (itemClick)=\"selectItem(item)\" />\n          }\n        </ul>\n        }\n\n        <!-- User Profile Card -->\n        @if (userProfile(); as profile) {\n        <div class=\"user-profile-card\" [talosTooltip]=\"profile.name + ' (' + profile.email + ')'\"\n          [tooltipDisabled]=\"!isCollapsed()\" tooltipPosition=\"right\">\n          <div class=\"avatar-container\">\n            @if (profile.avatarUrl) {\n            <img [src]=\"profile.avatarUrl\" [alt]=\"profile.name\" class=\"avatar-img\" />\n            } @else {\n            <div class=\"avatar-placeholder\">\n              {{ profile.name.charAt(0) }}\n            </div>\n            }\n          </div>\n          <div class=\"user-info\">\n            <span class=\"user-name\">{{ profile.name }}</span>\n            <span class=\"user-email\">{{ profile.email }}</span>\n          </div>\n          <div class=\"profile-action\">\n            <svg lucideChevronsUpDown class=\"profile-chevron\" [size]=\"14\"></svg>\n          </div>\n        </div>\n        }\n\n        <!-- Bottom Actions Bar (Collapse + Theme Toggle) -->\n        <div class=\"footer-actions-row\">\n          <button type=\"button\" class=\"footer-collapse-bar\" (click)=\"toggleCollapse()\"\n            [attr.aria-label]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n            [talosTooltip]=\"isCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\" [tooltipDisabled]=\"!isCollapsed()\"\n            tooltipPosition=\"right\">\n            <span class=\"collapse-bar-icon\">\n              @if (isCollapsed()) {\n              <svg lucidePanelLeftOpen [size]=\"16\"></svg>\n              } @else {\n              <svg lucidePanelLeftClose [size]=\"16\"></svg>\n              }\n            </span>\n            <span class=\"collapse-bar-text\">Collapse sidebar</span>\n          </button>\n\n          @if (showThemeToggle()) {\n          <talos-nav-theme-toggle [themeMode]=\"themeMode()\" [isDarkMode]=\"isDarkMode()\"\n            (themeToggle)=\"themeToggle.emit()\" (themeModeChange)=\"themeModeChange.emit($event)\" />\n          }\n        </div>\n      </div>\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-side-nav,.talos-side-nav-host{display:flex;flex-direction:column;width:var(--talos-sidebar-width, var(--sidebar-width, 260px));height:100%;min-height:0;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));border-right:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:width .25s cubic-bezier(.4,0,.2,1);box-sizing:border-box;position:relative;overflow:hidden}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:host.dark-theme,talos-side-nav.dark-theme,.talos-side-nav-host.dark-theme{--talos-nav-bg: #090d16;--nav-bg: #090d16;--talos-card-bg: #0f172a;--talos-nav-border-color: rgba(255, 255, 255, .08);--nav-border-color: rgba(255, 255, 255, .08);--talos-border-color: rgba(255, 255, 255, .1);--border-color: rgba(255, 255, 255, .1);--talos-bg-color: #131d31;--bg-color: #131d31;--talos-text-color: #f8fafc;--text-color: #f8fafc;--talos-text-muted: #94a3b8;--text-muted: #94a3b8;--talos-nav-hover-bg: rgba(255, 255, 255, .06);--talos-nav-hover-text: #f8fafc;--talos-active-nav-bg: rgba(59, 130, 246, .16);--talos-active-nav-text: #ffffff}:root[data-theme=dark] :host .hamburger-toggle-btn,:root.dark :host .hamburger-toggle-btn,[data-theme=dark] :host .hamburger-toggle-btn,[data-mode=dark] :host .hamburger-toggle-btn,.dark :host .hamburger-toggle-btn,.dark-theme :host .hamburger-toggle-btn,:host.dark-theme .hamburger-toggle-btn,talos-side-nav.dark-theme .hamburger-toggle-btn,.talos-side-nav-host.dark-theme .hamburger-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .hamburger-toggle-btn:hover,:root.dark :host .hamburger-toggle-btn:hover,[data-theme=dark] :host .hamburger-toggle-btn:hover,[data-mode=dark] :host .hamburger-toggle-btn:hover,.dark :host .hamburger-toggle-btn:hover,.dark-theme :host .hamburger-toggle-btn:hover,:host.dark-theme .hamburger-toggle-btn:hover,talos-side-nav.dark-theme .hamburger-toggle-btn:hover,.talos-side-nav-host.dark-theme .hamburger-toggle-btn:hover{background:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6);box-shadow:0 0 12px #3b82f640}:root[data-theme=dark] :host .nav-group-title,:root.dark :host .nav-group-title,[data-theme=dark] :host .nav-group-title,[data-mode=dark] :host .nav-group-title,.dark :host .nav-group-title,.dark-theme :host .nav-group-title,:host.dark-theme .nav-group-title,talos-side-nav.dark-theme .nav-group-title,.talos-side-nav-host.dark-theme .nav-group-title{color:#94a3b8}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,:root.dark :host .nav-group-title.nav-group-header-btn:hover,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover,.dark :host .nav-group-title.nav-group-header-btn:hover,.dark-theme :host .nav-group-title.nav-group-header-btn:hover,:host.dark-theme .nav-group-title.nav-group-header-btn:hover,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover{color:#f8fafc}:root[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:root.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-theme=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,[data-mode=dark] :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.dark-theme :host .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,:host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,talos-side-nav.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron,.talos-side-nav-host.dark-theme .nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:#f8fafc}:root[data-theme=dark] :host .nav-link,:root.dark :host .nav-link,[data-theme=dark] :host .nav-link,[data-mode=dark] :host .nav-link,.dark :host .nav-link,.dark-theme :host .nav-link,:host.dark-theme .nav-link,talos-side-nav.dark-theme .nav-link,.talos-side-nav-host.dark-theme .nav-link{color:#94a3b8}:root[data-theme=dark] :host .nav-link .nav-icon,:root.dark :host .nav-link .nav-icon,[data-theme=dark] :host .nav-link .nav-icon,[data-mode=dark] :host .nav-link .nav-icon,.dark :host .nav-link .nav-icon,.dark-theme :host .nav-link .nav-icon,:host.dark-theme .nav-link .nav-icon,talos-side-nav.dark-theme .nav-link .nav-icon,.talos-side-nav-host.dark-theme .nav-link .nav-icon{color:#94a3b8}:root[data-theme=dark] :host .nav-link:hover,:root.dark :host .nav-link:hover,[data-theme=dark] :host .nav-link:hover,[data-mode=dark] :host .nav-link:hover,.dark :host .nav-link:hover,.dark-theme :host .nav-link:hover,:host.dark-theme .nav-link:hover,talos-side-nav.dark-theme .nav-link:hover,.talos-side-nav-host.dark-theme .nav-link:hover{background-color:#ffffff0f;color:#f8fafc}:root[data-theme=dark] :host .nav-link:hover .nav-icon,:root.dark :host .nav-link:hover .nav-icon,[data-theme=dark] :host .nav-link:hover .nav-icon,[data-mode=dark] :host .nav-link:hover .nav-icon,.dark :host .nav-link:hover .nav-icon,.dark-theme :host .nav-link:hover .nav-icon,:host.dark-theme .nav-link:hover .nav-icon,talos-side-nav.dark-theme .nav-link:hover .nav-icon,.talos-side-nav-host.dark-theme .nav-link:hover .nav-icon{color:#f8fafc}:root[data-theme=dark] :host .nav-link.active,:root.dark :host .nav-link.active,[data-theme=dark] :host .nav-link.active,[data-mode=dark] :host .nav-link.active,.dark :host .nav-link.active,.dark-theme :host .nav-link.active,:host.dark-theme .nav-link.active,talos-side-nav.dark-theme .nav-link.active,.talos-side-nav-host.dark-theme .nav-link.active{background-color:var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));color:#fff}:root[data-theme=dark] :host .nav-link.active .nav-icon,:root.dark :host .nav-link.active .nav-icon,[data-theme=dark] :host .nav-link.active .nav-icon,[data-mode=dark] :host .nav-link.active .nav-icon,.dark :host .nav-link.active .nav-icon,.dark-theme :host .nav-link.active .nav-icon,:host.dark-theme .nav-link.active .nav-icon,talos-side-nav.dark-theme .nav-link.active .nav-icon,.talos-side-nav-host.dark-theme .nav-link.active .nav-icon{color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .user-profile-card:hover,:root.dark :host .user-profile-card:hover,[data-theme=dark] :host .user-profile-card:hover,[data-mode=dark] :host .user-profile-card:hover,.dark :host .user-profile-card:hover,.dark-theme :host .user-profile-card:hover,:host.dark-theme .user-profile-card:hover,talos-side-nav.dark-theme .user-profile-card:hover,.talos-side-nav-host.dark-theme .user-profile-card:hover{background-color:#ffffff0f}:root[data-theme=dark] :host .user-profile-card .user-name,:root.dark :host .user-profile-card .user-name,[data-theme=dark] :host .user-profile-card .user-name,[data-mode=dark] :host .user-profile-card .user-name,.dark :host .user-profile-card .user-name,.dark-theme :host .user-profile-card .user-name,:host.dark-theme .user-profile-card .user-name,talos-side-nav.dark-theme .user-profile-card .user-name,.talos-side-nav-host.dark-theme .user-profile-card .user-name{color:#f8fafc}:root[data-theme=dark] :host .user-profile-card .user-email,:root.dark :host .user-profile-card .user-email,[data-theme=dark] :host .user-profile-card .user-email,[data-mode=dark] :host .user-profile-card .user-email,.dark :host .user-profile-card .user-email,.dark-theme :host .user-profile-card .user-email,:host.dark-theme .user-profile-card .user-email,talos-side-nav.dark-theme .user-profile-card .user-email,.talos-side-nav-host.dark-theme .user-profile-card .user-email{color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar,:root.dark :host .footer-collapse-bar,[data-theme=dark] :host .footer-collapse-bar,[data-mode=dark] :host .footer-collapse-bar,.dark :host .footer-collapse-bar,.dark-theme :host .footer-collapse-bar,:host.dark-theme .footer-collapse-bar,talos-side-nav.dark-theme .footer-collapse-bar,.talos-side-nav-host.dark-theme .footer-collapse-bar{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .footer-collapse-bar:hover,:root.dark :host .footer-collapse-bar:hover,[data-theme=dark] :host .footer-collapse-bar:hover,[data-mode=dark] :host .footer-collapse-bar:hover,.dark :host .footer-collapse-bar:hover,.dark-theme :host .footer-collapse-bar:hover,:host.dark-theme .footer-collapse-bar:hover,talos-side-nav.dark-theme .footer-collapse-bar:hover,.talos-side-nav-host.dark-theme .footer-collapse-bar:hover{background-color:#131d31;color:#f8fafc;border-color:#fff3}:root[data-theme=dark] :host .theme-toggle-btn,:root.dark :host .theme-toggle-btn,[data-theme=dark] :host .theme-toggle-btn,[data-mode=dark] :host .theme-toggle-btn,.dark :host .theme-toggle-btn,.dark-theme :host .theme-toggle-btn,:host.dark-theme .theme-toggle-btn,talos-side-nav.dark-theme .theme-toggle-btn,.talos-side-nav-host.dark-theme .theme-toggle-btn{background:#0f172a;border-color:#ffffff1a;color:#f8fafc}:root[data-theme=dark] :host .theme-toggle-btn:hover,:root.dark :host .theme-toggle-btn:hover,[data-theme=dark] :host .theme-toggle-btn:hover,[data-mode=dark] :host .theme-toggle-btn:hover,.dark :host .theme-toggle-btn:hover,.dark-theme :host .theme-toggle-btn:hover,:host.dark-theme .theme-toggle-btn:hover,talos-side-nav.dark-theme .theme-toggle-btn:hover,.talos-side-nav-host.dark-theme .theme-toggle-btn:hover{background-color:#131d31;color:var(--talos-primary, #3b82f6);border-color:var(--talos-primary, #3b82f6)}:root[data-theme=dark] :host .side-nav-mobile-close-bar,:root.dark :host .side-nav-mobile-close-bar,[data-theme=dark] :host .side-nav-mobile-close-bar,[data-mode=dark] :host .side-nav-mobile-close-bar,.dark :host .side-nav-mobile-close-bar,.dark-theme :host .side-nav-mobile-close-bar,:host.dark-theme .side-nav-mobile-close-bar,talos-side-nav.dark-theme .side-nav-mobile-close-bar,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar{background:#090d16;border-color:#ffffff14}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,:root.dark :host .side-nav-mobile-close-bar .mobile-close-title,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-title,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-title,.dark :host .side-nav-mobile-close-bar .mobile-close-title,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-title,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-title{color:#f8fafc}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn,.dark :host .side-nav-mobile-close-bar .mobile-close-btn,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn{background:#0f172a;border-color:#ffffff1a;color:#94a3b8}:root[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:root.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-theme=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,[data-mode=dark] :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark :host .side-nav-mobile-close-bar .mobile-close-btn:hover,.dark-theme :host .side-nav-mobile-close-bar .mobile-close-btn:hover,:host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host.dark-theme .side-nav-mobile-close-bar .mobile-close-btn:hover{background:#131d31;color:#f8fafc;border-color:#fff3}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:var(--talos-sidebar-collapsed-width, var(--sidebar-collapsed-width, 68px))}:host.is-collapsed .side-nav-header,talos-side-nav.is-collapsed .side-nav-header,.talos-side-nav-host.is-collapsed .side-nav-header{flex-shrink:0}:host.is-collapsed .default-nav-header,talos-side-nav.is-collapsed .default-nav-header,.talos-side-nav-host.is-collapsed .default-nav-header{justify-content:center;padding:0;gap:0}:host.is-collapsed .brand-wrapper,talos-side-nav.is-collapsed .brand-wrapper,.talos-side-nav-host.is-collapsed .brand-wrapper{max-width:0;opacity:0;transform:translate(-15px);visibility:hidden;pointer-events:none}:host.is-collapsed .hamburger-toggle-btn,talos-side-nav.is-collapsed .hamburger-toggle-btn,.talos-side-nav-host.is-collapsed .hamburger-toggle-btn{margin:0 auto}:host.is-collapsed .side-nav-body,talos-side-nav.is-collapsed .side-nav-body,.talos-side-nav-host.is-collapsed .side-nav-body{padding:12px 6px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}:host.is-collapsed .side-nav-body::-webkit-scrollbar,talos-side-nav.is-collapsed .side-nav-body::-webkit-scrollbar,.talos-side-nav-host.is-collapsed .side-nav-body::-webkit-scrollbar{width:3px}:host.is-collapsed .nav-groups-container,talos-side-nav.is-collapsed .nav-groups-container,.talos-side-nav-host.is-collapsed .nav-groups-container{gap:8px}:host.is-collapsed .nav-group-title,talos-side-nav.is-collapsed .nav-group-title,.talos-side-nav-host.is-collapsed .nav-group-title{max-height:0;opacity:0;margin-bottom:0;padding-top:0;padding-bottom:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-link,talos-side-nav.is-collapsed .nav-link,.talos-side-nav-host.is-collapsed .nav-link{padding:0;gap:0;justify-content:center;width:38px;height:36px;margin:0 auto;border-radius:8px}:host.is-collapsed .nav-link .nav-icon,talos-side-nav.is-collapsed .nav-link .nav-icon,.talos-side-nav-host.is-collapsed .nav-link .nav-icon{margin:0}:host.is-collapsed .nav-label,talos-side-nav.is-collapsed .nav-label,.talos-side-nav-host.is-collapsed .nav-label{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .nav-badge,talos-side-nav.is-collapsed .nav-badge,.talos-side-nav-host.is-collapsed .nav-badge{opacity:0;max-width:0;padding:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .side-nav-footer,talos-side-nav.is-collapsed .side-nav-footer,.talos-side-nav-host.is-collapsed .side-nav-footer{padding:12px 6px 16px;flex-shrink:0}:host.is-collapsed talos-nav-theme-toggle,:host.is-collapsed .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed talos-nav-theme-toggle,talos-side-nav.is-collapsed .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}:host.is-collapsed .user-profile-card,talos-side-nav.is-collapsed .user-profile-card,.talos-side-nav-host.is-collapsed .user-profile-card{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;box-sizing:border-box}:host.is-collapsed .user-info,:host.is-collapsed .profile-action,talos-side-nav.is-collapsed .user-info,talos-side-nav.is-collapsed .profile-action,.talos-side-nav-host.is-collapsed .user-info,.talos-side-nav-host.is-collapsed .profile-action{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}:host.is-collapsed .footer-actions-row,talos-side-nav.is-collapsed .footer-actions-row,.talos-side-nav-host.is-collapsed .footer-actions-row{display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center;width:100%}:host.is-collapsed .footer-actions-row .footer-collapse-bar,talos-side-nav.is-collapsed .footer-actions-row .footer-collapse-bar,.talos-side-nav-host.is-collapsed .footer-actions-row .footer-collapse-bar{padding:0;gap:0;justify-content:center;align-items:center;width:38px;height:36px;margin:0 auto;flex:none}:host.is-collapsed .footer-actions-row talos-nav-theme-toggle,:host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,talos-side-nav.is-collapsed .footer-actions-row talos-nav-theme-toggle,talos-side-nav.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host,.talos-side-nav-host.is-collapsed .footer-actions-row talos-nav-theme-toggle,.talos-side-nav-host.is-collapsed .footer-actions-row .talos-nav-theme-toggle-host{display:flex;justify-content:center;align-items:center;width:100%;margin:0 auto}:host.is-collapsed .collapse-bar-text,talos-side-nav.is-collapsed .collapse-bar-text,.talos-side-nav-host.is-collapsed .collapse-bar-text{opacity:0;max-width:0;transform:translate(-12px);visibility:hidden;pointer-events:none}.side-nav-inner{display:flex;flex-direction:column;height:100%;min-height:0;position:relative;overflow:hidden}.side-nav-mobile-close-bar{display:none}.side-nav-header{flex-shrink:0;min-height:64px;display:flex;align-items:center;padding:0 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9))}.default-nav-header{display:flex;align-items:center;justify-content:space-between;width:100%;gap:8px}.brand-wrapper{display:flex;align-items:center;gap:10px;cursor:pointer;-webkit-user-select:none;user-select:none;overflow:hidden;max-width:180px;opacity:1;transform:translate(0);white-space:nowrap;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.brand-wrapper>*{display:flex;align-items:center;gap:10px;overflow:hidden;white-space:nowrap;max-width:100%}.brand-wrapper img,.brand-wrapper svg{flex-shrink:0;max-height:32px;object-fit:contain}.hamburger-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease;flex-shrink:0}.hamburger-toggle-btn:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:0 2px 6px #2563eb26}.hamburger-toggle-btn .toggle-icon{display:block}.side-nav-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:16px 12px;transition:padding .25s cubic-bezier(.4,0,.2,1)}.side-nav-body::-webkit-scrollbar{width:4px}.side-nav-body::-webkit-scrollbar-thumb{background-color:var(--talos-border-color, #e2e8f0);border-radius:4px}.nav-groups-container{display:flex;flex-direction:column;gap:12px}.nav-group,talos-nav-group,.talos-nav-group{display:flex;flex-direction:column}.nav-item,talos-nav-item,.talos-nav-item{display:block}talos-nav-theme-toggle,.talos-nav-theme-toggle-host{display:block}.nav-group-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--talos-text-muted, var(--text-muted, #94a3b8));padding:0 10px;margin-bottom:4px;white-space:nowrap;overflow:hidden;max-height:22px;opacity:1;transform:translate(0);transition:max-height .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),margin .25s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-group-title.nav-group-header-btn{display:flex;align-items:center;justify-content:space-between;width:100%;height:22px;background:transparent;border:none;cursor:pointer;text-align:left;border-radius:6px;box-sizing:border-box;font-family:inherit}.nav-group-title.nav-group-header-btn:hover,.nav-group-title.nav-group-header-btn:hover .nav-group-chevron{color:var(--talos-text-color, var(--text-color, #1e293b))}.nav-group-title.nav-group-header-btn:focus-visible{outline:2px solid var(--talos-primary-color, var(--primary-color, #3b82f6));outline-offset:1px}.nav-group-chevron{display:inline-flex;align-items:center;justify-content:center;transition:transform .2s cubic-bezier(.4,0,.2,1),color .15s ease;color:var(--talos-text-muted, var(--text-muted, #94a3b8))}.nav-group-chevron.is-collapsed{transform:rotate(-90deg)}.nav-group-content{display:grid;grid-template-rows:1fr;transition:grid-template-rows .25s cubic-bezier(.4,0,.2,1),opacity .2s cubic-bezier(.4,0,.2,1);opacity:1;overflow:visible}.nav-group-content.is-collapsed{grid-template-rows:0fr;opacity:0;pointer-events:none;overflow:hidden}.nav-group-content.is-collapsed>.nav-item-list{overflow:hidden}.nav-group-content>.nav-item-list{min-height:0;overflow:visible}.nav-item-list,.footer-nav-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px}.nav-link{display:flex;align-items:center;width:100%;height:36px;padding:0 10px;border-radius:8px;border:none;background:transparent;color:var(--talos-text-muted, #64748b);font-size:13px;font-weight:500;line-height:1.4;cursor:pointer;transition:background-color .15s ease,color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);text-align:left;gap:10px;white-space:nowrap;outline:none}.nav-link:hover{background-color:var(--talos-nav-hover-bg, var(--talos-bg-subtle, #f1f5f9));color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link:hover .nav-icon{color:var(--talos-nav-hover-text, var(--talos-text-primary, #0f172a))}.nav-link.active{background-color:var(--talos-active-nav-bg, var(--talos-primary-subtle-bg, #eff6ff));color:var(--talos-active-nav-text, var(--talos-primary-text, #1d4ed8));font-weight:600}.nav-link.active .nav-icon{color:var(--talos-primary, #2563eb)}.nav-link .nav-icon{display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:var(--talos-text-muted, #64748b);flex-shrink:0;transition:color .15s ease}.nav-link .nav-icon svg,.nav-link .nav-icon lucide-icon{width:17px;height:17px;stroke-width:1.85px}.nav-link .nav-label{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transform:translate(0);max-width:180px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.nav-link .nav-badge{font-size:10px;font-weight:600;padding:1.5px 6px;border-radius:10px;background-color:var(--talos-badge-bg, #eff6ff);color:var(--talos-primary-color, var(--primary-color, #2563eb));white-space:nowrap;overflow:hidden;opacity:1;transform:translate(0);max-width:60px;transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),padding .25s cubic-bezier(.4,0,.2,1),visibility .25s}.side-nav-footer{flex-shrink:0;padding:14px 10px;border-top:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));transition:padding .25s cubic-bezier(.4,0,.2,1)}.default-nav-footer{display:flex;flex-direction:column;gap:10px}.footer-actions-row{display:flex;align-items:center;gap:8px;width:100%}.footer-actions-row .footer-collapse-bar{flex:1;min-width:0}.footer-actions-row talos-nav-theme-toggle,.footer-actions-row .talos-nav-theme-toggle-host{flex-shrink:0}.user-profile-card{display:flex;align-items:center;gap:9px;padding:6px 8px;border-radius:8px;background:transparent;cursor:pointer;transition:background-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);-webkit-user-select:none;user-select:none}.user-profile-card:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc))}.user-profile-card:hover .profile-chevron{color:var(--talos-text-color, #334155)}.avatar-container{flex-shrink:0}.avatar-img{width:30px;height:30px;border-radius:50%;object-fit:cover}.avatar-placeholder{width:30px;height:30px;border-radius:50%;background:var(--talos-avatar-bg, #e0f2fe);color:var(--talos-primary-color, var(--primary-color, #0369a1));font-weight:600;font-size:12.5px;display:flex;align-items:center;justify-content:center}.user-info{flex:1;display:flex;flex-direction:column;overflow:hidden;max-width:150px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.user-name{font-size:12.5px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.user-email{font-size:11px;color:var(--talos-text-muted, var(--text-muted, #94a3b8));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}.profile-action{flex-shrink:0;display:flex;align-items:center;max-width:20px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}.profile-chevron{color:var(--talos-text-muted, var(--text-muted, #94a3b8));transition:color .15s ease}.footer-collapse-bar{display:flex;align-items:center;gap:9px;width:100%;height:36px;padding:0 10px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));border-radius:8px;background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));font-size:12.5px;font-weight:500;cursor:pointer;box-sizing:border-box;transition:background-color .15s ease,color .15s ease,border-color .15s ease,padding .25s cubic-bezier(.4,0,.2,1),gap .25s cubic-bezier(.4,0,.2,1);white-space:nowrap}.footer-collapse-bar:hover{background-color:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-primary-color, var(--primary-color, #2563eb));border-color:var(--talos-primary-color, var(--primary-color, #2563eb))}.footer-collapse-bar .collapse-bar-icon{display:flex;align-items:center;justify-content:center;width:16px;height:16px;flex-shrink:0}.footer-collapse-bar .collapse-bar-icon svg,.footer-collapse-bar .collapse-bar-icon lucide-icon{width:15px;height:15px}.collapse-bar-text{white-space:nowrap;overflow:hidden;max-width:140px;opacity:1;transform:translate(0);transition:max-width .25s cubic-bezier(.4,0,.2,1),opacity .18s cubic-bezier(.4,0,.2,1),transform .18s cubic-bezier(.4,0,.2,1),visibility .25s}@media(max-width:768px){:host,talos-side-nav,.talos-side-nav-host{position:fixed;inset:60px 0 0;width:100vw!important;max-width:100vw!important;width:100%!important;height:calc(100vh - 60px);height:calc(100dvh - 60px);z-index:90;background:var(--talos-nav-bg, var(--nav-bg, #ffffff));box-shadow:none;transform:translate(0);visibility:visible;pointer-events:auto;transition:transform .25s cubic-bezier(.4,0,.2,1),visibility .25s cubic-bezier(.4,0,.2,1)}:host.is-collapsed,talos-side-nav.is-collapsed,.talos-side-nav-host.is-collapsed{width:100vw!important;max-width:100vw!important;width:100%!important;transform:translate(-100%)!important;visibility:hidden!important;pointer-events:none!important;box-shadow:none!important}:host .side-nav-mobile-close-bar,talos-side-nav .side-nav-mobile-close-bar,.talos-side-nav-host .side-nav-mobile-close-bar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid var(--talos-nav-border-color, var(--nav-border-color, #f1f5f9));background:var(--talos-nav-bg, var(--nav-bg, #ffffff));flex-shrink:0}:host .side-nav-mobile-close-bar .mobile-close-title,talos-side-nav .side-nav-mobile-close-bar .mobile-close-title,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-title{font-size:14px;font-weight:600;color:var(--talos-text-color, var(--text-color, #0f172a));letter-spacing:-.01em}:host .side-nav-mobile-close-bar .mobile-close-btn,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border-radius:8px;border:1px solid var(--talos-nav-border-color, var(--nav-border-color, #e2e8f0));background:var(--talos-card-bg, var(--talos-nav-bg, #ffffff));color:var(--talos-text-muted, var(--text-muted, #64748b));cursor:pointer;transition:all .15s ease}:host .side-nav-mobile-close-bar .mobile-close-btn:hover,talos-side-nav .side-nav-mobile-close-bar .mobile-close-btn:hover,.talos-side-nav-host .side-nav-mobile-close-bar .mobile-close-btn:hover{background:var(--talos-bg-color, var(--bg-color, #f8fafc));color:var(--talos-text-color, var(--text-color, #0f172a));border-color:var(--talos-primary, #3b82f6)}:host .side-nav-header,talos-side-nav .side-nav-header,.talos-side-nav-host .side-nav-header{display:none}:host .side-nav-body,talos-side-nav .side-nav-body,.talos-side-nav-host .side-nav-body{padding:16px}:host .nav-link,talos-side-nav .nav-link,.talos-side-nav-host .nav-link{height:42px;padding:0 12px;font-size:14px}:host .nav-link .nav-label,talos-side-nav .nav-link .nav-label,.talos-side-nav-host .nav-link .nav-label{max-width:none}:host .theme-toggle-label,:host .user-info,talos-side-nav .theme-toggle-label,talos-side-nav .user-info,.talos-side-nav-host .theme-toggle-label,.talos-side-nav-host .user-info{max-width:none}:host .footer-collapse-bar,talos-side-nav .footer-collapse-bar,.talos-side-nav-host .footer-collapse-bar{display:none!important}}\n"] }]
         }], propDecorators: { collapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsed", required: false }] }, { type: i0.Output, args: ["collapsedChange"] }], headerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponent", required: false }] }], headerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerComponentInputs", required: false }] }], headerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerTemplate", required: false }] }], logoComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponent", required: false }] }], logoComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponentInputs", required: false }] }], logoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoTemplate", required: false }] }], bodyComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyComponent", required: false }] }], bodyComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyComponentInputs", required: false }] }], bodyTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "bodyTemplate", required: false }] }], footerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerComponent", required: false }] }], footerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerComponentInputs", required: false }] }], footerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerTemplate", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], showThemeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeToggle", required: false }] }], themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], navGroups: [{ type: i0.Input, args: [{ isSignal: true, alias: "navGroups", required: false }] }], footerItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "footerItems", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
 
 class TopNavComponent {
@@ -622,6 +659,15 @@ class TopNavComponent {
     /** Track whether user profile dropdown menu is open */
     isUserDropdownOpen = signal(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isUserDropdownOpen" }] : /* istanbul ignore next */ []));
+    /** Track whether mobile hamburger navigation sheet is open */
+    isMobileMenuOpen = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isMobileMenuOpen" }] : /* istanbul ignore next */ []));
+    toggleMobileMenu() {
+        this.isMobileMenuOpen.update((v) => !v);
+    }
+    closeMobileMenu() {
+        this.isMobileMenuOpen.set(false);
+    }
     /** Computed effective theme mode */
     effectiveThemeMode = computed(() => {
         const mode = this.themeMode();
@@ -762,6 +808,7 @@ class TopNavComponent {
     closeAllDropdowns() {
         this.openDropdownId.set(null);
         this.isUserDropdownOpen.set(false);
+        this.isMobileMenuOpen.set(false);
     }
     /** Dismiss dropdowns when clicking outside the component */
     onDocumentClick(event) {
@@ -771,7 +818,7 @@ class TopNavComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\"\n        [talosTooltip]=\"themeToggleTooltip()\">\n        @if (effectiveThemeMode() === 'system') {\n        <svg lucideMonitor [size]=\"16\"></svg>\n        } @else if (effectiveThemeMode() === 'dark') {\n        <svg lucideMoon [size]=\"16\"></svg>\n        } @else {\n        <svg lucideSun [size]=\"16\"></svg>\n        }\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideSun, selector: "svg[lucideSun]" }, { kind: "component", type: LucideMoon, selector: "svg[lucideMoon]" }, { kind: "component", type: LucideMonitor, selector: "svg[lucideMonitor]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }], encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.1.1", type: TopNavComponent, isStandalone: true, selector: "talos-top-nav, [talos-top-nav], [talosTopNav]", inputs: { brandTitle: { classPropertyName: "brandTitle", publicName: "brandTitle", isSignal: true, isRequired: false, transformFunction: null }, brandSubtitle: { classPropertyName: "brandSubtitle", publicName: "brandSubtitle", isSignal: true, isRequired: false, transformFunction: null }, brandBadge: { classPropertyName: "brandBadge", publicName: "brandBadge", isSignal: true, isRequired: false, transformFunction: null }, brandIcon: { classPropertyName: "brandIcon", publicName: "brandIcon", isSignal: true, isRequired: false, transformFunction: null }, brandRoute: { classPropertyName: "brandRoute", publicName: "brandRoute", isSignal: true, isRequired: false, transformFunction: null }, brandUrl: { classPropertyName: "brandUrl", publicName: "brandUrl", isSignal: true, isRequired: false, transformFunction: null }, showBrand: { classPropertyName: "showBrand", publicName: "showBrand", isSignal: true, isRequired: false, transformFunction: null }, showLogo: { classPropertyName: "showLogo", publicName: "showLogo", isSignal: true, isRequired: false, transformFunction: null }, logoComponent: { classPropertyName: "logoComponent", publicName: "logoComponent", isSignal: true, isRequired: false, transformFunction: null }, logoComponentInputs: { classPropertyName: "logoComponentInputs", publicName: "logoComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, logoTemplate: { classPropertyName: "logoTemplate", publicName: "logoTemplate", isSignal: true, isRequired: false, transformFunction: null }, showSidebarToggle: { classPropertyName: "showSidebarToggle", publicName: "showSidebarToggle", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, activeItemId: { classPropertyName: "activeItemId", publicName: "activeItemId", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showThemeToggle: { classPropertyName: "showThemeToggle", publicName: "showThemeToggle", isSignal: true, isRequired: false, transformFunction: null }, themeMode: { classPropertyName: "themeMode", publicName: "themeMode", isSignal: true, isRequired: false, transformFunction: null }, isDarkMode: { classPropertyName: "isDarkMode", publicName: "isDarkMode", isSignal: true, isRequired: false, transformFunction: null }, userProfile: { classPropertyName: "userProfile", publicName: "userProfile", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, sticky: { classPropertyName: "sticky", publicName: "sticky", isSignal: true, isRequired: false, transformFunction: null }, bordered: { classPropertyName: "bordered", publicName: "bordered", isSignal: true, isRequired: false, transformFunction: null }, glass: { classPropertyName: "glass", publicName: "glass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, leftComponent: { classPropertyName: "leftComponent", publicName: "leftComponent", isSignal: true, isRequired: false, transformFunction: null }, leftComponentInputs: { classPropertyName: "leftComponentInputs", publicName: "leftComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, leftTemplate: { classPropertyName: "leftTemplate", publicName: "leftTemplate", isSignal: true, isRequired: false, transformFunction: null }, centerComponent: { classPropertyName: "centerComponent", publicName: "centerComponent", isSignal: true, isRequired: false, transformFunction: null }, centerComponentInputs: { classPropertyName: "centerComponentInputs", publicName: "centerComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, centerTemplate: { classPropertyName: "centerTemplate", publicName: "centerTemplate", isSignal: true, isRequired: false, transformFunction: null }, rightComponent: { classPropertyName: "rightComponent", publicName: "rightComponent", isSignal: true, isRequired: false, transformFunction: null }, rightComponentInputs: { classPropertyName: "rightComponentInputs", publicName: "rightComponentInputs", isSignal: true, isRequired: false, transformFunction: null }, rightTemplate: { classPropertyName: "rightTemplate", publicName: "rightTemplate", isSignal: true, isRequired: false, transformFunction: null }, sidebarCollapsed: { classPropertyName: "sidebarCollapsed", publicName: "sidebarCollapsed", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { activeItemId: "activeItemIdChange", sidebarCollapsed: "sidebarCollapsedChange", itemClick: "itemClick", actionClick: "actionClick", userClick: "userClick", themeToggle: "themeToggle", themeModeChange: "themeModeChange", searchChange: "searchChange", sidebarToggleClick: "sidebarToggleClick", brandClick: "brandClick" }, host: { attributes: { "role": "banner" }, listeners: { "document:click": "onDocumentClick($event)", "document:keydown.escape": "closeAllDropdowns()" }, properties: { "class.is-sticky": "sticky()", "class.is-glass": "glass()", "class.is-bordered": "bordered()", "class.size-sm": "size() === \"sm\"", "class.size-md": "size() === \"md\"", "class.size-lg": "size() === \"lg\"", "class.dark-theme": "isDarkMode()", "attr.data-theme": "isDarkMode() ? \"dark\" : \"light\"" }, classAttribute: "talos-top-nav-host" }, ngImport: i0, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LucideChevronDown, selector: "svg[lucideChevronDown]" }, { kind: "component", type: LucidePanelLeftOpen, selector: "svg[lucidePanelLeftOpen], svg[lucideSidebarOpen]" }, { kind: "component", type: LucidePanelLeftClose, selector: "svg[lucidePanelLeftClose], svg[lucideSidebarClose]" }, { kind: "component", type: LucideSearch, selector: "svg[lucideSearch]" }, { kind: "component", type: LucideMenu, selector: "svg[lucideMenu]" }, { kind: "component", type: LucideX, selector: "svg[lucideX]" }, { kind: "directive", type: TalosTooltipDirective, selector: "[talosTooltip], [tooltip]", inputs: ["talosTooltip", "tooltip", "tooltipPosition", "tooltipDisabled"] }, { kind: "component", type: TalosThemeMorphIconComponent, selector: "talos-theme-morph-icon", inputs: ["mode", "size"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: TopNavComponent, decorators: [{
             type: Component,
@@ -782,10 +829,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         LucidePanelLeftOpen,
                         LucidePanelLeftClose,
                         LucideSearch,
-                        LucideSun,
-                        LucideMoon,
-                        LucideMonitor,
-                        TalosTooltipDirective
+                        LucideMenu,
+                        LucideX,
+                        TalosTooltipDirective,
+                        TalosThemeMorphIconComponent
                     ], encapsulation: ViewEncapsulation.None, host: {
                         'class': 'talos-top-nav-host',
                         '[class.is-sticky]': 'sticky()',
@@ -799,7 +846,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
                         'role': 'banner',
                         '(document:click)': 'onDocumentClick($event)',
                         '(document:keydown.escape)': 'closeAllDropdowns()'
-                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\"\n        [talosTooltip]=\"themeToggleTooltip()\">\n        @if (effectiveThemeMode() === 'system') {\n        <svg lucideMonitor [size]=\"16\"></svg>\n        } @else if (effectiveThemeMode() === 'dark') {\n        <svg lucideMoon [size]=\"16\"></svg>\n        } @else {\n        <svg lucideSun [size]=\"16\"></svg>\n        }\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}}\n"] }]
+                    }, template: "<div class=\"talos-top-nav-inner\">\n  <!-- Left Section: Toggle, Brand, Logo -->\n  <div class=\"top-nav-left\">\n    @if (leftComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: leftComponentInputs()\" />\n    } @else if (leftTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-left]\">\n      <!-- Sidebar Collapse Toggle Button -->\n      @if (showSidebarToggle()) {\n      <ng-content select=\"[top-nav-toggle]\">\n        <button type=\"button\" class=\"nav-toggle-btn\" (click)=\"toggleSidebar()\"\n          [attr.aria-label]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\"\n          [talosTooltip]=\"isSidebarCollapsed() ? 'Expand sidebar' : 'Collapse sidebar'\">\n          @if (isSidebarCollapsed()) {\n          <svg lucidePanelLeftOpen [size]=\"18\"></svg>\n          } @else {\n          <svg lucidePanelLeftClose [size]=\"18\"></svg>\n          }\n        </button>\n      </ng-content>\n      }\n\n      <!-- Brand / Logo Area -->\n      @if (showLogo() || showBrand()) {\n      <div class=\"brand-container\" (click)=\"handleBrandClick()\"\n        [attr.tabindex]=\"(brandRoute() || brandUrl()) ? 0 : null\"\n        [attr.role]=\"(brandRoute() || brandUrl()) ? 'link' : null\">\n        @if (showLogo()) {\n        <div class=\"brand-logo-wrapper\">\n          @if (logoComponent(); as comp) {\n          <ng-container *ngComponentOutlet=\"comp; inputs: logoComponentInputs()\" />\n          } @else if (logoTemplate(); as tmpl) {\n          <ng-container *ngTemplateOutlet=\"tmpl\" />\n          } @else {\n          <ng-content select=\"[top-nav-logo]\" />\n          }\n        </div>\n        }\n\n        @if (showBrand()) {\n        <ng-content select=\"[top-nav-brand]\">\n          <div class=\"brand-text-group\">\n            <div class=\"brand-title-row\">\n              @if (brandIcon(); as iconComp) {\n              <span class=\"brand-icon\">\n                <ng-container *ngComponentOutlet=\"iconComp\" />\n              </span>\n              }\n              <span class=\"brand-title\">{{ brandTitle() }}</span>\n              @if (brandBadge(); as badge) {\n              <span class=\"brand-badge\">{{ badge }}</span>\n              }\n            </div>\n            @if (brandSubtitle(); as subtitle) {\n            <span class=\"brand-subtitle\">{{ subtitle }}</span>\n            }\n          </div>\n        </ng-content>\n        }\n      </div>\n      }\n    </ng-content>\n    }\n  </div>\n\n  <!-- Center Section: Navigation Links & Search -->\n  <div class=\"top-nav-center\">\n    @if (centerComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: centerComponentInputs()\" />\n    } @else if (centerTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-center]\">\n      <!-- Direct Navigation Items -->\n      @if (items().length > 0) {\n      <nav class=\"nav-links-bar\" aria-label=\"Main Navigation\">\n        @for (item of items(); track item.id || item.label) {\n        @if (item.children && item.children.length > 0) {\n        <!-- Item with Dropdown Menu -->\n        <div class=\"nav-item-dropdown-container\" [class.is-open]=\"openDropdownId() === (item.id || item.label)\">\n          <button type=\"button\" class=\"nav-link-btn has-dropdown\"\n            [class.is-active]=\"activeItemId() === item.id || !!item.active\" [disabled]=\"item.disabled ?? false\"\n            [attr.aria-haspopup]=\"'true'\" [attr.aria-expanded]=\"openDropdownId() === (item.id || item.label)\"\n            (click)=\"toggleDropdown(item.id || item.label, $event)\">\n            @if (item.icon; as itemIcon) {\n            <span class=\"nav-link-icon\">\n              <ng-container *ngComponentOutlet=\"itemIcon\" />\n            </span>\n            }\n            <span class=\"nav-link-label\">{{ item.label }}</span>\n            @if (item.badge) {\n            <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n              {{ item.badge }}\n            </span>\n            }\n            <svg lucideChevronDown class=\"dropdown-chevron\" [size]=\"14\"></svg>\n          </button>\n\n          <!-- Dropdown Panel -->\n          @if (openDropdownId() === (item.id || item.label)) {\n          <div class=\"top-nav-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n            @if (item.dropdownTemplate; as customTmpl) {\n            <ng-container *ngTemplateOutlet=\"customTmpl\" />\n            } @else {\n            <ul class=\"dropdown-menu-list\">\n              @for (child of item.children; track child.id || child.label) {\n              @if (child.divider) {\n              <li class=\"dropdown-divider\" role=\"separator\"></li>\n              }\n              <li role=\"none\">\n                <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                  [class.is-active]=\"activeItemId() === child.id || !!child.active\" [disabled]=\"child.disabled ?? false\"\n                  (click)=\"selectChildItem(child, item, $event)\">\n                  @if (child.icon; as childIcon) {\n                  <span class=\"dropdown-item-icon\">\n                    <ng-container *ngComponentOutlet=\"childIcon\" />\n                  </span>\n                  }\n                  <div class=\"dropdown-item-content\">\n                    <span class=\"dropdown-item-label\">{{ child.label }}</span>\n                    @if (child.description) {\n                    <span class=\"dropdown-item-desc\">{{ child.description }}</span>\n                    }\n                  </div>\n                  @if (child.badge) {\n                  <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (child.badgeVariant ?? 'subtle')\">\n                    {{ child.badge }}\n                  </span>\n                  }\n                </button>\n              </li>\n              }\n            </ul>\n            }\n          </div>\n          }\n        </div>\n        } @else {\n        <!-- Standard Single Nav Link -->\n        <button type=\"button\" class=\"nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n          [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event)\">\n          @if (item.icon; as itemIcon) {\n          <span class=\"nav-link-icon\">\n            <ng-container *ngComponentOutlet=\"itemIcon\" />\n          </span>\n          }\n          <span class=\"nav-link-label\">{{ item.label }}</span>\n          @if (item.badge) {\n          <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n            {{ item.badge }}\n          </span>\n          }\n        </button>\n        }\n        }\n      </nav>\n      }\n\n      <!-- Search Input Slot -->\n      @if (showSearch()) {\n      <div class=\"search-bar-wrapper\">\n        <svg lucideSearch class=\"search-icon\" [size]=\"15\"></svg>\n        <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n          (input)=\"onSearchInput($event)\" />\n      </div>\n      }\n\n      <!-- Custom projected center content -->\n      <ng-content select=\"[top-nav-links]\" />\n      <ng-content />\n    </ng-content>\n    }\n  </div>\n\n  <!-- Right Section: Actions, Theme Toggle, User Profile -->\n  <div class=\"top-nav-right\">\n    @if (rightComponent(); as comp) {\n    <ng-container *ngComponentOutlet=\"comp; inputs: rightComponentInputs()\" />\n    } @else if (rightTemplate(); as tmpl) {\n    <ng-container *ngTemplateOutlet=\"tmpl\" />\n    } @else {\n    <ng-content select=\"[top-nav-right]\">\n      <!-- Action Buttons -->\n      @if (actions().length > 0) {\n      <div class=\"actions-group\">\n        @for (action of actions(); track action.id || action.label || $index) {\n        <button type=\"button\" class=\"action-btn\" [class.has-label]=\"action.showLabel && !!action.label\"\n          [disabled]=\"action.disabled ?? false\" [attr.aria-label]=\"action.label || 'Action'\"\n          [talosTooltip]=\"action.showLabel ? '' : (action.label || '')\" (click)=\"handleActionClick(action, $event)\">\n          @if (action.icon; as actIcon) {\n          <span class=\"action-btn-icon\">\n            <ng-container *ngComponentOutlet=\"actIcon\" />\n          </span>\n          }\n          @if (action.showLabel && action.label) {\n          <span class=\"action-btn-label\">{{ action.label }}</span>\n          }\n          @if (action.badge) {\n          <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n            {{ action.badge }}\n          </span>\n          }\n        </button>\n        }\n      </div>\n      }\n\n      <ng-content select=\"[top-nav-actions]\" />\n\n      <!-- 3-Way System/Light/Dark Theme Toggle -->\n      @if (showThemeToggle()) {\n      <button type=\"button\" class=\"theme-toggle-btn\" (click)=\"handleThemeToggle()\"\n        [attr.aria-label]=\"themeToggleAriaLabel()\" [talosTooltip]=\"themeToggleTooltip()\">\n        <talos-theme-morph-icon [mode]=\"effectiveThemeMode()\" [size]=\"16\" />\n      </button>\n      }\n\n      <!-- User Profile & User Dropdown Menu -->\n      @if (userProfile(); as user) {\n      <div class=\"user-profile-container\" [class.is-open]=\"isUserDropdownOpen()\">\n        <button type=\"button\" class=\"user-profile-btn\" [attr.aria-haspopup]=\"'true'\"\n          [attr.aria-expanded]=\"isUserDropdownOpen()\" (click)=\"toggleUserDropdown($event)\">\n          <div class=\"user-avatar-circle\">\n            @if (user.avatarUrl) {\n            <img [src]=\"user.avatarUrl\" [alt]=\"user.name\" class=\"user-avatar-img\" />\n            } @else {\n            <span class=\"avatar-initials\">{{ user.name.charAt(0) }}</span>\n            }\n          </div>\n          <div class=\"user-profile-meta\">\n            <span class=\"user-name-text\">{{ user.name }}</span>\n            @if (user.role) {\n            <span class=\"user-role-text\">{{ user.role }}</span>\n            }\n          </div>\n          @if (user.menuItems && user.menuItems.length > 0) {\n          <svg lucideChevronDown class=\"user-dropdown-chevron\" [size]=\"13\"></svg>\n          }\n        </button>\n\n        <!-- User Dropdown Panel -->\n        @if (isUserDropdownOpen() && user.menuItems && user.menuItems.length > 0) {\n        <div class=\"top-nav-dropdown-menu user-dropdown-menu\" role=\"menu\" (click)=\"$event.stopPropagation()\">\n          <div class=\"user-menu-header\">\n            <span class=\"user-menu-header-name\">{{ user.name }}</span>\n            @if (user.email) {\n            <span class=\"user-menu-header-email\">{{ user.email }}</span>\n            }\n          </div>\n          <div class=\"dropdown-divider\" role=\"separator\"></div>\n          <ul class=\"dropdown-menu-list\">\n            @for (menuItem of user.menuItems; track menuItem.id || menuItem.label) {\n            @if (menuItem.divider) {\n            <li class=\"dropdown-divider\" role=\"separator\"></li>\n            }\n            <li role=\"none\">\n              <button type=\"button\" class=\"dropdown-menu-item\" role=\"menuitem\"\n                [class.is-active]=\"activeItemId() === menuItem.id || !!menuItem.active\"\n                [disabled]=\"menuItem.disabled ?? false\" (click)=\"selectItem(menuItem, $event)\">\n                @if (menuItem.icon; as menuIcon) {\n                <span class=\"dropdown-item-icon\">\n                  <ng-container *ngComponentOutlet=\"menuIcon\" />\n                </span>\n                }\n                <div class=\"dropdown-item-content\">\n                  <span class=\"dropdown-item-label\">{{ menuItem.label }}</span>\n                  @if (menuItem.description) {\n                  <span class=\"dropdown-item-desc\">{{ menuItem.description }}</span>\n                  }\n                </div>\n                @if (menuItem.badge) {\n                <span class=\"dropdown-item-badge\" [class]=\"'badge-' + (menuItem.badgeVariant ?? 'subtle')\">\n                  {{ menuItem.badge }}\n                </span>\n                }\n              </button>\n            </li>\n            }\n          </ul>\n        </div>\n        }\n      </div>\n      }\n\n      <!-- Mobile Top Nav Hamburger Toggle Button -->\n      @if (items().length > 0 || actions().length > 0) {\n      <button type=\"button\" class=\"top-nav-mobile-hamburger-btn\" (click)=\"toggleMobileMenu()\"\n        [class.is-open]=\"isMobileMenuOpen()\" [attr.aria-expanded]=\"isMobileMenuOpen()\"\n        [attr.aria-label]=\"isMobileMenuOpen() ? 'Close navigation menu' : 'Open navigation menu'\">\n        @if (isMobileMenuOpen()) {\n        <svg lucideX [size]=\"20\"></svg>\n        } @else {\n        <svg lucideMenu [size]=\"20\"></svg>\n        }\n      </button>\n      }\n\n      <ng-content select=\"[top-nav-user]\" />\n    </ng-content>\n    }\n  </div>\n</div>\n\n<!-- Mobile Top Navigation Expanding Sheet (Expands Downwards from Top) -->\n@if (isMobileMenuOpen()) {\n<div class=\"top-nav-mobile-sheet\" role=\"navigation\" aria-label=\"Mobile Navigation\" (click)=\"$event.stopPropagation()\">\n  @if (showSearch()) {\n  <div class=\"mobile-search-bar\">\n    <svg lucideSearch class=\"search-icon\" [size]=\"16\"></svg>\n    <input type=\"text\" class=\"top-nav-search-input\" [placeholder]=\"searchPlaceholder()\"\n      (input)=\"onSearchInput($event)\" />\n  </div>\n  }\n\n  @if (items().length > 0) {\n  <nav class=\"mobile-nav-links-list\" aria-label=\"Mobile Main Navigation\">\n    @for (item of items(); track item.id || item.label) {\n    <button type=\"button\" class=\"mobile-nav-link-btn\" [attr.data-item-id]=\"item.id\" [class.is-active]=\"activeItemId() === item.id || !!item.active\"\n      [disabled]=\"item.disabled ?? false\" (click)=\"selectItem(item, $event); closeMobileMenu()\">\n      @if (item.icon; as itemIcon) {\n      <span class=\"nav-link-icon\">\n        <ng-container *ngComponentOutlet=\"itemIcon\" />\n      </span>\n      }\n      <span class=\"nav-link-label\">{{ item.label }}</span>\n      @if (item.badge) {\n      <span class=\"nav-link-badge\" [class]=\"'badge-' + (item.badgeVariant ?? 'primary')\">\n        {{ item.badge }}\n      </span>\n      }\n    </button>\n    }\n  </nav>\n  }\n\n  @if (actions().length > 0) {\n  <div class=\"mobile-sheet-actions\">\n    @for (action of actions(); track action.id || action.label || $index) {\n    <button type=\"button\" class=\"mobile-action-btn\" [disabled]=\"action.disabled ?? false\"\n      (click)=\"handleActionClick(action, $event); closeMobileMenu()\">\n      @if (action.icon; as actIcon) {\n      <span class=\"action-btn-icon\">\n        <ng-container *ngComponentOutlet=\"actIcon\" />\n      </span>\n      }\n      @if (action.label) {\n      <span class=\"action-btn-label\">{{ action.label }}</span>\n      }\n      @if (action.badge) {\n      <span class=\"action-badge\" [class]=\"'badge-' + (action.badgeVariant ?? 'danger')\">\n        {{ action.badge }}\n      </span>\n      }\n    </button>\n    }\n  </div>\n  }\n</div>\n\n<!-- Backdrop for Top Nav Mobile Sheet -->\n<div class=\"top-nav-mobile-backdrop\" (click)=\"closeMobileMenu()\" aria-hidden=\"true\"></div>\n}", styles: [":host,talos-top-nav,.talos-top-nav-host{display:block;width:100%;box-sizing:border-box;z-index:50;position:relative;overflow:visible;container-type:inline-size;container-name:topnav;--talos-top-nav-height: 60px;--talos-top-nav-bg: var(--talos-header-bg, var(--talos-bg-surface, #ffffff));--talos-top-nav-border: var(--talos-header-border-color, var(--talos-border-default, #e2e8f0));--talos-top-nav-text: var(--talos-text-primary, #0f172a);--talos-top-nav-muted: var(--talos-text-muted, #64748b);--talos-top-nav-hover-bg: var(--talos-nav-hover-bg, rgba(0, 0, 0, .04));--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, #eff6ff);--talos-top-nav-active-text: var(--talos-primary-text, #1d4ed8);--talos-top-nav-dropdown-bg: var(--talos-bg-surface, #ffffff);--talos-top-nav-dropdown-border: var(--talos-border-default, #e2e8f0);--talos-top-nav-dropdown-shadow: var(--talos-shadow-dropdown, 0 10px 25px -5px rgba(0, 0, 0, .08))}:host.size-sm,talos-top-nav.size-sm,.talos-top-nav-host.size-sm{--talos-top-nav-height: 48px}:host.size-md,talos-top-nav.size-md,.talos-top-nav-host.size-md{--talos-top-nav-height: 60px}:host.size-lg,talos-top-nav.size-lg,.talos-top-nav-host.size-lg{--talos-top-nav-height: 72px}:host.is-sticky,talos-top-nav.is-sticky,.talos-top-nav-host.is-sticky{position:sticky;top:0;z-index:50}:host.is-bordered,talos-top-nav.is-bordered,.talos-top-nav-host.is-bordered{border-bottom:1px solid var(--talos-top-nav-border)}:host.is-glass,talos-top-nav.is-glass,.talos-top-nav-host.is-glass{--talos-top-nav-bg: rgba(255, 255, 255, .85);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}:root[data-theme=dark] :host,:root.dark :host,[data-theme=dark] :host,[data-mode=dark] :host,.dark :host,.dark-theme :host,:root[data-theme=dark] talos-top-nav,:root.dark talos-top-nav,[data-theme=dark] talos-top-nav,[data-mode=dark] talos-top-nav,.dark talos-top-nav,.dark-theme talos-top-nav{--talos-top-nav-bg: var(--talos-header-bg, #090d16);--talos-top-nav-border: var(--talos-header-border-color, rgba(255, 255, 255, .08));--talos-top-nav-text: #f8fafc;--talos-top-nav-muted: #94a3b8;--talos-top-nav-hover-bg: rgba(255, 255, 255, .06);--talos-top-nav-active-bg: var(--talos-primary-subtle-bg, rgba(59, 130, 246, .16));--talos-top-nav-active-text: #ffffff;--talos-top-nav-dropdown-bg: #0f172a;--talos-top-nav-dropdown-border: rgba(255, 255, 255, .1);--talos-top-nav-dropdown-shadow: 0 16px 32px -4px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .08)}:root[data-theme=dark] :host.is-glass,:root.dark :host.is-glass,[data-theme=dark] :host.is-glass,[data-mode=dark] :host.is-glass,.dark :host.is-glass,.dark-theme :host.is-glass,:root[data-theme=dark] talos-top-nav.is-glass,:root.dark talos-top-nav.is-glass,[data-theme=dark] talos-top-nav.is-glass,[data-mode=dark] talos-top-nav.is-glass,.dark talos-top-nav.is-glass,.dark-theme talos-top-nav.is-glass{--talos-top-nav-bg: rgba(9, 13, 22, .85)}.talos-top-nav-inner{display:flex;align-items:center;justify-content:space-between;height:var(--talos-top-nav-height);padding:0 20px;background:var(--talos-top-nav-bg);box-sizing:border-box;gap:12px;position:relative;overflow:visible}@media(max-width:640px){.talos-top-nav-inner{padding:0 10px;gap:6px}}.top-nav-left{display:flex;align-items:center;gap:10px;flex-shrink:0}.nav-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0}.nav-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.brand-container{display:flex;align-items:center;gap:6px;text-decoration:none;cursor:pointer}.brand-logo-wrapper{display:inline-flex;align-items:center;justify-content:center}.brand-text-group{display:flex;flex-direction:column;line-height:1.2}.brand-title-row{display:flex;align-items:center;gap:6px}.brand-icon{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:7px;background:var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff)));color:var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb)));border:1px solid var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2));flex-shrink:0;transition:all .2s ease}.brand-icon svg,.brand-icon i-lucide,.brand-icon .lucide{width:15px;height:15px;display:block}.brand-title{font-size:.95rem;font-weight:700;letter-spacing:-.01em;color:var(--talos-top-nav-text);white-space:nowrap}.brand-badge{display:inline-flex;align-items:center;padding:1px 6px;border-radius:6px;font-size:.625rem;font-weight:600;letter-spacing:.02em;background:var(--talos-top-nav-brand-badge-bg, var(--talos-top-nav-brand-icon-bg, var(--talos-primary-light, var(--primary-light, #eff6ff))));color:var(--talos-top-nav-brand-badge-color, var(--talos-top-nav-brand-icon-color, var(--talos-primary-color, var(--primary-color, #2563eb))));border:1px solid var(--talos-top-nav-brand-badge-border, var(--talos-top-nav-brand-icon-border, rgba(37, 99, 235, .2)));white-space:nowrap}.brand-subtitle{font-size:.6875rem;color:var(--talos-top-nav-muted);white-space:nowrap}.top-nav-center{display:flex;align-items:center;gap:10px;flex:1;min-width:0;justify-content:flex-start;overflow:visible;position:relative}.nav-links-bar{display:flex;align-items:center;gap:3px;flex-wrap:nowrap;flex-shrink:0;overflow:visible;position:relative}.nav-item-dropdown-container{position:relative;display:inline-flex;overflow:visible}.nav-link-btn{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;height:32px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.8125rem;font-weight:500;cursor:pointer;transition:all .15s cubic-bezier(.4,0,.2,1);white-space:nowrap;text-decoration:none;flex-shrink:0}.nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.nav-link-btn[disabled]{opacity:.5;cursor:not-allowed}.nav-link-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.nav-link-btn .dropdown-chevron{transition:transform .2s ease;opacity:.7}.nav-link-btn.has-dropdown{padding-right:6px}.nav-item-dropdown-container.is-open .nav-link-btn .dropdown-chevron{transform:rotate(180deg)}.nav-link-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.nav-link-icon svg,.nav-link-icon i-lucide,.nav-link-icon .lucide{width:15px;height:15px;display:block}.nav-link-badge,.dropdown-item-badge,.action-badge{display:inline-flex;align-items:center;justify-content:center;padding:1px 5px;border-radius:9999px;font-size:.625rem;font-weight:600;line-height:1.2}.nav-link-badge.badge-primary,.dropdown-item-badge.badge-primary,.action-badge.badge-primary{background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2563eb))}.nav-link-badge.badge-secondary,.dropdown-item-badge.badge-secondary,.action-badge.badge-secondary{background:#64748b1f;color:var(--text-muted, #64748b)}.nav-link-badge.badge-success,.dropdown-item-badge.badge-success,.action-badge.badge-success{background:#22c55e1f;color:#16a34a}.nav-link-badge.badge-warning,.dropdown-item-badge.badge-warning,.action-badge.badge-warning{background:#eab3081f;color:#ca8a04}.nav-link-badge.badge-danger,.dropdown-item-badge.badge-danger,.action-badge.badge-danger{background:#ef44441f;color:#dc2626}.nav-link-badge.badge-subtle,.dropdown-item-badge.badge-subtle,.action-badge.badge-subtle{background:#0000000d;color:var(--talos-top-nav-muted)}.top-nav-dropdown-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:220px;max-width:320px;background:var(--talos-top-nav-dropdown-bg);border:1px solid var(--talos-top-nav-dropdown-border);border-radius:10px;box-shadow:var(--talos-top-nav-dropdown-shadow);padding:6px;z-index:1050;animation:dropdownFadeSlide .18s cubic-bezier(.16,1,.3,1);box-sizing:border-box}.top-nav-dropdown-menu.user-dropdown-menu{right:0;left:auto;min-width:240px}@keyframes dropdownFadeSlide{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.dropdown-menu-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}.dropdown-divider{height:1px;background:var(--talos-top-nav-dropdown-border);margin:4px 0}.dropdown-menu-item{width:100%;display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:6px;border:none;background:transparent;color:var(--talos-top-nav-text);font-size:.8125rem;font-weight:500;text-align:left;cursor:pointer;transition:all .12s ease;box-sizing:border-box}.dropdown-menu-item:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-primary-color, var(--talos-top-nav-text))}.dropdown-menu-item.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);font-weight:600}.dropdown-menu-item[disabled]{opacity:.45;cursor:not-allowed}.dropdown-menu-item:focus-visible{outline:none;background:var(--talos-top-nav-hover-bg)}.dropdown-item-icon{display:inline-flex;align-items:center;justify-content:center;color:var(--talos-top-nav-muted);flex-shrink:0;width:16px;height:16px}.dropdown-item-icon svg,.dropdown-item-icon i-lucide,.dropdown-item-icon .lucide{width:15px;height:15px;display:block}.dropdown-item-content{display:flex;flex-direction:column;flex:1;min-width:0}.dropdown-item-label{font-weight:500;color:var(--talos-top-nav-text)}.dropdown-item-desc{font-size:.6875rem;color:var(--talos-top-nav-muted);margin-top:1px}.search-bar-wrapper{display:flex;align-items:center;position:relative;flex:0 1 180px;min-width:100px;max-width:220px}.search-icon{position:absolute;left:9px;color:var(--talos-top-nav-muted);pointer-events:none}.top-nav-search-input{width:100%;height:30px;padding:0 8px 0 28px;border-radius:6px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text);font-size:.75rem;transition:all .15s ease}.top-nav-search-input::placeholder{color:var(--talos-top-nav-muted)}.top-nav-search-input:focus{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));background:var(--talos-top-nav-dropdown-bg);box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.top-nav-right{display:flex;align-items:center;gap:8px;flex-shrink:0}.actions-group{display:flex;align-items:center;gap:3px}.action-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;gap:6px}.action-btn.has-label{width:auto;padding:0 10px;font-size:.8125rem;font-weight:500}.action-btn .action-btn-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:16px;height:16px}.action-btn .action-btn-icon svg,.action-btn .action-btn-icon i-lucide,.action-btn .action-btn-icon .lucide{width:15px;height:15px;display:block}.action-btn .action-btn-label{font-size:.8125rem;font-weight:500;white-space:nowrap}.action-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.action-btn[disabled]{opacity:.5;cursor:not-allowed}.action-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.action-btn .action-badge{position:absolute;top:2px;right:2px;padding:1px 4px;font-size:.5625rem}.theme-toggle-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);cursor:pointer;transition:all .15s ease;flex-shrink:0;position:relative}.theme-toggle-btn talos-theme-morph-icon,.theme-toggle-btn svg{width:16px;height:16px;display:block}.theme-toggle-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.theme-toggle-btn:active{transform:scale(.9)}.theme-toggle-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-container{position:relative;display:inline-flex;flex-shrink:0}.user-profile-btn{display:flex;align-items:center;gap:7px;padding:3px 7px 3px 3px;border-radius:9999px;border:1px solid var(--talos-top-nav-border);background:transparent;cursor:pointer;transition:all .15s ease}.user-profile-btn:hover{background:var(--talos-top-nav-hover-bg)}.user-profile-btn:focus-visible{outline:none;border-color:var(--talos-primary-color, var(--primary-color, #2563eb));box-shadow:var(--talos-focus-ring, var(--focus-ring, 0 0 0 2px rgba(37, 99, 235, .2)))}.user-profile-btn .user-dropdown-chevron{color:var(--talos-top-nav-muted);transition:transform .2s ease}.user-profile-container.is-open .user-dropdown-chevron{transform:rotate(180deg)}.user-avatar-circle{width:26px;height:26px;border-radius:50%;background:var(--talos-primary-light, var(--primary-light, #eff6ff));color:var(--talos-primary-color, var(--primary-color, #2592eb));display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:600;overflow:hidden;flex-shrink:0}.user-avatar-img{width:100%;height:100%;object-fit:cover}.user-profile-meta{display:flex;flex-direction:column;text-align:left;line-height:1.15}.user-name-text{font-size:.75rem;font-weight:600;color:var(--talos-top-nav-text);white-space:nowrap}.user-role-text{font-size:.625rem;color:var(--talos-top-nav-muted);white-space:nowrap}.user-menu-header{padding:8px 10px 6px;display:flex;flex-direction:column;gap:2px}.user-menu-header-name{font-size:.8125rem;font-weight:600;color:var(--talos-top-nav-text)}.user-menu-header-email{font-size:.6875rem;color:var(--talos-top-nav-muted)}@container topnav (max-width: 840px){.brand-subtitle,.user-role-text{display:none}}@container topnav (max-width: 640px){.brand-badge,.user-profile-meta{display:none}.search-bar-wrapper{max-width:130px}.action-btn.has-label .action-btn-label{display:none}.nav-links-bar{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:none}.nav-links-bar::-webkit-scrollbar{display:none}}@container topnav (max-width: 480px){.search-bar-wrapper{display:none}.brand-title{font-size:.9375rem}}@media(max-width:480px){.top-nav-dropdown-menu{max-width:calc(100vw - 24px);right:0;left:auto}}.top-nav-mobile-hamburger-btn{display:none;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);cursor:pointer;transition:all .15s ease;flex-shrink:0}.top-nav-mobile-hamburger-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-hamburger-btn.is-open{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-color, #2563eb)}.top-nav-mobile-sheet{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;width:100vw;max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);background:var(--talos-top-nav-bg);border-bottom:1px solid var(--talos-top-nav-border);box-shadow:0 20px 35px -5px #00000040;z-index:95;padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.875rem;overflow-y:auto;box-sizing:border-box;animation:topNavSheetSlideDown .25s cubic-bezier(.16,1,.3,1)}@keyframes topNavSheetSlideDown{0%{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:translateY(0)}}.top-nav-mobile-backdrop{position:fixed;top:var(--talos-top-nav-height, 60px);left:0;right:0;bottom:0;background:#0f172a73;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);z-index:94;animation:fadeIn .2s ease-out}.mobile-nav-links-list{display:flex;flex-direction:column;gap:.375rem;width:100%}.mobile-nav-link-btn{display:flex;align-items:center;width:100%;height:42px;padding:0 1rem;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--talos-top-nav-muted);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all .15s ease;gap:.75rem;text-align:left;box-sizing:border-box}.mobile-nav-link-btn:hover{background:var(--talos-top-nav-hover-bg);color:var(--talos-top-nav-text)}.mobile-nav-link-btn.is-active{background:var(--talos-top-nav-active-bg);color:var(--talos-top-nav-active-text);border-color:var(--talos-primary-subtle-border, rgba(37, 99, 235, .25))}.mobile-nav-link-btn .nav-link-icon{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px}.mobile-nav-link-btn .nav-link-label{flex:1}.mobile-sheet-actions{display:flex;align-items:center;gap:.75rem;padding-top:.75rem;border-top:1px solid var(--talos-top-nav-border);flex-wrap:wrap}.mobile-sheet-actions .mobile-action-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border-radius:8px;border:1px solid var(--talos-top-nav-border);background:var(--talos-top-nav-bg);color:var(--talos-top-nav-text);font-size:.875rem;font-weight:600;cursor:pointer;transition:all .15s ease}.mobile-sheet-actions .mobile-action-btn:hover{background:var(--talos-top-nav-hover-bg);border-color:var(--talos-primary-color, #2563eb);color:var(--talos-primary-color, #2563eb)}@media(max-width:768px){.top-nav-center .nav-links-bar{display:none}.top-nav-mobile-hamburger-btn{display:inline-flex}}\n"] }]
         }], propDecorators: { brandTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandTitle", required: false }] }], brandSubtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandSubtitle", required: false }] }], brandBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandBadge", required: false }] }], brandIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandIcon", required: false }] }], brandRoute: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandRoute", required: false }] }], brandUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "brandUrl", required: false }] }], showBrand: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBrand", required: false }] }], showLogo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showLogo", required: false }] }], logoComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponent", required: false }] }], logoComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoComponentInputs", required: false }] }], logoTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "logoTemplate", required: false }] }], showSidebarToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSidebarToggle", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], activeItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "activeItemId", required: false }] }, { type: i0.Output, args: ["activeItemIdChange"] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showThemeToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showThemeToggle", required: false }] }], themeMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "themeMode", required: false }] }], isDarkMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "isDarkMode", required: false }] }], userProfile: [{ type: i0.Input, args: [{ isSignal: true, alias: "userProfile", required: false }] }], showSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSearch", required: false }] }], searchPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchPlaceholder", required: false }] }], sticky: [{ type: i0.Input, args: [{ isSignal: true, alias: "sticky", required: false }] }], bordered: [{ type: i0.Input, args: [{ isSignal: true, alias: "bordered", required: false }] }], glass: [{ type: i0.Input, args: [{ isSignal: true, alias: "glass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], leftComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftComponent", required: false }] }], leftComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftComponentInputs", required: false }] }], leftTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "leftTemplate", required: false }] }], centerComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerComponent", required: false }] }], centerComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerComponentInputs", required: false }] }], centerTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "centerTemplate", required: false }] }], rightComponent: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightComponent", required: false }] }], rightComponentInputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightComponentInputs", required: false }] }], rightTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rightTemplate", required: false }] }], sidebarCollapsed: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarCollapsed", required: false }] }, { type: i0.Output, args: ["sidebarCollapsedChange"] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], userClick: [{ type: i0.Output, args: ["userClick"] }], themeToggle: [{ type: i0.Output, args: ["themeToggle"] }], themeModeChange: [{ type: i0.Output, args: ["themeModeChange"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], sidebarToggleClick: [{ type: i0.Output, args: ["sidebarToggleClick"] }], brandClick: [{ type: i0.Output, args: ["brandClick"] }] } });
 
 class TalosTopNavModule {
@@ -893,5 +940,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { SideNavComponent, TalosNavGroupComponent, TalosNavItemComponent, TalosNavModule, TalosNavThemeToggleComponent, TalosSideNavModule, TalosTopNavModule, TopNavComponent };
+export { SideNavComponent, TalosNavGroupComponent, TalosNavItemComponent, TalosNavModule, TalosNavThemeToggleComponent, TalosSideNavModule, TalosThemeMorphIconComponent, TalosTopNavModule, TopNavComponent };
 //# sourceMappingURL=weeehaoooz-talos-ui-nav.mjs.map