@memberjunction/ng-explorer-settings 3.3.0 → 4.0.0

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

@@ -11,15 +11,11 @@ import { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import { BaseNavigationComponent } from '@memberjunction/ng-shared';
 import * as i0 from "@angular/core";
 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";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "../notification-preferences/notification-preferences.component";
+import * as i4 from "../general-settings/general-settings.component";
+import * as i5 from "../application-settings/application-settings.component";
+import * as i6 from "../appearance-settings/appearance-settings.component";
 const _forTrack0 = ($index, $item) => $item.id;
 function SettingsComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 1);
@@ -45,13 +41,18 @@ function SettingsComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
 } }
 function SettingsComponent_Conditional_3_Conditional_1_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵelementStart(0, "button", 22);
     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.ɵɵelement(1, "i", 23);
     i0.ɵɵelementEnd();
 } }
 function SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 34);
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵtext(1, "Soon");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 29);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -62,151 +63,47 @@ function SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Templ
 } }
 function SettingsComponent_Conditional_3_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 30);
+    i0.ɵɵelementStart(0, "li", 24);
     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.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span", 26);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Template, 2, 3, "span", 33);
+    i0.ɵɵconditionalCreate(4, SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_4_Template, 2, 0, "span", 27);
+    i0.ɵɵconditionalCreate(5, SettingsComponent_Conditional_3_Conditional_1_For_8_Conditional_5_Template, 2, 3, "span", 28);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const tab_r6 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    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.ɵɵclassProp("active", ctx_r1.activeTab === tab_r6.id)("disabled", tab_r6.disabled);
+    i0.ɵɵattribute("aria-selected", ctx_r1.activeTab === tab_r6.id)("aria-controls", "panel-" + tab_r6.id)("aria-disabled", tab_r6.disabled);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(tab_r6.icon);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(tab_r6.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r6.badgeCount && tab_r6.badgeCount > 0 ? 4 : -1);
+    i0.ɵɵconditional(tab_r6.disabled ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r6.badgeCount && tab_r6.badgeCount > 0 ? 5 : -1);
 } }
 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", 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", 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()()()()();
-} 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"));
+    i0.ɵɵelement(0, "mj-general-settings");
 } }
 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", 40);
-    i0.ɵɵtext(4, "Manage user accounts, roles, and permissions");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "mj-user-management");
-    i0.ɵɵelementEnd();
-} }
-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", 40);
-    i0.ɵɵtext(4, "Define and manage security roles.");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "mj-role-management");
-    i0.ɵɵelementEnd();
-} }
-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_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_3_Conditional_1_Case_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26)(1, "h2", 35);
+    i0.ɵɵelementStart(0, "div", 21)(1, "h2", 30);
     i0.ɵɵtext(2, "Notifications");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵelementStart(3, "p", 31);
     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_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();
-    i0.ɵɵelementStart(3, "p");
-    i0.ɵɵtext(4, "Performance monitoring and optimization tools coming soon.");
-    i0.ɵɵelementEnd()();
-} }
-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();
-    i0.ɵɵelementStart(3, "p");
-    i0.ɵɵtext(4, "Advanced developer options coming soon.");
-    i0.ɵɵelementEnd()();
+function SettingsComponent_Conditional_3_Conditional_1_Case_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-application-settings");
 } }
-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", 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", 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", 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", 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", 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_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_1_Case_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-appearance-settings");
 } }
 function SettingsComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
@@ -215,13 +112,13 @@ function SettingsComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (r
     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.ɵɵconditionalCreate(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.ɵɵrepeaterCreate(7, SettingsComponent_Conditional_3_Conditional_1_For_8_Template, 6, 12, "li", 18, _forTrack0);
     i0.ɵɵelementEnd()();
     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.ɵɵconditionalCreate(11, SettingsComponent_Conditional_3_Conditional_1_Case_11_Template, 1, 0, "mj-general-settings")(12, SettingsComponent_Conditional_3_Conditional_1_Case_12_Template, 6, 0, "div", 21)(13, SettingsComponent_Conditional_3_Conditional_1_Case_13_Template, 1, 0, "mj-application-settings")(14, SettingsComponent_Conditional_3_Conditional_1_Case_14_Template, 1, 0, "mj-appearance-settings");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_6_0;
@@ -235,18 +132,18 @@ function SettingsComponent_Conditional_3_Conditional_1_Template(rf, ctx) { if (r
     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);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.activeTab) === "general" ? 11 : tmp_6_0 === "notifications" ? 12 : tmp_6_0 === "applications" ? 13 : tmp_6_0 === "appearance" ? 14 : -1);
 } }
 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);
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "header", 32)(1, "button", 42);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleMobileNav()); });
+    i0.ɵɵelement(2, "i", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "h1", 66);
+    i0.ɵɵelementStart(3, "h1", 44);
     i0.ɵɵtext(4, "Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "div", 67);
+    i0.ɵɵelement(5, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -254,186 +151,89 @@ function SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template(rf
     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()); });
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.closeMobileNav()); });
     i0.ɵɵelementEnd();
 } }
 function SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 71);
