@memberjunction/ng-explorer-settings 3.1.1 → 3.3.0

package/dist/lib/settings/settings.component.js

@@ -10,32 +10,32 @@ import { Subject, BehaviorSubject } from 'rxjs';
 import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
-import * as i1 from "../shared/settings-card.component";
-import * as i2 from "../sql-logging/sql-logging.component";
-import * as i3 from "../user-management/user-management.component";
-import * as i4 from "../role-management/role-management.component";
-import * as i5 from "../application-management/application-management.component";
-import * as i6 from "../entity-permissions/entity-permissions.component";
-import * as i7 from "../user-profile-settings/user-profile-settings.component";
+import * as i1 from "@angular/common";
+import * as i2 from "../shared/settings-card.component";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "../sql-logging/sql-logging.component";
+import * as i5 from "../user-management/user-management.component";
+import * as i6 from "../role-management/role-management.component";
+import * as i7 from "../application-management/application-management.component";
+import * as i8 from "../entity-permissions/entity-permissions.component";
+import * as i9 from "../user-profile-settings/user-profile-settings.component";
+import * as i10 from "../notification-preferences/notification-preferences.component";
 const _forTrack0 = ($index, $item) => $item.id;
-function SettingsComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 11)(2, "div", 12);
-    i0.ɵɵelement(3, "div", 13)(4, "div", 13)(5, "div", 13);
+function SettingsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵelement(1, "mj-loading", 4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 14);
-    i0.ɵɵtext(7, "Loading settings...");
-    i0.ɵɵelementEnd()()();
 } }
-function SettingsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 15);
-    i0.ɵɵelement(2, "i", 16);
-    i0.ɵɵelementStart(3, "p", 17);
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 5);
+    i0.ɵɵelement(2, "i", 6);
+    i0.ɵɵelementStart(3, "p", 7);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 18);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
-    i0.ɵɵelement(6, "i", 19);
+    i0.ɵɵelementStart(5, "button", 8);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_2_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
+    i0.ɵɵelement(6, "i", 9);
     i0.ɵɵtext(7, " Try Again ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -43,56 +43,59 @@ function SettingsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+function SettingsComponent_Conditional_3_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_1_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵelement(1, "i", 29);
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("badge-" + (tab_r4.badgeColor || "primary"));
+    const tab_r6 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("badge-" + (tab_r6.badgeColor || "primary"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", tab_r4.badgeCount, " ");
+    i0.ɵɵtextInterpolate1(" ", tab_r6.badgeCount, " ");
 } }
-function SettingsComponent_Conditional_12_Conditional_1_For_4_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 33);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_For_4_Template_li_click_0_listener() { const tab_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r4.id)); });
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 34);
+function SettingsComponent_Conditional_3_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "li", 30);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_1_For_8_Template_li_click_0_listener() { const tab_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r6.id)); })("keydown.enter", function SettingsComponent_Conditional_3_Conditional_1_For_8_Template_li_keydown_enter_0_listener() { const tab_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r6.id)); });
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "span", 32);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SettingsComponent_Conditional_12_Conditional_1_For_4_Conditional_4_Template, 2, 3, "span", 35);
+    i0.ɵɵtemplate(4, SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Template, 2, 3, "span", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r4 = ctx.$implicit;
+    const tab_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r4.id);
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r6.id);
+    i0.ɵɵattribute("aria-selected", ctx_r1.activeTab === tab_r6.id)("aria-controls", "panel-" + tab_r6.id);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(tab_r4.icon);
+    i0.ɵɵclassMap(tab_r6.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(tab_r4.label);
+    i0.ɵɵtextInterpolate(tab_r6.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r4.badgeCount && tab_r4.badgeCount > 0 ? 4 : -1);
+    i0.ɵɵconditional(tab_r6.badgeCount && tab_r6.badgeCount > 0 ? 4 : -1);
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 37);
+function SettingsComponent_Conditional_3_Conditional_1_Case_11_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 35);
     i0.ɵɵtext(2, "General Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 38)(4, "mj-settings-card", 39);
-    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_4_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("profile")); });
-    i0.ɵɵelementStart(5, "div", 40);
+    i0.ɵɵelementStart(3, "div", 36)(4, "mj-settings-card", 37);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_3_Conditional_1_Case_11_Template_mj_settings_card_toggle_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("profile")); });
+    i0.ɵɵelementStart(5, "div", 38);
     i0.ɵɵelement(6, "mj-user-profile-settings");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "mj-settings-card", 41);
-    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_7_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("preferences")); });
-    i0.ɵɵelementStart(8, "div", 40)(9, "p");
+    i0.ɵɵelementStart(7, "mj-settings-card", 39);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_3_Conditional_1_Case_11_Template_mj_settings_card_toggle_7_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("preferences")); });
+    i0.ɵɵelementStart(8, "div", 38)(9, "p");
     i0.ɵɵtext(10, "Customize your experience with display and behavior preferences.");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "mj-settings-card", 42);
-    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template_mj_settings_card_toggle_11_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("notifications")); });
-    i0.ɵɵelementStart(12, "div", 40)(13, "p");
-    i0.ɵɵtext(14, "Configure how and when you receive notifications.");
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -100,43 +103,53 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_7_Template(rf, ctx)
     i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("profile"));
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("preferences"));
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("notifications"));
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 37);
+function SettingsComponent_Conditional_3_Conditional_1_Case_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "h2", 35);
     i0.ɵɵtext(2, "User Management");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵelementStart(3, "p", 40);
     i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "mj-user-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 29)(1, "h2", 37);
+function SettingsComponent_Conditional_3_Conditional_1_Case_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "h2", 35);
     i0.ɵɵtext(2, "Role Management");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 43);
+    i0.ɵɵelementStart(3, "p", 40);
     i0.ɵɵtext(4, "Define and manage security roles.");
     i0.ɵɵelementEnd();
     i0.ɵɵelement(5, "mj-role-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 30);
+function SettingsComponent_Conditional_3_Conditional_1_Case_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
     i0.ɵɵelement(1, "mj-application-management");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 31);
+function SettingsComponent_Conditional_3_Conditional_1_Case_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
     i0.ɵɵelement(1, "mj-entity-permissions");
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-sql-logging");
+function SettingsComponent_Conditional_3_Conditional_1_Case_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "h2", 35);
+    i0.ɵɵtext(2, "Notifications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵtext(4, "Configure how and when you receive notifications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-notification-preferences");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 51);
+    i0.ɵɵelement(1, "mj-sql-logging");
+    i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_19_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 52)(1, "h3");
     i0.ɵɵtext(2, "Performance Settings");
     i0.ɵɵelementEnd();
@@ -144,7 +157,7 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template
     i0.ɵɵtext(4, "Performance monitoring and optimization tools coming soon.");
     i0.ɵɵelementEnd()();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template(rf, ctx) { if (rf & 1) {
+function SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 53)(1, "h3");
     i0.ɵɵtext(2, "Developer Tools");
     i0.ɵɵelementEnd();
@@ -152,134 +165,293 @@ function SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template
     i0.ɵɵtext(4, "Advanced developer options coming soon.");
     i0.ɵɵelementEnd()();
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "h2", 37);
+function SettingsComponent_Conditional_3_Conditional_1_Case_17_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 35);
     i0.ɵɵtext(2, "Advanced Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 44);
-    i0.ɵɵelement(4, "i", 45);
+    i0.ɵɵelementStart(3, "div", 41);
+    i0.ɵɵelement(4, "i", 42);
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6, "Beta features - Use with caution");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 46)(8, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("sql-logging")); });
-    i0.ɵɵelement(9, "i", 48);
+    i0.ɵɵelementStart(7, "div", 43)(8, "button", 44);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_1_Case_17_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("sql-logging")); });
+    i0.ɵɵelement(9, "i", 45);
     i0.ɵɵtext(10, " SQL Logging ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("performance")); });
-    i0.ɵɵelement(12, "i", 49);
+    i0.ɵɵelementStart(11, "button", 46);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_1_Case_17_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("performance")); });
+    i0.ɵɵelement(12, "i", 47);
     i0.ɵɵtext(13, " Performance ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "button", 47);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_1_Case_12_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("developer")); });
-    i0.ɵɵelement(15, "i", 50);
+    i0.ɵɵelementStart(14, "button", 48);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_1_Case_17_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("developer")); });
+    i0.ɵɵelement(15, "i", 49);
     i0.ɵɵtext(16, " Developer Tools ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 51);
-    i0.ɵɵtemplate(18, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_18_Template, 1, 0, "mj-sql-logging")(19, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_19_Template, 5, 0, "div", 52)(20, SettingsComponent_Conditional_12_Conditional_1_Case_12_Case_20_Template, 5, 0, "div", 53);
+    i0.ɵɵelementStart(17, "div", 50);
+    i0.ɵɵtemplate(18, SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_18_Template, 2, 0, "div", 51)(19, SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_19_Template, 5, 0, "div", 52)(20, SettingsComponent_Conditional_3_Conditional_1_Case_17_Case_20_Template, 5, 0, "div", 53);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    let tmp_6_0;
+    let tmp_9_0;
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(8);
     i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "sql-logging");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "sql-logging");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "performance");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "performance");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "developer");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "developer");
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional((tmp_6_0 = ctx_r1.advancedActiveTab) === "sql-logging" ? 18 : tmp_6_0 === "performance" ? 19 : tmp_6_0 === "developer" ? 20 : -1);
+    i0.ɵɵconditional((tmp_9_0 = ctx_r1.advancedActiveTab) === "sql-logging" ? 18 : tmp_9_0 === "performance" ? 19 : tmp_9_0 === "developer" ? 20 : -1);
 } }
-function SettingsComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20)(1, "nav", 22)(2, "ul", 23);
-    i0.ɵɵrepeaterCreate(3, SettingsComponent_Conditional_12_Conditional_1_For_4_Template, 5, 6, "li", 24, _forTrack0);
+function SettingsComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 10)(1, "nav", 12)(2, "div", 13);
+    i0.ɵɵelement(3, "i", 14);
+    i0.ɵɵelementStart(4, "input", 15);
+    i0.ɵɵlistener("input", function SettingsComponent_Conditional_3_Conditional_1_Template_input_input_4_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, SettingsComponent_Conditional_3_Conditional_1_Conditional_5_Template, 2, 0, "button", 16);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "ul", 17);
+    i0.ɵɵrepeaterCreate(7, SettingsComponent_Conditional_3_Conditional_1_For_8_Template, 5, 8, "li", 18, _forTrack0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 25)(6, "div", 26);
-    i0.ɵɵtemplate(7, SettingsComponent_Conditional_12_Conditional_1_Case_7_Template, 15, 3, "div", 27)(8, SettingsComponent_Conditional_12_Conditional_1_Case_8_Template, 6, 0, "div", 28)(9, SettingsComponent_Conditional_12_Conditional_1_Case_9_Template, 6, 0, "div", 29)(10, SettingsComponent_Conditional_12_Conditional_1_Case_10_Template, 2, 0, "div", 30)(11, SettingsComponent_Conditional_12_Conditional_1_Case_11_Template, 2, 0, "div", 31)(12, SettingsComponent_Conditional_12_Conditional_1_Case_12_Template, 21, 7, "div", 32);
+    i0.ɵɵelementStart(9, "div", 19)(10, "div", 20);
+    i0.ɵɵtemplate(11, SettingsComponent_Conditional_3_Conditional_1_Case_11_Template, 11, 2, "div", 21)(12, SettingsComponent_Conditional_3_Conditional_1_Case_12_Template, 6, 0, "div", 22)(13, SettingsComponent_Conditional_3_Conditional_1_Case_13_Template, 6, 0, "div", 23)(14, SettingsComponent_Conditional_3_Conditional_1_Case_14_Template, 2, 0, "div", 24)(15, SettingsComponent_Conditional_3_Conditional_1_Case_15_Template, 2, 0, "div", 25)(16, SettingsComponent_Conditional_3_Conditional_1_Case_16_Template, 6, 0, "div", 26)(17, SettingsComponent_Conditional_3_Conditional_1_Case_17_Template, 21, 10, "div", 27);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    let tmp_3_0;
+    let tmp_6_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r1.tabs);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional((tmp_3_0 = ctx_r1.activeTab) === "general" ? 7 : tmp_3_0 === "users" ? 8 : tmp_3_0 === "roles" ? 9 : tmp_3_0 === "applications" ? 10 : tmp_3_0 === "permissions" ? 11 : tmp_3_0 === "advanced" ? 12 : -1);
-} }
-function SettingsComponent_Conditional_12_Conditional_2_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 37);
-    i0.ɵɵtext(2, "General Settings");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵproperty("value", ctx_r1.searchTerm$.value);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.searchTerm$.value ? 5 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.filteredTabs);
+    i0.ɵɵadvance(2);
+    i0.ɵɵattribute("id", "panel-" + ctx_r1.activeTab);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.activeTab) === "general" ? 11 : tmp_6_0 === "users" ? 12 : tmp_6_0 === "roles" ? 13 : tmp_6_0 === "applications" ? 14 : tmp_6_0 === "permissions" ? 15 : tmp_6_0 === "notifications" ? 16 : tmp_6_0 === "advanced" ? 17 : -1);
 } }
-function SettingsComponent_Conditional_12_Conditional_2_Case_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28)(1, "h2", 37);
-    i0.ɵɵtext(2, "User Management");
+function SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 54)(1, "button", 64);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleMobileNav()); });
+    i0.ɵɵelement(2, "i", 65);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 43);
-    i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
+    i0.ɵɵelementStart(3, "h1", 66);
+    i0.ɵɵtext(4, "Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "mj-user-management");
+    i0.ɵɵelement(5, "div", 67);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵattribute("aria-expanded", ctx_r1.isMobileNavOpen);
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeMobileNav()); });
     i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_2_For_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 62);
+function SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 71);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r8 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("badge-" + (tab_r8.badgeColor || "primary"));
+    const tab_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("badge-" + (tab_r13.badgeColor || "primary"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", tab_r8.badgeCount, " ");
+    i0.ɵɵtextInterpolate1(" ", tab_r13.badgeCount, " ");
 } }
-function SettingsComponent_Conditional_12_Conditional_2_For_7_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 59);
-    i0.ɵɵlistener("click", function SettingsComponent_Conditional_12_Conditional_2_For_7_Template_button_click_0_listener() { const tab_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTabChange(tab_r8.id)); });
-    i0.ɵɵelement(1, "i");
-    i0.ɵɵtemplate(2, SettingsComponent_Conditional_12_Conditional_2_For_7_Conditional_2_Template, 2, 3, "span", 60);
-    i0.ɵɵelementStart(3, "span", 61);
-    i0.ɵɵtext(4);
-    i0.ɵɵelementEnd()();
+function SettingsComponent_Conditional_3_Conditional_2_For_9_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_For_9_Template_button_click_0_listener() { const tab_r13 = i0.ɵɵrestoreView(_r12).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onMobileTabChange(tab_r13.id)); });
+    i0.ɵɵelement(1, "i", 31);
+    i0.ɵɵelementStart(2, "span", 62);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_4_Template, 2, 3, "span", 70);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r8 = ctx.$implicit;
+    const tab_r13 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r8.id);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(tab_r8.icon);
+    i0.ɵɵclassProp("active", ctx_r1.activeTab === tab_r13.id);
+    i0.ɵɵattribute("aria-selected", ctx_r1.activeTab === tab_r13.id)("aria-label", tab_r13.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r8.badgeCount && tab_r8.badgeCount > 0 ? 2 : -1);
+    i0.ɵɵclassMap(tab_r13.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(tab_r8.label);
+    i0.ɵɵtextInterpolate(tab_r13.label);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r13.badgeCount && tab_r13.badgeCount > 0 ? 4 : -1);
 } }
