@memberjunction/ng-explorer-settings 5.34.1 → 5.36.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/dist/lib/application-management/application-management.component.d.ts +0 -1
  2. package/dist/lib/application-management/application-management.component.d.ts.map +1 -1
  3. package/dist/lib/application-management/application-management.component.js +151 -206
  4. package/dist/lib/application-management/application-management.component.js.map +1 -1
  5. package/dist/lib/entity-permissions/entity-permissions.component.d.ts +8 -3
  6. package/dist/lib/entity-permissions/entity-permissions.component.d.ts.map +1 -1
  7. package/dist/lib/entity-permissions/entity-permissions.component.js +247 -411
  8. package/dist/lib/entity-permissions/entity-permissions.component.js.map +1 -1
  9. package/dist/lib/module.d.ts +1 -1
  10. package/dist/lib/module.d.ts.map +1 -1
  11. package/dist/lib/module.js +31 -4
  12. package/dist/lib/module.js.map +1 -1
  13. package/dist/lib/role-management/role-management.component.d.ts +0 -2
  14. package/dist/lib/role-management/role-management.component.d.ts.map +1 -1
  15. package/dist/lib/role-management/role-management.component.js +136 -259
  16. package/dist/lib/role-management/role-management.component.js.map +1 -1
  17. package/dist/lib/sql-logging/sql-logging.component.js +221 -224
  18. package/dist/lib/sql-logging/sql-logging.component.js.map +1 -1
  19. package/dist/lib/user-management/user-management.component.d.ts +12 -3
  20. package/dist/lib/user-management/user-management.component.d.ts.map +1 -1
  21. package/dist/lib/user-management/user-management.component.js +356 -463
  22. package/dist/lib/user-management/user-management.component.js.map +1 -1
  23. package/package.json +19 -19
package/dist/lib/application-management/application-management.component.js CHANGED
@@ -16,21 +16,21 @@ import * as i2 from "@memberjunction/ng-ui-components";
16
16
  import * as i3 from "./application-dialog/application-dialog.component";
17
17
  import * as i4 from "@angular/common";
18
18
  const _forTrack0 = ($index, $item) => $item.ID;
19
- function ApplicationManagementComponent_Conditional_60_Template(rf, ctx) { if (rf & 1) {
20
- i0.ɵɵelementStart(0, "div", 34);
21
- i0.ɵɵelement(1, "mj-loading", 39);
19
+ function ApplicationManagementComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
20
+ i0.ɵɵelementStart(0, "div", 13);
21
+ i0.ɵɵelement(1, "mj-loading", 18);
22
22
  i0.ɵɵelementEnd();
23
23
  } }
24
- function ApplicationManagementComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
24
+ function ApplicationManagementComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
25
25
  const _r1 = i0.ɵɵgetCurrentView();
26
- i0.ɵɵelementStart(0, "div", 35)(1, "div", 40);
27
- i0.ɵɵelement(2, "i", 41);
28
- i0.ɵɵelementStart(3, "p", 42);
26
+ i0.ɵɵelementStart(0, "div", 14)(1, "div", 19);
27
+ i0.ɵɵelement(2, "i", 20);
28
+ i0.ɵɵelementStart(3, "p", 21);
29
29
  i0.ɵɵtext(4);
30
30
  i0.ɵɵelementEnd();
31
- i0.ɵɵelementStart(5, "button", 43);
32
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_61_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
33
- i0.ɵɵelement(6, "i", 44);
31
+ i0.ɵɵelementStart(5, "button", 22);
32
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
33
+ i0.ɵɵelement(6, "i", 23);
34
34
  i0.ɵɵtext(7, " Try Again ");
35
35
  i0.ɵɵelementEnd()()();
36
36
  } if (rf & 2) {
@@ -38,18 +38,18 @@ function ApplicationManagementComponent_Conditional_61_Template(rf, ctx) { if (r
38
38
  i0.ɵɵadvance(4);
39
39
  i0.ɵɵtextInterpolate(ctx_r1.error);
40
40
  } }
41
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
42
- i0.ɵɵelementStart(0, "span", 82);
41
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
42
+ i0.ɵɵelementStart(0, "span", 61);
43
43
  i0.ɵɵtext(1, "Public");
44
44
  i0.ɵɵelementEnd();
45
45
  } }
46
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
47
- i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
46
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
47
+ i0.ɵɵelementStart(0, "div", 58)(1, "div", 59);
48
48
  i0.ɵɵtext(2);
49
49
  i0.ɵɵelementEnd();
50
- i0.ɵɵelementStart(3, "div", 81);
51
- i0.ɵɵconditionalCreate(4, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template, 2, 0, "span", 82);
52
- i0.ɵɵelementStart(5, "span", 83);
50
+ i0.ɵɵelementStart(3, "div", 60);
51
+ i0.ɵɵconditionalCreate(4, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template, 2, 0, "span", 61);
52
+ i0.ɵɵelementStart(5, "span", 62);
53
53
  i0.ɵɵtext(6);
54
54
  i0.ɵɵelementEnd()()();
55
55
  } if (rf & 2) {
@@ -61,17 +61,17 @@ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Cond
61
61
  i0.ɵɵadvance(2);
62
62
  i0.ɵɵtextInterpolate1("Order: ", appEntity_r6.Sequence);
63
63
  } }
64
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
65
- i0.ɵɵconditionalCreate(0, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template, 7, 3, "div", 79);
64
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
65
+ i0.ɵɵconditionalCreate(0, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Conditional_0_Template, 7, 3, "div", 58);
66
66
  } if (rf & 2) {
67
67
  let tmp_23_0;
68
68
  const appEntity_r6 = ctx.$implicit;
69
69
  const ctx_r1 = i0.ɵɵnextContext(5);
70
70
  i0.ɵɵconditional((tmp_23_0 = ctx_r1.getEntityInfo(appEntity_r6.EntityID)) ? 0 : -1, tmp_23_0);
71
71
  } }
72
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_Template(rf, ctx) { if (rf & 1) {
73
- i0.ɵɵelementStart(0, "div", 77);
74
- i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template, 1, 1, null, null, _forTrack0);
72
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_Template(rf, ctx) { if (rf & 1) {
73
+ i0.ɵɵelementStart(0, "div", 56);
74
+ i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_For_2_Template, 1, 1, null, null, _forTrack0);
75
75
  i0.ɵɵelementEnd();
76
76
  } if (rf & 2) {
77
77
  const app_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -79,61 +79,61 @@ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Cond
79
79
  i0.ɵɵadvance();
80
80
  i0.ɵɵrepeater(ctx_r1.getAppEntities(app_r4.ID));
81
81
  } }
82
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_39_Template(rf, ctx) { if (rf & 1) {
83
- i0.ɵɵelementStart(0, "p", 78);
82
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_39_Template(rf, ctx) { if (rf & 1) {
83
+ i0.ɵɵelementStart(0, "p", 57);
84
84
  i0.ɵɵtext(1, "No entities configured for this application");
85
85
  i0.ɵɵelementEnd();
86
86
  } }
87
- function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
87
+ function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
88
88
  const _r5 = i0.ɵɵgetCurrentView();
89
- i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
90
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
91
- i0.ɵɵelementStart(2, "span", 57);
89
+ i0.ɵɵelementStart(0, "div", 43)(1, "div", 44);
90
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
91
+ i0.ɵɵelementStart(2, "span", 35);
92
92
  i0.ɵɵtext(3);
93
93
  i0.ɵɵelementEnd();
94
- i0.ɵɵelementStart(4, "div", 67)(5, "button", 59);
95
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
96
- i0.ɵɵelement(6, "i", 60);
97
- i0.ɵɵelementStart(7, "span", 68);
94
+ i0.ɵɵelementStart(4, "div", 45)(5, "button", 37);
95
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
96
+ i0.ɵɵelement(6, "i", 38);
97
+ i0.ɵɵelementStart(7, "span", 46);
98
98
  i0.ɵɵtext(8, "Edit");
99
99
  i0.ɵɵelementEnd()();
100
- i0.ɵɵelementStart(9, "button", 61);
101
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
102
- i0.ɵɵelement(10, "i", 62);
103
- i0.ɵɵelementStart(11, "span", 68);
100
+ i0.ɵɵelementStart(9, "button", 39);
101
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r5); const app_r4 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
102
+ i0.ɵɵelement(10, "i", 40);
103
+ i0.ɵɵelementStart(11, "span", 46);
104
104
  i0.ɵɵtext(12, "Delete");
105
105
  i0.ɵɵelementEnd()()()();
106
- i0.ɵɵelementStart(13, "div", 69)(14, "div", 70);
107
- i0.ɵɵelement(15, "i", 71);
108
- i0.ɵɵelementStart(16, "span", 14);
106
+ i0.ɵɵelementStart(13, "div", 47)(14, "div", 48);
107
+ i0.ɵɵelement(15, "i", 49);
108
+ i0.ɵɵelementStart(16, "span", 50);
109
109
  i0.ɵɵtext(17, "Entities:");
110
110
  i0.ɵɵelementEnd();
111
- i0.ɵɵelementStart(18, "span", 72);
111
+ i0.ɵɵelementStart(18, "span", 51);
112
112
  i0.ɵɵtext(19);
113
113
  i0.ɵɵelementEnd()();
114
- i0.ɵɵelementStart(20, "div", 70);
115
- i0.ɵɵelement(21, "i", 73);
116
- i0.ɵɵelementStart(22, "span", 14);
114
+ i0.ɵɵelementStart(20, "div", 48);
115
+ i0.ɵɵelement(21, "i", 52);
116
+ i0.ɵɵelementStart(22, "span", 50);
117
117
  i0.ɵɵtext(23, "Created:");
118
118
  i0.ɵɵelementEnd();
119
- i0.ɵɵelementStart(24, "span", 72);
119
+ i0.ɵɵelementStart(24, "span", 51);
120
120
  i0.ɵɵtext(25);
121
121
  i0.ɵɵpipe(26, "date");
122
122
  i0.ɵɵelementEnd()();
123
- i0.ɵɵelementStart(27, "div", 70);
124
- i0.ɵɵelement(28, "i", 74);
125
- i0.ɵɵelementStart(29, "span", 14);
123
+ i0.ɵɵelementStart(27, "div", 48);
124
+ i0.ɵɵelement(28, "i", 53);
125
+ i0.ɵɵelementStart(29, "span", 50);
126
126
  i0.ɵɵtext(30, "Updated:");
127
127
  i0.ɵɵelementEnd();
128
- i0.ɵɵelementStart(31, "span", 72);
128
+ i0.ɵɵelementStart(31, "span", 51);
129
129
  i0.ɵɵtext(32);
130
130
  i0.ɵɵpipe(33, "date");
131
131
  i0.ɵɵelementEnd()()();
132
- i0.ɵɵelementStart(34, "div", 75)(35, "h4", 76);
133
- i0.ɵɵelement(36, "i", 71);
132
+ i0.ɵɵelementStart(34, "div", 54)(35, "h4", 55);
133
+ i0.ɵɵelement(36, "i", 49);
134
134
  i0.ɵɵtext(37, " Application Entities ");
135
135
  i0.ɵɵelementEnd();
136
- i0.ɵɵconditionalCreate(38, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_Template, 3, 0, "div", 77)(39, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_39_Template, 2, 0, "p", 78);
136
+ i0.ɵɵconditionalCreate(38, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_38_Template, 3, 0, "div", 56)(39, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Conditional_39_Template, 2, 0, "p", 57);
137
137
  i0.ɵɵelementEnd()();
138
138
  } if (rf & 2) {
139
139
  const app_r4 = i0.ɵɵnextContext().$implicit;
@@ -155,36 +155,36 @@ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Temp
155
155
  i0.ɵɵadvance(6);
156
156
  i0.ɵɵconditional(ctx_r1.getAppEntities(app_r4.ID).length > 0 ? 38 : 39);
157
157
  } }
158
- function ApplicationManagementComponent_Conditional_62_For_3_Template(rf, ctx) { if (rf & 1) {
158
+ function ApplicationManagementComponent_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
159
159
  const _r3 = i0.ɵɵgetCurrentView();
160
- i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
161
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_div_click_1_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleAppExpansion(app_r4.ID)); });
162
- i0.ɵɵelementStart(2, "div", 50)(3, "div", 51);
163
- i0.ɵɵelement(4, "i", 52);
160
+ i0.ɵɵelementStart(0, "div", 26)(1, "div", 27);
161
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Template_div_click_1_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleAppExpansion(app_r4.ID)); });
162
+ i0.ɵɵelementStart(2, "div", 28)(3, "div", 29);
163
+ i0.ɵɵelement(4, "i", 30);
164
164
  i0.ɵɵelementEnd();
165
- i0.ɵɵelementStart(5, "div", 53)(6, "h3", 54);
165
+ i0.ɵɵelementStart(5, "div", 31)(6, "h3", 32);
166
166
  i0.ɵɵtext(7);
167
167
  i0.ɵɵelementEnd();
168
- i0.ɵɵelementStart(8, "p", 55);
168
+ i0.ɵɵelementStart(8, "p", 33);
169
169
  i0.ɵɵtext(9);
170
170
  i0.ɵɵelementEnd()()();
171
- i0.ɵɵelementStart(10, "div", 56)(11, "span", 57);
171
+ i0.ɵɵelementStart(10, "div", 34)(11, "span", 35);
172
172
  i0.ɵɵtext(12);
173
173
  i0.ɵɵelementEnd();