+    i0.ɵɵelementStart(0, "span", 27);
+    i0.ɵɵtext(1, "Soon");
+    i0.ɵɵelementEnd();
+} }
+function SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 49);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r13 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵclassMap("badge-" + (tab_r13.badgeColor || "primary"));
+    const tab_r11 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap("badge-" + (tab_r11.badgeColor || "primary"));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", tab_r13.badgeCount, " ");
+    i0.ɵɵtextInterpolate1(" ", tab_r11.badgeCount, " ");
 } }
 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);
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 47);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_For_9_Template_button_click_0_listener() { const tab_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onMobileTabChange(tab_r11.id)); });
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementStart(2, "span", 40);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_4_Template, 2, 3, "span", 70);
+    i0.ɵɵconditionalCreate(4, SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_4_Template, 2, 0, "span", 27);
+    i0.ɵɵconditionalCreate(5, SettingsComponent_Conditional_3_Conditional_2_For_9_Conditional_5_Template, 2, 3, "span", 48);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const tab_r13 = ctx.$implicit;
+    const tab_r11 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    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.ɵɵclassProp("active", ctx_r1.activeTab === tab_r11.id)("disabled", tab_r11.disabled);
+    i0.ɵɵproperty("disabled", tab_r11.disabled);
+    i0.ɵɵattribute("aria-selected", ctx_r1.activeTab === tab_r11.id)("aria-label", tab_r11.label);
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(tab_r13.icon);
+    i0.ɵɵclassMap(tab_r11.icon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(tab_r13.label);
+    i0.ɵɵtextInterpolate(tab_r11.label);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(tab_r13.badgeCount && tab_r13.badgeCount > 0 ? 4 : -1);
+    i0.ɵɵconditional(tab_r11.disabled ? 4 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(tab_r11.badgeCount && tab_r11.badgeCount > 0 ? 5 : -1);
 } }
 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"));
+    i0.ɵɵelement(0, "mj-general-settings");
 } }
 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_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(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.ɵɵelementStart(0, "div", 21)(1, "h2", 30);
     i0.ɵɵtext(2, "Notifications");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "p", 40);
+    i0.ɵɵelementStart(3, "p", 31);
     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_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-application-settings");
 } }
-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_Case_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-appearance-settings");
 } }
 function SettingsComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
+    const _r7 = 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.ɵɵconditionalCreate(1, SettingsComponent_Conditional_3_Conditional_2_Conditional_1_Template, 6, 1, "header", 32);
+    i0.ɵɵconditionalCreate(2, SettingsComponent_Conditional_3_Conditional_2_Conditional_2_Template, 1, 0, "div", 33);
+    i0.ɵɵelementStart(3, "nav", 34)(4, "div", 35)(5, "span", 36);
     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.ɵɵelementStart(7, "div", 37);
+    i0.ɵɵrepeaterCreate(8, SettingsComponent_Conditional_3_Conditional_2_For_9_Template, 6, 12, "button", 38, _forTrack0);
+    i0.ɵɵelementStart(10, "button", 39);
+    i0.ɵɵlistener("click", function SettingsComponent_Conditional_3_Conditional_2_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.closeSettings()); });
+    i0.ɵɵelement(11, "i", 23);
+    i0.ɵɵelementStart(12, "span", 40);
     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.ɵɵelementStart(14, "div", 41)(15, "div", 20);