-function SettingsComponent_Conditional_12_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "button", 58);
-    i0.ɵɵelement(1, "i", 63);
-    i0.ɵɵelementStart(2, "span", 61);
-    i0.ɵɵtext(3, "More");
+function SettingsComponent_Conditional_3_Conditional_2_Case_16_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 35);
+    i0.ɵɵtext(2, "General Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36)(4, "mj-settings-card", 37);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_3_Conditional_2_Case_16_Template_mj_settings_card_toggle_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("profile")); });
+    i0.ɵɵelementStart(5, "div", 38);
+    i0.ɵɵelement(6, "mj-user-profile-settings");
     i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "mj-settings-card", 39);
+    i0.ɵɵlistener("toggle", function SettingsComponent_Conditional_3_Conditional_2_Case_16_Template_mj_settings_card_toggle_7_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSection("preferences")); });
+    i0.ɵɵelementStart(8, "div", 38)(9, "p");
+    i0.ɵɵtext(10, "Customize your experience with display and behavior preferences.");
+    i0.ɵɵelementEnd()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("profile"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("expanded", ctx_r1.isSectionExpanded("preferences"));
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "h2", 35);
+    i0.ɵɵtext(2, "User Management");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-user-management");
+    i0.ɵɵelementEnd();
 } }
-function SettingsComponent_Conditional_12_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 21)(1, "div", 54);
-    i0.ɵɵtemplate(2, SettingsComponent_Conditional_12_Conditional_2_Case_2_Template, 3, 0, "div", 27)(3, SettingsComponent_Conditional_12_Conditional_2_Case_3_Template, 6, 0, "div", 28);
+function SettingsComponent_Conditional_3_Conditional_2_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "h2", 35);
+    i0.ɵɵtext(2, "Role Management");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "nav", 55)(5, "div", 56);
-    i0.ɵɵrepeaterCreate(6, SettingsComponent_Conditional_12_Conditional_2_For_7_Template, 5, 6, "button", 57, _forTrack0);
-    i0.ɵɵtemplate(8, SettingsComponent_Conditional_12_Conditional_2_Conditional_8_Template, 4, 0, "button", 58);
+    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵtext(4, "Define and manage security roles.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-role-management");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "mj-application-management");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-entity-permissions");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "h2", 35);
+    i0.ɵɵtext(2, "Notifications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵtext(4, "Configure how and when you receive notifications");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "mj-notification-preferences");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75);
+    i0.ɵɵelement(1, "mj-sql-logging");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76)(1, "h3");
+    i0.ɵɵtext(2, "Performance Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Performance monitoring and optimization tools coming soon.");
+    i0.ɵɵelementEnd()();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "h3");
+    i0.ɵɵtext(2, "Developer Tools");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Advanced developer options coming soon.");
+    i0.ɵɵelementEnd()();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Case_22_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 27)(1, "h2", 35);
+    i0.ɵɵtext(2, "Advanced Settings");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 41);
+    i0.ɵɵelement(4, "i", 42);
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6, "Beta features - Use with caution");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 43)(8, "button", 72);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Case_22_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("sql-logging")); });
+    i0.ɵɵelement(9, "i", 45);
+    i0.ɵɵtext(10, " SQL Logging ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 73);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Case_22_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("performance")); });
+    i0.ɵɵelement(12, "i", 47);
+    i0.ɵɵtext(13, " Performance ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "button", 74);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Case_22_Template_button_click_14_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.setAdvancedTab("developer")); });
+    i0.ɵɵelement(15, "i", 49);
+    i0.ɵɵtext(16, " Developer Tools ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 50);
+    i0.ɵɵtemplate(18, SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_18_Template, 2, 0, "div", 75)(19, SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_19_Template, 5, 0, "div", 76)(20, SettingsComponent_Conditional_3_Conditional_2_Case_22_Case_20_Template, 5, 0, "div", 77);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    let tmp_9_0;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(8);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "sql-logging");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "sql-logging");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "performance");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "performance");
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("active", ctx_r1.advancedActiveTab === "developer");
+    i0.ɵɵattribute("aria-selected", ctx_r1.advancedActiveTab === "developer");
+    i0.ɵɵadvance(4);
+    i0.ɵɵconditional((tmp_9_0 = ctx_r1.advancedActiveTab) === "sql-logging" ? 18 : tmp_9_0 === "performance" ? 19 : tmp_9_0 === "developer" ? 20 : -1);
+} }
+function SettingsComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵtemplate(1, SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template, 6, 1, "header", 54)(2, SettingsComponent_Conditional_3_Conditional_2_Conditional_2_Template, 1, 0, "div", 55);
+    i0.ɵɵelementStart(3, "nav", 56)(4, "div", 57)(5, "span", 58);
+    i0.ɵɵtext(6, "Settings");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 59);
+    i0.ɵɵrepeaterCreate(8, SettingsComponent_Conditional_3_Conditional_2_For_9_Template, 5, 8, "button", 60, _forTrack0);
+    i0.ɵɵelementStart(10, "button", 61);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeSettings()); });
+    i0.ɵɵelement(11, "i", 29);
+    i0.ɵɵelementStart(12, "span", 62);
+    i0.ɵɵtext(13, "Close");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(14, "div", 63)(15, "div", 20);
+    i0.ɵɵtemplate(16, SettingsComponent_Conditional_3_Conditional_2_Case_16_Template, 11, 2, "div", 21)(17, SettingsComponent_Conditional_3_Conditional_2_Case_17_Template, 6, 0, "div", 22)(18, SettingsComponent_Conditional_3_Conditional_2_Case_18_Template, 6, 0, "div", 23)(19, SettingsComponent_Conditional_3_Conditional_2_Case_19_Template, 2, 0, "div", 24)(20, SettingsComponent_Conditional_3_Conditional_2_Case_20_Template, 2, 0, "div", 25)(21, SettingsComponent_Conditional_3_Conditional_2_Case_21_Template, 6, 0, "div", 26)(22, SettingsComponent_Conditional_3_Conditional_2_Case_22_Template, 21, 10, "div", 27);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    let tmp_2_0;
+    let tmp_6_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional((tmp_2_0 = ctx_r1.activeTab) === "general" ? 2 : tmp_2_0 === "users" ? 3 : -1);
-    i0.ɵɵadvance(4);
-    i0.ɵɵrepeater(ctx_r1.tabs.slice(0, 5));
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.tabs.length > 5 ? 8 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(!ctx_r1.isMobileNavOpen ? 1 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.isMobileNavOpen ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("open", ctx_r1.isMobileNavOpen);
+    i0.ɵɵadvance(5);
+    i0.ɵɵrepeater(ctx_r1.filteredTabs);
+    i0.ɵɵadvance(8);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.activeTab) === "general" ? 16 : tmp_6_0 === "users" ? 17 : tmp_6_0 === "roles" ? 18 : tmp_6_0 === "applications" ? 19 : tmp_6_0 === "permissions" ? 20 : tmp_6_0 === "notifications" ? 21 : tmp_6_0 === "advanced" ? 22 : -1);
 } }