174
- i0.ɵɵelementStart(13, "div", 58);
175
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
176
- i0.ɵɵelementStart(14, "button", 59);
177
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_button_click_14_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
178
- i0.ɵɵelement(15, "i", 60);
174
+ i0.ɵɵelementStart(13, "div", 36);
175
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
176
+ i0.ɵɵelementStart(14, "button", 37);
177
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Template_button_click_14_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.editApplication(app_r4)); });
178
+ i0.ɵɵelement(15, "i", 38);
179
179
  i0.ɵɵelementEnd();
180
- i0.ɵɵelementStart(16, "button", 61);
181
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_button_click_16_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
182
- i0.ɵɵelement(17, "i", 62);
180
+ i0.ɵɵelementStart(16, "button", 39);
181
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_17_For_2_Template_button_click_16_listener() { const app_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.confirmDeleteApplication(app_r4)); });
182
+ i0.ɵɵelement(17, "i", 40);
183
183
  i0.ɵɵelementEnd()();
184
- i0.ɵɵelementStart(18, "button", 63);
185
- i0.ɵɵelement(19, "i", 64);
184
+ i0.ɵɵelementStart(18, "button", 41);
185
+ i0.ɵɵelement(19, "i", 42);
186
186
  i0.ɵɵelementEnd()()();
187
- i0.ɵɵconditionalCreate(20, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template, 40, 15, "div", 65);
187
+ i0.ɵɵconditionalCreate(20, ApplicationManagementComponent_Conditional_17_For_2_Conditional_20_Template, 40, 15, "div", 43);
188
188
  i0.ɵɵelementEnd();
189
189
  } if (rf & 2) {
190
190
  const app_r4 = ctx.$implicit;
@@ -209,67 +209,67 @@ function ApplicationManagementComponent_Conditional_62_For_3_Template(rf, ctx) {
209
209
  i0.ɵɵadvance(4);
210
210
  i0.ɵɵconditional(ctx_r1.isAppExpanded(app_r4.ID) ? 20 : -1);
211
211
  } }
212
- function ApplicationManagementComponent_Conditional_62_Conditional_4_Template(rf, ctx) { if (rf & 1) {
213
- i0.ɵɵelementStart(0, "div", 47);
214
- i0.ɵɵelement(1, "i", 84);
215
- i0.ɵɵelementStart(2, "p", 85);
212
+ function ApplicationManagementComponent_Conditional_17_Conditional_3_Template(rf, ctx) { if (rf & 1) {
213
+ i0.ɵɵelementStart(0, "div", 25);
214
+ i0.ɵɵelement(1, "i", 63);
215
+ i0.ɵɵelementStart(2, "p", 64);
216
216
  i0.ɵɵtext(3, "No applications found");
217
217
  i0.ɵɵelementEnd();
218
- i0.ɵɵelementStart(4, "p", 86);
218
+ i0.ɵɵelementStart(4, "p", 65);
219
219
  i0.ɵɵtext(5, "Try adjusting your filters or create a new application");
220
220
  i0.ɵɵelementEnd()();
221
221
  } }
222
- function ApplicationManagementComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
223
- i0.ɵɵelementStart(0, "div", 36)(1, "div", 45);
224
- i0.ɵɵrepeaterCreate(2, ApplicationManagementComponent_Conditional_62_For_3_Template, 21, 13, "div", 46, _forTrack0);
225
- i0.ɵɵconditionalCreate(4, ApplicationManagementComponent_Conditional_62_Conditional_4_Template, 6, 0, "div", 47);
226
- i0.ɵɵelementEnd()();
222
+ function ApplicationManagementComponent_Conditional_17_Template(rf, ctx) { if (rf & 1) {
223
+ i0.ɵɵelementStart(0, "div", 15);
224
+ i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_17_For_2_Template, 21, 13, "div", 24, _forTrack0);
225
+ i0.ɵɵconditionalCreate(3, ApplicationManagementComponent_Conditional_17_Conditional_3_Template, 6, 0, "div", 25);
226
+ i0.ɵɵelementEnd();
227
227
  } if (rf & 2) {
228
228
  const ctx_r1 = i0.ɵɵnextContext();
229
- i0.ɵɵadvance(2);
229
+ i0.ɵɵadvance();
230
230
  i0.ɵɵrepeater(ctx_r1.filteredApplications);
231
231
  i0.ɵɵadvance(2);
232
- i0.ɵɵconditional(ctx_r1.filteredApplications.length === 0 ? 4 : -1);
232
+ i0.ɵɵconditional(ctx_r1.filteredApplications.length === 0 ? 3 : -1);
233
233
  } }
234
- function ApplicationManagementComponent_Conditional_64_Conditional_19_Template(rf, ctx) { if (rf & 1) {
235
- i0.ɵɵelement(0, "i", 100);
234
+ function ApplicationManagementComponent_Conditional_19_Conditional_19_Template(rf, ctx) { if (rf & 1) {
235
+ i0.ɵɵelement(0, "i", 79);
236
236
  i0.ɵɵtext(1, " Deleting... ");
237
237
  } }
238
- function ApplicationManagementComponent_Conditional_64_Conditional_20_Template(rf, ctx) { if (rf & 1) {
239
- i0.ɵɵelement(0, "i", 101);
238
+ function ApplicationManagementComponent_Conditional_19_Conditional_20_Template(rf, ctx) { if (rf & 1) {
239
+ i0.ɵɵelement(0, "i", 80);
240
240
  i0.ɵɵtext(1, " Delete Application ");
241
241
  } }
242
- function ApplicationManagementComponent_Conditional_64_Template(rf, ctx) { if (rf & 1) {
242
+ function ApplicationManagementComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
243
243
  const _r7 = i0.ɵɵgetCurrentView();
244
- i0.ɵɵelementStart(0, "div", 87);
245
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
246
- i0.ɵɵelementStart(1, "div", 88);
247
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
248
- i0.ɵɵelementStart(2, "div", 89)(3, "h3", 90);
249
- i0.ɵɵelement(4, "i", 91);
244
+ i0.ɵɵelementStart(0, "div", 66);
245
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_19_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
246
+ i0.ɵɵelementStart(1, "div", 67);
247
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_19_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
248
+ i0.ɵɵelementStart(2, "div", 68)(3, "h3", 69);
249
+ i0.ɵɵelement(4, "i", 70);
250
250
  i0.ɵɵtext(5, " Confirm Delete ");
251
251
  i0.ɵɵelementEnd();
252
- i0.ɵɵelementStart(6, "button", 92);
253
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
254
- i0.ɵɵelement(7, "i", 93);
252
+ i0.ɵɵelementStart(6, "button", 71);
253
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_19_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
254
+ i0.ɵɵelement(7, "i", 72);
255
255
  i0.ɵɵelementEnd()();
256
- i0.ɵɵelementStart(8, "div", 94)(9, "p");
256
+ i0.ɵɵelementStart(8, "div", 73)(9, "p");
257
257
  i0.ɵɵtext(10, "Are you sure you want to delete the application ");
258
258
  i0.ɵɵelementStart(11, "strong");
259
259
  i0.ɵɵtext(12);
260
260
  i0.ɵɵelementEnd();
261
261
  i0.ɵɵtext(13, "?");
262
262
  i0.ɵɵelementEnd();
263
- i0.ɵɵelementStart(14, "p", 95);
264
- i0.ɵɵelement(15, "i", 96);
263
+ i0.ɵɵelementStart(14, "p", 74);
264
+ i0.ɵɵelement(15, "i", 75);
265
265
  i0.ɵɵtext(16, " This will remove all entity associations for this application. ");
266
266
  i0.ɵɵelementEnd()();
267
- i0.ɵɵelementStart(17, "div", 97)(18, "button", 98);
268
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteApplication()); });
269
- i0.ɵɵconditionalCreate(19, ApplicationManagementComponent_Conditional_64_Conditional_19_Template, 2, 0)(20, ApplicationManagementComponent_Conditional_64_Conditional_20_Template, 2, 0);
267
+ i0.ɵɵelementStart(17, "div", 76)(18, "button", 77);
268
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_19_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteApplication()); });
269
+ i0.ɵɵconditionalCreate(19, ApplicationManagementComponent_Conditional_19_Conditional_19_Template, 2, 0)(20, ApplicationManagementComponent_Conditional_19_Conditional_20_Template, 2, 0);
270
270
  i0.ɵɵelementEnd();
271
- i0.ɵɵelementStart(21, "button", 99);
272
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
271
+ i0.ɵɵelementStart(21, "button", 78);
272
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_19_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
273
273
  i0.ɵɵtext(22, " Cancel ");
274
274
  i0.ɵɵelementEnd()()()();
275
275
  } if (rf & 2) {
@@ -425,10 +425,6 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
425
425
  };
426
426
  }
427
427
  // Public methods for template
428
- onSearchChange(event) {
429
- const value = event.target.value;
430
- this.updateFilter({ search: value });
431
- }
432
428
  onStatusFilterChange(status) {
433
429
  this.updateFilter({ status });
434
430
  }
@@ -437,6 +433,12 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
437
433
  ...this.filters$.value,
438
434
  ...partial
439
435
  });
436
+ // Discrete changes (chips) apply immediately. Text search still goes
437
+ // through the 300ms debounce in setupFilterSubscription.
438
+ if (!('search' in partial)) {
439
+ this.applyFilters();
440
+ this.cdr.markForCheck();
441
+ }
440
442
  }
441
443
  toggleAppExpansion(appId) {
442
444
  this.expandedAppId = this.expandedAppId === appId ? null : appId;
@@ -565,120 +567,63 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
565
567
  this.loadInitialData();
566
568
  }
567
569
  static ɵfac = function ApplicationManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationManagementComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone)); };