+    i0.ɵɵconditionalCreate(16, SettingsComponent_Conditional_3_Conditional_2_Case_16_Template, 1, 0, "mj-general-settings")(17, SettingsComponent_Conditional_3_Conditional_2_Case_17_Template, 6, 0, "div", 21)(18, SettingsComponent_Conditional_3_Conditional_2_Case_18_Template, 1, 0, "mj-application-settings")(19, SettingsComponent_Conditional_3_Conditional_2_Case_19_Template, 1, 0, "mj-appearance-settings");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     let tmp_6_0;
@@ -447,11 +247,12 @@ function SettingsComponent_Conditional_3_Conditional_2_Template(rf, ctx) { if (r
     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);
+    i0.ɵɵconditional((tmp_6_0 = ctx_r1.activeTab) === "general" ? 16 : tmp_6_0 === "notifications" ? 17 : tmp_6_0 === "applications" ? 18 : tmp_6_0 === "appearance" ? 19 : -1);
 } }
 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.ɵɵconditionalCreate(1, SettingsComponent_Conditional_3_Conditional_1_Template, 15, 4, "div", 10);
+    i0.ɵɵconditionalCreate(2, SettingsComponent_Conditional_3_Conditional_2_Template, 20, 5, "div", 11);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -465,7 +266,6 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     stateChange = new EventEmitter();
     // State management
     activeTab = 'general';
-    advancedActiveTab = 'sql-logging';
     searchTerm$ = new BehaviorSubject('');
     isLoading = false;
     error = null;
@@ -474,53 +274,35 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     searchResults = [];
     isSearching = false;
     showSearchResults = false;
-    // Tab configuration
+    // Tab configuration - User-focused tabs only
     tabs = [
         {
             id: 'general',
             label: 'General',
-            icon: 'fa-solid fa-cog',
-            badgeCount: 0
-        },
-        {
-            id: 'users',
-            label: 'Users',
-            icon: 'fa-solid fa-users',
-            badgeCount: 0
+            icon: 'fa-solid fa-user',
+            description: 'Profile and account information'
         },
         {
-            id: 'roles',
-            label: 'Roles',
-            icon: 'fa-solid fa-shield-halved',
-            badgeCount: 0
+            id: 'notifications',
+            label: 'Notifications',
+            icon: 'fa-solid fa-bell',
+            description: 'Notification preferences and delivery channels'
         },
         {
             id: 'applications',
             label: 'Applications',
             icon: 'fa-solid fa-th-large',
-            badgeCount: 0
-        },
-        {
-            id: 'permissions',
-            label: 'Permissions',
-            icon: 'fa-solid fa-lock',
-            badgeCount: 0
+            description: 'Manage visible applications and ordering'
         },
         {
-            id: 'notifications',
-            label: 'Notifications',
-            icon: 'fa-solid fa-bell',
-            badgeCount: 0
-        },
-        {
-            id: 'advanced',
-            label: 'Advanced',
-            icon: 'fa-solid fa-flask',
-            badgeCount: 1,
-            badgeColor: 'warning'
+            id: 'appearance',
+            label: 'Appearance',
+            icon: 'fa-solid fa-palette',
+            description: 'Theme and display settings',
+            disabled: true
         }
     ];
-    // Searchable content registry
+    // Searchable content registry - User settings only
     searchableItems = [
         // General tab
         {
@@ -532,95 +314,53 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             description: 'Manage your profile picture and account information'
         },
         {
-            id: 'preferences',
+            id: 'account',
             tabId: 'general',
-            sectionId: 'preferences',
-            label: 'Preferences',
-            keywords: ['preferences', 'settings', 'display', 'theme', 'appearance', 'layout'],
-            description: 'Customize your experience with display and behavior preferences'
+            sectionId: 'account',
+            label: 'Account Information',
+            keywords: ['account', 'email', 'role', 'login', 'status', 'type'],
+            description: 'View your account details and status'
         },
+        // Notifications tab
         {
             id: 'notifications',
             tabId: 'notifications',
             sectionId: 'notifications',
-            label: 'Notifications',
-            keywords: ['notifications', 'alerts', 'email', 'push', 'messages', 'inbox'],
+            label: 'Notification Preferences',
+            keywords: ['notifications', 'alerts', 'email', 'sms', 'in-app', 'messages'],
             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'
+            sectionId: 'applications',
+            label: 'Application Settings',
+            keywords: ['applications', 'apps', 'switcher', 'order', 'visibility', 'menu'],
+            description: 'Choose which applications appear in your app switcher'
         },
-        // Advanced tab - Developer
+        // Appearance tab
         {
-            id: 'developer',
-            tabId: 'advanced',
-            sectionId: 'developer',
-            label: 'Developer Tools',
-            keywords: ['developer', 'tools', 'debug', 'api', 'code', 'testing', 'console'],
-            description: 'Advanced developer options and debugging tools'
+            id: 'appearance',
+            tabId: 'appearance',
+            sectionId: 'appearance',
+            label: 'Appearance Settings',
+            keywords: ['appearance', 'theme', 'dark', 'light', 'display', 'font', 'density'],
+            description: 'Customize how the application looks'
         }
     ];
     // Section expansion state