-function SettingsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵtemplate(1, SettingsComponent_Conditional_12_Conditional_1_Template, 13, 1, "div", 20)(2, SettingsComponent_Conditional_12_Conditional_2_Template, 9, 2, "div", 21);
+function SettingsComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 3);
+    i0.ɵɵtemplate(1, SettingsComponent_Conditional_3_Conditional_1_Template, 18, 4, "div", 10)(2, SettingsComponent_Conditional_3_Conditional_2_Template, 23, 5, "div", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -289,6 +461,7 @@ function SettingsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditional(ctx_r1.isMobile ? 2 : -1);
 } }
 let SettingsComponent = class SettingsComponent extends BaseNavigationComponent {
+    location;
     stateChange = new EventEmitter();
     // State management
     activeTab = 'general';
@@ -296,6 +469,11 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     searchTerm$ = new BehaviorSubject('');
     isLoading = false;
     error = null;
+    // Search state
+    filteredTabs = [];
+    searchResults = [];
+    isSearching = false;
+    showSearchResults = false;
     // Tab configuration
     tabs = [
         {
@@ -328,6 +506,12 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             icon: 'fa-solid fa-lock',
             badgeCount: 0
         },
+        {
+            id: 'notifications',
+            label: 'Notifications',
+            icon: 'fa-solid fa-bell',
+            badgeCount: 0
+        },
         {
             id: 'advanced',
             label: 'Advanced',
@@ -336,17 +520,108 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             badgeColor: 'warning'
         }
     ];
+    // Searchable content registry
+    searchableItems = [
+        // General tab
+        {
+            id: 'profile',
+            tabId: 'general',
+            sectionId: 'profile',
+            label: 'Profile Information',
+            keywords: ['profile', 'avatar', 'picture', 'photo', 'name', 'user', 'image', 'account'],
+            description: 'Manage your profile picture and account information'
+        },
+        {
+            id: 'preferences',
+            tabId: 'general',
+            sectionId: 'preferences',
+            label: 'Preferences',
+            keywords: ['preferences', 'settings', 'display', 'theme', 'appearance', 'layout'],
+            description: 'Customize your experience with display and behavior preferences'
+        },
+        {
+            id: 'notifications',
+            tabId: 'notifications',
+            sectionId: 'notifications',
+            label: 'Notifications',
+            keywords: ['notifications', 'alerts', 'email', 'push', 'messages', 'inbox'],
+            description: 'Configure how and when you receive notifications'
+        },
+        // Users tab
+        {
+            id: 'users',
+            tabId: 'users',
+            label: 'User Management',
+            keywords: ['users', 'accounts', 'members', 'people', 'employees', 'team', 'manage users', 'add user', 'delete user'],
+            description: 'Manage user accounts, roles, and permissions'
+        },
+        // Roles tab
+        {
+            id: 'roles',
+            tabId: 'roles',
+            label: 'Role Management',
+            keywords: ['roles', 'permissions', 'security', 'access', 'groups', 'authorization', 'admin', 'moderator'],
+            description: 'Define and manage security roles'
+        },
+        // Applications tab
+        {
+            id: 'applications',
+            tabId: 'applications',
+            label: 'Applications',
+            keywords: ['applications', 'apps', 'modules', 'entities', 'navigation', 'menu'],
+            description: 'Configure application settings and entity associations'
+        },
+        // Permissions tab
+        {
+            id: 'permissions',
+            tabId: 'permissions',
+            label: 'Entity Permissions',
+            keywords: ['permissions', 'entities', 'access', 'crud', 'security', 'read', 'write', 'delete', 'create'],
+            description: 'Manage entity-level permissions and access control'
+        },
+        // Advanced tab - SQL Logging
+        {
+            id: 'sql-logging',
+            tabId: 'advanced',
+            sectionId: 'sql-logging',
+            label: 'SQL Logging',
+            keywords: ['sql', 'logging', 'database', 'queries', 'debug', 'performance', 'trace', 'monitor'],
+            description: 'Monitor and debug SQL queries'
+        },
+        // Advanced tab - Performance
+        {
+            id: 'performance',
+            tabId: 'advanced',
+            sectionId: 'performance',
+            label: 'Performance',
+            keywords: ['performance', 'speed', 'optimization', 'monitoring', 'metrics', 'cache'],
+            description: 'Performance monitoring and optimization tools'
+        },
+        // Advanced tab - Developer
+        {
+            id: 'developer',
+            tabId: 'advanced',
+            sectionId: 'developer',
+            label: 'Developer Tools',
+            keywords: ['developer', 'tools', 'debug', 'api', 'code', 'testing', 'console'],
+            description: 'Advanced developer options and debugging tools'
+        }
+    ];
     // Section expansion state
     expandedSections = ['profile', 'preferences'];
     // Mobile state
     isMobile = window.innerWidth < 768;
+    isMobileNavOpen = false;
     destroy$ = new Subject();
-    constructor() {
+    constructor(location) {
         // Listen for window resize
         super();
+        this.location = location;
         window.addEventListener('resize', this.handleResize.bind(this));
     }
     ngOnInit() {
+        // Initialize filtered tabs with all tabs
+        this.filteredTabs = [...this.tabs];
         this.setupSearchFilter();
         this.loadInitialData();
     }
@@ -357,7 +632,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     }
     setupSearchFilter() {
         this.searchTerm$
-            .pipe(debounceTime(300), distinctUntilChanged(), takeUntil(this.destroy$))
+            .pipe(debounceTime(200), distinctUntilChanged(), takeUntil(this.destroy$))
             .subscribe(term => {
             this.filterContent(term);
             this.emitStateChange();
@@ -402,12 +677,90 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     setAdvancedTab(tabId) {
         this.advancedActiveTab = tabId;
     }
+    /**
+     * Filters searchable content based on search term
+     * Matches against labels, keywords, and descriptions
+     */
     filterContent(term) {
-        // TODO: Implement content filtering based on search term
-        console.log('Filtering content with term:', term);
+        if (!term || term.trim() === '') {
+            this.showSearchResults = false;
+            this.searchResults = [];
+            this.filteredTabs = [...this.tabs];
+            return;
+        }
+        const searchLower = term.toLowerCase().trim();
+        this.isSearching = true;
+        // Filter searchable items
+        this.searchResults = this.searchableItems.filter(item => {
+            const matchesLabel = item.label.toLowerCase().includes(searchLower);
+            const matchesKeywords = item.keywords.some(kw => kw.toLowerCase().includes(searchLower));
+            const matchesDescription = item.description?.toLowerCase().includes(searchLower) || false;
+            return matchesLabel || matchesKeywords || matchesDescription;
+        });
+        // Get unique tabs that have matching results
+        const matchingTabIds = new Set(this.searchResults.map(r => r.tabId));
+        this.filteredTabs = this.tabs.filter(tab => matchingTabIds.has(tab.id));
+        this.showSearchResults = true;
+        this.isSearching = false;
+    }
+    /**
+     * Navigates to a search result
+     * Switches to the correct tab and expands the relevant section
+     */
+    navigateToSearchResult(result) {
+        this.activeTab = result.tabId;
+        // If it's a section within a tab, expand it
+        if (result.sectionId && !this.expandedSections.includes(result.sectionId)) {
+            this.expandedSections.push(result.sectionId);
+        }
+        // If advanced tab, set the sub-tab
+        if (result.tabId === 'advanced' && result.sectionId) {
+            this.advancedActiveTab = result.sectionId;
+        }
+        // Clear search after navigation
+        this.clearSearch();
+        this.emitStateChange();
+    }
+    /**
+     * Clears the search and resets the view
+     */
+    clearSearch() {
+        this.searchTerm$.next('');
+        this.showSearchResults = false;
+        this.searchResults = [];
+        this.filteredTabs = [...this.tabs];
+    }
+    /**
+     * Toggles the mobile navigation rail open/closed
+     */
+    toggleMobileNav() {
+        this.isMobileNavOpen = !this.isMobileNavOpen;
+    }
+    /**
+     * Closes the mobile navigation rail
+     */
+    closeMobileNav() {
+        this.isMobileNavOpen = false;
+    }
+    /**
+     * Closes the settings page and navigates back
+     */
+    closeSettings() {
+        this.location.back();
+    }
+    /**
+     * Handles tab change on mobile and closes the nav rail
+     */
+    onMobileTabChange(tabId) {
+        this.onTabChange(tabId);
+        this.closeMobileNav();
     }
     handleResize() {
         this.isMobile = window.innerWidth < 768;
+        // Close mobile nav on resize to desktop
+        if (!this.isMobile) {
+            this.isMobileNavOpen = false;
+        }
     }
     emitStateChange() {
         const state = {
@@ -428,6 +781,20 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             this.expandedSections = [...state.expandedSections];
         }
     }
+    /**
+     * Gets the icon for a tab by its ID
+     */
+    getTabIconById(tabId) {
+        const tab = this.tabs.find(t => t.id === tabId);
+        return tab?.icon || 'fa-solid fa-cog';
+    }
+    /**
+     * Gets the label for a tab by its ID
+     */
+    getTabLabelById(tabId) {
+        const tab = this.tabs.find(t => t.id === tabId);
+        return tab?.label || tabId;
+    }
     getTabIcon(tab) {
         return tab.icon;
     }
@@ -441,30 +808,19 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         }
         return classes.join(' ');
     }
-    static ɵfac = function SettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SettingsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 4, consts: [[1, "mj-page-container"], [1, "mj-header"], [1, "mj-header-title"], [1, "fa-solid", "fa-cog"], [1, "mj-header-actions"], [1, "mj-search"], [1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search settings...", 1, "mj-search-input", 3, "input", "value"], [1, "loading-container"], [1, "error-container"], [1, "settings-content"], [1, "loading-content"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "desktop-layout", 2, "display", "flex"], [1, "mobile-layout"], [1, "side-navigation"], [1, "nav-list"], [1, "nav-item", 3, "active"], [1, "content-area"], [1, "tab-content"], [1, "general-settings"], [1, "users-settings"], [1, "roles-settings"], [1, "applications-settings"], [1, "permissions-settings"], [1, "advanced-settings"], [1, "nav-item", 3, "click"], [1, "nav-label"], [1, "nav-badge", 3, "class"], [1, "nav-badge"], [1, "section-title"], [1, "mj-grid", "mj-grid-responsive"], ["title", "Profile Information", "icon", "fa-solid fa-user", 3, "toggle", "expanded"], [1, "card-content"], ["title", "Preferences", "icon", "fa-solid fa-sliders", 3, "toggle", "expanded"], ["title", "Notifications", "icon", "fa-solid fa-bell", 3, "toggle", "expanded"], [1, "section-description"], [1, "beta-warning"], [1, "fa-solid", "fa-flask"], [1, "advanced-tabs"], [1, "tab-btn", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-gauge-high"], [1, "fa-solid", "fa-code"], [1, "advanced-tab-content"], [1, "performance-settings"], [1, "developer-settings"], [1, "mobile-content"], [1, "mobile-navigation"], [1, "nav-tabs"], [1, "nav-tab", 3, "active"], [1, "nav-tab", "more-tab"], [1, "nav-tab", 3, "click"], [1, "tab-badge", 3, "class"], [1, "tab-label"], [1, "tab-badge"], [1, "fa-solid", "fa-ellipsis"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵelement(3, "i", 3);
-            i0.ɵɵelementStart(4, "h1");
-            i0.ɵɵtext(5, "Settings");
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 4)(7, "div", 5);
-            i0.ɵɵelement(8, "i", 6);
-            i0.ɵɵelementStart(9, "input", 7);
-            i0.ɵɵlistener("input", function SettingsComponent_Template_input_input_9_listener($event) { return ctx.onSearchChange($event); });
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(10, SettingsComponent_Conditional_10_Template, 8, 0, "div", 8)(11, SettingsComponent_Conditional_11_Template, 8, 1, "div", 9)(12, SettingsComponent_Conditional_12_Template, 3, 2, "div", 10);
+    static ɵfac = function SettingsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SettingsComponent)(i0.ɵɵdirectiveInject(i1.Location)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 3, consts: [[1, "mj-page-container"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["role", "alert", 1, "error-container"], [1, "settings-content"], ["text", "Loading settings..."], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "retry-button", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "desktop-layout", 2, "display", "flex"], [1, "mobile-layout"], ["role", "navigation", "aria-label", "Settings navigation", 1, "side-navigation"], [1, "nav-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "nav-search-icon"], ["type", "text", "placeholder", "Search settings...", "aria-label", "Search settings", 1, "nav-search-input", 3, "input", "value"], ["aria-label", "Clear search", "tabindex", "0", 1, "nav-search-clear"], ["role", "tablist", "aria-orientation", "vertical", 1, "nav-list"], ["role", "tab", "tabindex", "0", 1, "nav-item", 3, "active"], ["role", "tabpanel", 1, "content-area"], [1, "tab-content"], [1, "general-settings"], [1, "users-settings"], [1, "roles-settings"], [1, "applications-settings"], [1, "permissions-settings"], [1, "notifications-settings"], [1, "advanced-settings"], ["aria-label", "Clear search", "tabindex", "0", 1, "nav-search-clear", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-xmark"], ["role", "tab", "tabindex", "0", 1, "nav-item", 3, "click", "keydown.enter"], ["aria-hidden", "true"], [1, "nav-label"], [1, "nav-badge", 3, "class"], [1, "nav-badge"], [1, "section-title"], [1, "mj-grid", "mj-grid-responsive"], ["title", "Profile Information", "icon", "fa-solid fa-user", 3, "toggle", "expanded"], [1, "card-content"], ["title", "Preferences", "icon", "fa-solid fa-sliders", 3, "toggle", "expanded"], [1, "section-description"], [1, "beta-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-flask"], ["role", "tablist", "aria-label", "Advanced settings tabs", 1, "advanced-tabs"], ["role", "tab", "aria-controls", "panel-sql-logging", 1, "tab-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], ["role", "tab", "aria-controls", "panel-performance", 1, "tab-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-gauge-high"], ["role", "tab", "aria-controls", "panel-developer", 1, "tab-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-code"], [1, "advanced-tab-content"], ["id", "panel-sql-logging", "role", "tabpanel"], ["id", "panel-performance", "role", "tabpanel", 1, "performance-settings"], ["id", "panel-developer", "role", "tabpanel", 1, "developer-settings"], [1, "mobile-header"], ["aria-hidden", "true", 1, "mobile-nav-backdrop"], ["role", "navigation", "aria-label", "Settings navigation", 1, "mobile-nav-rail"], [1, "nav-rail-header"], [1, "nav-rail-title"], ["role", "tablist", 1, "nav-rail-items"], ["role", "tab", 1, "nav-rail-item", 3, "active"], ["aria-label", "Close settings", 1, "nav-rail-item", "nav-rail-close-item", 3, "click"], [1, "nav-rail-label"], [1, "mobile-content"], ["aria-label", "Toggle navigation menu", 1, "mobile-header-icon", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-bars"], [1, "mobile-header-title"], [1, "mobile-header-spacer"], ["aria-hidden", "true", 1, "mobile-nav-backdrop", 3, "click"], ["role", "tab", 1, "nav-rail-item", 3, "click"], [1, "rail-badge", 3, "class"], [1, "rail-badge"], ["role", "tab", "aria-controls", "panel-sql-logging-mobile", 1, "tab-btn", 3, "click"], ["role", "tab", "aria-controls", "panel-performance-mobile", 1, "tab-btn", 3, "click"], ["role", "tab", "aria-controls", "panel-developer-mobile", 1, "tab-btn", 3, "click"], ["id", "panel-sql-logging-mobile", "role", "tabpanel"], ["id", "panel-performance-mobile", "role", "tabpanel", 1, "performance-settings"], ["id", "panel-developer-mobile", "role", "tabpanel", 1, "developer-settings"]], template: function SettingsComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵtemplate(1, SettingsComponent_Conditional_1_Template, 2, 0, "div", 1)(2, SettingsComponent_Conditional_2_Template, 8, 1, "div", 2)(3, SettingsComponent_Conditional_3_Template, 3, 2, "div", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵadvance(9);
-            i0.ɵɵproperty("value", ctx.searchTerm$.value);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 10 : -1);
+            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 11 : -1);
+            i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 2 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 12 : -1);
-        } }, dependencies: [i1.SettingsCardComponent, i2.SqlLoggingComponent, i3.UserManagementComponent, i4.RoleManagementComponent, i5.ApplicationManagementComponent, i6.EntityPermissionsComponent, i7.UserProfileSettingsComponent], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.settings-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f5f7fa;\n  overflow: hidden;\n  position: relative;\n}\n\n.settings-header[_ngcontent-%COMP%] {\n  background-color: #ffffff;\n  border-bottom: 1px solid #e5e7eb;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n  z-index: 10;\n}\n\n.header-content[_ngcontent-%COMP%] {\n  padding: 1.5rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 2rem;\n}\n@media (max-width: 768px) {\n  .header-content[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n  }\n}\n\n.header-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n.header-title[_ngcontent-%COMP%]   .header-icon[_ngcontent-%COMP%] {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title[_ngcontent-%COMP%]   h1[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search[_ngcontent-%COMP%] {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 1rem 0.75rem 2.75rem;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 0.95rem;\n  transition: all 0.2s;\n  background-color: #f9fafb;\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #2196f3;\n  background-color: #ffffff;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n.header-search[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n}\n\n.loading-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-spinner[_ngcontent-%COMP%] {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 1rem;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%] {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner[_ngcontent-%COMP%]   .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n  text-align: center;\n  max-width: 400px;\n}\n.error-content[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0.5rem;\n}\n\n.settings-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%]   .desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n[_nghost-%COMP%]     .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.side-navigation[_ngcontent-%COMP%] {\n  width: 260px;\n  background-color: #ffffff;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  flex-shrink: 0;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: #4b5563;\n  font-size: 0.95rem;\n}\n.nav-item[_ngcontent-%COMP%]:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active[_ngcontent-%COMP%] {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active[_ngcontent-%COMP%]::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-label[_ngcontent-%COMP%] {\n  flex: 1;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge[_ngcontent-%COMP%] {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-danger[_ngcontent-%COMP%] {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-success[_ngcontent-%COMP%] {\n  background-color: #d1fae5;\n  color: #065f46;\n}\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n@media (max-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  min-height: 0;\n}\n\n.section-title[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1f2937;\n  margin: 0 0 0.5rem 0;\n}\n\n.section-description[_ngcontent-%COMP%] {\n  color: #6b7280;\n  margin: 0 0 2rem 0;\n  font-size: 0.95rem;\n}\n\n.settings-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n}\n@media (max-width: 768px) {\n  .settings-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n}\n\n.card-content[_ngcontent-%COMP%] {\n  padding: 1rem;\n  color: #4b5563;\n  font-size: 0.95rem;\n}\n.card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n.beta-warning[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background-color: #fef3c7;\n  color: #92400e;\n  border-radius: 6px;\n  font-size: 0.875rem;\n  margin-bottom: 1.5rem;\n}\n.beta-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n}\n\n.mobile-layout[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.mobile-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  padding-bottom: 80px;\n}\n\n.mobile-navigation[_ngcontent-%COMP%] {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: #ffffff;\n  border-top: 1px solid #e5e7eb;\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n}\n\n.nav-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  padding: 0.5rem 0;\n}\n\n.nav-tab[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  background: none;\n  border: none;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-size: 0.75rem;\n  min-width: 60px;\n}\n.nav-tab.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.nav-tab.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  transform: scale(1.1);\n}\n.nav-tab[_ngcontent-%COMP%]:active {\n  transform: scale(0.95);\n}\n.nav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0.25rem;\n  right: 0.25rem;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  font-size: 0.625rem;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab[_ngcontent-%COMP%]   .tab-label[_ngcontent-%COMP%] {\n  margin-top: 0.125rem;\n}\n\n.more-tab[_ngcontent-%COMP%] {\n  color: #6b7280;\n}\n\n.advanced-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid #e5e7eb;\n  margin-bottom: 2rem;\n  margin-top: 1.5rem;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: #6b7280;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  position: relative;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #2196f3;\n}\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  padding: 0;\n  min-height: 500px;\n  max-height: calc(100vh - 350px);\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n  padding: 2rem;\n}\n.performance-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n.general-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}"] });
+            i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 3 : -1);
+        } }, dependencies: [i2.SettingsCardComponent, i3.LoadingComponent, i4.SqlLoggingComponent, i5.UserManagementComponent, i6.RoleManagementComponent, i7.ApplicationManagementComponent, i8.EntityPermissionsComponent, i9.UserProfileSettingsComponent, i10.NotificationPreferencesComponent], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  --settings-primary: #0076B6;\n  --settings-primary-container: #AAE7FD;\n  --settings-secondary: #F5A623;\n  --settings-secondary-container: #FFECD6;\n  --settings-tertiary: #4CAF50;\n  --settings-tertiary-container: #C8E6C9;\n  --settings-error: #D32F2F;\n  --settings-error-container: #FFCDD2;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  [_nghost-%COMP%] {\n    height: auto;\n    min-height: 100vh;\n    overflow: visible;\n  }\n}\n\n\n\n.mj-page-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n  .mj-page-container[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    overflow-x: hidden;\n    height: auto;\n    min-height: 100vh;\n  }\n}\n\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n\n\n\n\n\n.settings-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mat-sys-surface);\n  overflow-y: auto;\n  position: relative;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content[_ngcontent-%COMP%] {\n  text-align: center;\n}\n\n.loading-text[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content[_ngcontent-%COMP%] {\n  text-align: center;\n  max-width: 400px;\n}\n\n.error-content[_ngcontent-%COMP%]   .error-icon[_ngcontent-%COMP%] {\n  font-size: 3rem;\n  color: var(--mat-sys-error);\n  margin-bottom: 1rem;\n}\n\n.error-content[_ngcontent-%COMP%]   .error-message[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface);\n  margin-bottom: 1.5rem;\n  font: var(--mat-sys-body-large);\n}\n\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font: var(--mat-sys-label-large);\n  font-weight: 500;\n  border: none;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n  background-color: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n}\n\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background-color: var(--mat-sys-primary-hover, var(--mat-sys-primary));\n  transform: translateY(-1px);\n  box-shadow: var(--mat-sys-elevation-2);\n}\n\n.error-content[_ngcontent-%COMP%]   .retry-button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.875rem;\n}\n\n\n\n\n\n\n.settings-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-direction: column;\n  width: 100%;\n  min-height: 0;\n}\n\n@media (max-width: 768px) {\n  .settings-content[_ngcontent-%COMP%] {\n    overflow-y: visible;\n    overflow-x: hidden;\n    height: auto;\n    min-height: 0;\n    flex: none;\n  }\n}\n\n.desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content[_ngcontent-%COMP%]   .desktop-layout[_ngcontent-%COMP%] {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n\n\n\n\n\n.side-navigation[_ngcontent-%COMP%] {\n  width: 280px;\n  background: linear-gradient(180deg, var(--mat-sys-surface) 0%, var(--mat-sys-surface-container-lowest) 100%);\n  border-right: 1px solid var(--mat-sys-outline-variant);\n  overflow-y: auto;\n  flex-shrink: 0;\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n\n\n.nav-search[_ngcontent-%COMP%] {\n  position: relative;\n  padding: 1rem;\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  background-color: var(--mat-sys-surface);\n}\n\n.nav-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 1rem;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.nav-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-body-medium);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--settings-primary);\n  background-color: var(--mat-sys-surface);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.nav-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.nav-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 1.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 0.25rem;\n  background: transparent;\n  border: none;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  border-radius: var(--mat-sys-corner-full);\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 1;\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-search-clear[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--settings-primary);\n  outline-offset: 2px;\n}\n\n.nav-list[_ngcontent-%COMP%] {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  margin: 0.25rem 0.75rem;\n  border-radius: var(--mat-sys-corner-medium);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  border: 2px solid transparent;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n  transform: translateX(4px);\n}\n\n.nav-item[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n\n\n.nav-item[aria-controls=\"panel-general\"][_ngcontent-%COMP%] {\n  --item-color: var(--settings-primary);\n  --item-container: var(--settings-primary-container);\n}\n\n.nav-item[aria-controls=\"panel-users\"][_ngcontent-%COMP%] {\n  --item-color: var(--settings-secondary);\n  --item-container: var(--settings-secondary-container);\n}\n\n.nav-item[aria-controls=\"panel-roles\"][_ngcontent-%COMP%] {\n  --item-color: var(--settings-tertiary);\n  --item-container: var(--settings-tertiary-container);\n}\n\n.nav-item[aria-controls=\"panel-applications\"][_ngcontent-%COMP%] {\n  --item-color: #9C27B0;\n  --item-container: #E1BEE7;\n}\n\n.nav-item[aria-controls=\"panel-permissions\"][_ngcontent-%COMP%] {\n  --item-color: var(--settings-error);\n  --item-container: var(--settings-error-container);\n}\n\n.nav-item[aria-controls=\"panel-advanced\"][_ngcontent-%COMP%] {\n  --item-color: #FF6F00;\n  --item-container: #FFE0B2;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n  background-color: var(--item-container);\n  color: var(--item-color);\n  font-weight: 600;\n  border-color: var(--item-color);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.active) {\n  border-color: var(--item-color);\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-label[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-badge[_ngcontent-%COMP%] {\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-weight: 600;\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-primary-container);\n  color: var(--mat-sys-on-primary-container);\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-danger[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-tertiary-container);\n  color: var(--mat-sys-on-tertiary-container);\n}\n\n.nav-item[_ngcontent-%COMP%]   .nav-badge.badge-success[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-secondary-container);\n  color: var(--mat-sys-on-secondary-container);\n}\n\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: linear-gradient(180deg, var(--mat-sys-surface-container-lowest) 0%, var(--mat-sys-surface) 100%);\n}\n\n@media (max-width: 768px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 1rem;\n  }\n}\n\n.tab-content[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n  .tab-content[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 0;\n    overflow-y: visible;\n    overflow-x: hidden;\n    padding: 0.5rem;\n  }\n}\n\n\n\n\n\n.section-title[_ngcontent-%COMP%] {\n  font: var(--mat-sys-headline-small);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n  margin: 0 0 1rem 0;\n  padding-bottom: 0.75rem;\n  border-bottom: 3px solid var(--mat-sys-outline-variant);\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.section-title[_ngcontent-%COMP%]::before {\n  content: \"\";\n  width: 4px;\n  height: 2rem;\n  background: linear-gradient(180deg, var(--settings-primary) 0%, var(--settings-tertiary) 100%);\n  border-radius: 2px;\n}\n\n.section-description[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface-variant);\n  margin: 0 0 1.5rem 0;\n  font: var(--mat-sys-body-large);\n  padding: 1rem 1.25rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: var(--mat-sys-corner-medium);\n}\n\n\n\n\n\n.settings-grid[_ngcontent-%COMP%], \n.mj-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n}\n\n.mj-grid-responsive[_ngcontent-%COMP%] {\n  \n\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n  .settings-grid[_ngcontent-%COMP%], \n   .mj-grid[_ngcontent-%COMP%], \n   .mj-grid-responsive[_ngcontent-%COMP%] {\n    gap: 1rem;\n    margin-top: 0.5rem;\n  }\n}\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n  margin-bottom: 0.25rem;\n}\n\n.users-settings[_ngcontent-%COMP%]   .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]   .section-description[_ngcontent-%COMP%] {\n  margin-bottom: 0.5rem;\n}\n\n\n\n\n\n.card-content[_ngcontent-%COMP%] {\n  padding: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-medium);\n}\n\n.card-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n\n\n\n\n.beta-warning[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.25rem;\n  background: linear-gradient(135deg, #FFE0B2 0%, var(--settings-secondary-container) 100%);\n  color: #FF6F00;\n  border-radius: var(--mat-sys-corner-medium);\n  font: var(--mat-sys-label-large);\n  font-weight: 600;\n  margin-bottom: 1.5rem;\n  max-width: 100%;\n  box-sizing: border-box;\n  border: 2px solid #FF6F00;\n  box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n  .beta-warning[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n    padding: 0.5rem 0.75rem;\n    margin-bottom: 0.75rem;\n  }\n}\n\n\n\n\n\n\n.mobile-layout[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  width: 100%;\n  max-width: 100vw;\n  overflow: visible;\n  box-sizing: border-box;\n}\n\n\n\n.mobile-header[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0.5rem;\n  background-color: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  z-index: 100;\n  box-sizing: border-box;\n}\n\n.mobile-header-icon[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  min-width: 48px;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface);\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:hover {\n  background-color: var(--mat-sys-surface-container-high);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]:active {\n  transform: scale(0.95);\n}\n\n.mobile-header-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.25rem;\n}\n\n.mobile-header-title[_ngcontent-%COMP%] {\n  flex: 1;\n  text-align: center;\n  font: var(--mat-sys-title-large);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n  margin: 0;\n  padding: 0 0.5rem;\n}\n\n.mobile-header-spacer[_ngcontent-%COMP%] {\n  width: 48px;\n  min-width: 48px;\n}\n\n\n\n.mobile-nav-backdrop[_ngcontent-%COMP%] {\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n\n\n.mobile-nav-rail[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 80vw;\n  background-color: var(--mat-sys-surface);\n  border-right: 1px solid var(--mat-sys-outline-variant);\n  display: flex;\n  flex-direction: column;\n  z-index: 1001;\n  transform: translateX(-100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: var(--mat-sys-elevation-4);\n  overflow: hidden;\n}\n\n.mobile-nav-rail.open[_ngcontent-%COMP%] {\n  transform: translateX(0);\n}\n\n\n\n.nav-rail-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  min-height: 64px;\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  background-color: var(--mat-sys-surface-container);\n  flex-shrink: 0;\n}\n\n.nav-rail-title[_ngcontent-%COMP%] {\n  font: var(--mat-sys-title-large);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n}\n\n\n\n.nav-rail-items[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.25rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex: 1;\n}\n\n\n\n.nav-rail-close-item[_ngcontent-%COMP%] {\n  margin-top: auto;\n  border-top: 1px solid var(--mat-sys-outline-variant);\n  padding-top: 0.75rem !important;\n  margin-top: 0.5rem;\n  background-color: var(--mat-sys-error-container) !important;\n  color: var(--mat-sys-on-error-container) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%]:hover {\n  background-color: var(--mat-sys-error) !important;\n  color: var(--mat-sys-on-error) !important;\n}\n\n.nav-rail-close-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n}\n\n\n\n.nav-rail-item[_ngcontent-%COMP%] {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--mat-sys-corner-medium);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  text-align: left;\n  min-height: 56px;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label[_ngcontent-%COMP%] {\n  font: var(--mat-sys-body-large);\n  font-weight: 500;\n  flex: 1;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:hover:not(.active) {\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-primary-container);\n  color: var(--mat-sys-primary);\n}\n\n.nav-rail-item.active[_ngcontent-%COMP%]   .nav-rail-label[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:active {\n  transform: scale(0.98);\n}\n\n.nav-rail-item[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n\n\n.rail-badge[_ngcontent-%COMP%] {\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.rail-badge.badge-primary[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n}\n\n.rail-badge.badge-danger[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-error);\n  color: var(--mat-sys-on-error);\n}\n\n.rail-badge.badge-warning[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-tertiary);\n  color: var(--mat-sys-on-tertiary);\n}\n\n.rail-badge.badge-success[_ngcontent-%COMP%] {\n  background-color: var(--mat-sys-secondary);\n  color: var(--mat-sys-on-secondary);\n}\n\n\n\n.mobile-content[_ngcontent-%COMP%] {\n  width: 100%;\n  max-width: 100vw;\n  overflow-y: visible;\n  overflow-x: hidden;\n  padding: 72px 0.75rem 2rem 0.75rem;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n\n\n@media (max-width: 374px) {\n  .mobile-nav-rail[_ngcontent-%COMP%] {\n    width: 260px;\n  }\n\n  .mobile-content[_ngcontent-%COMP%] {\n    padding: 64px 0.5rem 1.5rem 0.5rem;\n  }\n\n  .mobile-header[_ngcontent-%COMP%] {\n    height: 52px;\n    padding: 0 0.25rem;\n  }\n\n  .mobile-header-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n  }\n\n  .mobile-header-spacer[_ngcontent-%COMP%] {\n    width: 44px;\n    min-width: 44px;\n  }\n\n  .mobile-header-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n}\n\n\n\n\n\n\n.advanced-tabs[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid var(--mat-sys-outline-variant);\n  margin-bottom: 1rem;\n  margin-top: 1rem;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-label-large);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  min-height: 44px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n\n\n@media (max-width: 768px) {\n  .advanced-tabs[_ngcontent-%COMP%] {\n    gap: 0;\n    margin-bottom: 1rem;\n    margin-top: 1rem;\n    border-bottom: none;\n    border: 1px solid var(--mat-sys-outline);\n    border-radius: var(--mat-sys-corner-full);\n    padding: 0;\n    background-color: var(--mat-sys-surface-container-low);\n    overflow-x: hidden;\n    width: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%] {\n    flex: 1;\n    padding: 0.625rem 0.5rem;\n    font-size: 0.75rem;\n    border-bottom: none;\n    border-radius: 0;\n    border-right: 1px solid var(--mat-sys-outline);\n    min-width: 0;\n    justify-content: center;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:last-child {\n    border-right: none;\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:first-child {\n    border-radius: var(--mat-sys-corner-full) 0 0 var(--mat-sys-corner-full);\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:last-child {\n    border-radius: 0 var(--mat-sys-corner-full) var(--mat-sys-corner-full) 0;\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n    background-color: var(--mat-sys-secondary-container);\n    color: var(--mat-sys-on-secondary-container);\n    border-bottom: none;\n  }\n\n  .advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n  }\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mat-sys-on-surface);\n  background: var(--mat-sys-surface-container);\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: -2px;\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%] {\n  color: var(--mat-sys-primary);\n  border-bottom-color: var(--mat-sys-primary);\n  background: var(--mat-sys-primary-container);\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mat-sys-primary);\n}\n\n.advanced-tabs[_ngcontent-%COMP%]   .tab-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.125rem;\n}\n\n\n\n\n\n\n.advanced-tab-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: visible;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: var(--mat-sys-surface);\n  border-radius: var(--mat-sys-corner-large);\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n  .advanced-tab-content[_ngcontent-%COMP%] {\n    height: auto;\n    min-height: 200px;\n    overflow-y: visible;\n  }\n}\n\n.performance-settings[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%] {\n  padding: 2rem;\n}\n\n.performance-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0 0 1rem 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.performance-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.developer-settings[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n}\n\n\n\n\n\n\n.general-settings[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-out;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow-y: visible;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n  .general-settings[_ngcontent-%COMP%], \n   .users-settings[_ngcontent-%COMP%], \n   .roles-settings[_ngcontent-%COMP%], \n   .applications-settings[_ngcontent-%COMP%], \n   .permissions-settings[_ngcontent-%COMP%], \n   .advanced-settings[_ngcontent-%COMP%] {\n    gap: 0.75rem;\n    height: auto;\n    min-height: auto;\n  }\n\n  .section-title[_ngcontent-%COMP%] {\n    margin-bottom: 0.5rem;\n    font-size: 1.375rem;\n  }\n\n  .section-description[_ngcontent-%COMP%] {\n    margin-bottom: 0.75rem;\n  }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%]    > mj-settings-card[_ngcontent-%COMP%], \n.general-settings[_ngcontent-%COMP%]    > .mj-grid[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > mj-user-management[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > mj-role-management[_ngcontent-%COMP%], \n.applications-settings[_ngcontent-%COMP%]    > mj-application-management[_ngcontent-%COMP%], \n.permissions-settings[_ngcontent-%COMP%]    > mj-entity-permissions[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%]    > .advanced-tabs[_ngcontent-%COMP%], \n.advanced-settings[_ngcontent-%COMP%]    > .advanced-tab-content[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n\n\n@media (max-width: 768px) {\n  .users-settings[_ngcontent-%COMP%]    > mj-user-management[_ngcontent-%COMP%], \n   .roles-settings[_ngcontent-%COMP%]    > mj-role-management[_ngcontent-%COMP%], \n   .applications-settings[_ngcontent-%COMP%]    > mj-application-management[_ngcontent-%COMP%], \n   .permissions-settings[_ngcontent-%COMP%]    > mj-entity-permissions[_ngcontent-%COMP%], \n   .advanced-settings[_ngcontent-%COMP%]    > .advanced-tab-content[_ngcontent-%COMP%] {\n    flex: none;\n    height: auto !important;\n    min-height: 0;\n    max-height: none !important;\n    overflow-y: visible !important;\n    overflow-x: hidden;\n  }\n}\n\n\n\n.general-settings[_ngcontent-%COMP%]    > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > .section-title[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > .section-title[_ngcontent-%COMP%], \n.users-settings[_ngcontent-%COMP%]    > .section-description[_ngcontent-%COMP%], \n.roles-settings[_ngcontent-%COMP%]    > .section-description[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  .general-settings[_ngcontent-%COMP%], \n   .users-settings[_ngcontent-%COMP%], \n   .roles-settings[_ngcontent-%COMP%], \n   .applications-settings[_ngcontent-%COMP%], \n   .permissions-settings[_ngcontent-%COMP%], \n   .advanced-settings[_ngcontent-%COMP%] {\n    animation: none;\n  }\n\n  .nav-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n   .nav-item[_ngcontent-%COMP%], \n   .tab-btn[_ngcontent-%COMP%], \n   .search-input[_ngcontent-%COMP%], \n   .retry-button[_ngcontent-%COMP%], \n   .search-result-item[_ngcontent-%COMP%] {\n    transition: none;\n  }\n}\n\n\n\n\n\n@media (max-width: 640px) {\n  .side-navigation[_ngcontent-%COMP%] {\n    width: 200px;\n  }\n\n  .nav-item[_ngcontent-%COMP%] {\n    padding: 0.75rem 1rem;\n  }\n}\n\n@media (max-width: 1024px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 1.5rem;\n  }\n}\n\n\n\n@media (max-width: 768px) {\n  .mobile-layout[_ngcontent-%COMP%]   mj-user-management[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-role-management[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-application-management[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-entity-permissions[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-sql-logging[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-settings-card[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   mj-user-profile-settings[_ngcontent-%COMP%] {\n    display: block;\n    height: auto !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  \n\n  .mobile-layout[_ngcontent-%COMP%]   .general-settings[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .users-settings[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .roles-settings[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .applications-settings[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .permissions-settings[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .advanced-settings[_ngcontent-%COMP%] {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n  }\n\n  \n\n  .mobile-layout[_ngcontent-%COMP%]   .mj-grid[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .mj-grid-responsive[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]   .card-content[_ngcontent-%COMP%] {\n    height: auto !important;\n    min-height: 0 !important;\n  }\n}\n\n@media (min-width: 1440px) {\n  .content-area[_ngcontent-%COMP%] {\n    padding: 2.5rem 3rem;\n  }\n\n  .side-navigation[_ngcontent-%COMP%] {\n    width: 280px;\n  }\n}\n\n\n\n\n\n@media (max-width: 768px) {\n  \n\n  body[_ngcontent-%COMP%] {\n    position: relative;\n    overflow-y: visible;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  \n\n  .mobile-layout[_ngcontent-%COMP%], \n   .mobile-layout[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n   .mobile-content[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%], \n   .tab-content[_ngcontent-%COMP%]    > *[_ngcontent-%COMP%] {\n    -webkit-overflow-scrolling: touch;\n  }\n\n  \n\n  .mobile-layout[_ngcontent-%COMP%]   *[_ngcontent-%COMP%] {\n    box-sizing: border-box;\n  }\n}"] });
 };
 SettingsComponent = __decorate([
     RegisterClass(BaseNavigationComponent, 'Settings')
@@ -472,9 +828,9 @@ SettingsComponent = __decorate([
 export { SettingsComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SettingsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-settings', template: "<div class=\"mj-page-container\">\n  <!-- Header Section -->\n  <div class=\"mj-header\">\n    <div class=\"mj-header-title\">\n      <i class=\"fa-solid fa-cog\"></i>\n      <h1>Settings</h1>\n    </div>\n    \n    <div class=\"mj-header-actions\">\n      <div class=\"mj-search\">\n        <i class=\"fa-solid fa-search mj-search-icon\"></i>\n        <input \n          type=\"text\" \n          class=\"mj-search-input\" \n          placeholder=\"Search settings...\"\n          (input)=\"onSearchChange($event)\"\n          [value]=\"searchTerm$.value\"\n        />\n      </div>\n    </div>\n  </div>\n\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n          <div class=\"spinner-ring\"></div>\n        </div>\n        <div class=\"loading-text\">Loading settings...</div>\n      </div>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Content -->\n  @if (!isLoading && !error) {\n    <div class=\"settings-content\">\n      <!-- Desktop Layout -->\n      @if (!isMobile) {\n        <div class=\"desktop-layout\" style=\"display: flex;\">\n          <!-- Side Navigation -->\n          <nav class=\"side-navigation\">\n            <ul class=\"nav-list\">\n              @for (tab of tabs; track tab.id) {\n                <li \n                  class=\"nav-item\"\n                  [class.active]=\"activeTab === tab.id\"\n                  (click)=\"onTabChange(tab.id)\"\n                >\n                  <i [class]=\"tab.icon\"></i>\n                  <span class=\"nav-label\">{{ tab.label }}</span>\n                  @if (tab.badgeCount && tab.badgeCount > 0) {\n                    <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n                      {{ tab.badgeCount }}\n                    </span>\n                  }\n                </li>\n              }\n            </ul>\n          </nav>\n\n          <!-- Content Area -->\n          <div class=\"content-area\">\n            <div class=\"tab-content\">\n              @switch (activeTab) {\n                @case ('general') {\n                  <div class=\"general-settings\">\n                    <h2 class=\"section-title\">General Settings</h2>\n                    <div class=\"mj-grid mj-grid-responsive\">\n                      <mj-settings-card\n                        title=\"Profile Information\"\n                        icon=\"fa-solid fa-user\"\n                        [expanded]=\"isSectionExpanded('profile')\"\n                        (toggle)=\"toggleSection('profile')\"\n                      >\n                        <div class=\"card-content\">\n                          <mj-user-profile-settings></mj-user-profile-settings>\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card \n                        title=\"Preferences\"\n                        icon=\"fa-solid fa-sliders\"\n                        [expanded]=\"isSectionExpanded('preferences')\"\n                        (toggle)=\"toggleSection('preferences')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Customize your experience with display and behavior preferences.</p>\n                          <!-- Preferences content will go here -->\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card \n                        title=\"Notifications\"\n                        icon=\"fa-solid fa-bell\"\n                        [expanded]=\"isSectionExpanded('notifications')\"\n                        (toggle)=\"toggleSection('notifications')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Configure how and when you receive notifications.</p>\n                          <!-- Notification settings will go here -->\n                        </div>\n                      </mj-settings-card>\n                    </div>\n                  </div>\n                }\n                \n                @case ('users') {\n                  <div class=\"users-settings\">\n                    <h2 class=\"section-title\">User Management</h2>\n                    <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                    <mj-user-management></mj-user-management>\n                  </div>\n                }\n                \n                @case ('roles') {\n                  <div class=\"roles-settings\">\n                    <h2 class=\"section-title\">Role Management</h2>\n                    <p class=\"section-description\">Define and manage security roles.</p>\n                    <mj-role-management></mj-role-management>\n                  </div>\n                }\n                \n                @case ('applications') {\n                  <div class=\"applications-settings\">\n                    <mj-application-management></mj-application-management>\n                  </div>\n                }\n                \n                @case ('permissions') {\n                  <div class=\"permissions-settings\">\n                    <mj-entity-permissions></mj-entity-permissions>\n                  </div>\n                }\n                \n                @case ('advanced') {\n                  <div class=\"advanced-settings\">\n                    <h2 class=\"section-title\">Advanced Settings</h2>\n                    <div class=\"beta-warning\">\n                      <i class=\"fa-solid fa-flask\"></i>\n                      <span>Beta features - Use with caution</span>\n                    </div>\n                    \n                    <!-- Tab Navigation -->\n                    <div class=\"advanced-tabs\">\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'sql-logging'\"\n                        (click)=\"setAdvancedTab('sql-logging')\"\n                      >\n                        <i class=\"fa-solid fa-database\"></i>\n                        SQL Logging\n                      </button>\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'performance'\"\n                        (click)=\"setAdvancedTab('performance')\"\n                      >\n                        <i class=\"fa-solid fa-gauge-high\"></i>\n                        Performance\n                      </button>\n                      <button \n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'developer'\"\n                        (click)=\"setAdvancedTab('developer')\"\n                      >\n                        <i class=\"fa-solid fa-code\"></i>\n                        Developer Tools\n                      </button>\n                    </div>\n                    \n                    <!-- Tab Content -->\n                    <div class=\"advanced-tab-content\">\n                      @switch (advancedActiveTab) {\n                        @case ('sql-logging') {\n                          <mj-sql-logging></mj-sql-logging>\n                        }\n                        @case ('performance') {\n                          <div class=\"performance-settings\">\n                            <h3>Performance Settings</h3>\n                            <p>Performance monitoring and optimization tools coming soon.</p>\n                          </div>\n                        }\n                        @case ('developer') {\n                          <div class=\"developer-settings\">\n                            <h3>Developer Tools</h3>\n                            <p>Advanced developer options coming soon.</p>\n                          </div>\n                        }\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Mobile Layout -->\n      @if (isMobile) {\n        <div class=\"mobile-layout\">\n          <!-- Mobile Content -->\n          <div class=\"mobile-content\">\n            @switch (activeTab) {\n              @case ('general') {\n                <div class=\"general-settings\">\n                  <h2 class=\"section-title\">General Settings</h2>\n                  <!-- Same content as desktop but responsive -->\n                </div>\n              }\n              @case ('users') {\n                <div class=\"users-settings\">\n                  <h2 class=\"section-title\">User Management</h2>\n                  <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                  <mj-user-management></mj-user-management>\n                </div>\n              }\n              <!-- Other cases similar to desktop -->\n            }\n          </div>\n\n          <!-- Mobile Bottom Navigation -->\n          <nav class=\"mobile-navigation\">\n            <div class=\"nav-tabs\">\n              @for (tab of tabs.slice(0, 5); track tab.id) {\n                <button \n                  class=\"nav-tab\"\n                  [class.active]=\"activeTab === tab.id\"\n                  (click)=\"onTabChange(tab.id)\"\n                >\n                  <i [class]=\"tab.icon\"></i>\n                  @if (tab.badgeCount && tab.badgeCount > 0) {\n                    <span class=\"tab-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n                      {{ tab.badgeCount }}\n                    </span>\n                  }\n                  <span class=\"tab-label\">{{ tab.label }}</span>\n                </button>\n              }\n              @if (tabs.length > 5) {\n                <button class=\"nav-tab more-tab\">\n                  <i class=\"fa-solid fa-ellipsis\"></i>\n                  <span class=\"tab-label\">More</span>\n                </button>\n              }\n            </div>\n          </nav>\n        </div>\n      }\n    </div>\n  }\n</div>", styles: ["@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.settings-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: #f5f7fa;\n  overflow: hidden;\n  position: relative;\n}\n\n.settings-header {\n  background-color: #ffffff;\n  border-bottom: 1px solid #e5e7eb;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n  z-index: 10;\n}\n\n.header-content {\n  padding: 1.5rem 2rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: 2rem;\n}\n@media (max-width: 768px) {\n  .header-content {\n    padding: 1rem;\n    flex-direction: column;\n    gap: 1rem;\n  }\n}\n\n.header-title {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n.header-title .header-icon {\n  font-size: 1.75rem;\n  color: #2196f3;\n}\n.header-title h1 {\n  margin: 0;\n  font-size: 1.75rem;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.header-search {\n  position: relative;\n  width: 100%;\n  max-width: 400px;\n}\n.header-search .search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: #6b7280;\n  font-size: 1rem;\n}\n.header-search .search-input {\n  width: 100%;\n  padding: 0.75rem 1rem 0.75rem 2.75rem;\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  font-size: 0.95rem;\n  transition: all 0.2s;\n  background-color: #f9fafb;\n}\n.header-search .search-input:focus {\n  outline: none;\n  border-color: #2196f3;\n  background-color: #ffffff;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n.header-search .search-input::placeholder {\n  color: #9ca3af;\n}\n\n.loading-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-spinner {\n  position: relative;\n  width: 60px;\n  height: 60px;\n  margin: 0 auto 1rem;\n}\n.loading-spinner .spinner-ring {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  border: 3px solid transparent;\n  border-radius: 50%;\n  animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner .spinner-ring:nth-child(1) {\n  border-color: #2196f3 transparent transparent transparent;\n  animation-delay: -0.45s;\n}\n.loading-spinner .spinner-ring:nth-child(2) {\n  border-color: transparent #4caf50 transparent transparent;\n  animation-delay: -0.3s;\n}\n.loading-spinner .spinner-ring:nth-child(3) {\n  border-color: transparent transparent #ff9800 transparent;\n  animation-delay: -0.15s;\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.loading-text {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n.error-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content {\n  text-align: center;\n  max-width: 400px;\n}\n.error-content .error-icon {\n  font-size: 3rem;\n  color: #f44336;\n  margin-bottom: 1rem;\n}\n.error-content .error-message {\n  color: #374151;\n  margin-bottom: 1.5rem;\n  font-size: 1rem;\n}\n.error-content .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.375rem;\n  padding: 0.625rem 1.25rem;\n  font-size: 0.95rem;\n  font-weight: 500;\n  border: none;\n  border-radius: 8px;\n  cursor: pointer;\n  transition: all 0.2s;\n  white-space: nowrap;\n  background-color: #2196f3;\n  color: white;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.95rem;\n  border-radius: 8px;\n  transition: all 0.2s;\n}\n.error-content .retry-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.error-content .retry-button i {\n  font-size: 0.875rem;\n}\n.error-content .retry-button:hover {\n  background-color: #1976d2;\n  transform: translateY(-1px);\n  box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n.error-content .retry-button i {\n  margin-right: 0.5rem;\n}\n\n.settings-content {\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n  flex-direction: column;\n  width: 100%;\n}\n\n.desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n:host ::ng-deep .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.side-navigation {\n  width: 260px;\n  background-color: #ffffff;\n  border-right: 1px solid #e5e7eb;\n  overflow-y: auto;\n  flex-shrink: 0;\n}\n\n.nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 0.875rem 1.5rem;\n  cursor: pointer;\n  transition: all 0.2s;\n  color: #4b5563;\n  font-size: 0.95rem;\n}\n.nav-item:hover {\n  background-color: #f3f4f6;\n  color: #1f2937;\n}\n.nav-item.active {\n  background-color: #eff6ff;\n  color: #2196f3;\n  font-weight: 500;\n}\n.nav-item.active::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background-color: #2196f3;\n}\n.nav-item i {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n.nav-item .nav-label {\n  flex: 1;\n}\n.nav-item .nav-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: 12px;\n  font-size: 0.75rem;\n  font-weight: 600;\n}\n.nav-item .nav-badge.badge-primary {\n  background-color: #dbeafe;\n  color: #1e40af;\n}\n.nav-item .nav-badge.badge-danger {\n  background-color: #fee2e2;\n  color: #991b1b;\n}\n.nav-item .nav-badge.badge-warning {\n  background-color: #fef3c7;\n  color: #92400e;\n}\n.nav-item .nav-badge.badge-success {\n  background-color: #d1fae5;\n  color: #065f46;\n}\n\n.content-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 2rem;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n@media (max-width: 768px) {\n  .content-area {\n    padding: 1rem;\n  }\n}\n\n.tab-content {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  min-height: 0;\n}\n\n.section-title {\n  font-size: 1.5rem;\n  font-weight: 600;\n  color: #1f2937;\n  margin: 0 0 0.5rem 0;\n}\n\n.section-description {\n  color: #6b7280;\n  margin: 0 0 2rem 0;\n  font-size: 0.95rem;\n}\n\n.settings-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n}\n@media (max-width: 768px) {\n  .settings-grid {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n}\n\n.card-content {\n  padding: 1rem;\n  color: #4b5563;\n  font-size: 0.95rem;\n}\n.card-content p {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n.beta-warning {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.5rem 1rem;\n  background-color: #fef3c7;\n  color: #92400e;\n  border-radius: 6px;\n  font-size: 0.875rem;\n  margin-bottom: 1.5rem;\n}\n.beta-warning i {\n  font-size: 1rem;\n}\n\n.mobile-layout {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\n.mobile-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 1rem;\n  padding-bottom: 80px;\n}\n\n.mobile-navigation {\n  position: fixed;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  background-color: #ffffff;\n  border-top: 1px solid #e5e7eb;\n  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);\n  z-index: 100;\n}\n\n.nav-tabs {\n  display: flex;\n  justify-content: space-around;\n  align-items: center;\n  padding: 0.5rem 0;\n}\n\n.nav-tab {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 0.25rem;\n  padding: 0.5rem;\n  background: none;\n  border: none;\n  color: #9ca3af;\n  cursor: pointer;\n  transition: all 0.2s;\n  font-size: 0.75rem;\n  min-width: 60px;\n}\n.nav-tab.active {\n  color: #2196f3;\n}\n.nav-tab.active i {\n  transform: scale(1.1);\n}\n.nav-tab:active {\n  transform: scale(0.95);\n}\n.nav-tab i {\n  font-size: 1.25rem;\n  transition: transform 0.2s;\n}\n.nav-tab .tab-badge {\n  position: absolute;\n  top: 0.25rem;\n  right: 0.25rem;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  font-size: 0.625rem;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.nav-tab .tab-badge.badge-primary {\n  background-color: #2196f3;\n  color: white;\n}\n.nav-tab .tab-badge.badge-warning {\n  background-color: #ff9800;\n  color: white;\n}\n.nav-tab .tab-label {\n  margin-top: 0.125rem;\n}\n\n.more-tab {\n  color: #6b7280;\n}\n\n.advanced-tabs {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid #e5e7eb;\n  margin-bottom: 2rem;\n  margin-top: 1.5rem;\n}\n.advanced-tabs .tab-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  background: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: #6b7280;\n  font-size: 0.95rem;\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s;\n  position: relative;\n}\n.advanced-tabs .tab-btn:hover {\n  color: #374151;\n  background: #f9fafb;\n}\n.advanced-tabs .tab-btn.active {\n  color: #2196f3;\n  border-bottom-color: #2196f3;\n  background: #eff6ff;\n}\n.advanced-tabs .tab-btn.active i {\n  color: #2196f3;\n}\n.advanced-tabs .tab-btn i {\n  font-size: 1.125rem;\n}\n\n.advanced-tab-content {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: white;\n  border-radius: 12px;\n  padding: 0;\n  min-height: 500px;\n  max-height: calc(100vh - 350px);\n}\n\n.performance-settings,\n.developer-settings {\n  padding: 2rem;\n}\n.performance-settings h3,\n.developer-settings h3 {\n  margin: 0 0 1rem 0;\n  color: #1f2937;\n  font-size: 1.25rem;\n}\n.performance-settings p,\n.developer-settings p {\n  color: #6b7280;\n  font-size: 0.95rem;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n  animation: fadeIn 0.3s ease-out;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  overflow: hidden;\n}\n.general-settings > *,\n.users-settings > *,\n.roles-settings > *,\n.applications-settings > *,\n.permissions-settings > *,\n.advanced-settings > * {\n  flex: 1;\n  min-height: 0;\n  overflow-y: auto;\n}\n"] }]
-    }], () => [], { stateChange: [{
+        args: [{ selector: 'mj-settings', template: "<div class=\"mj-page-container\">\n  <!-- Loading State -->\n  @if (isLoading) {\n    <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n      <mj-loading text=\"Loading settings...\"></mj-loading>\n    </div>\n  }\n\n  <!-- Error State -->\n  @if (error && !isLoading) {\n    <div class=\"error-container\" role=\"alert\">\n      <div class=\"error-content\">\n        <i class=\"fa-solid fa-exclamation-triangle error-icon\" aria-hidden=\"true\"></i>\n        <p class=\"error-message\">{{ error }}</p>\n        <button class=\"retry-button\" (click)=\"loadInitialData()\">\n          <i class=\"fa-solid fa-refresh\" aria-hidden=\"true\"></i>\n          Try Again\n        </button>\n      </div>\n    </div>\n  }\n\n  <!-- Main Content -->\n  @if (!isLoading && !error) {\n    <div class=\"settings-content\">\n      <!-- Desktop Layout -->\n      @if (!isMobile) {\n        <div class=\"desktop-layout\" style=\"display: flex;\">\n          <!-- Side Navigation -->\n          <nav class=\"side-navigation\" role=\"navigation\" aria-label=\"Settings navigation\">\n            <!-- Search Bar -->\n            <div class=\"nav-search\">\n              <i class=\"fa-solid fa-search nav-search-icon\" aria-hidden=\"true\"></i>\n              <input\n                type=\"text\"\n                class=\"nav-search-input\"\n                placeholder=\"Search settings...\"\n                (input)=\"onSearchChange($event)\"\n                [value]=\"searchTerm$.value\"\n                aria-label=\"Search settings\"\n              />\n              @if (searchTerm$.value) {\n                <button\n                  class=\"nav-search-clear\"\n                  (click)=\"clearSearch()\"\n                  aria-label=\"Clear search\"\n                  tabindex=\"0\"\n                >\n                  <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                </button>\n              }\n            </div>\n\n            <ul class=\"nav-list\" role=\"tablist\" aria-orientation=\"vertical\">\n              @for (tab of filteredTabs; track tab.id) {\n                <li\n                  class=\"nav-item\"\n                  [class.active]=\"activeTab === tab.id\"\n                  (click)=\"onTabChange(tab.id)\"\n                  (keydown.enter)=\"onTabChange(tab.id)\"\n                  role=\"tab\"\n                  [attr.aria-selected]=\"activeTab === tab.id\"\n                  [attr.aria-controls]=\"'panel-' + tab.id\"\n                  tabindex=\"0\"\n                >\n                  <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"nav-label\">{{ tab.label }}</span>\n                  @if (tab.badgeCount && tab.badgeCount > 0) {\n                    <span class=\"nav-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n                      {{ tab.badgeCount }}\n                    </span>\n                  }\n                </li>\n              }\n            </ul>\n          </nav>\n\n          <!-- Content Area -->\n          <div class=\"content-area\" role=\"tabpanel\" [attr.id]=\"'panel-' + activeTab\">\n            <div class=\"tab-content\">\n              @switch (activeTab) {\n                @case ('general') {\n                  <div class=\"general-settings\">\n                    <h2 class=\"section-title\">General Settings</h2>\n                    <div class=\"mj-grid mj-grid-responsive\">\n                      <mj-settings-card\n                        title=\"Profile Information\"\n                        icon=\"fa-solid fa-user\"\n                        [expanded]=\"isSectionExpanded('profile')\"\n                        (toggle)=\"toggleSection('profile')\"\n                      >\n                        <div class=\"card-content\">\n                          <mj-user-profile-settings></mj-user-profile-settings>\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card\n                        title=\"Preferences\"\n                        icon=\"fa-solid fa-sliders\"\n                        [expanded]=\"isSectionExpanded('preferences')\"\n                        (toggle)=\"toggleSection('preferences')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Customize your experience with display and behavior preferences.</p>\n                          <!-- Preferences content will go here -->\n                        </div>\n                      </mj-settings-card>\n                    </div>\n                  </div>\n                }\n\n                @case ('users') {\n                  <div class=\"users-settings\">\n                    <h2 class=\"section-title\">User Management</h2>\n                    <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                    <mj-user-management></mj-user-management>\n                  </div>\n                }\n\n                @case ('roles') {\n                  <div class=\"roles-settings\">\n                    <h2 class=\"section-title\">Role Management</h2>\n                    <p class=\"section-description\">Define and manage security roles.</p>\n                    <mj-role-management></mj-role-management>\n                  </div>\n                }\n\n                @case ('applications') {\n                  <div class=\"applications-settings\">\n                    <mj-application-management></mj-application-management>\n                  </div>\n                }\n\n                @case ('permissions') {\n                  <div class=\"permissions-settings\">\n                    <mj-entity-permissions></mj-entity-permissions>\n                  </div>\n                }\n\n                @case ('notifications') {\n                  <div class=\"notifications-settings\">\n                    <h2 class=\"section-title\">Notifications</h2>\n                    <p class=\"section-description\">Configure how and when you receive notifications</p>\n                    <mj-notification-preferences></mj-notification-preferences>\n                  </div>\n                }\n\n                @case ('advanced') {\n                  <div class=\"advanced-settings\">\n                    <h2 class=\"section-title\">Advanced Settings</h2>\n                    <div class=\"beta-warning\">\n                      <i class=\"fa-solid fa-flask\" aria-hidden=\"true\"></i>\n                      <span>Beta features - Use with caution</span>\n                    </div>\n\n                    <!-- Tab Navigation -->\n                    <div class=\"advanced-tabs\" role=\"tablist\" aria-label=\"Advanced settings tabs\">\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'sql-logging'\"\n                        (click)=\"setAdvancedTab('sql-logging')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'sql-logging'\"\n                        aria-controls=\"panel-sql-logging\"\n                      >\n                        <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                        SQL Logging\n                      </button>\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'performance'\"\n                        (click)=\"setAdvancedTab('performance')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'performance'\"\n                        aria-controls=\"panel-performance\"\n                      >\n                        <i class=\"fa-solid fa-gauge-high\" aria-hidden=\"true\"></i>\n                        Performance\n                      </button>\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'developer'\"\n                        (click)=\"setAdvancedTab('developer')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'developer'\"\n                        aria-controls=\"panel-developer\"\n                      >\n                        <i class=\"fa-solid fa-code\" aria-hidden=\"true\"></i>\n                        Developer Tools\n                      </button>\n                    </div>\n\n                    <!-- Tab Content -->\n                    <div class=\"advanced-tab-content\">\n                      @switch (advancedActiveTab) {\n                        @case ('sql-logging') {\n                          <div id=\"panel-sql-logging\" role=\"tabpanel\">\n                            <mj-sql-logging></mj-sql-logging>\n                          </div>\n                        }\n                        @case ('performance') {\n                          <div id=\"panel-performance\" role=\"tabpanel\" class=\"performance-settings\">\n                            <h3>Performance Settings</h3>\n                            <p>Performance monitoring and optimization tools coming soon.</p>\n                          </div>\n                        }\n                        @case ('developer') {\n                          <div id=\"panel-developer\" role=\"tabpanel\" class=\"developer-settings\">\n                            <h3>Developer Tools</h3>\n                            <p>Advanced developer options coming soon.</p>\n                          </div>\n                        }\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Mobile Layout -->\n      @if (isMobile) {\n        <div class=\"mobile-layout\">\n          <!-- Mobile Header (Hidden when nav is open) -->\n          @if (!isMobileNavOpen) {\n            <header class=\"mobile-header\">\n              <button\n                class=\"mobile-header-icon\"\n                (click)=\"toggleMobileNav()\"\n                aria-label=\"Toggle navigation menu\"\n                [attr.aria-expanded]=\"isMobileNavOpen\"\n              >\n                <i class=\"fa-solid fa-bars\" aria-hidden=\"true\"></i>\n              </button>\n              <h1 class=\"mobile-header-title\">Settings</h1>\n              <div class=\"mobile-header-spacer\"></div>\n            </header>\n          }\n\n          <!-- Backdrop Overlay -->\n          @if (isMobileNavOpen) {\n            <div\n              class=\"mobile-nav-backdrop\"\n              (click)=\"closeMobileNav()\"\n              aria-hidden=\"true\"\n            ></div>\n          }\n\n          <!-- Mobile Navigation Rail (Collapsible) -->\n          <nav\n            class=\"mobile-nav-rail\"\n            [class.open]=\"isMobileNavOpen\"\n            role=\"navigation\"\n            aria-label=\"Settings navigation\"\n          >\n            <!-- Navigation Header -->\n            <div class=\"nav-rail-header\">\n              <span class=\"nav-rail-title\">Settings</span>\n            </div>\n\n            <!-- Navigation Items -->\n            <div class=\"nav-rail-items\" role=\"tablist\">\n              @for (tab of filteredTabs; track tab.id) {\n                <button\n                  class=\"nav-rail-item\"\n                  [class.active]=\"activeTab === tab.id\"\n                  (click)=\"onMobileTabChange(tab.id)\"\n                  role=\"tab\"\n                  [attr.aria-selected]=\"activeTab === tab.id\"\n                  [attr.aria-label]=\"tab.label\"\n                >\n                  <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"nav-rail-label\">{{ tab.label }}</span>\n                  @if (tab.badgeCount && tab.badgeCount > 0) {\n                    <span class=\"rail-badge\" [class]=\"'badge-' + (tab.badgeColor || 'primary')\">\n                      {{ tab.badgeCount }}\n                    </span>\n                  }\n                </button>\n              }\n\n              <!-- Close Navigation Item -->\n              <button\n                class=\"nav-rail-item nav-rail-close-item\"\n                (click)=\"closeSettings()\"\n                aria-label=\"Close settings\"\n              >\n                <i class=\"fa-solid fa-xmark\" aria-hidden=\"true\"></i>\n                <span class=\"nav-rail-label\">Close</span>\n              </button>\n            </div>\n          </nav>\n\n          <!-- Mobile Content Area -->\n          <div class=\"mobile-content\">\n            <div class=\"tab-content\">\n              @switch (activeTab) {\n                @case ('general') {\n                  <div class=\"general-settings\">\n                    <h2 class=\"section-title\">General Settings</h2>\n                    <div class=\"mj-grid mj-grid-responsive\">\n                      <mj-settings-card\n                        title=\"Profile Information\"\n                        icon=\"fa-solid fa-user\"\n                        [expanded]=\"isSectionExpanded('profile')\"\n                        (toggle)=\"toggleSection('profile')\"\n                      >\n                        <div class=\"card-content\">\n                          <mj-user-profile-settings></mj-user-profile-settings>\n                        </div>\n                      </mj-settings-card>\n\n                      <mj-settings-card\n                        title=\"Preferences\"\n                        icon=\"fa-solid fa-sliders\"\n                        [expanded]=\"isSectionExpanded('preferences')\"\n                        (toggle)=\"toggleSection('preferences')\"\n                      >\n                        <div class=\"card-content\">\n                          <p>Customize your experience with display and behavior preferences.</p>\n                        </div>\n                      </mj-settings-card>\n                    </div>\n                  </div>\n                }\n                @case ('users') {\n                  <div class=\"users-settings\">\n                    <h2 class=\"section-title\">User Management</h2>\n                    <p class=\"section-description\">Manage user accounts, roles, and permissions</p>\n                    <mj-user-management></mj-user-management>\n                  </div>\n                }\n                @case ('roles') {\n                  <div class=\"roles-settings\">\n                    <h2 class=\"section-title\">Role Management</h2>\n                    <p class=\"section-description\">Define and manage security roles.</p>\n                    <mj-role-management></mj-role-management>\n                  </div>\n                }\n                @case ('applications') {\n                  <div class=\"applications-settings\">\n                    <mj-application-management></mj-application-management>\n                  </div>\n                }\n                @case ('permissions') {\n                  <div class=\"permissions-settings\">\n                    <mj-entity-permissions></mj-entity-permissions>\n                  </div>\n                }\n                @case ('notifications') {\n                  <div class=\"notifications-settings\">\n                    <h2 class=\"section-title\">Notifications</h2>\n                    <p class=\"section-description\">Configure how and when you receive notifications</p>\n                    <mj-notification-preferences></mj-notification-preferences>\n                  </div>\n                }\n                @case ('advanced') {\n                  <div class=\"advanced-settings\">\n                    <h2 class=\"section-title\">Advanced Settings</h2>\n                    <div class=\"beta-warning\">\n                      <i class=\"fa-solid fa-flask\" aria-hidden=\"true\"></i>\n                      <span>Beta features - Use with caution</span>\n                    </div>\n\n                    <!-- Tab Navigation (Mobile) -->\n                    <div class=\"advanced-tabs\" role=\"tablist\" aria-label=\"Advanced settings tabs\">\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'sql-logging'\"\n                        (click)=\"setAdvancedTab('sql-logging')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'sql-logging'\"\n                        aria-controls=\"panel-sql-logging-mobile\"\n                      >\n                        <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                        SQL Logging\n                      </button>\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'performance'\"\n                        (click)=\"setAdvancedTab('performance')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'performance'\"\n                        aria-controls=\"panel-performance-mobile\"\n                      >\n                        <i class=\"fa-solid fa-gauge-high\" aria-hidden=\"true\"></i>\n                        Performance\n                      </button>\n                      <button\n                        class=\"tab-btn\"\n                        [class.active]=\"advancedActiveTab === 'developer'\"\n                        (click)=\"setAdvancedTab('developer')\"\n                        role=\"tab\"\n                        [attr.aria-selected]=\"advancedActiveTab === 'developer'\"\n                        aria-controls=\"panel-developer-mobile\"\n                      >\n                        <i class=\"fa-solid fa-code\" aria-hidden=\"true\"></i>\n                        Developer Tools\n                      </button>\n                    </div>\n\n                    <!-- Tab Content (Mobile) -->\n                    <div class=\"advanced-tab-content\">\n                      @switch (advancedActiveTab) {\n                        @case ('sql-logging') {\n                          <div id=\"panel-sql-logging-mobile\" role=\"tabpanel\">\n                            <mj-sql-logging></mj-sql-logging>\n                          </div>\n                        }\n                        @case ('performance') {\n                          <div id=\"panel-performance-mobile\" role=\"tabpanel\" class=\"performance-settings\">\n                            <h3>Performance Settings</h3>\n                            <p>Performance monitoring and optimization tools coming soon.</p>\n                          </div>\n                        }\n                        @case ('developer') {\n                          <div id=\"panel-developer-mobile\" role=\"tabpanel\" class=\"developer-settings\">\n                            <h3>Developer Tools</h3>\n                            <p>Advanced developer options coming soon.</p>\n                          </div>\n                        }\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n    </div>\n  }\n</div>\n", styles: ["/* ============================================\n   Settings Component - MD3 Design System\n   Material Design 3 compliant styles with proper token usage\n   ============================================ */\n\n/* ============================================\n   Custom Color Palette\n   ============================================ */\n:host {\n  --settings-primary: #0076B6;\n  --settings-primary-container: #AAE7FD;\n  --settings-secondary: #F5A623;\n  --settings-secondary-container: #FFECD6;\n  --settings-tertiary: #4CAF50;\n  --settings-tertiary-container: #C8E6C9;\n  --settings-error: #D32F2F;\n  --settings-error-container: #FFCDD2;\n}\n\n/* ============================================\n   Host & Page Container\n   ============================================ */\n\n/* Host element must fill its container */\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow: hidden;\n}\n\n@media (max-width: 768px) {\n  :host {\n    height: auto;\n    min-height: 100vh;\n    overflow: visible;\n  }\n}\n\n/* Page container needs proper height and scrolling */\n.mj-page-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n}\n\n@media (max-width: 768px) {\n  .mj-page-container {\n    overflow-y: visible;\n    overflow-x: hidden;\n    height: auto;\n    min-height: 100vh;\n  }\n}\n\n/* ============================================\n   Keyframe Animations\n   ============================================ */\n\n@keyframes shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n/* ============================================\n   Settings Container & Main Layout\n   ============================================ */\n\n.settings-container {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  background-color: var(--mat-sys-surface);\n  overflow-y: auto;\n  position: relative;\n}\n\n/* ============================================\n   Loading State\n   ============================================ */\n.loading-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.loading-content {\n  text-align: center;\n}\n\n.loading-text {\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n}\n\n/* ============================================\n   Error State\n   ============================================ */\n.error-container {\n  flex: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2rem;\n}\n\n.error-content {\n  text-align: center;\n  max-width: 400px;\n}\n\n.error-content .error-icon {\n  font-size: 3rem;\n  color: var(--mat-sys-error);\n  margin-bottom: 1rem;\n}\n\n.error-content .error-message {\n  color: var(--mat-sys-on-surface);\n  margin-bottom: 1.5rem;\n  font: var(--mat-sys-body-large);\n}\n\n.error-content .retry-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font: var(--mat-sys-label-large);\n  font-weight: 500;\n  border: none;\n  border-radius: 20px;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n  background-color: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n}\n\n.error-content .retry-button:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.error-content .retry-button:hover:not(:disabled) {\n  background-color: var(--mat-sys-primary-hover, var(--mat-sys-primary));\n  transform: translateY(-1px);\n  box-shadow: var(--mat-sys-elevation-2);\n}\n\n.error-content .retry-button i {\n  font-size: 0.875rem;\n}\n\n/* ============================================\n   Main Content Area & Tab Layout\n   ============================================ */\n\n.settings-content {\n  display: flex;\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex-direction: column;\n  width: 100%;\n  min-height: 0;\n}\n\n@media (max-width: 768px) {\n  .settings-content {\n    overflow-y: visible;\n    overflow-x: hidden;\n    height: auto;\n    min-height: 0;\n    flex: none;\n  }\n}\n\n.desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n.settings-content .desktop-layout {\n  display: flex !important;\n  height: 100%;\n  width: 100%;\n}\n\n/* ============================================\n   Side Navigation (Desktop Only)\n   ============================================ */\n\n.side-navigation {\n  width: 280px;\n  background: linear-gradient(180deg, var(--mat-sys-surface) 0%, var(--mat-sys-surface-container-lowest) 100%);\n  border-right: 1px solid var(--mat-sys-outline-variant);\n  overflow-y: auto;\n  flex-shrink: 0;\n  box-shadow: var(--mat-sys-elevation-1);\n}\n\n/* Navigation Search Bar */\n.nav-search {\n  position: relative;\n  padding: 1rem;\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  background-color: var(--mat-sys-surface);\n}\n\n.nav-search-icon {\n  position: absolute;\n  left: 1.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--mat-sys-on-surface-variant);\n  font-size: 1rem;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.nav-search-input {\n  width: 100%;\n  padding: 0.75rem 2.75rem 0.75rem 2.5rem;\n  border: 1px solid var(--mat-sys-outline-variant);\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-body-medium);\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-search-input:focus {\n  outline: none;\n  border-color: var(--settings-primary);\n  background-color: var(--mat-sys-surface);\n  box-shadow: 0 0 0 2px rgba(0, 118, 182, 0.1);\n}\n\n.nav-search-input::placeholder {\n  color: var(--mat-sys-on-surface-variant);\n}\n\n.nav-search-clear {\n  position: absolute;\n  right: 1.25rem;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 0.25rem;\n  background: transparent;\n  border: none;\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  border-radius: var(--mat-sys-corner-full);\n  min-width: 32px;\n  min-height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  z-index: 1;\n}\n\n.nav-search-clear:hover {\n  background: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-search-clear:focus-visible {\n  outline: 2px solid var(--settings-primary);\n  outline-offset: 2px;\n}\n\n.nav-list {\n  list-style: none;\n  margin: 0;\n  padding: 1rem 0;\n}\n\n.nav-item {\n  position: relative;\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  margin: 0.25rem 0.75rem;\n  border-radius: var(--mat-sys-corner-medium);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n  border: 2px solid transparent;\n}\n\n.nav-item:hover {\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n  transform: translateX(4px);\n}\n\n.nav-item:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n/* Color-coded navigation items */\n.nav-item[aria-controls=\"panel-general\"] {\n  --item-color: var(--settings-primary);\n  --item-container: var(--settings-primary-container);\n}\n\n.nav-item[aria-controls=\"panel-users\"] {\n  --item-color: var(--settings-secondary);\n  --item-container: var(--settings-secondary-container);\n}\n\n.nav-item[aria-controls=\"panel-roles\"] {\n  --item-color: var(--settings-tertiary);\n  --item-container: var(--settings-tertiary-container);\n}\n\n.nav-item[aria-controls=\"panel-applications\"] {\n  --item-color: #9C27B0;\n  --item-container: #E1BEE7;\n}\n\n.nav-item[aria-controls=\"panel-permissions\"] {\n  --item-color: var(--settings-error);\n  --item-container: var(--settings-error-container);\n}\n\n.nav-item[aria-controls=\"panel-advanced\"] {\n  --item-color: #FF6F00;\n  --item-container: #FFE0B2;\n}\n\n.nav-item.active {\n  background-color: var(--item-container);\n  color: var(--item-color);\n  font-weight: 600;\n  border-color: var(--item-color);\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.nav-item:hover:not(.active) {\n  border-color: var(--item-color);\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n.nav-item i {\n  width: 20px;\n  margin-right: 0.75rem;\n  font-size: 1.1rem;\n}\n\n.nav-item .nav-label {\n  flex: 1;\n}\n\n.nav-item .nav-badge {\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-weight: 600;\n}\n\n.nav-item .nav-badge.badge-primary {\n  background-color: var(--mat-sys-primary-container);\n  color: var(--mat-sys-on-primary-container);\n}\n\n.nav-item .nav-badge.badge-danger {\n  background-color: var(--mat-sys-error-container);\n  color: var(--mat-sys-on-error-container);\n}\n\n.nav-item .nav-badge.badge-warning {\n  background-color: var(--mat-sys-tertiary-container);\n  color: var(--mat-sys-on-tertiary-container);\n}\n\n.nav-item .nav-badge.badge-success {\n  background-color: var(--mat-sys-secondary-container);\n  color: var(--mat-sys-on-secondary-container);\n}\n\n/* ============================================\n   Content Area & Tab Panels\n   ============================================ */\n\n.content-area {\n  flex: 1;\n  overflow-y: auto;\n  overflow-x: hidden;\n  padding: 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  background: linear-gradient(180deg, var(--mat-sys-surface-container-lowest) 0%, var(--mat-sys-surface) 100%);\n}\n\n@media (max-width: 768px) {\n  .content-area {\n    padding: 1rem;\n  }\n}\n\n.tab-content {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  max-width: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  overflow-x: hidden;\n  padding: 1.5rem 2rem;\n}\n\n@media (max-width: 768px) {\n  .tab-content {\n    height: auto;\n    min-height: 0;\n    overflow-y: visible;\n    overflow-x: hidden;\n    padding: 0.5rem;\n  }\n}\n\n/* ============================================\n   Section Titles\n   ============================================ */\n.section-title {\n  font: var(--mat-sys-headline-small);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n  margin: 0 0 1rem 0;\n  padding-bottom: 0.75rem;\n  border-bottom: 3px solid var(--mat-sys-outline-variant);\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.section-title::before {\n  content: \"\";\n  width: 4px;\n  height: 2rem;\n  background: linear-gradient(180deg, var(--settings-primary) 0%, var(--settings-tertiary) 100%);\n  border-radius: 2px;\n}\n\n.section-description {\n  color: var(--mat-sys-on-surface-variant);\n  margin: 0 0 1.5rem 0;\n  font: var(--mat-sys-body-large);\n  padding: 1rem 1.25rem;\n  background-color: var(--mat-sys-surface-container);\n  border-radius: var(--mat-sys-corner-medium);\n}\n\n/* ============================================\n   Settings Grid\n   ============================================ */\n.settings-grid,\n.mj-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n  margin-top: 1.5rem;\n}\n\n.mj-grid-responsive {\n  /* Single column stacked layout */\n  display: flex;\n  flex-direction: column;\n  gap: 1.5rem;\n}\n\n@media (max-width: 768px) {\n  .settings-grid,\n  .mj-grid,\n  .mj-grid-responsive {\n    gap: 1rem;\n    margin-top: 0.5rem;\n  }\n}\n\n/* ============================================\n   Section Title & Description Spacing\n   ============================================ */\n.general-settings .section-title,\n.users-settings .section-title,\n.roles-settings .section-title {\n  margin-bottom: 0.25rem;\n}\n\n.users-settings .section-description,\n.roles-settings .section-description {\n  margin-bottom: 0.5rem;\n}\n\n/* ============================================\n   Card Content\n   ============================================ */\n.card-content {\n  padding: 1rem;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-medium);\n}\n\n.card-content p {\n  margin: 0 0 1rem 0;\n  line-height: 1.6;\n}\n\n/* ============================================\n   Beta Warning\n   ============================================ */\n.beta-warning {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.75rem;\n  padding: 0.75rem 1.25rem;\n  background: linear-gradient(135deg, #FFE0B2 0%, var(--settings-secondary-container) 100%);\n  color: #FF6F00;\n  border-radius: var(--mat-sys-corner-medium);\n  font: var(--mat-sys-label-large);\n  font-weight: 600;\n  margin-bottom: 1.5rem;\n  max-width: 100%;\n  box-sizing: border-box;\n  border: 2px solid #FF6F00;\n  box-shadow: 0 2px 8px rgba(255, 111, 0, 0.2);\n}\n\n.beta-warning i {\n  font-size: 1rem;\n  flex-shrink: 0;\n}\n\n@media (max-width: 768px) {\n  .beta-warning {\n    font-size: 0.8125rem;\n    padding: 0.5rem 0.75rem;\n    margin-bottom: 0.75rem;\n  }\n}\n\n/* ============================================\n   Mobile Layout with Collapsible Navigation Rail\n   ============================================ */\n\n.mobile-layout {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  width: 100%;\n  max-width: 100vw;\n  overflow: visible;\n  box-sizing: border-box;\n}\n\n/* Mobile Header */\n.mobile-header {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 56px;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 0 0.5rem;\n  background-color: var(--mat-sys-surface-container);\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  z-index: 100;\n  box-sizing: border-box;\n}\n\n.mobile-header-icon {\n  width: 48px;\n  height: 48px;\n  min-width: 48px;\n  border-radius: var(--mat-sys-corner-full);\n  background: transparent;\n  color: var(--mat-sys-on-surface);\n  border: none;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.mobile-header-icon:hover {\n  background-color: var(--mat-sys-surface-container-high);\n}\n\n.mobile-header-icon:active {\n  transform: scale(0.95);\n}\n\n.mobile-header-icon i {\n  font-size: 1.25rem;\n}\n\n.mobile-header-title {\n  flex: 1;\n  text-align: center;\n  font: var(--mat-sys-title-large);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n  margin: 0;\n  padding: 0 0.5rem;\n}\n\n.mobile-header-spacer {\n  width: 48px;\n  min-width: 48px;\n}\n\n/* Backdrop Overlay */\n.mobile-nav-backdrop {\n  position: fixed;\n  inset: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  z-index: 1000;\n  animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n/* Collapsible Navigation Rail */\n.mobile-nav-rail {\n  position: fixed;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  width: 280px;\n  max-width: 80vw;\n  background-color: var(--mat-sys-surface);\n  border-right: 1px solid var(--mat-sys-outline-variant);\n  display: flex;\n  flex-direction: column;\n  z-index: 1001;\n  transform: translateX(-100%);\n  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: var(--mat-sys-elevation-4);\n  overflow: hidden;\n}\n\n.mobile-nav-rail.open {\n  transform: translateX(0);\n}\n\n/* Navigation Rail Header */\n.nav-rail-header {\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.5rem;\n  min-height: 64px;\n  border-bottom: 1px solid var(--mat-sys-outline-variant);\n  background-color: var(--mat-sys-surface-container);\n  flex-shrink: 0;\n}\n\n.nav-rail-title {\n  font: var(--mat-sys-title-large);\n  font-weight: 600;\n  color: var(--mat-sys-on-surface);\n}\n\n/* Navigation Items Container */\n.nav-rail-items {\n  display: flex;\n  flex-direction: column;\n  padding: 0.5rem;\n  gap: 0.25rem;\n  overflow-y: auto;\n  overflow-x: hidden;\n  flex: 1;\n}\n\n/* Close Navigation Item */\n.nav-rail-close-item {\n  margin-top: auto;\n  border-top: 1px solid var(--mat-sys-outline-variant);\n  padding-top: 0.75rem !important;\n  margin-top: 0.5rem;\n  background-color: var(--mat-sys-error-container) !important;\n  color: var(--mat-sys-on-error-container) !important;\n}\n\n.nav-rail-close-item:hover {\n  background-color: var(--mat-sys-error) !important;\n  color: var(--mat-sys-on-error) !important;\n}\n\n.nav-rail-close-item i {\n  font-size: 1.5rem;\n}\n\n/* Navigation Item */\n.nav-rail-item {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 1rem;\n  width: 100%;\n  padding: 0.875rem 1rem;\n  background: transparent;\n  border: none;\n  border-radius: var(--mat-sys-corner-medium);\n  color: var(--mat-sys-on-surface-variant);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  text-align: left;\n  min-height: 56px;\n}\n\n.nav-rail-item i {\n  font-size: 1.5rem;\n  width: 24px;\n  text-align: center;\n  flex-shrink: 0;\n  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.nav-rail-label {\n  font: var(--mat-sys-body-large);\n  font-weight: 500;\n  flex: 1;\n}\n\n.nav-rail-item:hover:not(.active) {\n  background-color: var(--mat-sys-surface-container);\n  color: var(--mat-sys-on-surface);\n}\n\n.nav-rail-item.active {\n  background-color: var(--mat-sys-primary-container);\n  color: var(--mat-sys-primary);\n}\n\n.nav-rail-item.active .nav-rail-label {\n  font-weight: 600;\n}\n\n.nav-rail-item:active {\n  transform: scale(0.98);\n}\n\n.nav-rail-item:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: 2px;\n}\n\n/* Badge indicator */\n.rail-badge {\n  min-width: 20px;\n  height: 20px;\n  padding: 0 6px;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-size: 11px;\n  font-weight: 700;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.rail-badge.badge-primary {\n  background-color: var(--mat-sys-primary);\n  color: var(--mat-sys-on-primary);\n}\n\n.rail-badge.badge-danger {\n  background-color: var(--mat-sys-error);\n  color: var(--mat-sys-on-error);\n}\n\n.rail-badge.badge-warning {\n  background-color: var(--mat-sys-tertiary);\n  color: var(--mat-sys-on-tertiary);\n}\n\n.rail-badge.badge-success {\n  background-color: var(--mat-sys-secondary);\n  color: var(--mat-sys-on-secondary);\n}\n\n/* Mobile Content Area */\n.mobile-content {\n  width: 100%;\n  max-width: 100vw;\n  overflow-y: visible;\n  overflow-x: hidden;\n  padding: 72px 0.75rem 2rem 0.75rem;\n  min-width: 0;\n  box-sizing: border-box;\n  -webkit-overflow-scrolling: touch;\n  flex: 1;\n}\n\n/* Responsive adjustments */\n@media (max-width: 374px) {\n  .mobile-nav-rail {\n    width: 260px;\n  }\n\n  .mobile-content {\n    padding: 64px 0.5rem 1.5rem 0.5rem;\n  }\n\n  .mobile-header {\n    height: 52px;\n    padding: 0 0.25rem;\n  }\n\n  .mobile-header-icon {\n    width: 44px;\n    height: 44px;\n    min-width: 44px;\n  }\n\n  .mobile-header-spacer {\n    width: 44px;\n    min-width: 44px;\n  }\n\n  .mobile-header-title {\n    font-size: 1.125rem;\n  }\n}\n\n/* ============================================\n   Advanced Settings Sub-Tabs\n   ============================================ */\n\n.advanced-tabs {\n  display: flex;\n  gap: 0.5rem;\n  border-bottom: 2px solid var(--mat-sys-outline-variant);\n  margin-bottom: 1rem;\n  margin-top: 1rem;\n  overflow-x: auto;\n  overflow-y: hidden;\n  scrollbar-width: thin;\n  -webkit-overflow-scrolling: touch;\n}\n\n.advanced-tabs .tab-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1rem;\n  background: transparent;\n  border: none;\n  border-bottom: 3px solid transparent;\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-label-large);\n  font-weight: 500;\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  position: relative;\n  min-height: 44px;\n  white-space: nowrap;\n  flex-shrink: 0;\n}\n\n/* Mobile-specific tab adjustments - Segmented Button Style */\n@media (max-width: 768px) {\n  .advanced-tabs {\n    gap: 0;\n    margin-bottom: 1rem;\n    margin-top: 1rem;\n    border-bottom: none;\n    border: 1px solid var(--mat-sys-outline);\n    border-radius: var(--mat-sys-corner-full);\n    padding: 0;\n    background-color: var(--mat-sys-surface-container-low);\n    overflow-x: hidden;\n    width: 100%;\n    max-width: 100%;\n    box-sizing: border-box;\n  }\n\n  .advanced-tabs .tab-btn {\n    flex: 1;\n    padding: 0.625rem 0.5rem;\n    font-size: 0.75rem;\n    border-bottom: none;\n    border-radius: 0;\n    border-right: 1px solid var(--mat-sys-outline);\n    min-width: 0;\n    justify-content: center;\n    text-align: center;\n    white-space: nowrap;\n    overflow: hidden;\n  }\n\n  .advanced-tabs .tab-btn:last-child {\n    border-right: none;\n  }\n\n  .advanced-tabs .tab-btn:first-child {\n    border-radius: var(--mat-sys-corner-full) 0 0 var(--mat-sys-corner-full);\n  }\n\n  .advanced-tabs .tab-btn:last-child {\n    border-radius: 0 var(--mat-sys-corner-full) var(--mat-sys-corner-full) 0;\n  }\n\n  .advanced-tabs .tab-btn.active {\n    background-color: var(--mat-sys-secondary-container);\n    color: var(--mat-sys-on-secondary-container);\n    border-bottom: none;\n  }\n\n  .advanced-tabs .tab-btn i {\n    font-size: 0.875rem;\n  }\n}\n\n.advanced-tabs .tab-btn:hover {\n  color: var(--mat-sys-on-surface);\n  background: var(--mat-sys-surface-container);\n}\n\n.advanced-tabs .tab-btn:focus-visible {\n  outline: 2px solid var(--mat-sys-primary);\n  outline-offset: -2px;\n}\n\n.advanced-tabs .tab-btn.active {\n  color: var(--mat-sys-primary);\n  border-bottom-color: var(--mat-sys-primary);\n  background: var(--mat-sys-primary-container);\n}\n\n.advanced-tabs .tab-btn.active i {\n  color: var(--mat-sys-primary);\n}\n\n.advanced-tabs .tab-btn i {\n  font-size: 1.125rem;\n}\n\n/* ============================================\n   Advanced Tab Content Panels\n   ============================================ */\n\n.advanced-tab-content {\n  flex: 1;\n  overflow-y: visible;\n  overflow-x: hidden;\n  min-height: 0;\n  position: relative;\n  background: var(--mat-sys-surface);\n  border-radius: var(--mat-sys-corner-large);\n  padding: 0;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n/* Ensure scrolling works on mobile */\n@media (max-width: 768px) {\n  .advanced-tab-content {\n    height: auto;\n    min-height: 200px;\n    overflow-y: visible;\n  }\n}\n\n.performance-settings,\n.developer-settings {\n  padding: 2rem;\n}\n\n.performance-settings h3,\n.developer-settings h3 {\n  margin: 0 0 1rem 0;\n  font: var(--mat-sys-title-large);\n  color: var(--mat-sys-on-surface);\n}\n\n.performance-settings p,\n.developer-settings p {\n  color: var(--mat-sys-on-surface-variant);\n  font: var(--mat-sys-body-large);\n}\n\n/* ============================================\n   Settings Panel Containers with Fade-In Animation\n   ============================================ */\n\n.general-settings,\n.users-settings,\n.roles-settings,\n.applications-settings,\n.permissions-settings,\n.advanced-settings {\n  animation: fadeIn 0.3s ease-out;\n  width: 100%;\n  max-width: 100%;\n  height: auto;\n  min-height: 100%;\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  overflow-y: visible;\n  overflow-x: hidden;\n  box-sizing: border-box;\n}\n\n/* Mobile-specific adjustments */\n@media (max-width: 768px) {\n  .general-settings,\n  .users-settings,\n  .roles-settings,\n  .applications-settings,\n  .permissions-settings,\n  .advanced-settings {\n    gap: 0.75rem;\n    height: auto;\n    min-height: auto;\n  }\n\n  .section-title {\n    margin-bottom: 0.5rem;\n    font-size: 1.375rem;\n  }\n\n  .section-description {\n    margin-bottom: 0.75rem;\n  }\n}\n\n/* Only apply flex: 1 to actual content components, not titles/descriptions */\n.general-settings > mj-settings-card,\n.general-settings > .mj-grid,\n.users-settings > mj-user-management,\n.roles-settings > mj-role-management,\n.applications-settings > mj-application-management,\n.permissions-settings > mj-entity-permissions,\n.advanced-settings > .advanced-tabs,\n.advanced-settings > .advanced-tab-content {\n  flex-shrink: 0;\n  width: 100%;\n  max-width: 100%;\n  box-sizing: border-box;\n}\n\n/* Allow content to flow naturally on mobile */\n@media (max-width: 768px) {\n  .users-settings > mj-user-management,\n  .roles-settings > mj-role-management,\n  .applications-settings > mj-application-management,\n  .permissions-settings > mj-entity-permissions,\n  .advanced-settings > .advanced-tab-content {\n    flex: none;\n    height: auto !important;\n    min-height: 0;\n    max-height: none !important;\n    overflow-y: visible !important;\n    overflow-x: hidden;\n  }\n}\n\n/* Titles and descriptions should not flex or grow */\n.general-settings > .section-title,\n.users-settings > .section-title,\n.roles-settings > .section-title,\n.users-settings > .section-description,\n.roles-settings > .section-description {\n  flex-shrink: 0;\n  flex-grow: 0;\n}\n\n/* ============================================\n   Accessibility: Reduced Motion Support\n   ============================================ */\n\n@media (prefers-reduced-motion: reduce) {\n  .general-settings,\n  .users-settings,\n  .roles-settings,\n  .applications-settings,\n  .permissions-settings,\n  .advanced-settings {\n    animation: none;\n  }\n\n  .nav-tab i,\n  .nav-item,\n  .tab-btn,\n  .search-input,\n  .retry-button,\n  .search-result-item {\n    transition: none;\n  }\n}\n\n/* ============================================\n   Responsive Breakpoints\n   ============================================ */\n@media (max-width: 640px) {\n  .side-navigation {\n    width: 200px;\n  }\n\n  .nav-item {\n    padding: 0.75rem 1rem;\n  }\n}\n\n@media (max-width: 1024px) {\n  .content-area {\n    padding: 1.5rem;\n  }\n}\n\n/* Mobile scroll fix - ensure all child components flow naturally */\n@media (max-width: 768px) {\n  .mobile-layout mj-user-management,\n  .mobile-layout mj-role-management,\n  .mobile-layout mj-application-management,\n  .mobile-layout mj-entity-permissions,\n  .mobile-layout mj-sql-logging,\n  .mobile-layout mj-settings-card,\n  .mobile-layout mj-user-profile-settings {\n    display: block;\n    height: auto !important;\n    max-height: none !important;\n    overflow: visible !important;\n  }\n\n  /* Ensure all nested content areas flow naturally */\n  .mobile-layout .general-settings,\n  .mobile-layout .users-settings,\n  .mobile-layout .roles-settings,\n  .mobile-layout .applications-settings,\n  .mobile-layout .permissions-settings,\n  .mobile-layout .advanced-settings {\n    height: auto !important;\n    min-height: 0 !important;\n    max-height: none !important;\n  }\n\n  /* Ensure mj-grid and card content can expand */\n  .mobile-layout .mj-grid,\n  .mobile-layout .mj-grid-responsive,\n  .mobile-layout .card-content {\n    height: auto !important;\n    min-height: 0 !important;\n  }\n}\n\n@media (min-width: 1440px) {\n  .content-area {\n    padding: 2.5rem 3rem;\n  }\n\n  .side-navigation {\n    width: 280px;\n  }\n}\n\n/* ============================================\n   iOS Safari Mobile Scrolling Fix\n   ============================================ */\n@media (max-width: 768px) {\n  /* Prevent iOS from restricting body scrolling */\n  body {\n    position: relative;\n    overflow-y: visible;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  /* Allow mobile layout and all parents to expand naturally */\n  .mobile-layout,\n  .mobile-layout > *,\n  .mobile-content > *,\n  .tab-content > * {\n    -webkit-overflow-scrolling: touch;\n  }\n\n  /* Prevent fixed heights from blocking scroll */\n  .mobile-layout * {\n    box-sizing: border-box;\n  }\n}\n"] }]
+    }], () => [{ type: i1.Location }], { stateChange: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 38 }); })();
 //# sourceMappingURL=settings.component.js.map