568
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 65, vars: 20, consts: [[1, "application-management-container"], [1, "sticky-header"], ["role", "toolbar", "aria-label", "Application management actions", 1, "action-buttons"], ["mjButton", "", "variant", "secondary", "aria-label", "Refresh applications", 1, "mj-btn-icon-mobile", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "btn-text"], ["mjButton", "", "variant", "primary", "aria-label", "Add new application", 1, "mj-btn-icon-mobile", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], ["role", "region", "aria-label", "Application statistics", 1, "mj-grid-4"], [1, "mj-card"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-cubes"], [1, "stat-content"], ["aria-label", "Total applications count", 1, "stat-value"], [1, "stat-label"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], ["aria-label", "Active applications count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-entities"], [1, "fa-solid", "fa-database"], ["aria-label", "Total entities count", 1, "stat-value"], ["aria-hidden", "true", 1, "stat-icon", "stat-icon-public"], [1, "fa-solid", "fa-globe"], ["aria-label", "Public entities count", 1, "stat-value"], ["role", "search", "aria-label", "Filter applications", 1, "filters-section"], [1, "filters-row"], [1, "mj-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search applications by name or description...", "aria-label", "Search applications", 1, "mj-search-input", 3, "input", "value"], [1, "mj-filter-group"], ["id", "status-filter-label", 1, "mj-filter-label"], ["role", "group", "aria-labelledby", "status-filter-label", 1, "mj-filter-buttons"], ["mjButton", "", 3, "click", "variant"], [1, "scrollable-content"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["role", "alert", 1, "error-container"], [1, "content-area"], [3, "result", "visible", "data"], ["role", "presentation", 1, "modal-backdrop"], ["text", "Loading applications..."], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-refresh"], ["role", "list", 1, "applications-list"], ["role", "listitem", 1, "app-card", 3, "expanded"], [1, "empty-state"], ["role", "listitem", 1, "app-card"], ["role", "button", 1, "app-header", 3, "click"], [1, "app-info"], [1, "app-icon-wrapper"], ["aria-hidden", "true"], [1, "app-details"], [1, "app-name"], [1, "app-description"], [1, "app-meta"], [1, "status-badge"], [1, "app-actions", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-edit"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "app-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "app-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "entities-section"], [1, "section-title"], [1, "entities-grid"], [1, "no-entities"], [1, "entity-item"], [1, "entity-name"], [1, "entity-meta"], [1, "entity-badge", "public"], [1, "entity-sequence"], ["aria-hidden", "true", 1, "fa-solid", "fa-cubes", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-description", 1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["id", "delete-dialog-description", 1, "modal-body"], [1, "text-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-warning"], [1, "modal-footer"], ["mjButton", "", "variant", "danger", 3, "click", "disabled"], ["mjButton", "", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"]], template: function ApplicationManagementComponent_Template(rf, ctx) { if (rf & 1) {
569
- i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
570
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_3_listener() { return ctx.refreshData(); });
571
- i0.ɵɵelement(4, "i", 4);
572
- i0.ɵɵelementStart(5, "span", 5);
573
- i0.ɵɵtext(6, "Refresh");
574
- i0.ɵɵelementEnd()();
575
- i0.ɵɵelementStart(7, "button", 6);
576
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_7_listener() { return ctx.createNewApplication(); });
577
- i0.ɵɵelement(8, "i", 7);
578
- i0.ɵɵelementStart(9, "span", 5);
579
- i0.ɵɵtext(10, "Add Application");
580
- i0.ɵɵelementEnd()()();
581
- i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
582
- i0.ɵɵelement(14, "i", 11);
570
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 20, vars: 13, consts: [["AriaLabel", "Filter applications", "Title", "Applications", "Subtitle", "Configure applications and their entity associations"], ["meta", ""], ["Label", "applications", 3, "Count", "Total"], ["toolbar", ""], ["Placeholder", "Search applications by name or description...", 3, "ValueChange", "Value"], ["role", "group", "aria-label", "Filter by status", 1, "status-chips"], ["Label", "All", 3, "Clicked", "Active"], ["Label", "Active", 3, "Clicked", "Active"], ["Label", "Inactive", 3, "Clicked", "Active"], ["actions", ""], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm", "aria-label", "Add new application", 3, "click"], [1, "fa-solid", "fa-plus"], ["role", "status", "aria-live", "polite", 1, "loading-container"], ["role", "alert", 1, "error-container"], ["role", "list", 1, "applications-list"], [3, "result", "visible", "data"], ["role", "presentation", 1, "modal-backdrop"], ["text", "Loading applications..."], [1, "error-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-refresh"], ["role", "listitem", 1, "app-card", 3, "expanded"], [1, "empty-state"], ["role", "listitem", 1, "app-card"], ["role", "button", 1, "app-header", 3, "click"], [1, "app-info"], [1, "app-icon-wrapper"], ["aria-hidden", "true"], [1, "app-details"], [1, "app-name"], [1, "app-description"], [1, "app-meta"], [1, "status-badge"], [1, "app-actions", 3, "click"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-edit"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-trash"], ["aria-label", "Toggle details", 1, "expand-btn"], ["aria-hidden", "true", 1, "fa-solid", "fa-chevron-down"], [1, "app-content"], [1, "mobile-actions-bar", 3, "click"], [1, "mobile-action-buttons"], [1, "btn-label"], [1, "app-stats"], [1, "stat-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "stat-label"], [1, "stat-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-calendar"], ["aria-hidden", "true", 1, "fa-solid", "fa-clock"], [1, "entities-section"], [1, "section-title"], [1, "entities-grid"], [1, "no-entities"], [1, "entity-item"], [1, "entity-name"], [1, "entity-meta"], [1, "entity-badge", "public"], [1, "entity-sequence"], ["aria-hidden", "true", 1, "fa-solid", "fa-cubes", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "delete-dialog-title", "aria-describedby", "delete-dialog-description", 1, "modal-dialog", 3, "click"], [1, "modal-header"], ["id", "delete-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle", "text-danger"], ["aria-label", "Close dialog", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], ["id", "delete-dialog-description", 1, "modal-body"], [1, "text-warning"], ["aria-hidden", "true", 1, "fa-solid", "fa-warning"], [1, "modal-footer"], ["mjButton", "", "variant", "danger", 3, "click", "disabled"], ["mjButton", "", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-trash"]], template: function ApplicationManagementComponent_Template(rf, ctx) { if (rf & 1) {
571
+ i0.ɵɵelementStart(0, "mj-page-header-interior", 0)(1, "div", 1);
572
+ i0.ɵɵelement(2, "mj-stat-badge", 2);
583
573
  i0.ɵɵelementEnd();
584
- i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
585
- i0.ɵɵtext(17);
574
+ i0.ɵɵelementStart(3, "div", 3)(4, "mj-page-search", 4);
575
+ i0.ɵɵlistener("ValueChange", function ApplicationManagementComponent_Template_mj_page_search_ValueChange_4_listener($event) { return ctx.updateFilter({ search: $event }); });
586
576
  i0.ɵɵelementEnd();
587
- i0.ɵɵelementStart(18, "div", 14);
588
- i0.ɵɵtext(19, "Total Applications");
589
- i0.ɵɵelementEnd()()();
590
- i0.ɵɵelementStart(20, "div", 9)(21, "div", 15);
591
- i0.ɵɵelement(22, "i", 16);
577
+ i0.ɵɵelementStart(5, "div", 5)(6, "mj-filter-chip", 6);
578
+ i0.ɵɵlistener("Clicked", function ApplicationManagementComponent_Template_mj_filter_chip_Clicked_6_listener() { return ctx.onStatusFilterChange("all"); });
592
579
  i0.ɵɵelementEnd();
593
- i0.ɵɵelementStart(23, "div", 12)(24, "div", 17);
594
- i0.ɵɵtext(25);
580
+ i0.ɵɵelementStart(7, "mj-filter-chip", 7);
581
+ i0.ɵɵlistener("Clicked", function ApplicationManagementComponent_Template_mj_filter_chip_Clicked_7_listener() { return ctx.onStatusFilterChange("active"); });
595
582
  i0.ɵɵelementEnd();
596
- i0.ɵɵelementStart(26, "div", 14);
597
- i0.ɵɵtext(27, "Active Applications");
583
+ i0.ɵɵelementStart(8, "mj-filter-chip", 8);
584
+ i0.ɵɵlistener("Clicked", function ApplicationManagementComponent_Template_mj_filter_chip_Clicked_8_listener() { return ctx.onStatusFilterChange("inactive"); });
598
585
  i0.ɵɵelementEnd()()();
599
- i0.ɵɵelementStart(28, "div", 9)(29, "div", 18);
600
- i0.ɵɵelement(30, "i", 19);
586
+ i0.ɵɵelementStart(9, "div", 9)(10, "mj-refresh-button", 10);
587
+ i0.ɵɵlistener("Clicked", function ApplicationManagementComponent_Template_mj_refresh_button_Clicked_10_listener() { return ctx.refreshData(); });
601
588
  i0.ɵɵelementEnd();
602
- i0.ɵɵelementStart(31, "div", 12)(32, "div", 20);
603
- i0.ɵɵtext(33);
604
- i0.ɵɵelementEnd();
605
- i0.ɵɵelementStart(34, "div", 14);
606
- i0.ɵɵtext(35, "Total Entities");
589
+ i0.ɵɵelementStart(11, "button", 11);
590
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_11_listener() { return ctx.createNewApplication(); });
591
+ i0.ɵɵelement(12, "i", 12);
592
+ i0.ɵɵtext(13, " Add Application ");
607
593
  i0.ɵɵelementEnd()()();
608
- i0.ɵɵelementStart(36, "div", 9)(37, "div", 21);
609
- i0.ɵɵelement(38, "i", 22);
610
- i0.ɵɵelementEnd();
611
- i0.ɵɵelementStart(39, "div", 12)(40, "div", 23);
612
- i0.ɵɵtext(41);
613
- i0.ɵɵelementEnd();
614
- i0.ɵɵelementStart(42, "div", 14);
615
- i0.ɵɵtext(43, "Public Entities");
616
- i0.ɵɵelementEnd()()()();
617
- i0.ɵɵelementStart(44, "div", 24)(45, "div", 25)(46, "div", 26);
618
- i0.ɵɵelement(47, "i", 27);
619
- i0.ɵɵelementStart(48, "input", 28);
620
- i0.ɵɵlistener("input", function ApplicationManagementComponent_Template_input_input_48_listener($event) { return ctx.onSearchChange($event); });
621
- i0.ɵɵelementEnd()();
622
- i0.ɵɵelementStart(49, "div", 29)(50, "label", 30);
623
- i0.ɵɵtext(51, "Status");
594
+ i0.ɵɵelementStart(14, "mj-page-body-interior");
595
+ i0.ɵɵconditionalCreate(15, ApplicationManagementComponent_Conditional_15_Template, 2, 0, "div", 13);
596
+ i0.ɵɵconditionalCreate(16, ApplicationManagementComponent_Conditional_16_Template, 8, 1, "div", 14);
597
+ i0.ɵɵconditionalCreate(17, ApplicationManagementComponent_Conditional_17_Template, 4, 1, "div", 15);
624
598
  i0.ɵɵelementEnd();
625
- i0.ɵɵelementStart(52, "div", 31)(53, "button", 32);
626
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_53_listener() { return ctx.onStatusFilterChange("all"); });
627
- i0.ɵɵtext(54, " All ");
628
- i0.ɵɵelementEnd();
629
- i0.ɵɵelementStart(55, "button", 32);
630
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_55_listener() { return ctx.onStatusFilterChange("active"); });
631
- i0.ɵɵtext(56, " Active ");
632
- i0.ɵɵelementEnd();
633
- i0.ɵɵelementStart(57, "button", 32);
634
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_57_listener() { return ctx.onStatusFilterChange("inactive"); });
635
- i0.ɵɵtext(58, " Inactive ");
636
- i0.ɵɵelementEnd()()()()()();
637
- i0.ɵɵelementStart(59, "div", 33);
638
- i0.ɵɵconditionalCreate(60, ApplicationManagementComponent_Conditional_60_Template, 2, 0, "div", 34);
639
- i0.ɵɵconditionalCreate(61, ApplicationManagementComponent_Conditional_61_Template, 8, 1, "div", 35);
640
- i0.ɵɵconditionalCreate(62, ApplicationManagementComponent_Conditional_62_Template, 5, 1, "div", 36);
641
- i0.ɵɵelementEnd();
642
- i0.ɵɵelementStart(63, "mj-application-dialog", 37);
643
- i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_63_listener($event) { return ctx.onApplicationDialogResult($event); });
644
- i0.ɵɵelementEnd();
645
- i0.ɵɵconditionalCreate(64, ApplicationManagementComponent_Conditional_64_Template, 23, 3, "div", 38);
599
+ i0.ɵɵelementStart(18, "mj-application-dialog", 16);
600
+ i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_18_listener($event) { return ctx.onApplicationDialogResult($event); });
646
601
  i0.ɵɵelementEnd();
602
+ i0.ɵɵconditionalCreate(19, ApplicationManagementComponent_Conditional_19_Template, 23, 3, "div", 17);
647
603
  } if (rf & 2) {
648
- i0.ɵɵadvance(3);
649
- i0.ɵɵproperty("disabled", ctx.isLoading);
650
- i0.ɵɵadvance();
651
- i0.ɵɵclassProp("fa-spin", ctx.isLoading);
652
- i0.ɵɵadvance(13);
653
- i0.ɵɵtextInterpolate(ctx.stats.totalApplications);
654
- i0.ɵɵadvance(8);
655
- i0.ɵɵtextInterpolate(ctx.stats.activeApplications);
656
- i0.ɵɵadvance(8);
657
- i0.ɵɵtextInterpolate(ctx.stats.totalEntities);
658
- i0.ɵɵadvance(8);
659
- i0.ɵɵtextInterpolate(ctx.stats.publicEntities);
660
- i0.ɵɵadvance(7);
661
- i0.ɵɵproperty("value", ctx.filters$.value.search);
662
- i0.ɵɵadvance(5);
663
- i0.ɵɵproperty("variant", ctx.filters$.value.status === "all" ? "primary" : "flat");
664
- i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "all");
665
604
  i0.ɵɵadvance(2);
666
- i0.ɵɵproperty("variant", ctx.filters$.value.status === "active" ? "primary" : "flat");
667
- i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "active");
605
+ i0.ɵɵproperty("Count", ctx.filteredApplications.length)("Total", ctx.applications.length);
668
606
  i0.ɵɵadvance(2);
669
- i0.ɵɵproperty("variant", ctx.filters$.value.status === "inactive" ? "primary" : "flat");
670
- i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "inactive");
671
- i0.ɵɵadvance(3);
672
- i0.ɵɵconditional(ctx.isLoading ? 60 : -1);
607
+ i0.ɵɵproperty("Value", ctx.filters$.value.search);
608
+ i0.ɵɵadvance(2);
609
+ i0.ɵɵproperty("Active", ctx.filters$.value.status === "all");
610
+ i0.ɵɵadvance();
611
+ i0.ɵɵproperty("Active", ctx.filters$.value.status === "active");
612
+ i0.ɵɵadvance();
613
+ i0.ɵɵproperty("Active", ctx.filters$.value.status === "inactive");
614
+ i0.ɵɵadvance(2);
615
+ i0.ɵɵproperty("Loading", ctx.isLoading);
616
+ i0.ɵɵadvance(5);
617
+ i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
673
618
  i0.ɵɵadvance();
674
- i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 61 : -1);
619
+ i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 16 : -1);
675
620
  i0.ɵɵadvance();
676
- i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 62 : -1);
621
+ i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 17 : -1);
677
622
  i0.ɵɵadvance();
678
623
  i0.ɵɵproperty("visible", ctx.showApplicationDialog)("data", ctx.applicationDialogData);
679
624
  i0.ɵɵadvance();