-    expandedSections = ['profile', 'preferences'];
+    expandedSections = ['profile', 'account'];
     // Mobile state
     isMobile = window.innerWidth < 768;
     isMobileNavOpen = false;
     destroy$ = new Subject();
     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();
@@ -641,7 +381,6 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     async loadInitialData() {
         try {
             this.isLoading = true;
-            // TODO: Load user settings, roles, applications data
             await this.simulateDataLoad();
             this.isLoading = false;
         }
@@ -651,9 +390,13 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         }
     }
     async simulateDataLoad() {
-        return new Promise(resolve => setTimeout(resolve, 500));
+        return new Promise(resolve => setTimeout(resolve, 300));
     }
     onTabChange(tabId) {
+        const tab = this.tabs.find(t => t.id === tabId);
+        if (tab?.disabled) {
+            return; // Don't switch to disabled tabs
+        }
         this.activeTab = tabId;
         this.emitStateChange();
     }
@@ -674,12 +417,8 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     isSectionExpanded(sectionId) {
         return this.expandedSections.includes(sectionId);
     }
-    setAdvancedTab(tabId) {
-        this.advancedActiveTab = tabId;
-    }
     /**
      * Filters searchable content based on search term
-     * Matches against labels, keywords, and descriptions
      */
     filterContent(term) {
         if (!term || term.trim() === '') {
@@ -705,19 +444,17 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     }
     /**
      * Navigates to a search result
-     * Switches to the correct tab and expands the relevant section
      */
     navigateToSearchResult(result) {
+        const tab = this.tabs.find(t => t.id === result.tabId);
+        if (tab?.disabled) {
+            return; // Don't navigate to disabled tabs
+        }
         this.activeTab = result.tabId;
-        // If it's a section within a tab, expand it
+        // Expand the section if applicable
         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();
     }
@@ -731,7 +468,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         this.filteredTabs = [...this.tabs];
     }
     /**
-     * Toggles the mobile navigation rail open/closed
+     * Toggles the mobile navigation rail
      */
     toggleMobileNav() {
         this.isMobileNavOpen = !this.isMobileNavOpen;
@@ -749,7 +486,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         this.location.back();
     }
     /**
-     * Handles tab change on mobile and closes the nav rail
+     * Handles tab change on mobile
      */
     onMobileTabChange(tabId) {
         this.onTabChange(tabId);
@@ -757,7 +494,6 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
     }
     handleResize() {
         this.isMobile = window.innerWidth < 768;
-        // Close mobile nav on resize to desktop
         if (!this.isMobile) {
             this.isMobileNavOpen = false;
         }
@@ -781,20 +517,6 @@ 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;
     }
@@ -803,15 +525,23 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
         if (this.activeTab === tab.id) {
             classes.push('active');
         }
+        if (tab.disabled) {
+            classes.push('disabled');
+        }
         if (tab.badgeCount && tab.badgeCount > 0) {
             classes.push('has-badge');
         }
         return classes.join(' ');
     }