680
- i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ? 64 : -1);
681
- } }, dependencies: [i1.LoadingComponent, i2.MJButtonDirective, i3.ApplicationDialogComponent, i4.DatePipe], styles: ["\n\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\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n z-index: 10;\n}\n\n\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem 2.5rem;\n }\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .action-buttons[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons[_ngcontent-%COMP%] {\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] .btn-text[_ngcontent-%COMP%] {\n display: none;\n }\n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mj-radius-full);\n }\n\n .mj-btn-icon-mobile[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n}\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n}\n\n\n\n.mj-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n padding: 1rem;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mj-border-default);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem;\n }\n}\n\n\n\n\n\n.stat-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon[_ngcontent-%COMP%] {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n\n\n\n\n.stat-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 2rem;\n }\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 1rem 1.25rem;\n }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row[_ngcontent-%COMP%] {\n gap: 1.5rem;\n }\n}\n\n.mj-filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-full);\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-primary[_ngcontent-%COMP%] {\n background-color: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n font-size: 1rem;\n pointer-events: none;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n font-size: 1rem;\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mj-bg-page);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within .mj-search-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-xl);\n box-shadow: var(--mj-shadow-sm);\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\n}\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border-radius: var(--mj-radius-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error);\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n}\n\n\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n display: none;\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n color: var(--mj-border-default);\n margin-bottom: 1.5rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-text[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-subtext[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3.5rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n color: var(--mj-text-primary);\n margin: 0 0 1.5rem 0;\n}\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 1rem;\n animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl);\n box-shadow: var(--mj-shadow-2xl);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n line-height: 1.5;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n .modal-dialog[_ngcontent-%COMP%] {\n width: 95%;\n max-height: 85vh;\n }\n\n .modal-header[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n\n .modal-body[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .modal-footer[_ngcontent-%COMP%] {\n padding: 1rem;\n flex-direction: column;\n }\n\n .modal-footer[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n }\n}\n\n\n\n\n\n.mj-btn[_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-size: 0.875rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-radius-full);\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}\n\n.mj-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n\n\n.mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary-light);\n box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: var(--mj-color-brand-400);\n transform: scale(0.98);\n}\n\n\n\n.mj-btn-secondary[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n color: var(--mj-brand-primary);\n border: 1px solid var(--mj-color-neutral-400);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: var(--mj-color-brand-700);\n border-color: var(--mj-color-brand-700);\n}\n\n\n\n.mj-btn-ghost[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:active:not(:disabled) {\n background: var(--mj-color-brand-700);\n}\n\n\n\n.mj-btn-danger[_ngcontent-%COMP%] {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-error-300);\n box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:active:not(:disabled) {\n background: var(--mj-color-error-200);\n transform: scale(0.98);\n}\n\n\n\n.mj-btn-sm[_ngcontent-%COMP%] {\n padding: 0.5rem 0.875rem;\n font-size: 0.8125rem;\n min-height: 36px;\n}\n\n\n\n.mj-btn-icon-only[_ngcontent-%COMP%] {\n padding: 0.625rem;\n min-width: 44px;\n min-height: 44px;\n}\n\n\n\n.mj-btn-icon-mobile[_ngcontent-%COMP%] {\n gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile[_ngcontent-%COMP%] .btn-text[_ngcontent-%COMP%] {\n display: inline;\n}\n\n\n\n.mj-btn-ghost.mj-btn-danger[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mj-status-error);\n box-shadow: none;\n}\n\n.mj-btn-ghost.mj-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n\n\n\n\n.filter-button[_ngcontent-%COMP%] {\n display: none;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n border: 2px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-full);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n min-width: 44px;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.filter-button[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n\n\n\n\n.filter-modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0;\n}\n\n.filter-modal[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n box-shadow: var(--mj-shadow-2xl);\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n}\n\n.filter-modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 1.375rem;\n}\n\n.filter-modal-close[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-modal-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n padding: 1.25rem 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n margin: 0;\n}\n\n\n\n.filter-options-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.filter-group-label[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin: 0;\n}\n\n.filter-group-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.875rem 1rem;\n background: var(--mj-bg-surface-sunken);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 56px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.filter-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%], \n.filter-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.filter-option-label[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 1rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] .filter-option-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n\n\n\n\n.text-danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.text-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\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%_slideUpFromBottom {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n\n\n\n\n.mj-search-input[_ngcontent-%COMP%]:focus-visible, \nbutton[_ngcontent-%COMP%]:focus-visible, \n.mj-btn[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}", "\n\n\n\n\n\n\n\n\n\n.application-management-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n background: var(--mj-bg-page);\n}\n\n\n\n\n\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-md);\n}\n\n@media (min-width: 768px) {\n .filters-section[_ngcontent-%COMP%] {\n padding: 0.875rem 1rem;\n }\n}\n\n\n\n.mj-filter-group[_ngcontent-%COMP%] .mj-filter-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-ghost[_ngcontent-%COMP%] {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mj-text-secondary);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n box-shadow: var(--mj-shadow-sm);\n }\n\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n box-shadow: var(--mj-shadow-md), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n\n\n.mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n pointer-events: none;\n}\n\n\n\n\n\n.applications-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n\n\n\n\n.app-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-xl);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mj-shadow-lg);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.app-header[_ngcontent-%COMP%] {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mj-bg-surface);\n transition: background-color 0.2s ease;\n}\n\n.app-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.app-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-color-accent-300);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-brand-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n\n\n\n\n.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n\n\n\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item[_ngcontent-%COMP%] {\n padding: 0.75rem;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 0.25rem;\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n\n\n\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n}\n\n.modal-body[_ngcontent-%COMP%] .text-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-500);\n border-radius: var(--mj-radius-md);\n font-weight: 500;\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n .application-management-container[_ngcontent-%COMP%] {\n margin: 0 auto;\n }\n\n .action-buttons[_ngcontent-%COMP%] {\n padding: 1rem 2rem;\n }\n\n .mj-grid-4[_ngcontent-%COMP%] {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 2rem 1rem 2rem;\n padding: 1rem 1.25rem;\n }\n\n .content-area[_ngcontent-%COMP%] {\n padding: 2rem;\n }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n \n\n .sticky-header[_ngcontent-%COMP%] {\n padding: 0;\n }\n\n \n\n .action-buttons[_ngcontent-%COMP%] {\n padding: 0.5rem 0.75rem;\n gap: 0.5rem;\n justify-content: flex-end;\n }\n\n \n\n .mj-grid-4[_ngcontent-%COMP%] {\n display: none !important;\n }\n\n \n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 0.5rem 0.5rem 0.5rem;\n padding: 0.5rem;\n border-radius: var(--mj-radius-md);\n }\n\n .filters-row[_ngcontent-%COMP%] {\n gap: 0.5rem;\n flex-direction: column;\n align-items: stretch;\n }\n\n \n\n .mj-search[_ngcontent-%COMP%] {\n min-width: 100%;\n }\n\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 0.625rem 1rem 0.625rem 2.5rem;\n min-height: 40px;\n font-size: 0.9375rem;\n border-width: 2px;\n border-radius: var(--mj-radius-full);\n }\n\n .mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n left: 0.75rem;\n font-size: 0.875rem;\n }\n\n \n\n .mj-filter-group[_ngcontent-%COMP%] {\n width: 100%;\n }\n\n .mj-filter-group[_ngcontent-%COMP%] .mj-filter-label[_ngcontent-%COMP%] {\n display: none;\n }\n\n .mj-filter-group[_ngcontent-%COMP%] .mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n width: 100%;\n justify-content: stretch;\n }\n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n flex: 1;\n padding: 0.375rem 0.75rem;\n min-height: 36px;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: var(--mj-radius-full);\n background: transparent;\n color: var(--mj-text-secondary);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n \n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%]:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n }\n\n \n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn.mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary) !important;\n color: var(--mj-brand-on-primary) !important;\n box-shadow: var(--mj-shadow-sm);\n }\n\n \n\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n \n\n .content-area[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border-radius: var(--mj-radius-md);\n }\n\n \n\n .modal-backdrop[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-2xl);\n max-height: 95vh;\n }\n\n \n\n .applications-list[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n\n .app-card[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n }\n\n .app-header[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mj-radius-md);\n }\n\n .app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n }\n\n .app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n \n\n .app-meta[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n display: none;\n }\n\n .app-meta[_ngcontent-%COMP%] .app-actions[_ngcontent-%COMP%] {\n display: none;\n }\n\n .expand-btn[_ngcontent-%COMP%] {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mj-radius-full);\n }\n\n .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n }\n\n \n\n .mobile-actions-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mj-radius-full);\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n\n .app-stats[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n\n \n\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n \n\n .empty-state[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n\n .empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n }\n\n \n\n .loading-container[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n}\n\n\n\n@media (max-width: 374px) {\n .action-buttons[_ngcontent-%COMP%] {\n padding: 0.375rem 0.5rem;\n }\n\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 0.375rem 0.375rem 0.375rem;\n padding: 0.375rem;\n }\n\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.375rem;\n }\n\n .content-area[_ngcontent-%COMP%] {\n padding: 0.375rem;\n }\n\n .app-header[_ngcontent-%COMP%] {\n padding: 0.625rem;\n }\n}"] });
625
+ i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ? 19 : -1);
626
+ } }, dependencies: [i1.LoadingComponent, i2.MJButtonDirective, i2.MJPageHeaderInteriorComponent, i2.MJPageBodyInteriorComponent, i2.MJPageSearchComponent, i2.MJFilterChipComponent, i2.MJRefreshButtonComponent, i2.MJStatBadgeComponent, i3.ApplicationDialogComponent, i4.DatePipe], styles: ["\n\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\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n z-index: 10;\n}\n\n\n\n\n\n.scrollable-content[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 2rem 2.5rem;\n }\n}\n\n\n\n\n\n.action-buttons[_ngcontent-%COMP%] {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .action-buttons[_ngcontent-%COMP%] {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons[_ngcontent-%COMP%] {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n\n\n\n\n.mj-grid-4[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4[_ngcontent-%COMP%] {\n gap: 1rem;\n }\n}\n\n\n\n.mj-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n padding: 1rem;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mj-border-default);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem;\n }\n}\n\n\n\n\n\n.stat-icon[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon[_ngcontent-%COMP%] {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n\n\n\n\n.stat-content[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 2rem;\n }\n}\n\n.stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n}\n\n\n\n\n\n.filters-section[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 1rem 1.25rem;\n }\n}\n\n.filters-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row[_ngcontent-%COMP%] {\n gap: 1.5rem;\n }\n}\n\n.mj-filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-label[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-full);\n padding: 4px;\n gap: 2px;\n}\n\n\n\n\n\n.mj-search[_ngcontent-%COMP%] {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n font-size: 1rem;\n pointer-events: none;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-icon[_ngcontent-%COMP%] {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n font-size: 1rem;\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%] {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]::placeholder {\n color: var(--mj-text-secondary);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mj-bg-page);\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within .mj-search-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-xl);\n box-shadow: var(--mj-shadow-sm);\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\n}\n\n\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border-radius: var(--mj-radius-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error);\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n}\n\n\n\n\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n display: none;\n}\n\n.mobile-action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n color: var(--mj-border-default);\n margin-bottom: 1.5rem;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-text[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state[_ngcontent-%COMP%] .empty-subtext[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n\n\n\n\n.loading-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n\n\n\n\n.error-container[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3.5rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n color: var(--mj-text-primary);\n margin: 0 0 1.5rem 0;\n}\n\n\n\n\n\n.modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 1rem;\n animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl);\n box-shadow: var(--mj-shadow-2xl);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1rem;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n line-height: 1.5;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n .modal-dialog[_ngcontent-%COMP%] {\n width: 95%;\n max-height: 85vh;\n }\n\n .modal-header[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .modal-header[_ngcontent-%COMP%] .modal-title[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n }\n\n .modal-body[_ngcontent-%COMP%] {\n padding: 1rem;\n }\n\n .modal-footer[_ngcontent-%COMP%] {\n padding: 1rem;\n flex-direction: column;\n }\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.filter-button[_ngcontent-%COMP%] {\n display: none;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n border: 2px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-full);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n min-width: 44px;\n}\n\n.filter-button[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.filter-button[_ngcontent-%COMP%]:active {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n}\n\n\n\n\n\n.filter-modal-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0;\n}\n\n.filter-modal[_ngcontent-%COMP%] {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n box-shadow: var(--mj-shadow-2xl);\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n}\n\n.filter-modal-header[_ngcontent-%COMP%] {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.filter-modal-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 1.375rem;\n}\n\n.filter-modal-close[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-modal-close[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n padding: 1.25rem 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.filter-modal-footer[_ngcontent-%COMP%] button[_ngcontent-%COMP%] {\n flex: 1;\n margin: 0;\n}\n\n\n\n.filter-options-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.filter-group-label[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin: 0;\n}\n\n.filter-group-options[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.filter-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.875rem 1rem;\n background: var(--mj-bg-surface-sunken);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 56px;\n}\n\n.filter-option[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] {\n background: var(--mj-color-accent-300);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.filter-option[_ngcontent-%COMP%] input[type=\"checkbox\"][_ngcontent-%COMP%], \n.filter-option[_ngcontent-%COMP%] input[type=\"radio\"][_ngcontent-%COMP%] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.filter-option-label[_ngcontent-%COMP%] {\n flex: 1;\n font-size: 1rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.filter-option.selected[_ngcontent-%COMP%] .filter-option-label[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n\n\n\n\n.text-danger[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n color: var(--mj-color-warning-500);\n}\n\n.text-success[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\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%_slideUpFromBottom {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n\n\n\n\n.mj-search-input[_ngcontent-%COMP%]:focus-visible, \nbutton[_ngcontent-%COMP%]:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n *[_ngcontent-%COMP%], \n *[_ngcontent-%COMP%]::before, \n *[_ngcontent-%COMP%]::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}", "\n\n\n\n\n\n\n\n\n\n\n\n\n.status-chips[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n gap: var(--mj-space-2);\n flex-shrink: 0;\n}\n\n\n\n\n\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n\n\n\n\n.applications-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n\n\n\n\n.app-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-xl);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: var(--mj-shadow-md);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mj-shadow-lg);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transform: rotate(180deg);\n}\n\n.app-header[_ngcontent-%COMP%] {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mj-bg-surface);\n transition: background-color 0.2s ease;\n}\n\n.app-header[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.app-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-color-accent-300);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-brand-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n}\n\n.app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n\n\n\n\n.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n\n\n\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item[_ngcontent-%COMP%] {\n padding: 0.75rem;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 0.25rem;\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public[_ngcontent-%COMP%] {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n\n\n\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n}\n\n.modal-body[_ngcontent-%COMP%] .text-warning[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-500);\n border-radius: var(--mj-radius-md);\n font-weight: 500;\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n .application-management-container[_ngcontent-%COMP%] {\n margin: 0 auto;\n }\n\n .mj-grid-4[_ngcontent-%COMP%] {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n \n\n .mj-grid-4[_ngcontent-%COMP%] {\n display: none !important;\n }\n\n \n\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n \n\n .modal-backdrop[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-2xl);\n max-height: 95vh;\n }\n\n \n\n .applications-list[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n\n .app-card[_ngcontent-%COMP%] {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n }\n\n .app-header[_ngcontent-%COMP%] {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mj-radius-md);\n }\n\n .app-details[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 0;\n }\n\n .app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n \n\n .app-meta[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n display: none;\n }\n\n .app-meta[_ngcontent-%COMP%] .app-actions[_ngcontent-%COMP%] {\n display: none;\n }\n\n .expand-btn[_ngcontent-%COMP%] {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mj-radius-full);\n }\n\n .expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 1rem;\n }\n\n \n\n .mobile-actions-bar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar[_ngcontent-%COMP%] .status-badge[_ngcontent-%COMP%] {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mj-radius-full);\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .mj-btn-sm[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons[_ngcontent-%COMP%] .btn-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n }\n\n .app-stats[_ngcontent-%COMP%] {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content[_ngcontent-%COMP%] {\n padding: 0.75rem;\n }\n\n \n\n .entities-grid[_ngcontent-%COMP%] {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n \n\n .empty-state[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n\n .empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 2.5rem;\n }\n\n \n\n .loading-container[_ngcontent-%COMP%] {\n padding: 2rem 1rem;\n }\n}\n\n\n\n@media (max-width: 374px) {\n .scrollable-content[_ngcontent-%COMP%] {\n padding: 0.375rem;\n }\n\n .app-header[_ngcontent-%COMP%] {\n padding: 0.625rem;\n }\n}"] });
682
627
  };