+    isTabDisabled(tab) {
+        return tab.disabled || false;
+    }
     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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: SettingsComponent, selectors: [["mj-settings"]], outputs: { stateChange: "stateChange" }, standalone: false, 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", "disabled"], ["role", "tabpanel", 1, "content-area"], [1, "tab-content"], [1, "notifications-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, "coming-soon-badge"], [1, "nav-badge", 3, "class"], [1, "nav-badge"], [1, "section-title"], [1, "section-description"], [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", "disabled"], ["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", "disabled"], [1, "rail-badge", 3, "class"], [1, "rail-badge"]], 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.ɵɵconditionalCreate(1, SettingsComponent_Conditional_1_Template, 2, 0, "div", 1);
+            i0.ɵɵconditionalCreate(2, SettingsComponent_Conditional_2_Template, 8, 1, "div", 2);
+            i0.ɵɵconditionalCreate(3, SettingsComponent_Conditional_3_Template, 3, 2, "div", 3);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
@@ -820,7 +550,7 @@ let SettingsComponent = class SettingsComponent extends BaseNavigationComponent
             i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 2 : -1);
             i0.ɵɵadvance();
             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}"] });
+        } }, dependencies: [i2.LoadingComponent, i3.NotificationPreferencesComponent, i4.GeneralSettingsComponent, i5.ApplicationSettingsComponent, i6.AppearanceSettingsComponent], 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.nav-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%]:hover {\n  background-color: transparent;\n  transform: none;\n}\n\n\n\n.coming-soon-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: linear-gradient(135deg, var(--mat-sys-tertiary-container) 0%, var(--mat-sys-secondary-container) 100%);\n  color: var(--mat-sys-on-tertiary-container);\n  border: 1px solid var(--mat-sys-outline-variant);\n}\n\n\n\n.nav-rail-item.disabled[_ngcontent-%COMP%] {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.nav-rail-item.disabled[_ngcontent-%COMP%]:hover {\n  background-color: transparent;\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')
@@ -828,9 +558,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  <!-- 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"] }]
+        args: [{ standalone: false, 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                  [class.disabled]=\"tab.disabled\"\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                  [attr.aria-disabled]=\"tab.disabled\"\n                  tabindex=\"0\"\n                >\n                  <i [class]=\"tab.icon\" aria-hidden=\"true\"></i>\n                  <span class=\"nav-label\">{{ tab.label }}</span>\n                  @if (tab.disabled) {\n                    <span class=\"coming-soon-badge\">Soon</span>\n                  }\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                  <mj-general-settings></mj-general-settings>\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 ('applications') {\n                  <mj-application-settings></mj-application-settings>\n                }\n\n                @case ('appearance') {\n                  <mj-appearance-settings></mj-appearance-settings>\n                }\n              }\n            </div>\n          </div>\n        </div>\n      }\n\n      <!-- Mobile Layout -->\n      @if (isMobile) {\n        <div class=\"mobile-layout\">\n          <!-- Mobile Header -->\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 -->\n          <nav\n            class=\"mobile-nav-rail\"\n            [class.open]=\"isMobileNavOpen\"\n            role=\"navigation\"\n            aria-label=\"Settings navigation\"\n          >\n            <div class=\"nav-rail-header\">\n              <span class=\"nav-rail-title\">Settings</span>\n            </div>\n\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                  [class.disabled]=\"tab.disabled\"\n                  [disabled]=\"tab.disabled\"\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.disabled) {\n                    <span class=\"coming-soon-badge\">Soon</span>\n                  }\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              <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                  <mj-general-settings></mj-general-settings>\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 ('applications') {\n                  <mj-application-settings></mj-application-settings>\n                }\n\n                @case ('appearance') {\n                  <mj-appearance-settings></mj-appearance-settings>\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/* Disabled Navigation Items */\n.nav-item.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.nav-item.disabled:hover {\n  background-color: transparent;\n  transform: none;\n}\n\n/* Coming Soon Badge */\n.coming-soon-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 0.125rem 0.5rem;\n  border-radius: var(--mat-sys-corner-full);\n  font: var(--mat-sys-label-small);\n  font-size: 0.625rem;\n  font-weight: 700;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  background: linear-gradient(135deg, var(--mat-sys-tertiary-container) 0%, var(--mat-sys-secondary-container) 100%);\n  color: var(--mat-sys-on-tertiary-container);\n  border: 1px solid var(--mat-sys-outline-variant);\n}\n\n/* Mobile Navigation Disabled Items */\n.nav-rail-item.disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.nav-rail-item.disabled:hover {\n  background-color: transparent;\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: 38 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SettingsComponent, { className: "SettingsComponent", filePath: "src/lib/settings/settings.component.ts", lineNumber: 41 }); })();
 //# sourceMappingURL=settings.component.js.map