683
628
  ApplicationManagementComponent = __decorate([
684
629
  RegisterClass(BaseDashboard, 'ApplicationManagement')
@@ -686,7 +631,7 @@ ApplicationManagementComponent = __decorate([
686
631
  export { ApplicationManagementComponent };
687
632
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationManagementComponent, [{
688
633
  type: Component,
689
- args: [{ standalone: false, selector: 'mj-application-management', template: "<div class=\"application-management-container\">\n <!-- Sticky Header Section -->\n <div class=\"sticky-header\">\n <!-- Action Buttons -->\n <div class=\"action-buttons\" role=\"toolbar\" aria-label=\"Application management actions\">\n <button\n mjButton variant=\"secondary\" class=\"mj-btn-icon-mobile\"\n (click)=\"refreshData()\"\n [disabled]=\"isLoading\"\n aria-label=\"Refresh applications\"\n >\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\" aria-hidden=\"true\"></i>\n <span class=\"btn-text\">Refresh</span>\n </button>\n <button mjButton variant=\"primary\" class=\"mj-btn-icon-mobile\" (click)=\"createNewApplication()\" aria-label=\"Add new application\">\n <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n <span class=\"btn-text\">Add Application</span>\n </button>\n </div>\n\n <!-- Stats Cards -->\n <div class=\"mj-grid-4\" role=\"region\" aria-label=\"Application statistics\">\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-total\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-cubes\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Total applications count\">{{ stats.totalApplications }}</div>\n <div class=\"stat-label\">Total Applications</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-active\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Active applications count\">{{ stats.activeApplications }}</div>\n <div class=\"stat-label\">Active Applications</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-entities\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Total entities count\">{{ stats.totalEntities }}</div>\n <div class=\"stat-label\">Total Entities</div>\n </div>\n </div>\n\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-public\" aria-hidden=\"true\">\n <i class=\"fa-solid fa-globe\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\" aria-label=\"Public entities count\">{{ stats.publicEntities }}</div>\n <div class=\"stat-label\">Public Entities</div>\n </div>\n </div>\n </div>\n\n <!-- Filters Section -->\n <div class=\"filters-section\" role=\"search\" aria-label=\"Filter applications\">\n <div class=\"filters-row\">\n <!-- Search - Enhanced prominent search box -->\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\" aria-hidden=\"true\"></i>\n <input\n type=\"text\"\n class=\"mj-search-input\"\n placeholder=\"Search applications by name or description...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"filters$.value.search\"\n aria-label=\"Search applications\"\n />\n </div>\n\n <!-- Status Filter -->\n <div class=\"mj-filter-group\">\n <label class=\"mj-filter-label\" id=\"status-filter-label\">Status</label>\n <div class=\"mj-filter-buttons\" role=\"group\" aria-labelledby=\"status-filter-label\">\n <button mjButton\n [variant]=\"filters$.value.status === 'all' ? 'primary' : 'flat'\"\n (click)=\"onStatusFilterChange('all')\"\n [attr.aria-pressed]=\"filters$.value.status === 'all'\"\n >\n All\n </button>\n <button mjButton\n [variant]=\"filters$.value.status === 'active' ? 'primary' : 'flat'\"\n (click)=\"onStatusFilterChange('active')\"\n [attr.aria-pressed]=\"filters$.value.status === 'active'\"\n >\n Active\n </button>\n <button mjButton\n [variant]=\"filters$.value.status === 'inactive' ? 'primary' : 'flat'\"\n (click)=\"onStatusFilterChange('inactive')\"\n [attr.aria-pressed]=\"filters$.value.status === 'inactive'\"\n >\n Inactive\n </button>\n </div>\n </div>\n </div>\n </div>\n </div><!-- End Sticky Header -->\n\n <!-- Scrollable Content Section -->\n <div class=\"scrollable-content\">\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading applications...\"></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 mjButton variant=\"primary\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Content Area -->\n @if (!isLoading && !error) {\n <div class=\"content-area\">\n <div class=\"applications-list\" role=\"list\">\n @for (app of filteredApplications; track app.ID) {\n <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\" role=\"listitem\">\n <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\" role=\"button\" [attr.aria-expanded]=\"isAppExpanded(app.ID)\">\n <div class=\"app-info\">\n <div class=\"app-icon-wrapper\">\n <i [class]=\"'fa-solid ' + getAppIcon(app)\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"app-details\">\n <h3 class=\"app-name\">{{ app.Name }}</h3>\n <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n </div>\n </div>\n\n <div class=\"app-meta\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n <button class=\"expand-btn\" aria-label=\"Toggle details\">\n <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n\n @if (isAppExpanded(app.ID)) {\n <div class=\"app-content\">\n <!-- Mobile-only actions bar -->\n <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"mobile-action-buttons\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"btn-label\">Edit</span>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n <span class=\"btn-label\">Delete</span>\n </button>\n </div>\n </div>\n\n <div class=\"app-stats\">\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Entities:</span>\n <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-calendar\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Created:</span>\n <span class=\"stat-value\">{{ app.__mj_CreatedAt | date:'short' }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Updated:</span>\n <span class=\"stat-value\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n </div>\n </div>\n\n <div class=\"entities-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n Application Entities\n </h4>\n\n @if (getAppEntities(app.ID).length > 0) {\n <div class=\"entities-grid\">\n @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n @if (getEntityInfo(appEntity.EntityID); as entity) {\n <div class=\"entity-item\">\n <div class=\"entity-name\">{{ entity.Name }}</div>\n <div class=\"entity-meta\">\n @if (appEntity.DefaultForNewUser) {\n <span class=\"entity-badge public\">Public</span>\n }\n <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <p class=\"no-entities\">No entities configured for this application</p>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (filteredApplications.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-cubes empty-icon\" aria-hidden=\"true\"></i>\n <p class=\"empty-text\">No applications found</p>\n <p class=\"empty-subtext\">Try adjusting your filters or create a new application</p>\n </div>\n }\n </div>\n </div>\n }\n </div><!-- End Scrollable Content -->\n\n <!-- Application Dialog -->\n <mj-application-dialog\n [visible]=\"showApplicationDialog\"\n [data]=\"applicationDialogData\"\n (result)=\"onApplicationDialogResult($event)\"\n ></mj-application-dialog>\n\n <!-- Delete Confirmation Dialog -->\n @if (showDeleteConfirm && selectedApp) {\n <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\" role=\"presentation\">\n <div\n class=\"modal-dialog\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"delete-dialog-title\"\n aria-describedby=\"delete-dialog-description\"\n >\n <div class=\"modal-header\">\n <h3 class=\"modal-title\" id=\"delete-dialog-title\">\n <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n Confirm Delete\n </h3>\n <button\n class=\"modal-close\"\n (click)=\"showDeleteConfirm = false\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"modal-body\" id=\"delete-dialog-description\">\n <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n <p class=\"text-warning\">\n <i class=\"fa-solid fa-warning\" aria-hidden=\"true\"></i>\n This will remove all entity associations for this application.\n </p>\n </div>\n <div class=\"modal-footer\">\n <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n <button mjButton variant=\"danger\" (click)=\"deleteApplication()\" [disabled]=\"isLoading\">\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n Deleting...\n } @else {\n <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n Delete Application\n }\n </button>\n <button mjButton (click)=\"showDeleteConfirm = false\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["/* =============================================================================\n Shared Admin Patterns - MJ Design System\n Common styles shared across all admin settings components.\n Component-specific CSS files override these values where needed.\n ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n Host & Container\n ----------------------------------------------------------------------------- */\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n Sticky Header\n ----------------------------------------------------------------------------- */\n.sticky-header {\n flex-shrink: 0;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n Scrollable Content\n ----------------------------------------------------------------------------- */\n.scrollable-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n .scrollable-content {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content {\n padding: 2rem 2.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Action Buttons (In Sticky Header)\n ----------------------------------------------------------------------------- */\n.action-buttons {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .action-buttons {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons {\n justify-content: center;\n flex-wrap: wrap;\n }\n\n .mj-btn-icon-mobile .btn-text {\n display: none;\n }\n\n .mj-btn-icon-mobile {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mj-radius-full);\n }\n\n .mj-btn-icon-mobile i {\n font-size: 1.125rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Statistics Cards Grid - Static Display (Non-interactive)\n ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4 {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4 {\n gap: 1rem;\n }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n padding: 1rem;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mj-border-default);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card {\n padding: 1rem 1.25rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Stat Icon Containers\n ----------------------------------------------------------------------------- */\n.stat-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Stat Content Typography\n ----------------------------------------------------------------------------- */\n.stat-content {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content .stat-value {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-value {\n font-size: 2rem;\n }\n}\n\n.stat-content .stat-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-label {\n font-size: 0.8125rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Filters Section\n ----------------------------------------------------------------------------- */\n.filters-section {\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .filters-section {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 1rem 1.25rem;\n }\n}\n\n.filters-row {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row {\n gap: 1.5rem;\n }\n}\n\n.mj-filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons .mj-btn {\n border-radius: var(--mj-radius-full);\n}\n\n.mj-filter-buttons .mj-btn-primary {\n background-color: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n/* -----------------------------------------------------------------------------\n Search Input\n ----------------------------------------------------------------------------- */\n.mj-search {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search .mj-search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n font-size: 1rem;\n pointer-events: none;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-icon {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search .mj-search-input {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n font-size: 1rem;\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-input {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search .mj-search-input {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search .mj-search-input::placeholder {\n color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n Content Area\n ----------------------------------------------------------------------------- */\n.content-area {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-xl);\n box-shadow: var(--mj-shadow-sm);\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .content-area {\n padding: 1.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Expand Button\n ----------------------------------------------------------------------------- */\n.expand-btn {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border-radius: var(--mj-radius-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.expand-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n Status Badge\n ----------------------------------------------------------------------------- */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n Mobile Actions Bar\n ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n display: none;\n}\n\n.mobile-action-buttons {\n display: flex;\n gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Empty State\n ----------------------------------------------------------------------------- */\n.empty-state {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n font-size: 4rem;\n color: var(--mj-border-default);\n margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Loading State\n ----------------------------------------------------------------------------- */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n Error State\n ----------------------------------------------------------------------------- */\n.error-container {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container .error-icon {\n font-size: 3.5rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n font-size: 1.0625rem;\n color: var(--mj-text-primary);\n margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n Modal Dialog\n ----------------------------------------------------------------------------- */\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl);\n box-shadow: var(--mj-shadow-2xl);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.modal-header .modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n\n.modal-body p {\n font-size: 1rem;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n line-height: 1.5;\n}\n\n.modal-body p:last-child {\n margin-bottom: 0;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n .modal-dialog {\n width: 95%;\n max-height: 85vh;\n }\n\n .modal-header {\n padding: 1rem;\n }\n\n .modal-header .modal-title {\n font-size: 1.125rem;\n }\n\n .modal-body {\n padding: 1rem;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n .modal-footer .mj-btn {\n width: 100%;\n justify-content: center;\n }\n}\n\n/* -----------------------------------------------------------------------------\n MJ Button System\n ----------------------------------------------------------------------------- */\n.mj-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.5rem;\n font-size: 0.875rem;\n font-weight: 600;\n border: none;\n border-radius: var(--mj-radius-full);\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}\n\n.mj-btn:disabled {\n opacity: 0.38;\n cursor: not-allowed;\n}\n\n/* Primary Button */\n.mj-btn-primary {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n background: var(--mj-brand-primary-light);\n box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n background: var(--mj-color-brand-400);\n transform: scale(0.98);\n}\n\n/* Secondary Button */\n.mj-btn-secondary {\n background: var(--mj-bg-page);\n color: var(--mj-brand-primary);\n border: 1px solid var(--mj-color-neutral-400);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n background: var(--mj-color-brand-700);\n border-color: var(--mj-color-brand-700);\n}\n\n/* Ghost Button */\n.mj-btn-ghost {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.mj-btn-ghost:hover:not(:disabled) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.mj-btn-ghost:active:not(:disabled) {\n background: var(--mj-color-brand-700);\n}\n\n/* Danger Button */\n.mj-btn-danger {\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-danger:hover:not(:disabled) {\n background: var(--mj-color-error-300);\n box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-danger:active:not(:disabled) {\n background: var(--mj-color-error-200);\n transform: scale(0.98);\n}\n\n/* Small Button */\n.mj-btn-sm {\n padding: 0.5rem 0.875rem;\n font-size: 0.8125rem;\n min-height: 36px;\n}\n\n/* Icon-only Button */\n.mj-btn-icon-only {\n padding: 0.625rem;\n min-width: 44px;\n min-height: 44px;\n}\n\n/* Icon-mobile Button (text hidden on small screens) */\n.mj-btn-icon-mobile {\n gap: 0.5rem;\n}\n\n.mj-btn-icon-mobile .btn-text {\n display: inline;\n}\n\n/* Ghost Danger Button */\n.mj-btn-ghost.mj-btn-danger {\n background: transparent;\n color: var(--mj-status-error);\n box-shadow: none;\n}\n\n.mj-btn-ghost.mj-btn-danger:hover:not(:disabled) {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n}\n\n/* -----------------------------------------------------------------------------\n Filter Button (Mobile Only)\n ----------------------------------------------------------------------------- */\n.filter-button {\n display: none;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n border: 2px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-full);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n min-width: 44px;\n}\n\n.filter-button:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n Filter Modal (Mobile Bottom Sheet)\n ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0;\n}\n\n.filter-modal {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n box-shadow: var(--mj-shadow-2xl);\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n}\n\n.filter-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.filter-modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.filter-modal-title i {\n color: var(--mj-brand-primary);\n font-size: 1.375rem;\n}\n\n.filter-modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-modal-close:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n padding: 1.5rem;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n.filter-modal-footer {\n display: flex;\n gap: 0.75rem;\n padding: 1.25rem 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n flex: 1;\n margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.filter-group-label {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin: 0;\n}\n\n.filter-group-options {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.filter-option {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.875rem 1rem;\n background: var(--mj-bg-surface-sunken);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 56px;\n}\n\n.filter-option:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n background: var(--mj-color-accent-300);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.filter-option-label {\n flex: 1;\n font-size: 1rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Utility Classes\n ----------------------------------------------------------------------------- */\n.text-danger {\n color: var(--mj-status-error);\n}\n\n.text-warning {\n color: var(--mj-color-warning-500);\n}\n\n.text-success {\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Animations\n ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideUpFromBottom {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible,\n.mj-btn:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Reduced Motion\n ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n", "/* =============================================================================\n Application Management Component - Component-Specific Styles\n Shared patterns are in ../shared/styles/_admin-patterns.css\n ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n Container\n ----------------------------------------------------------------------------- */\n.application-management-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n overflow: hidden;\n position: relative;\n width: 100%;\n background: var(--mj-bg-page);\n}\n\n/* -----------------------------------------------------------------------------\n Stat Icon Overrides (Component-specific colors)\n ----------------------------------------------------------------------------- */\n.stat-icon-entities {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Filters Section Override - smaller border-radius and padding\n ----------------------------------------------------------------------------- */\n.filters-section {\n border-radius: var(--mj-radius-md);\n}\n\n@media (min-width: 768px) {\n .filters-section {\n padding: 0.875rem 1rem;\n }\n}\n\n/* Filter Button Group Overrides */\n.mj-filter-group .mj-filter-label {\n font-size: 0.8125rem;\n}\n\n.mj-filter-buttons .mj-btn-ghost {\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mj-text-secondary);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n}\n\n.mj-filter-buttons .mj-btn-ghost:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n/* Search Input Override - box-shadow at 1024px */\n@media (min-width: 1024px) {\n .mj-search .mj-search-input {\n box-shadow: var(--mj-shadow-sm);\n }\n\n .mj-search .mj-search-input:focus {\n box-shadow: var(--mj-shadow-md), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n/* Search Icon Override - missing pointer-events: none */\n.mj-search .mj-search-icon {\n pointer-events: none;\n}\n\n/* -----------------------------------------------------------------------------\n Applications List\n ----------------------------------------------------------------------------- */\n.applications-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Card - Interactive\n ----------------------------------------------------------------------------- */\n.app-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-xl);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card:hover {\n box-shadow: var(--mj-shadow-md);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded {\n box-shadow: var(--mj-shadow-lg);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded .expand-btn i {\n transform: rotate(180deg);\n}\n\n.app-header {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mj-bg-surface);\n transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.app-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-color-accent-300);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-brand-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details {\n flex: 1;\n min-width: 0;\n}\n\n.app-details .app-name {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details .app-description {\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details .app-description {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Application Actions\n ----------------------------------------------------------------------------- */\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Content (Expanded)\n ----------------------------------------------------------------------------- */\n.app-content {\n padding: 1.5rem;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats .stat-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats .stat-item i {\n color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-label {\n color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-value {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Entities Section\n ----------------------------------------------------------------------------- */\n.entities-section {\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.entities-section .section-title {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n color: var(--mj-brand-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item {\n padding: 0.75rem;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item .entity-name {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 0.25rem;\n}\n\n.entity-item .entity-meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence {\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.no-entities {\n color: var(--mj-text-secondary);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Modal Body Override - warning callout\n ----------------------------------------------------------------------------- */\n.modal-body p {\n font-size: 1.0625rem;\n}\n\n.modal-body .text-warning {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-500);\n border-radius: var(--mj-radius-md);\n font-weight: 500;\n}\n\n/* -----------------------------------------------------------------------------\n Desktop (1440px+) - Large Screen Overrides\n ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n .application-management-container {\n margin: 0 auto;\n }\n\n .action-buttons {\n padding: 1rem 2rem;\n }\n\n .mj-grid-4 {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n\n .filters-section {\n margin: 0 2rem 1rem 2rem;\n padding: 1rem 1.25rem;\n }\n\n .content-area {\n padding: 2rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Mobile-specific adjustments (< 640px)\n ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n /* Compact sticky header for mobile */\n .sticky-header {\n padding: 0;\n }\n\n /* Compact action buttons row */\n .action-buttons {\n padding: 0.5rem 0.75rem;\n gap: 0.5rem;\n justify-content: flex-end;\n }\n\n /* Hide stats cards on mobile to save space */\n .mj-grid-4 {\n display: none !important;\n }\n\n /* Compact filters section */\n .filters-section {\n margin: 0 0.5rem 0.5rem 0.5rem;\n padding: 0.5rem;\n border-radius: var(--mj-radius-md);\n }\n\n .filters-row {\n gap: 0.5rem;\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Full-width compact search on mobile */\n .mj-search {\n min-width: 100%;\n }\n\n .mj-search .mj-search-input {\n padding: 0.625rem 1rem 0.625rem 2.5rem;\n min-height: 40px;\n font-size: 0.9375rem;\n border-width: 2px;\n border-radius: var(--mj-radius-full);\n }\n\n .mj-search .mj-search-icon {\n left: 0.75rem;\n font-size: 0.875rem;\n }\n\n /* Horizontal scrollable filter buttons */\n .mj-filter-group {\n width: 100%;\n }\n\n .mj-filter-group .mj-filter-label {\n display: none;\n }\n\n .mj-filter-group .mj-filter-buttons {\n display: flex;\n width: 100%;\n justify-content: stretch;\n }\n\n .mj-filter-buttons .mj-btn {\n flex: 1;\n padding: 0.375rem 0.75rem;\n min-height: 36px;\n font-size: 0.75rem;\n font-weight: 500;\n border-radius: var(--mj-radius-full);\n background: transparent;\n color: var(--mj-text-secondary);\n border: none;\n cursor: pointer;\n transition: all 0.2s ease;\n }\n\n /* Hover state for filter buttons on mobile */\n .mj-filter-buttons .mj-btn:hover:not(:disabled):not(.mj-btn-primary) {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n }\n\n /* Active/selected state for filter buttons on mobile */\n .mj-filter-buttons .mj-btn.mj-btn-primary {\n background: var(--mj-brand-primary) !important;\n color: var(--mj-brand-on-primary) !important;\n box-shadow: var(--mj-shadow-sm);\n }\n\n /* More compact scrollable content */\n .scrollable-content {\n padding: 0.5rem;\n }\n\n /* Compact content area */\n .content-area {\n padding: 0.5rem;\n border-radius: var(--mj-radius-md);\n }\n\n /* Modal styles */\n .modal-backdrop {\n padding: 0.5rem;\n }\n\n .modal-dialog {\n border-radius: var(--mj-radius-2xl);\n max-height: 95vh;\n }\n\n /* App Card Mobile Layout */\n .applications-list {\n gap: 0.5rem;\n }\n\n .app-card {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n }\n\n .app-header {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mj-radius-md);\n }\n\n .app-details {\n flex: 1;\n min-width: 0;\n }\n\n .app-details .app-name {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details .app-description {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n /* On mobile: hide status and actions in header, show only expand button */\n .app-meta {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta .status-badge {\n display: none;\n }\n\n .app-meta .app-actions {\n display: none;\n }\n\n .expand-btn {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mj-radius-full);\n }\n\n .expand-btn i {\n font-size: 1rem;\n }\n\n /* Mobile actions bar - visible on mobile only */\n .mobile-actions-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar .status-badge {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons .mj-btn-sm {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mj-radius-full);\n }\n\n .mobile-action-buttons .mj-btn-sm i {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons .btn-label {\n font-size: 0.8125rem;\n }\n\n .app-stats {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content {\n padding: 0.75rem;\n }\n\n /* Entities grid in expanded view */\n .entities-grid {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item {\n padding: 0.5rem;\n }\n\n .entity-item .entity-name {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n /* Empty state compact */\n .empty-state {\n padding: 2rem 1rem;\n }\n\n .empty-state .empty-icon {\n font-size: 2.5rem;\n }\n\n /* Loading container compact */\n .loading-container {\n padding: 2rem 1rem;\n }\n}\n\n/* Small mobile (< 375px) - Extra compact */\n@media (max-width: 374px) {\n .action-buttons {\n padding: 0.375rem 0.5rem;\n }\n\n .filters-section {\n margin: 0 0.375rem 0.375rem 0.375rem;\n padding: 0.375rem;\n }\n\n .scrollable-content {\n padding: 0.375rem;\n }\n\n .content-area {\n padding: 0.375rem;\n }\n\n .app-header {\n padding: 0.625rem;\n }\n}\n"] }]
634
+ args: [{ standalone: false, selector: 'mj-application-management', template: "<!--\n Interior chrome \u2014 see Section 10 of explorer-chrome-conventions.\n-->\n<mj-page-header-interior\n AriaLabel=\"Filter applications\"\n Title=\"Applications\"\n Subtitle=\"Configure applications and their entity associations\">\n <!-- X-of-Y filtered count earns its meta spot per chrome conventions \u00A72.\n Partition badges (entities/public) stay dropped \u2014 Active/Inactive\n chips in [toolbar] handle the partition signal. -->\n <div meta>\n <mj-stat-badge\n [Count]=\"filteredApplications.length\"\n [Total]=\"applications.length\"\n Label=\"applications\">\n </mj-stat-badge>\n </div>\n <div toolbar>\n <mj-page-search\n Placeholder=\"Search applications by name or description...\"\n [Value]=\"filters$.value.search\"\n (ValueChange)=\"updateFilter({ search: $event })\">\n </mj-page-search>\n <div class=\"status-chips\" role=\"group\" aria-label=\"Filter by status\">\n <mj-filter-chip\n Label=\"All\"\n [Active]=\"filters$.value.status === 'all'\"\n (Clicked)=\"onStatusFilterChange('all')\">\n </mj-filter-chip>\n <mj-filter-chip\n Label=\"Active\"\n [Active]=\"filters$.value.status === 'active'\"\n (Clicked)=\"onStatusFilterChange('active')\">\n </mj-filter-chip>\n <mj-filter-chip\n Label=\"Inactive\"\n [Active]=\"filters$.value.status === 'inactive'\"\n (Clicked)=\"onStatusFilterChange('inactive')\">\n </mj-filter-chip>\n </div>\n </div>\n <div actions>\n <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refreshData()\"></mj-refresh-button>\n <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewApplication()\" aria-label=\"Add new application\">\n <i class=\"fa-solid fa-plus\"></i> Add Application\n </button>\n </div>\n</mj-page-header-interior>\n\n<!-- Scrollable Content Section \u2014 owned by <mj-page-body-interior>. -->\n<mj-page-body-interior>\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\" role=\"status\" aria-live=\"polite\">\n <mj-loading text=\"Loading applications...\"></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 mjButton variant=\"primary\" (click)=\"loadInitialData()\">\n <i class=\"fa-solid fa-refresh\"></i>\n Try Again\n </button>\n </div>\n </div>\n }\n\n <!-- Applications List -->\n @if (!isLoading && !error) {\n <div class=\"applications-list\" role=\"list\">\n @for (app of filteredApplications; track app.ID) {\n <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\" role=\"listitem\">\n <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\" role=\"button\" [attr.aria-expanded]=\"isAppExpanded(app.ID)\">\n <div class=\"app-info\">\n <div class=\"app-icon-wrapper\">\n <i [class]=\"'fa-solid ' + getAppIcon(app)\" aria-hidden=\"true\"></i>\n </div>\n <div class=\"app-details\">\n <h3 class=\"app-name\">{{ app.Name }}</h3>\n <p class=\"app-description\">{{ app.Description || 'No description available' }}</p>\n </div>\n </div>\n\n <div class=\"app-meta\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"app-actions\" (click)=\"$event.stopPropagation()\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n <button class=\"expand-btn\" aria-label=\"Toggle details\">\n <i class=\"fa-solid fa-chevron-down\" aria-hidden=\"true\"></i>\n </button>\n </div>\n </div>\n\n @if (isAppExpanded(app.ID)) {\n <div class=\"app-content\">\n <!-- Mobile-only actions bar -->\n <div class=\"mobile-actions-bar\" (click)=\"$event.stopPropagation()\">\n <span class=\"status-badge\" [class]=\"getAppStatusClass(app)\">\n {{ getAppStatusLabel(app) }}\n </span>\n <div class=\"mobile-action-buttons\">\n <button\n mjButton variant=\"flat\" size=\"sm\"\n (click)=\"editApplication(app)\"\n title=\"Edit\"\n [attr.aria-label]=\"'Edit ' + app.Name\"\n >\n <i class=\"fa-solid fa-edit\"></i>\n <span class=\"btn-label\">Edit</span>\n </button>\n <button\n mjButton variant=\"danger\" size=\"sm\"\n (click)=\"confirmDeleteApplication(app)\"\n title=\"Delete\"\n [attr.aria-label]=\"'Delete ' + app.Name\"\n >\n <i class=\"fa-solid fa-trash\"></i>\n <span class=\"btn-label\">Delete</span>\n </button>\n </div>\n </div>\n\n <div class=\"app-stats\">\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Entities:</span>\n <span class=\"stat-value\">{{ getAppEntities(app.ID).length }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-calendar\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Created:</span>\n <span class=\"stat-value\">{{ app.__mj_CreatedAt | date:'short' }}</span>\n </div>\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-clock\" aria-hidden=\"true\"></i>\n <span class=\"stat-label\">Updated:</span>\n <span class=\"stat-value\">{{ app.__mj_UpdatedAt | date:'short' }}</span>\n </div>\n </div>\n\n <div class=\"entities-section\">\n <h4 class=\"section-title\">\n <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n Application Entities\n </h4>\n\n @if (getAppEntities(app.ID).length > 0) {\n <div class=\"entities-grid\">\n @for (appEntity of getAppEntities(app.ID); track appEntity.ID) {\n @if (getEntityInfo(appEntity.EntityID); as entity) {\n <div class=\"entity-item\">\n <div class=\"entity-name\">{{ entity.Name }}</div>\n <div class=\"entity-meta\">\n @if (appEntity.DefaultForNewUser) {\n <span class=\"entity-badge public\">Public</span>\n }\n <span class=\"entity-sequence\">Order: {{ appEntity.Sequence }}</span>\n </div>\n </div>\n }\n }\n </div>\n } @else {\n <p class=\"no-entities\">No entities configured for this application</p>\n }\n </div>\n </div>\n }\n </div>\n }\n\n @if (filteredApplications.length === 0) {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-cubes empty-icon\" aria-hidden=\"true\"></i>\n <p class=\"empty-text\">No applications found</p>\n <p class=\"empty-subtext\">Try adjusting your filters or create a new application</p>\n </div>\n }\n </div>\n }\n </mj-page-body-interior>\n\n <!-- Application Dialog -->\n <mj-application-dialog\n [visible]=\"showApplicationDialog\"\n [data]=\"applicationDialogData\"\n (result)=\"onApplicationDialogResult($event)\"\n ></mj-application-dialog>\n\n <!-- Delete Confirmation Dialog -->\n @if (showDeleteConfirm && selectedApp) {\n <div class=\"modal-backdrop\" (click)=\"showDeleteConfirm = false\" role=\"presentation\">\n <div\n class=\"modal-dialog\"\n (click)=\"$event.stopPropagation()\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"delete-dialog-title\"\n aria-describedby=\"delete-dialog-description\"\n >\n <div class=\"modal-header\">\n <h3 class=\"modal-title\" id=\"delete-dialog-title\">\n <i class=\"fa-solid fa-exclamation-triangle text-danger\" aria-hidden=\"true\"></i>\n Confirm Delete\n </h3>\n <button\n class=\"modal-close\"\n (click)=\"showDeleteConfirm = false\"\n aria-label=\"Close dialog\"\n >\n <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n </button>\n </div>\n <div class=\"modal-body\" id=\"delete-dialog-description\">\n <p>Are you sure you want to delete the application <strong>{{ selectedApp.Name }}</strong>?</p>\n <p class=\"text-warning\">\n <i class=\"fa-solid fa-warning\" aria-hidden=\"true\"></i>\n This will remove all entity associations for this application.\n </p>\n </div>\n <div class=\"modal-footer\">\n <!-- Primary action (Delete) on LEFT per MD3 design guide -->\n <button mjButton variant=\"danger\" (click)=\"deleteApplication()\" [disabled]=\"isLoading\">\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n Deleting...\n } @else {\n <i class=\"fa-solid fa-trash\" aria-hidden=\"true\"></i>\n Delete Application\n }\n </button>\n <button mjButton (click)=\"showDeleteConfirm = false\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n", styles: ["/* =============================================================================\n Shared Admin Patterns - MJ Design System\n Common styles shared across all admin settings components.\n Component-specific CSS files override these values where needed.\n ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n Host & Container\n ----------------------------------------------------------------------------- */\n:host {\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n Sticky Header\n ----------------------------------------------------------------------------- */\n.sticky-header {\n flex-shrink: 0;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n box-shadow: var(--mj-shadow-sm);\n z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n Scrollable Content\n ----------------------------------------------------------------------------- */\n.scrollable-content {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (min-width: 768px) {\n .scrollable-content {\n padding: 1.5rem 2rem;\n }\n}\n\n@media (min-width: 1024px) {\n .scrollable-content {\n padding: 2rem;\n }\n}\n\n@media (min-width: 1440px) {\n .scrollable-content {\n padding: 2rem 2.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Action Buttons (In Sticky Header)\n ----------------------------------------------------------------------------- */\n.action-buttons {\n flex-shrink: 0;\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n padding: 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .action-buttons {\n padding: 1rem 1.5rem;\n }\n}\n\n@media (max-width: 639px) {\n .action-buttons {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Statistics Cards Grid - Static Display (Non-interactive)\n ----------------------------------------------------------------------------- */\n.mj-grid-4 {\n display: grid;\n grid-template-columns: repeat(2, 1fr);\n gap: 0.5rem;\n padding: 0 1rem 0.75rem 1rem;\n background: var(--mj-bg-page);\n}\n\n@media (min-width: 768px) {\n .mj-grid-4 {\n grid-template-columns: repeat(4, 1fr);\n padding: 0 1.5rem 1rem 1.5rem;\n gap: 0.75rem;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-grid-4 {\n gap: 1rem;\n }\n}\n\n/* Static Card - No hover effects */\n.mj-card {\n background: var(--mj-bg-surface-card);\n border-radius: var(--mj-radius-lg);\n padding: 1rem;\n box-shadow: var(--mj-shadow-sm);\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mj-border-default);\n cursor: default;\n pointer-events: none;\n}\n\n@media (min-width: 768px) {\n .mj-card {\n padding: 1rem 1.25rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Stat Icon Containers\n ----------------------------------------------------------------------------- */\n.stat-icon {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n@media (min-width: 768px) {\n .stat-icon {\n width: 52px;\n height: 52px;\n font-size: 1.375rem;\n }\n}\n\n.stat-icon-total {\n background: var(--mj-color-accent-300);\n color: var(--mj-brand-primary);\n}\n\n.stat-icon-active {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Stat Content Typography\n ----------------------------------------------------------------------------- */\n.stat-content {\n flex: 1;\n min-width: 0;\n}\n\n.stat-content .stat-value {\n font-size: 1.75rem;\n font-weight: 700;\n color: var(--mj-text-primary);\n line-height: 1;\n letter-spacing: -0.02em;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-value {\n font-size: 2rem;\n }\n}\n\n.stat-content .stat-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.25rem;\n}\n\n@media (min-width: 768px) {\n .stat-content .stat-label {\n font-size: 0.8125rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Filters Section\n ----------------------------------------------------------------------------- */\n.filters-section {\n flex-shrink: 0;\n background: var(--mj-bg-surface-card);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mj-radius-lg);\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .filters-section {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 1rem 1.25rem;\n }\n}\n\n.filters-row {\n display: flex;\n gap: 1rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n@media (min-width: 768px) {\n .filters-row {\n gap: 1.5rem;\n }\n}\n\n.mj-filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-label {\n font-size: 0.75rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n}\n\n.mj-filter-buttons {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-full);\n padding: 4px;\n gap: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Search Input\n ----------------------------------------------------------------------------- */\n.mj-search {\n position: relative;\n flex: 1;\n min-width: 200px;\n}\n\n@media (min-width: 640px) {\n .mj-search {\n min-width: 280px;\n }\n}\n\n@media (min-width: 1024px) {\n .mj-search {\n min-width: 400px;\n max-width: 600px;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search {\n min-width: 500px;\n max-width: 800px;\n }\n}\n\n.mj-search .mj-search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: var(--mj-text-secondary);\n font-size: 1rem;\n pointer-events: none;\n transition: color 0.2s ease;\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-icon {\n left: 1.25rem;\n font-size: 1.125rem;\n }\n}\n\n.mj-search .mj-search-input {\n width: 100%;\n padding: 0.875rem 1rem 0.875rem 2.75rem;\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-full);\n font-size: 1rem;\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-input {\n padding: 1rem 1.25rem 1rem 3.25rem;\n font-size: 1.0625rem;\n }\n}\n\n@media (min-width: 1440px) {\n .mj-search .mj-search-input {\n padding: 1.125rem 1.5rem 1.125rem 3.5rem;\n }\n}\n\n.mj-search .mj-search-input::placeholder {\n color: var(--mj-text-secondary);\n}\n\n.mj-search .mj-search-input:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.mj-search .mj-search-input:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mj-bg-page);\n}\n\n.mj-search:focus-within .mj-search-icon {\n color: var(--mj-brand-primary);\n}\n\n/* -----------------------------------------------------------------------------\n Content Area\n ----------------------------------------------------------------------------- */\n.content-area {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-xl);\n box-shadow: var(--mj-shadow-sm);\n padding: 1rem;\n border: 1px solid var(--mj-border-default);\n}\n\n@media (min-width: 768px) {\n .content-area {\n padding: 1.5rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Expand Button\n ----------------------------------------------------------------------------- */\n.expand-btn {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s ease;\n border-radius: var(--mj-radius-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.expand-btn:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.expand-btn i {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n Status Badge\n ----------------------------------------------------------------------------- */\n.status-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.875rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.status-badge.status-active {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.status-badge.status-inactive {\n background: var(--mj-color-error-100);\n color: var(--mj-status-error);\n border: 1px solid var(--mj-status-error);\n}\n\n.status-badge i {\n font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n Mobile Actions Bar\n ----------------------------------------------------------------------------- */\n.mobile-actions-bar {\n display: none;\n}\n\n.mobile-action-buttons {\n display: flex;\n gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Empty State\n ----------------------------------------------------------------------------- */\n.empty-state {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.empty-state .empty-icon {\n font-size: 4rem;\n color: var(--mj-border-default);\n margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n font-size: 1rem;\n color: var(--mj-text-secondary);\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Loading State\n ----------------------------------------------------------------------------- */\n.loading-container {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 4rem 2rem;\n}\n\n/* -----------------------------------------------------------------------------\n Error State\n ----------------------------------------------------------------------------- */\n.error-container {\n text-align: center;\n padding: 4rem 2rem;\n}\n\n.error-container .error-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n}\n\n.error-container .error-icon {\n font-size: 3.5rem;\n color: var(--mj-status-error);\n margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n font-size: 1.0625rem;\n color: var(--mj-text-primary);\n margin: 0 0 1.5rem 0;\n}\n\n/* -----------------------------------------------------------------------------\n Modal Dialog\n ----------------------------------------------------------------------------- */\n.modal-backdrop {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n padding: 1rem;\n animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-dialog {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl);\n box-shadow: var(--mj-shadow-2xl);\n max-width: 500px;\n width: 100%;\n max-height: 90vh;\n overflow: hidden;\n animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.modal-header .modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.modal-header .modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.modal-header .modal-close:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n\n.modal-body p {\n font-size: 1rem;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n line-height: 1.5;\n}\n\n.modal-body p:last-child {\n margin-bottom: 0;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-start;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n}\n\n@media (max-width: 639px) {\n .modal-dialog {\n width: 95%;\n max-height: 85vh;\n }\n\n .modal-header {\n padding: 1rem;\n }\n\n .modal-header .modal-title {\n font-size: 1.125rem;\n }\n\n .modal-body {\n padding: 1rem;\n }\n\n .modal-footer {\n padding: 1rem;\n flex-direction: column;\n }\n\n}\n\n/* The legacy \"MJ Button System\" rule block (.mj-btn / .mj-btn-primary /\n .mj-btn-secondary / .mj-btn-ghost / .mj-btn-danger / .mj-btn-sm /\n .mj-btn-icon-only / .mj-btn-icon-mobile) was removed 2026-05-19. These\n rules pre-dated the mjButton directive standardization (the directive\n uses BEM modifiers like .mj-btn--primary, single-dash names like\n .mj-btn-primary don't match it anyway). The base .mj-btn rule WAS active\n though \u2014 its component-scoped specificity outranked button.scss's global\n directive styles, so admin sub-page buttons rendered pill-shaped + 44px\n regardless of the variant/size requested via mjButton inputs. Removing the\n rule lets every sub-page fall back to the directive's intended look. */\n\n/* -----------------------------------------------------------------------------\n Filter Button (Mobile Only)\n ----------------------------------------------------------------------------- */\n.filter-button {\n display: none;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.75rem 1.25rem;\n border: 2px solid var(--mj-border-default);\n background: var(--mj-bg-page);\n color: var(--mj-text-primary);\n border-radius: var(--mj-radius-full);\n font-size: 0.875rem;\n font-weight: 600;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 44px;\n min-width: 44px;\n}\n\n.filter-button:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface);\n}\n\n.filter-button:active {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n border-color: var(--mj-brand-primary);\n}\n\n.filter-button i {\n font-size: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n Filter Modal (Mobile Bottom Sheet)\n ----------------------------------------------------------------------------- */\n.filter-modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.4);\n backdrop-filter: blur(4px);\n display: flex;\n align-items: flex-end;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n padding: 0;\n}\n\n.filter-modal {\n background: var(--mj-bg-page);\n border-radius: var(--mj-radius-2xl) var(--mj-radius-2xl) 0 0;\n box-shadow: var(--mj-shadow-2xl);\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n animation: slideUpFromBottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n display: flex;\n flex-direction: column;\n}\n\n.filter-modal-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 1.25rem 1.5rem;\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n}\n\n.filter-modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0;\n}\n\n.filter-modal-title i {\n color: var(--mj-brand-primary);\n font-size: 1.375rem;\n}\n\n.filter-modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mj-radius-full);\n transition: all 0.2s ease;\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.filter-modal-close:hover {\n background: var(--mj-brand-primary);\n color: var(--mj-brand-on-primary);\n}\n\n.filter-modal-body {\n padding: 1.5rem;\n overflow-y: auto;\n -webkit-overflow-scrolling: touch;\n flex: 1;\n}\n\n.filter-modal-footer {\n display: flex;\n gap: 0.75rem;\n padding: 1.25rem 1.5rem;\n border-top: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface-sunken);\n flex-shrink: 0;\n}\n\n.filter-modal-footer button {\n flex: 1;\n margin: 0;\n}\n\n/* Filter Options Container (Inside Modal) */\n.filter-options-container {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n}\n\n.filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n}\n\n.filter-group-label {\n font-size: 0.875rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin: 0;\n}\n\n.filter-group-options {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.filter-option {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n padding: 0.875rem 1rem;\n background: var(--mj-bg-surface-sunken);\n border: 2px solid var(--mj-border-default);\n border-radius: var(--mj-radius-lg);\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n min-height: 56px;\n}\n\n.filter-option:hover {\n border-color: var(--mj-brand-primary);\n background: var(--mj-bg-surface-sunken);\n}\n\n.filter-option.selected {\n background: var(--mj-color-accent-300);\n border-color: var(--mj-brand-primary);\n color: var(--mj-brand-primary);\n}\n\n.filter-option input[type=\"checkbox\"],\n.filter-option input[type=\"radio\"] {\n width: 20px;\n height: 20px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n flex-shrink: 0;\n}\n\n.filter-option-label {\n flex: 1;\n font-size: 1rem;\n font-weight: 500;\n color: var(--mj-text-primary);\n}\n\n.filter-option.selected .filter-option-label {\n color: var(--mj-brand-primary);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Utility Classes\n ----------------------------------------------------------------------------- */\n.text-danger {\n color: var(--mj-status-error);\n}\n\n.text-warning {\n color: var(--mj-color-warning-500);\n}\n\n.text-success {\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Animations\n ----------------------------------------------------------------------------- */\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n}\n\n@keyframes slideUp {\n from {\n transform: translateY(20px);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n@keyframes slideDown {\n from {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n}\n\n@keyframes slideUpFromBottom {\n from {\n transform: translateY(100%);\n opacity: 0;\n }\n to {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible {\n outline: 2px solid var(--mj-brand-primary);\n outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n Accessibility: Reduced Motion\n ----------------------------------------------------------------------------- */\n@media (prefers-reduced-motion: reduce) {\n *,\n *::before,\n *::after {\n animation-duration: 0.01ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.01ms !important;\n }\n}\n", "/* =============================================================================\n Application Management Component - Component-Specific Styles\n Shared patterns are in ../shared/styles/_admin-patterns.css\n ============================================================================= */\n\n/* :host already provides flex column / 100% height / overflow hidden via\n _admin-patterns.css. No bespoke container wrapper \u2014 see Section 10 of\n explorer-chrome-conventions. */\n\n/* Status chip group inside <mj-page-header-interior>'s [toolbar] slot. */\n.status-chips {\n display: inline-flex;\n align-items: center;\n gap: var(--mj-space-2);\n flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Stat Icon Overrides (Component-specific colors)\n ----------------------------------------------------------------------------- */\n.stat-icon-entities {\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-700);\n}\n\n.stat-icon-public {\n background: var(--mj-color-success-100);\n color: var(--mj-status-success);\n}\n\n/* -----------------------------------------------------------------------------\n Applications List\n ----------------------------------------------------------------------------- */\n.applications-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Card - Interactive\n ----------------------------------------------------------------------------- */\n.app-card {\n background: var(--mj-bg-surface-card);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-xl);\n overflow: hidden;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n cursor: pointer;\n}\n\n.app-card:hover {\n box-shadow: var(--mj-shadow-md);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded {\n box-shadow: var(--mj-shadow-lg);\n border-color: var(--mj-brand-primary);\n}\n\n.app-card.expanded .expand-btn i {\n transform: rotate(180deg);\n}\n\n.app-header {\n padding: 1.25rem 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: var(--mj-bg-surface);\n transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.app-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n min-width: 0;\n}\n\n.app-icon-wrapper {\n width: 48px;\n height: 48px;\n border-radius: var(--mj-radius-lg);\n background: var(--mj-color-accent-300);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mj-brand-primary);\n font-size: 1.25rem;\n flex-shrink: 0;\n}\n\n.app-details {\n flex: 1;\n min-width: 0;\n}\n\n.app-details .app-name {\n font-size: 1.0625rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 0.25rem 0;\n word-break: break-word;\n overflow-wrap: break-word;\n}\n\n.app-details .app-description {\n font-size: 0.9375rem;\n color: var(--mj-text-secondary);\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n@media (max-width: 639px) {\n .app-details .app-description {\n white-space: normal;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n }\n}\n\n.app-meta {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Application Actions\n ----------------------------------------------------------------------------- */\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Content (Expanded)\n ----------------------------------------------------------------------------- */\n.app-content {\n padding: 1.5rem;\n background: var(--mj-bg-page);\n border-top: 1px solid var(--mj-border-default);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.app-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n\n.app-stats .stat-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.9375rem;\n}\n\n.app-stats .stat-item i {\n color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-label {\n color: var(--mj-text-secondary);\n}\n\n.app-stats .stat-item .stat-value {\n color: var(--mj-text-primary);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Entities Section\n ----------------------------------------------------------------------------- */\n.entities-section {\n padding: 1rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n}\n\n.entities-section .section-title {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n font-size: 1rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n color: var(--mj-brand-primary);\n font-size: 1.125rem;\n}\n\n.entities-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 0.75rem;\n}\n\n@media (min-width: 640px) {\n .entities-grid {\n grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));\n }\n}\n\n.entity-item {\n padding: 0.75rem;\n background: var(--mj-bg-page);\n border: 1px solid var(--mj-border-default);\n border-radius: var(--mj-radius-md);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n border-color: var(--mj-brand-primary);\n box-shadow: var(--mj-shadow-sm);\n}\n\n.entity-item .entity-name {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mj-text-primary);\n margin-bottom: 0.25rem;\n}\n\n.entity-item .entity-meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mj-radius-full);\n font-size: 0.6875rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.03em;\n}\n\n.entity-badge.public {\n background: var(--mj-color-success-100);\n color: var(--mj-color-success-800);\n border: 1px solid var(--mj-status-success);\n}\n\n.entity-sequence {\n font-size: 0.8125rem;\n color: var(--mj-text-secondary);\n}\n\n.no-entities {\n color: var(--mj-text-secondary);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n Modal Body Override - warning callout\n ----------------------------------------------------------------------------- */\n.modal-body p {\n font-size: 1.0625rem;\n}\n\n.modal-body .text-warning {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1rem;\n background: var(--mj-color-warning-50);\n color: var(--mj-color-warning-500);\n border-radius: var(--mj-radius-md);\n font-weight: 500;\n}\n\n/* -----------------------------------------------------------------------------\n Desktop (1440px+) - Large Screen Overrides\n ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n .application-management-container {\n margin: 0 auto;\n }\n\n .mj-grid-4 {\n padding: 0 2rem 1rem 2rem;\n gap: 1.25rem;\n }\n}\n\n/* -----------------------------------------------------------------------------\n Mobile-specific adjustments (< 640px)\n ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n /* Hide stats cards on mobile to save space */\n .mj-grid-4 {\n display: none !important;\n }\n\n /* More compact scrollable content */\n .scrollable-content {\n padding: 0.5rem;\n }\n\n /* Modal styles */\n .modal-backdrop {\n padding: 0.5rem;\n }\n\n .modal-dialog {\n border-radius: var(--mj-radius-2xl);\n max-height: 95vh;\n }\n\n /* App Card Mobile Layout */\n .applications-list {\n gap: 0.5rem;\n }\n\n .app-card {\n border-radius: var(--mj-radius-md);\n overflow: hidden;\n }\n\n .app-header {\n flex-direction: row;\n align-items: center;\n justify-content: space-between;\n gap: 0.5rem;\n padding: 0.75rem;\n }\n\n .app-info {\n flex: 1;\n min-width: 0;\n flex-direction: row;\n align-items: flex-start;\n gap: 0.75rem;\n }\n\n .app-icon-wrapper {\n width: 36px;\n height: 36px;\n font-size: 0.875rem;\n flex-shrink: 0;\n border-radius: var(--mj-radius-md);\n }\n\n .app-details {\n flex: 1;\n min-width: 0;\n }\n\n .app-details .app-name {\n font-size: 0.9375rem;\n line-height: 1.3;\n margin-bottom: 0.125rem;\n }\n\n .app-details .app-description {\n font-size: 0.8125rem;\n -webkit-line-clamp: 1;\n line-clamp: 1;\n }\n\n /* On mobile: hide status and actions in header, show only expand button */\n .app-meta {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: flex-end;\n padding-top: 0;\n border-top: none;\n width: auto;\n }\n\n .app-meta .status-badge {\n display: none;\n }\n\n .app-meta .app-actions {\n display: none;\n }\n\n .expand-btn {\n flex-shrink: 0;\n min-width: 36px;\n min-height: 36px;\n padding: 0.5rem;\n border-radius: var(--mj-radius-full);\n }\n\n .expand-btn i {\n font-size: 1rem;\n }\n\n /* Mobile actions bar - visible on mobile only */\n .mobile-actions-bar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n padding: 0.75rem;\n background: var(--mj-bg-surface-sunken);\n border-radius: var(--mj-radius-md);\n margin-bottom: 0.75rem;\n }\n\n .mobile-actions-bar .status-badge {\n padding: 0.25rem 0.625rem;\n font-size: 0.6875rem;\n }\n\n .mobile-action-buttons {\n display: flex;\n gap: 0.5rem;\n }\n\n .mobile-action-buttons .mj-btn-sm {\n display: flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.5rem 0.875rem;\n min-height: 36px;\n border-radius: var(--mj-radius-full);\n }\n\n .mobile-action-buttons .mj-btn-sm i {\n font-size: 0.875rem;\n }\n\n .mobile-action-buttons .btn-label {\n font-size: 0.8125rem;\n }\n\n .app-stats {\n flex-direction: column;\n gap: 0.5rem;\n margin-bottom: 1rem;\n }\n\n .app-content {\n padding: 0.75rem;\n }\n\n /* Entities grid in expanded view */\n .entities-grid {\n grid-template-columns: 1fr;\n gap: 0.5rem;\n }\n\n .entity-item {\n padding: 0.5rem;\n }\n\n .entity-item .entity-name {\n font-size: 0.875rem;\n word-break: break-word;\n }\n\n /* Empty state compact */\n .empty-state {\n padding: 2rem 1rem;\n }\n\n .empty-state .empty-icon {\n font-size: 2.5rem;\n }\n\n /* Loading container compact */\n .loading-container {\n padding: 2rem 1rem;\n }\n}\n\n/* Small mobile (< 375px) - Extra compact */\n@media (max-width: 374px) {\n .scrollable-content {\n padding: 0.375rem;\n }\n\n .app-header {\n padding: 0.625rem;\n }\n}\n"] }]
690
635
  }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }], null); })();
691
636
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationManagementComponent, { className: "ApplicationManagementComponent", filePath: "src/lib/application-management/application-management.component.ts", lineNumber: 29 }); })();
692
637
  //# sourceMappingURL=application-management.component.js.map