@memberjunction/ng-explorer-settings 3.2.0 → 3.3.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 (56) hide show
  1. package/dist/lib/application-management/application-dialog/application-dialog.component.d.ts +15 -1
  2. package/dist/lib/application-management/application-dialog/application-dialog.component.d.ts.map +1 -1
  3. package/dist/lib/application-management/application-dialog/application-dialog.component.js +329 -190
  4. package/dist/lib/application-management/application-dialog/application-dialog.component.js.map +1 -1
  5. package/dist/lib/application-management/application-management.component.d.ts.map +1 -1
  6. package/dist/lib/application-management/application-management.component.js +265 -184
  7. package/dist/lib/application-management/application-management.component.js.map +1 -1
  8. package/dist/lib/entity-permissions/entity-permissions.component.d.ts +1 -0
  9. package/dist/lib/entity-permissions/entity-permissions.component.d.ts.map +1 -1
  10. package/dist/lib/entity-permissions/entity-permissions.component.js +369 -192
  11. package/dist/lib/entity-permissions/entity-permissions.component.js.map +1 -1
  12. package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.d.ts.map +1 -1
  13. package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js +160 -143
  14. package/dist/lib/entity-permissions/permission-dialog/permission-dialog.component.js.map +1 -1
  15. package/dist/lib/module.d.ts +20 -25
  16. package/dist/lib/module.d.ts.map +1 -1
  17. package/dist/lib/module.js +20 -44
  18. package/dist/lib/module.js.map +1 -1
  19. package/dist/lib/notification-preferences/notification-preferences.component.d.ts +77 -0
  20. package/dist/lib/notification-preferences/notification-preferences.component.d.ts.map +1 -1
  21. package/dist/lib/notification-preferences/notification-preferences.component.js +153 -77
  22. package/dist/lib/notification-preferences/notification-preferences.component.js.map +1 -1
  23. package/dist/lib/role-management/role-dialog/role-dialog.component.d.ts.map +1 -1
  24. package/dist/lib/role-management/role-dialog/role-dialog.component.js +93 -89
  25. package/dist/lib/role-management/role-dialog/role-dialog.component.js.map +1 -1
  26. package/dist/lib/role-management/role-management.component.d.ts +1 -0
  27. package/dist/lib/role-management/role-management.component.d.ts.map +1 -1
  28. package/dist/lib/role-management/role-management.component.js +275 -158
  29. package/dist/lib/role-management/role-management.component.js.map +1 -1
  30. package/dist/lib/settings/settings.component.d.ts +54 -1
  31. package/dist/lib/settings/settings.component.d.ts.map +1 -1
  32. package/dist/lib/settings/settings.component.js +528 -182
  33. package/dist/lib/settings/settings.component.js.map +1 -1
  34. package/dist/lib/shared/settings-card.component.d.ts.map +1 -1
  35. package/dist/lib/shared/settings-card.component.js +21 -18
  36. package/dist/lib/shared/settings-card.component.js.map +1 -1
  37. package/dist/lib/sql-logging/sql-logging.component.d.ts +12 -3
  38. package/dist/lib/sql-logging/sql-logging.component.d.ts.map +1 -1
  39. package/dist/lib/sql-logging/sql-logging.component.js +318 -245
  40. package/dist/lib/sql-logging/sql-logging.component.js.map +1 -1
  41. package/dist/lib/user-app-config/user-app-config.component.d.ts +21 -3
  42. package/dist/lib/user-app-config/user-app-config.component.d.ts.map +1 -1
  43. package/dist/lib/user-app-config/user-app-config.component.js +202 -147
  44. package/dist/lib/user-app-config/user-app-config.component.js.map +1 -1
  45. package/dist/lib/user-management/user-dialog/user-dialog.component.d.ts.map +1 -1
  46. package/dist/lib/user-management/user-dialog/user-dialog.component.js +120 -116
  47. package/dist/lib/user-management/user-dialog/user-dialog.component.js.map +1 -1
  48. package/dist/lib/user-management/user-management.component.d.ts +32 -2
  49. package/dist/lib/user-management/user-management.component.d.ts.map +1 -1
  50. package/dist/lib/user-management/user-management.component.js +822 -297
  51. package/dist/lib/user-management/user-management.component.js.map +1 -1
  52. package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts +31 -2
  53. package/dist/lib/user-profile-settings/user-profile-settings.component.d.ts.map +1 -1
  54. package/dist/lib/user-profile-settings/user-profile-settings.component.js +213 -80
  55. package/dist/lib/user-profile-settings/user-profile-settings.component.js.map +1 -1
  56. package/package.json +21 -20
@@ -11,27 +11,25 @@ import { RunView, Metadata } from '@memberjunction/core';
11
11
  import { BaseDashboard } from '@memberjunction/ng-shared';
12
12
  import { RegisterClass } from '@memberjunction/global';
13
13
  import * as i0 from "@angular/core";
14
- import * as i1 from "./application-dialog/application-dialog.component";
15
- import * as i2 from "@angular/common";
14
+ import * as i1 from "@memberjunction/ng-shared-generic";
15
+ import * as i2 from "./application-dialog/application-dialog.component";
16
+ import * as i3 from "@angular/common";
16
17
  const _forTrack0 = ($index, $item) => $item.ID;
17
- function ApplicationManagementComponent_Conditional_56_Template(rf, ctx) { if (rf & 1) {
18
- i0.ɵɵelementStart(0, "div", 28)(1, "div", 33);
19
- i0.ɵɵelement(2, "div", 34)(3, "div", 34)(4, "div", 34);
18
+ function ApplicationManagementComponent_Conditional_60_Template(rf, ctx) { if (rf & 1) {
19
+ i0.ɵɵelementStart(0, "div", 34);
20
+ i0.ɵɵelement(1, "mj-loading", 39);
20
21
  i0.ɵɵelementEnd();
21
- i0.ɵɵelementStart(5, "div", 35);
22
- i0.ɵɵtext(6, "Loading applications...");
23
- i0.ɵɵelementEnd()();
24
22
  } }
25
- function ApplicationManagementComponent_Conditional_57_Template(rf, ctx) { if (rf & 1) {
23
+ function ApplicationManagementComponent_Conditional_61_Template(rf, ctx) { if (rf & 1) {
26
24
  const _r1 = i0.ɵɵgetCurrentView();
27
- i0.ɵɵelementStart(0, "div", 29)(1, "div", 36);
28
- i0.ɵɵelement(2, "i", 37);
29
- i0.ɵɵelementStart(3, "p", 38);
25
+ i0.ɵɵelementStart(0, "div", 35)(1, "div", 40);
26
+ i0.ɵɵelement(2, "i", 41);
27
+ i0.ɵɵelementStart(3, "p", 42);
30
28
  i0.ɵɵtext(4);
31
29
  i0.ɵɵelementEnd();
32
- i0.ɵɵelementStart(5, "button", 4);
33
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_57_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.loadInitialData()); });
34
- i0.ɵɵelement(6, "i", 3);
30
+ i0.ɵɵelementStart(5, "button", 43);
31
+ 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()); });
32
+ i0.ɵɵelement(6, "i", 44);
35
33
  i0.ɵɵtext(7, " Try Again ");
36
34
  i0.ɵɵelementEnd()()();
37
35
  } if (rf & 2) {
@@ -39,40 +37,40 @@ function ApplicationManagementComponent_Conditional_57_Template(rf, ctx) { if (r
39
37
  i0.ɵɵadvance(4);
40
38
  i0.ɵɵtextInterpolate(ctx_r1.error);
41
39
  } }
42
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
43
- i0.ɵɵelementStart(0, "span", 70);
40
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
41
+ i0.ɵɵelementStart(0, "span", 82);
44
42
  i0.ɵɵtext(1, "Public");
45
43
  i0.ɵɵelementEnd();
46
44
  } }
47
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
48
- i0.ɵɵelementStart(0, "div", 67)(1, "div", 68);
45
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
46
+ i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
49
47
  i0.ɵɵtext(2);
50
48
  i0.ɵɵelementEnd();
51
- i0.ɵɵelementStart(3, "div", 69);
52
- i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Conditional_0_Conditional_4_Template, 2, 0, "span", 70);
53
- i0.ɵɵelementStart(5, "span", 71);
49
+ i0.ɵɵelementStart(3, "div", 81);
50
+ i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Conditional_4_Template, 2, 0, "span", 82);
51
+ i0.ɵɵelementStart(5, "span", 83);
54
52
  i0.ɵɵtext(6);
55
53
  i0.ɵɵelementEnd()()();
56
54
  } if (rf & 2) {
57
- const appEntity_r5 = i0.ɵɵnextContext().$implicit;
55
+ const appEntity_r6 = i0.ɵɵnextContext().$implicit;
58
56
  i0.ɵɵadvance(2);
59
57
  i0.ɵɵtextInterpolate(ctx.Name);
60
58
  i0.ɵɵadvance(2);
61
- i0.ɵɵconditional(appEntity_r5.DefaultForNewUser ? 4 : -1);
59
+ i0.ɵɵconditional(appEntity_r6.DefaultForNewUser ? 4 : -1);
62
60
  i0.ɵɵadvance(2);
63
- i0.ɵɵtextInterpolate1("Order: ", appEntity_r5.Sequence, "");
61
+ i0.ɵɵtextInterpolate1("Order: ", appEntity_r6.Sequence, "");
64
62
  } }
65
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Template(rf, ctx) { if (rf & 1) {
66
- i0.ɵɵtemplate(0, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Conditional_0_Template, 7, 3, "div", 67);
63
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template(rf, ctx) { if (rf & 1) {
64
+ i0.ɵɵtemplate(0, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Conditional_0_Template, 7, 3, "div", 79);
67
65
  } if (rf & 2) {
68
66
  let tmp_23_0;
69
- const appEntity_r5 = ctx.$implicit;
67
+ const appEntity_r6 = ctx.$implicit;
70
68
  const ctx_r1 = i0.ɵɵnextContext(5);
71
- i0.ɵɵconditional((tmp_23_0 = ctx_r1.getEntityInfo(appEntity_r5.EntityID)) ? 0 : -1, tmp_23_0);
69
+ i0.ɵɵconditional((tmp_23_0 = ctx_r1.getEntityInfo(appEntity_r6.EntityID)) ? 0 : -1, tmp_23_0);
72
70
  } }
73
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_Template(rf, ctx) { if (rf & 1) {
74
- i0.ɵɵelementStart(0, "div", 65);
75
- i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_For_2_Template, 1, 1, null, null, _forTrack0);
71
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_Template(rf, ctx) { if (rf & 1) {
72
+ i0.ɵɵelementStart(0, "div", 77);
73
+ i0.ɵɵrepeaterCreate(1, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_38_For_2_Template, 1, 1, null, null, _forTrack0);
76
74
  i0.ɵɵelementEnd();
77
75
  } if (rf & 2) {
78
76
  const app_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -80,92 +78,120 @@ function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Cond
80
78
  i0.ɵɵadvance();
81
79
  i0.ɵɵrepeater(ctx_r1.getAppEntities(app_r4.ID));
82
80
  } }
83
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_27_Template(rf, ctx) { if (rf & 1) {
84
- i0.ɵɵelementStart(0, "p", 66);
81
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Conditional_39_Template(rf, ctx) { if (rf & 1) {
82
+ i0.ɵɵelementStart(0, "p", 78);
85
83
  i0.ɵɵtext(1, "No entities configured for this application");
86
84
  i0.ɵɵelementEnd();
87
85
  } }
88
- function ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
89
- i0.ɵɵelementStart(0, "div", 58)(1, "div", 59)(2, "div", 60);
90
- i0.ɵɵelement(3, "i", 16);
91
- i0.ɵɵelementStart(4, "span", 12);
92
- i0.ɵɵtext(5, "Entities:");
86
+ function ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template(rf, ctx) { if (rf & 1) {
87
+ const _r5 = i0.ɵɵgetCurrentView();
88
+ i0.ɵɵelementStart(0, "div", 65)(1, "div", 66);
89
+ 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()); });
90
+ i0.ɵɵelementStart(2, "span", 57);
91
+ i0.ɵɵtext(3);
93
92
  i0.ɵɵelementEnd();
94
- i0.ɵɵelementStart(6, "span", 11);
95
- i0.ɵɵtext(7);
93
+ i0.ɵɵelementStart(4, "div", 67)(5, "button", 59);
94
+ 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)); });
95
+ i0.ɵɵelement(6, "i", 60);
96
+ i0.ɵɵelementStart(7, "span", 68);
97
+ i0.ɵɵtext(8, "Edit");
98
+ i0.ɵɵelementEnd()();
99
+ i0.ɵɵelementStart(9, "button", 61);
100
+ 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)); });
101
+ i0.ɵɵelement(10, "i", 62);
102
+ i0.ɵɵelementStart(11, "span", 68);
103
+ i0.ɵɵtext(12, "Delete");
104
+ i0.ɵɵelementEnd()()()();
105
+ i0.ɵɵelementStart(13, "div", 69)(14, "div", 70);
106
+ i0.ɵɵelement(15, "i", 71);
107
+ i0.ɵɵelementStart(16, "span", 14);
108
+ i0.ɵɵtext(17, "Entities:");
109
+ i0.ɵɵelementEnd();
110
+ i0.ɵɵelementStart(18, "span", 72);
111
+ i0.ɵɵtext(19);
96
112
  i0.ɵɵelementEnd()();
97
- i0.ɵɵelementStart(8, "div", 60);
98
- i0.ɵɵelement(9, "i", 61);
99
- i0.ɵɵelementStart(10, "span", 12);
100
- i0.ɵɵtext(11, "Created:");
113
+ i0.ɵɵelementStart(20, "div", 70);
114
+ i0.ɵɵelement(21, "i", 73);
115
+ i0.ɵɵelementStart(22, "span", 14);
116
+ i0.ɵɵtext(23, "Created:");
101
117
  i0.ɵɵelementEnd();
102
- i0.ɵɵelementStart(12, "span", 11);
103
- i0.ɵɵtext(13);
104
- i0.ɵɵpipe(14, "date");
118
+ i0.ɵɵelementStart(24, "span", 72);
119
+ i0.ɵɵtext(25);
120
+ i0.ɵɵpipe(26, "date");
105
121
  i0.ɵɵelementEnd()();
106
- i0.ɵɵelementStart(15, "div", 60);
107
- i0.ɵɵelement(16, "i", 62);
108
- i0.ɵɵelementStart(17, "span", 12);
109
- i0.ɵɵtext(18, "Updated:");
122
+ i0.ɵɵelementStart(27, "div", 70);
123
+ i0.ɵɵelement(28, "i", 74);
124
+ i0.ɵɵelementStart(29, "span", 14);
125
+ i0.ɵɵtext(30, "Updated:");
110
126
  i0.ɵɵelementEnd();
111
- i0.ɵɵelementStart(19, "span", 11);
112
- i0.ɵɵtext(20);
113
- i0.ɵɵpipe(21, "date");
127
+ i0.ɵɵelementStart(31, "span", 72);
128
+ i0.ɵɵtext(32);
129
+ i0.ɵɵpipe(33, "date");
114
130
  i0.ɵɵelementEnd()()();
115
- i0.ɵɵelementStart(22, "div", 63)(23, "h4", 64);
116
- i0.ɵɵelement(24, "i", 16);
117
- i0.ɵɵtext(25, " Application Entities ");
131
+ i0.ɵɵelementStart(34, "div", 75)(35, "h4", 76);
132
+ i0.ɵɵelement(36, "i", 71);
133
+ i0.ɵɵtext(37, " Application Entities ");
118
134
  i0.ɵɵelementEnd();
119
- i0.ɵɵtemplate(26, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_26_Template, 3, 0, "div", 65)(27, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Conditional_27_Template, 2, 0, "p", 66);
135
+ i0.ɵɵtemplate(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);
120
136
  i0.ɵɵelementEnd()();
121
137
  } if (rf & 2) {
122
138
  const app_r4 = i0.ɵɵnextContext().$implicit;
123
139
  const ctx_r1 = i0.ɵɵnextContext(2);
124
- i0.ɵɵadvance(7);
140
+ i0.ɵɵadvance(2);
141
+ i0.ɵɵclassMap(ctx_r1.getAppStatusClass(app_r4));
142
+ i0.ɵɵadvance();
143
+ i0.ɵɵtextInterpolate1(" ", ctx_r1.getAppStatusLabel(app_r4), " ");
144
+ i0.ɵɵadvance(2);
145
+ i0.ɵɵattribute("aria-label", "Edit " + app_r4.Name);
146
+ i0.ɵɵadvance(4);
147
+ i0.ɵɵattribute("aria-label", "Delete " + app_r4.Name);
148
+ i0.ɵɵadvance(10);
125
149
  i0.ɵɵtextInterpolate(ctx_r1.getAppEntities(app_r4.ID).length);
126
150
  i0.ɵɵadvance(6);
127
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(14, 4, app_r4.__mj_CreatedAt, "short"));
151
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(26, 9, app_r4.__mj_CreatedAt, "short"));
128
152
  i0.ɵɵadvance(7);
129
- i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(21, 7, app_r4.__mj_UpdatedAt, "short"));
153
+ i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(33, 12, app_r4.__mj_UpdatedAt, "short"));
130
154
  i0.ɵɵadvance(6);
131
- i0.ɵɵconditional(ctx_r1.getAppEntities(app_r4.ID).length > 0 ? 26 : 27);
155
+ i0.ɵɵconditional(ctx_r1.getAppEntities(app_r4.ID).length > 0 ? 38 : 39);
132
156
  } }
133
- function ApplicationManagementComponent_Conditional_58_For_3_Template(rf, ctx) { if (rf & 1) {
157
+ function ApplicationManagementComponent_Conditional_62_For_3_Template(rf, ctx) { if (rf & 1) {
134
158
  const _r3 = i0.ɵɵgetCurrentView();
135
- i0.ɵɵelementStart(0, "div", 42)(1, "div", 43);
136
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_58_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)); });
137
- i0.ɵɵelementStart(2, "div", 44)(3, "div", 45);
138
- i0.ɵɵelement(4, "i");
159
+ i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
160
+ 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)); });
161
+ i0.ɵɵelementStart(2, "div", 50)(3, "div", 51);
162
+ i0.ɵɵelement(4, "i", 52);
139
163
  i0.ɵɵelementEnd();
140
- i0.ɵɵelementStart(5, "div", 46)(6, "h3", 47);
164
+ i0.ɵɵelementStart(5, "div", 53)(6, "h3", 54);
141
165
  i0.ɵɵtext(7);
142
166
  i0.ɵɵelementEnd();
143
- i0.ɵɵelementStart(8, "p", 48);
167
+ i0.ɵɵelementStart(8, "p", 55);
144
168
  i0.ɵɵtext(9);
145
169
  i0.ɵɵelementEnd()()();
146
- i0.ɵɵelementStart(10, "div", 49)(11, "span", 50);
170
+ i0.ɵɵelementStart(10, "div", 56)(11, "span", 57);
147
171
  i0.ɵɵtext(12);
148
172
  i0.ɵɵelementEnd();
149
- i0.ɵɵelementStart(13, "div", 51);
150
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_58_For_3_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
151
- i0.ɵɵelementStart(14, "button", 52);
152
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_58_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)); });
153
- i0.ɵɵelement(15, "i", 53);
173
+ i0.ɵɵelementStart(13, "div", 58);
174
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_62_For_3_Template_div_click_13_listener($event) { i0.ɵɵrestoreView(_r3); return i0.ɵɵresetView($event.stopPropagation()); });
175
+ i0.ɵɵelementStart(14, "button", 59);
176
+ 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)); });
177
+ i0.ɵɵelement(15, "i", 60);
154
178
  i0.ɵɵelementEnd();
155
- i0.ɵɵelementStart(16, "button", 54);
156
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_58_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)); });
157
- i0.ɵɵelement(17, "i", 55);
179
+ i0.ɵɵelementStart(16, "button", 61);
180
+ 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)); });
181
+ i0.ɵɵelement(17, "i", 62);
158
182
  i0.ɵɵelementEnd()();
159
- i0.ɵɵelementStart(18, "button", 56);
160
- i0.ɵɵelement(19, "i", 57);
183
+ i0.ɵɵelementStart(18, "button", 63);
184
+ i0.ɵɵelement(19, "i", 64);
161
185
  i0.ɵɵelementEnd()()();
162
- i0.ɵɵtemplate(20, ApplicationManagementComponent_Conditional_58_For_3_Conditional_20_Template, 28, 10, "div", 58);
186
+ i0.ɵɵtemplate(20, ApplicationManagementComponent_Conditional_62_For_3_Conditional_20_Template, 40, 15, "div", 65);
163
187
  i0.ɵɵelementEnd();
164
188
  } if (rf & 2) {
165
189
  const app_r4 = ctx.$implicit;
166
190
  const ctx_r1 = i0.ɵɵnextContext(2);
167
191
  i0.ɵɵclassProp("expanded", ctx_r1.isAppExpanded(app_r4.ID));
168
- i0.ɵɵadvance(4);
192
+ i0.ɵɵadvance();
193
+ i0.ɵɵattribute("aria-expanded", ctx_r1.isAppExpanded(app_r4.ID));
194
+ i0.ɵɵadvance(3);
169
195
  i0.ɵɵclassMap("fa-solid " + ctx_r1.getAppIcon(app_r4));
170
196
  i0.ɵɵadvance(3);
171
197
  i0.ɵɵtextInterpolate(app_r4.Name);
@@ -175,23 +201,27 @@ function ApplicationManagementComponent_Conditional_58_For_3_Template(rf, ctx) {
175
201
  i0.ɵɵclassMap(ctx_r1.getAppStatusClass(app_r4));
176
202
  i0.ɵɵadvance();
177
203
  i0.ɵɵtextInterpolate1(" ", ctx_r1.getAppStatusLabel(app_r4), " ");
178
- i0.ɵɵadvance(8);
204
+ i0.ɵɵadvance(2);
205
+ i0.ɵɵattribute("aria-label", "Edit " + app_r4.Name);
206
+ i0.ɵɵadvance(2);
207
+ i0.ɵɵattribute("aria-label", "Delete " + app_r4.Name);
208
+ i0.ɵɵadvance(4);
179
209
  i0.ɵɵconditional(ctx_r1.isAppExpanded(app_r4.ID) ? 20 : -1);
180
210
  } }
181
- function ApplicationManagementComponent_Conditional_58_Conditional_4_Template(rf, ctx) { if (rf & 1) {
182
- i0.ɵɵelementStart(0, "div", 41);
183
- i0.ɵɵelement(1, "i", 72);
184
- i0.ɵɵelementStart(2, "p", 73);
211
+ function ApplicationManagementComponent_Conditional_62_Conditional_4_Template(rf, ctx) { if (rf & 1) {
212
+ i0.ɵɵelementStart(0, "div", 47);
213
+ i0.ɵɵelement(1, "i", 84);
214
+ i0.ɵɵelementStart(2, "p", 85);
185
215
  i0.ɵɵtext(3, "No applications found");
186
216
  i0.ɵɵelementEnd();
187
- i0.ɵɵelementStart(4, "p", 74);
217
+ i0.ɵɵelementStart(4, "p", 86);
188
218
  i0.ɵɵtext(5, "Try adjusting your filters or create a new application");
189
219
  i0.ɵɵelementEnd()();
190
220
  } }
191
- function ApplicationManagementComponent_Conditional_58_Template(rf, ctx) { if (rf & 1) {
192
- i0.ɵɵelementStart(0, "div", 30)(1, "div", 39);
193
- i0.ɵɵrepeaterCreate(2, ApplicationManagementComponent_Conditional_58_For_3_Template, 21, 10, "div", 40, _forTrack0);
194
- i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_58_Conditional_4_Template, 6, 0, "div", 41);
221
+ function ApplicationManagementComponent_Conditional_62_Template(rf, ctx) { if (rf & 1) {
222
+ i0.ɵɵelementStart(0, "div", 36)(1, "div", 45);
223
+ i0.ɵɵrepeaterCreate(2, ApplicationManagementComponent_Conditional_62_For_3_Template, 21, 13, "div", 46, _forTrack0);
224
+ i0.ɵɵtemplate(4, ApplicationManagementComponent_Conditional_62_Conditional_4_Template, 6, 0, "div", 47);
195
225
  i0.ɵɵelementEnd()();
196
226
  } if (rf & 2) {
197
227
  const ctx_r1 = i0.ɵɵnextContext();
@@ -200,56 +230,55 @@ function ApplicationManagementComponent_Conditional_58_Template(rf, ctx) { if (r
200
230
  i0.ɵɵadvance(2);
201
231
  i0.ɵɵconditional(ctx_r1.filteredApplications.length === 0 ? 4 : -1);
202
232
  } }
203
- function ApplicationManagementComponent_Conditional_60_Conditional_22_Template(rf, ctx) { if (rf & 1) {
204
- i0.ɵɵelement(0, "i", 88);
233
+ function ApplicationManagementComponent_Conditional_64_Conditional_19_Template(rf, ctx) { if (rf & 1) {
234
+ i0.ɵɵelement(0, "i", 100);
205
235
  i0.ɵɵtext(1, " Deleting... ");
206
236
  } }
207
- function ApplicationManagementComponent_Conditional_60_Conditional_23_Template(rf, ctx) { if (rf & 1) {
208
- i0.ɵɵelement(0, "i", 55);
237
+ function ApplicationManagementComponent_Conditional_64_Conditional_20_Template(rf, ctx) { if (rf & 1) {
238
+ i0.ɵɵelement(0, "i", 101);
209
239
  i0.ɵɵtext(1, " Delete Application ");
210
240
  } }
211
- function ApplicationManagementComponent_Conditional_60_Template(rf, ctx) { if (rf & 1) {
212
- const _r6 = i0.ɵɵgetCurrentView();
213
- i0.ɵɵelementStart(0, "div", 75);
214
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_60_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
215
- i0.ɵɵelementStart(1, "div", 76);
216
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_60_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r6); return i0.ɵɵresetView($event.stopPropagation()); });
217
- i0.ɵɵelementStart(2, "div", 77)(3, "h3", 78);
218
- i0.ɵɵelement(4, "i", 79);
241
+ function ApplicationManagementComponent_Conditional_64_Template(rf, ctx) { if (rf & 1) {
242
+ const _r7 = i0.ɵɵgetCurrentView();
243
+ i0.ɵɵelementStart(0, "div", 87);
244
+ 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); });
245
+ i0.ɵɵelementStart(1, "div", 88);
246
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_64_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r7); return i0.ɵɵresetView($event.stopPropagation()); });
247
+ i0.ɵɵelementStart(2, "div", 89)(3, "h3", 90);
248
+ i0.ɵɵelement(4, "i", 91);
219
249
  i0.ɵɵtext(5, " Confirm Delete ");
220
250
  i0.ɵɵelementEnd();
221
- i0.ɵɵelementStart(6, "button", 80);
222
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_60_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
223
- i0.ɵɵelement(7, "i", 81);
251
+ i0.ɵɵelementStart(6, "button", 92);
252
+ 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); });
253
+ i0.ɵɵelement(7, "i", 93);
224
254
  i0.ɵɵelementEnd()();
225
- i0.ɵɵelementStart(8, "div", 82)(9, "p");
255
+ i0.ɵɵelementStart(8, "div", 94)(9, "p");
226
256
  i0.ɵɵtext(10, "Are you sure you want to delete the application ");
227
257
  i0.ɵɵelementStart(11, "strong");
228
258
  i0.ɵɵtext(12);
229
259
  i0.ɵɵelementEnd();
230
260
  i0.ɵɵtext(13, "?");
231
261
  i0.ɵɵelementEnd();
232
- i0.ɵɵelementStart(14, "p", 83);
233
- i0.ɵɵelement(15, "i", 84);
262
+ i0.ɵɵelementStart(14, "p", 95);
263
+ i0.ɵɵelement(15, "i", 96);
234
264
  i0.ɵɵtext(16, " This will remove all entity associations for this application. ");
235
265
  i0.ɵɵelementEnd()();
236
- i0.ɵɵelementStart(17, "div", 85)(18, "button", 86);
237
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_60_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.showDeleteConfirm = false); });
238
- i0.ɵɵelement(19, "i", 81);
239
- i0.ɵɵtext(20, " Cancel ");
266
+ i0.ɵɵelementStart(17, "div", 97)(18, "button", 98);
267
+ 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()); });
268
+ i0.ɵɵtemplate(19, ApplicationManagementComponent_Conditional_64_Conditional_19_Template, 2, 0)(20, ApplicationManagementComponent_Conditional_64_Conditional_20_Template, 2, 0);
240
269
  i0.ɵɵelementEnd();
241
- i0.ɵɵelementStart(21, "button", 87);
242
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Conditional_60_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.deleteApplication()); });
243
- i0.ɵɵtemplate(22, ApplicationManagementComponent_Conditional_60_Conditional_22_Template, 2, 0)(23, ApplicationManagementComponent_Conditional_60_Conditional_23_Template, 2, 0);
270
+ i0.ɵɵelementStart(21, "button", 99);
271
+ 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); });
272
+ i0.ɵɵtext(22, " Cancel ");
244
273
  i0.ɵɵelementEnd()()()();
245
274
  } if (rf & 2) {
246
275
  const ctx_r1 = i0.ɵɵnextContext();
247
276
  i0.ɵɵadvance(12);
248
277
  i0.ɵɵtextInterpolate(ctx_r1.selectedApp.Name);
249
- i0.ɵɵadvance(9);
278
+ i0.ɵɵadvance(6);
250
279
  i0.ɵɵproperty("disabled", ctx_r1.isLoading);
251
280
  i0.ɵɵadvance();
252
- i0.ɵɵconditional(ctx_r1.isLoading ? 22 : 23);
281
+ i0.ɵɵconditional(ctx_r1.isLoading ? 19 : 20);
253
282
  } }
254
283
  let ApplicationManagementComponent = class ApplicationManagementComponent extends BaseDashboard {
255
284
  // State management
@@ -461,7 +490,52 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
461
490
  }
462
491
  }
463
492
  getAppIcon(app) {
464
- // You can customize icons based on app type or name
493
+ // Map application names to appropriate icons based on their purpose
494
+ const name = (app.Name || '').toLowerCase();
495
+ // Common application type mappings
496
+ if (name.includes('admin') || name.includes('management')) {
497
+ return 'fa-cog';
498
+ }
499
+ if (name.includes('report') || name.includes('analytics') || name.includes('dashboard')) {
500
+ return 'fa-chart-line';
501
+ }
502
+ if (name.includes('user') || name.includes('people') || name.includes('employee')) {
503
+ return 'fa-users';
504
+ }
505
+ if (name.includes('settings') || name.includes('config')) {
506
+ return 'fa-sliders';
507
+ }
508
+ if (name.includes('data') || name.includes('database')) {
509
+ return 'fa-database';
510
+ }
511
+ if (name.includes('file') || name.includes('document')) {
512
+ return 'fa-file-alt';
513
+ }
514
+ if (name.includes('mail') || name.includes('email') || name.includes('message')) {
515
+ return 'fa-envelope';
516
+ }
517
+ if (name.includes('search') || name.includes('explorer')) {
518
+ return 'fa-search';
519
+ }
520
+ if (name.includes('calendar') || name.includes('schedule') || name.includes('event')) {
521
+ return 'fa-calendar';
522
+ }
523
+ if (name.includes('security') || name.includes('auth') || name.includes('permission')) {
524
+ return 'fa-shield-alt';
525
+ }
526
+ if (name.includes('integration') || name.includes('api') || name.includes('connect')) {
527
+ return 'fa-plug';
528
+ }
529
+ if (name.includes('workflow') || name.includes('process') || name.includes('automation')) {
530
+ return 'fa-project-diagram';
531
+ }
532
+ if (name.includes('ai') || name.includes('intelligence') || name.includes('machine')) {
533
+ return 'fa-brain';
534
+ }
535
+ if (name.includes('home') || name.includes('main') || name.includes('default')) {
536
+ return 'fa-home';
537
+ }
538
+ // Default icon for applications
465
539
  return 'fa-grid-2';
466
540
  }
467
541
  getAppStatusClass(app) {
@@ -476,85 +550,89 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
476
550
  this.loadInitialData();
477
551
  }
478
552
  static ɵfac = function ApplicationManagementComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationManagementComponent)(); };
479
- static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 61, vars: 20, consts: [[1, "application-management-container"], [1, "action-buttons"], [1, "mj-btn", "mj-btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-refresh"], [1, "mj-btn", "mj-btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "mj-grid", "mj-grid-4"], [1, "mj-card"], [1, "stat-icon", "stat-icon-total"], [1, "fa-solid", "fa-grid-2"], [1, "stat-content"], [1, "stat-value"], [1, "stat-label"], [1, "stat-icon", "stat-icon-active"], [1, "fa-solid", "fa-check-circle"], [1, "stat-icon", "stat-icon-entities"], [1, "fa-solid", "fa-database"], [1, "stat-icon", "stat-icon-public"], [1, "fa-solid", "fa-globe"], [1, "filters-section"], [1, "filters-row"], [1, "mj-search"], [1, "fa-solid", "fa-search", "mj-search-icon"], ["type", "text", "placeholder", "Search applications by name or description...", 1, "mj-search-input", 3, "input", "value"], [1, "mj-filter-group"], [1, "mj-filter-label"], [1, "mj-filter-buttons"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [1, "loading-container"], [1, "error-container"], [1, "content-area"], [3, "result", "visible", "data"], [1, "modal-backdrop"], [1, "loading-spinner"], [1, "spinner-ring"], [1, "loading-text"], [1, "error-content"], [1, "fa-solid", "fa-exclamation-triangle", "error-icon"], [1, "error-message"], [1, "applications-list"], [1, "app-card", 3, "expanded"], [1, "empty-state"], [1, "app-card"], [1, "app-header", 3, "click"], [1, "app-info"], [1, "app-icon-wrapper"], [1, "app-details"], [1, "app-name"], [1, "app-description"], [1, "app-meta"], [1, "status-badge"], [1, "app-actions", 3, "click"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "expand-btn"], [1, "fa-solid", "fa-chevron-down"], [1, "app-content"], [1, "app-stats"], [1, "stat-item"], [1, "fa-solid", "fa-calendar"], [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"], [1, "fa-solid", "fa-grid-2", "empty-icon"], [1, "empty-text"], [1, "empty-subtext"], [1, "modal-backdrop", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-title"], [1, "fa-solid", "fa-exclamation-triangle", "text-danger"], [1, "modal-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "text-warning"], [1, "fa-solid", "fa-warning"], [1, "modal-footer"], [1, "mj-btn", "mj-btn-secondary", 3, "click"], [1, "mj-btn", "mj-btn-danger", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"]], template: function ApplicationManagementComponent_Template(rf, ctx) { if (rf & 1) {
480
- i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "button", 2);
481
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_2_listener() { return ctx.refreshData(); });
482
- i0.ɵɵelement(3, "i", 3);
483
- i0.ɵɵtext(4, " Refresh ");
484
- i0.ɵɵelementEnd();
485
- i0.ɵɵelementStart(5, "button", 4);
486
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_5_listener() { return ctx.createNewApplication(); });
487
- i0.ɵɵelement(6, "i", 5);
488
- i0.ɵɵtext(7, " Add Application ");
553
+ static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationManagementComponent, selectors: [["mj-application-management"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 65, vars: 23, consts: [[1, "application-management-container"], [1, "sticky-header"], ["role", "toolbar", "aria-label", "Application management actions", 1, "action-buttons"], ["aria-label", "Refresh applications", 1, "mj-btn", "mj-btn-secondary", "mj-btn-icon-mobile", 3, "click", "disabled"], ["aria-hidden", "true", 1, "fa-solid", "fa-refresh"], [1, "btn-text"], ["aria-label", "Add new application", 1, "mj-btn", "mj-btn-primary", "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"], [1, "mj-btn", "mj-btn-ghost", 3, "click"], [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"], [1, "mj-btn", "mj-btn-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"], ["title", "Edit", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", 3, "click"], [1, "fa-solid", "fa-edit"], ["title", "Delete", 1, "mj-btn", "mj-btn-ghost", "mj-btn-sm", "mj-btn-danger", 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"], [1, "mj-btn", "mj-btn-danger", 3, "click", "disabled"], [1, "mj-btn", "mj-btn-secondary", 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) {
554
+ i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
555
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_3_listener() { return ctx.refreshData(); });
556
+ i0.ɵɵelement(4, "i", 4);
557
+ i0.ɵɵelementStart(5, "span", 5);
558
+ i0.ɵɵtext(6, "Refresh");
489
559
  i0.ɵɵelementEnd()();
490
- i0.ɵɵelementStart(8, "div", 6)(9, "div", 7)(10, "div", 8);
491
- i0.ɵɵelement(11, "i", 9);
560
+ i0.ɵɵelementStart(7, "button", 6);
561
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_7_listener() { return ctx.createNewApplication(); });
562
+ i0.ɵɵelement(8, "i", 7);
563
+ i0.ɵɵelementStart(9, "span", 5);
564
+ i0.ɵɵtext(10, "Add Application");
565
+ i0.ɵɵelementEnd()()();
566
+ i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10);
567
+ i0.ɵɵelement(14, "i", 11);
492
568
  i0.ɵɵelementEnd();
493
- i0.ɵɵelementStart(12, "div", 10)(13, "div", 11);
494
- i0.ɵɵtext(14);
569
+ i0.ɵɵelementStart(15, "div", 12)(16, "div", 13);
570
+ i0.ɵɵtext(17);
495
571
  i0.ɵɵelementEnd();
496
- i0.ɵɵelementStart(15, "div", 12);
497
- i0.ɵɵtext(16, "Total Applications");
572
+ i0.ɵɵelementStart(18, "div", 14);
573
+ i0.ɵɵtext(19, "Total Applications");
498
574
  i0.ɵɵelementEnd()()();
499
- i0.ɵɵelementStart(17, "div", 7)(18, "div", 13);
500
- i0.ɵɵelement(19, "i", 14);
575
+ i0.ɵɵelementStart(20, "div", 9)(21, "div", 15);
576
+ i0.ɵɵelement(22, "i", 16);
501
577
  i0.ɵɵelementEnd();
502
- i0.ɵɵelementStart(20, "div", 10)(21, "div", 11);
503
- i0.ɵɵtext(22);
578
+ i0.ɵɵelementStart(23, "div", 12)(24, "div", 17);
579
+ i0.ɵɵtext(25);
504
580
  i0.ɵɵelementEnd();
505
- i0.ɵɵelementStart(23, "div", 12);
506
- i0.ɵɵtext(24, "Active Applications");
581
+ i0.ɵɵelementStart(26, "div", 14);
582
+ i0.ɵɵtext(27, "Active Applications");
507
583
  i0.ɵɵelementEnd()()();
508
- i0.ɵɵelementStart(25, "div", 7)(26, "div", 15);
509
- i0.ɵɵelement(27, "i", 16);
584
+ i0.ɵɵelementStart(28, "div", 9)(29, "div", 18);
585
+ i0.ɵɵelement(30, "i", 19);
510
586
  i0.ɵɵelementEnd();
511
- i0.ɵɵelementStart(28, "div", 10)(29, "div", 11);
512
- i0.ɵɵtext(30);
587
+ i0.ɵɵelementStart(31, "div", 12)(32, "div", 20);
588
+ i0.ɵɵtext(33);
513
589
  i0.ɵɵelementEnd();
514
- i0.ɵɵelementStart(31, "div", 12);
515
- i0.ɵɵtext(32, "Total Entities");
590
+ i0.ɵɵelementStart(34, "div", 14);
591
+ i0.ɵɵtext(35, "Total Entities");
516
592
  i0.ɵɵelementEnd()()();
517
- i0.ɵɵelementStart(33, "div", 7)(34, "div", 17);
518
- i0.ɵɵelement(35, "i", 18);
593
+ i0.ɵɵelementStart(36, "div", 9)(37, "div", 21);
594
+ i0.ɵɵelement(38, "i", 22);
519
595
  i0.ɵɵelementEnd();
520
- i0.ɵɵelementStart(36, "div", 10)(37, "div", 11);
521
- i0.ɵɵtext(38);
596
+ i0.ɵɵelementStart(39, "div", 12)(40, "div", 23);
597
+ i0.ɵɵtext(41);
522
598
  i0.ɵɵelementEnd();
523
- i0.ɵɵelementStart(39, "div", 12);
524
- i0.ɵɵtext(40, "Public Entities");
599
+ i0.ɵɵelementStart(42, "div", 14);
600
+ i0.ɵɵtext(43, "Public Entities");
525
601
  i0.ɵɵelementEnd()()()();
526
- i0.ɵɵelementStart(41, "div", 19)(42, "div", 20)(43, "div", 21);
527
- i0.ɵɵelement(44, "i", 22);
528
- i0.ɵɵelementStart(45, "input", 23);
529
- i0.ɵɵlistener("input", function ApplicationManagementComponent_Template_input_input_45_listener($event) { return ctx.onSearchChange($event); });
602
+ i0.ɵɵelementStart(44, "div", 24)(45, "div", 25)(46, "div", 26);
603
+ i0.ɵɵelement(47, "i", 27);
604
+ i0.ɵɵelementStart(48, "input", 28);
605
+ i0.ɵɵlistener("input", function ApplicationManagementComponent_Template_input_input_48_listener($event) { return ctx.onSearchChange($event); });
530
606
  i0.ɵɵelementEnd()();
531
- i0.ɵɵelementStart(46, "div", 24)(47, "label", 25);
532
- i0.ɵɵtext(48, "Status");
607
+ i0.ɵɵelementStart(49, "div", 29)(50, "label", 30);
608
+ i0.ɵɵtext(51, "Status");
609
+ i0.ɵɵelementEnd();
610
+ i0.ɵɵelementStart(52, "div", 31)(53, "button", 32);
611
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_53_listener() { return ctx.onStatusFilterChange("all"); });
612
+ i0.ɵɵtext(54, " All ");
533
613
  i0.ɵɵelementEnd();
534
- i0.ɵɵelementStart(49, "div", 26)(50, "button", 27);
535
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_50_listener() { return ctx.onStatusFilterChange("all"); });
536
- i0.ɵɵtext(51, " All ");
614
+ i0.ɵɵelementStart(55, "button", 32);
615
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_55_listener() { return ctx.onStatusFilterChange("active"); });
616
+ i0.ɵɵtext(56, " Active ");
537
617
  i0.ɵɵelementEnd();
538
- i0.ɵɵelementStart(52, "button", 27);
539
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_52_listener() { return ctx.onStatusFilterChange("active"); });
540
- i0.ɵɵtext(53, " Active ");
618
+ i0.ɵɵelementStart(57, "button", 32);
619
+ i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_57_listener() { return ctx.onStatusFilterChange("inactive"); });
620
+ i0.ɵɵtext(58, " Inactive ");
621
+ i0.ɵɵelementEnd()()()()()();
622
+ i0.ɵɵelementStart(59, "div", 33);
623
+ i0.ɵɵtemplate(60, ApplicationManagementComponent_Conditional_60_Template, 2, 0, "div", 34)(61, ApplicationManagementComponent_Conditional_61_Template, 8, 1, "div", 35)(62, ApplicationManagementComponent_Conditional_62_Template, 5, 1, "div", 36);
541
624
  i0.ɵɵelementEnd();
542
- i0.ɵɵelementStart(54, "button", 27);
543
- i0.ɵɵlistener("click", function ApplicationManagementComponent_Template_button_click_54_listener() { return ctx.onStatusFilterChange("inactive"); });
544
- i0.ɵɵtext(55, " Inactive ");
545
- i0.ɵɵelementEnd()()()()();
546
- i0.ɵɵtemplate(56, ApplicationManagementComponent_Conditional_56_Template, 7, 0, "div", 28)(57, ApplicationManagementComponent_Conditional_57_Template, 8, 1, "div", 29)(58, ApplicationManagementComponent_Conditional_58_Template, 5, 1, "div", 30);
547
- i0.ɵɵelementStart(59, "mj-application-dialog", 31);
548
- i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_59_listener($event) { return ctx.onApplicationDialogResult($event); });
625
+ i0.ɵɵelementStart(63, "mj-application-dialog", 37);
626
+ i0.ɵɵlistener("result", function ApplicationManagementComponent_Template_mj_application_dialog_result_63_listener($event) { return ctx.onApplicationDialogResult($event); });
549
627
  i0.ɵɵelementEnd();
550
- i0.ɵɵtemplate(60, ApplicationManagementComponent_Conditional_60_Template, 24, 3, "div", 32);
628
+ i0.ɵɵtemplate(64, ApplicationManagementComponent_Conditional_64_Template, 23, 3, "div", 38);
551
629
  i0.ɵɵelementEnd();
552
630
  } if (rf & 2) {
553
- i0.ɵɵadvance(2);
631
+ i0.ɵɵadvance(3);
554
632
  i0.ɵɵproperty("disabled", ctx.isLoading);
555
633
  i0.ɵɵadvance();
556
634
  i0.ɵɵclassProp("fa-spin", ctx.isLoading);
557
- i0.ɵɵadvance(11);
635
+ i0.ɵɵadvance(13);
558
636
  i0.ɵɵtextInterpolate(ctx.stats.totalApplications);
559
637
  i0.ɵɵadvance(8);
560
638
  i0.ɵɵtextInterpolate(ctx.stats.activeApplications);
@@ -566,21 +644,24 @@ let ApplicationManagementComponent = class ApplicationManagementComponent extend
566
644
  i0.ɵɵproperty("value", ctx.filters$.value.search);
567
645
  i0.ɵɵadvance(5);
568
646
  i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "all");
647
+ i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "all");
569
648
  i0.ɵɵadvance(2);
570
649
  i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "active");
650
+ i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "active");
571
651
  i0.ɵɵadvance(2);
572
652
  i0.ɵɵclassProp("mj-btn-primary", ctx.filters$.value.status === "inactive");
573
- i0.ɵɵadvance(2);
574
- i0.ɵɵconditional(ctx.isLoading ? 56 : -1);
653
+ i0.ɵɵattribute("aria-pressed", ctx.filters$.value.status === "inactive");
654
+ i0.ɵɵadvance(3);
655
+ i0.ɵɵconditional(ctx.isLoading ? 60 : -1);
575
656
  i0.ɵɵadvance();
576
- i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 57 : -1);
657
+ i0.ɵɵconditional(ctx.error && !ctx.isLoading ? 61 : -1);
577
658
  i0.ɵɵadvance();
578
- i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 58 : -1);
659
+ i0.ɵɵconditional(!ctx.isLoading && !ctx.error ? 62 : -1);
579
660
  i0.ɵɵadvance();
580
661
  i0.ɵɵproperty("visible", ctx.showApplicationDialog)("data", ctx.applicationDialogData);
581
662
  i0.ɵɵadvance();
582
- i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ? 60 : -1);
583
- } }, dependencies: [i1.ApplicationDialogComponent, i2.DatePipe], styles: ["@keyframes _ngcontent-%COMP%_shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n.application-management-container[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n position: relative;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.action-buttons[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n margin-bottom: 1.5rem;\n}\n@media (max-width: 768px) {\n .action-buttons[_ngcontent-%COMP%] {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.btn-primary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-primary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-primary[_ngcontent-%COMP%]:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #ffffff;\n color: #374151;\n border: 1px solid #e5e7eb;\n}\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-secondary[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background-color: #f9fafb;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #f44336;\n color: white;\n}\n.btn-danger[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-danger[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n.btn-danger[_ngcontent-%COMP%]:hover {\n background-color: #d32f2f;\n}\n\n.stats-grid[_ngcontent-%COMP%] {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n width: 100%;\n}\n@media (max-width: 768px) {\n .stats-grid[_ngcontent-%COMP%] {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n}\n\n.stat-card[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n display: flex;\n margin-right: 10px;\n align-items: center;\n gap: 1rem;\n transition: all 0.3s ease;\n min-width: 0;\n}\n.stat-card[_ngcontent-%COMP%]:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.stat-icon[_ngcontent-%COMP%] {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n}\n.stat-icon-total[_ngcontent-%COMP%] {\n background: rgba(33, 150, 243, 0.1);\n color: #2196f3;\n}\n.stat-icon-active[_ngcontent-%COMP%] {\n background: rgba(76, 175, 80, 0.1);\n color: #4caf50;\n}\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: rgba(156, 39, 176, 0.1);\n color: #9c27b0;\n}\n.stat-icon-public[_ngcontent-%COMP%] {\n background: rgba(255, 152, 0, 0.1);\n color: #ff9800;\n}\n\n.stat-content[_ngcontent-%COMP%] {\n flex: 1;\n}\n.stat-content[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n font-size: 2rem;\n font-weight: 700;\n color: #1f2937;\n line-height: 1;\n}\n.stat-content[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n}\n\n.filters-section[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row[_ngcontent-%COMP%] {\n display: flex;\n gap: 1.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n.search-container[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n.search-container[_ngcontent-%COMP%] .search-icon[_ngcontent-%COMP%] {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n}\n.search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%] {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n}\n.search-container[_ngcontent-%COMP%] .search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #2196f3;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.filter-group[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n.filter-group[_ngcontent-%COMP%] .filter-label[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 500;\n color: #374151;\n}\n.filter-group[_ngcontent-%COMP%] .filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: #f3f4f6;\n border-radius: 8px;\n padding: 4px;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn[_ngcontent-%COMP%] {\n padding: 0.5rem 1rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn[_ngcontent-%COMP%]:hover {\n color: #374151;\n}\n.filter-group[_ngcontent-%COMP%] .filter-btn.active[_ngcontent-%COMP%] {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-area[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n padding: 1.5rem;\n}\n\n.applications-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-height: calc(100vh - 450px);\n overflow-y: auto;\n padding-right: 0.5rem;\n}\n\n.app-card[_ngcontent-%COMP%] {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n.app-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\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.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: #f9fafb;\n transition: background-color 0.2s;\n}\n.app-header[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n}\n\n.app-info[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n}\n\n.app-icon-wrapper[_ngcontent-%COMP%] {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(33, 150, 243, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2196f3;\n font-size: 1.25rem;\n}\n\n.app-details[_ngcontent-%COMP%] {\n flex: 1;\n}\n.app-details[_ngcontent-%COMP%] .app-name[_ngcontent-%COMP%] {\n font-size: 1.125rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.25rem 0;\n}\n.app-details[_ngcontent-%COMP%] .app-description[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n color: #6b7280;\n margin: 0;\n}\n\n.app-meta[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n padding: 0.375rem 0.75rem;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n.status-badge.status-active[_ngcontent-%COMP%] {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: rgba(244, 67, 54, 0.1);\n color: #d32f2f;\n}\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.action-btn[_ngcontent-%COMP%]:hover {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.action-btn-danger[_ngcontent-%COMP%]:hover {\n color: #f44336;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n.expand-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n transition: transform 0.3s ease;\n}\n\n.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.app-stats[_ngcontent-%COMP%] {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\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.875rem;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: #6b7280;\n}\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: #1f2937;\n font-weight: 500;\n}\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: #f9fafb;\n border-radius: 8px;\n}\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 1rem 0;\n}\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #2196f3;\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.entity-item[_ngcontent-%COMP%] {\n padding: 0.75rem;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n transition: all 0.2s;\n}\n.entity-item[_ngcontent-%COMP%]:hover {\n border-color: #2196f3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n font-weight: 500;\n color: #1f2937;\n margin-bottom: 0.25rem;\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.75rem;\n color: #6b7280;\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.625rem;\n font-weight: 600;\n}\n.entity-badge.public[_ngcontent-%COMP%] {\n background: rgba(255, 152, 0, 0.1);\n color: #f57c00;\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.75rem;\n color: #9ca3af;\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.875rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n.empty-state[_ngcontent-%COMP%] .empty-icon[_ngcontent-%COMP%] {\n font-size: 4rem;\n color: #e5e7eb;\n margin-bottom: 1rem;\n}\n.empty-state[_ngcontent-%COMP%] .empty-text[_ngcontent-%COMP%] {\n font-size: 1.25rem;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5rem 0;\n}\n.empty-state[_ngcontent-%COMP%] .empty-subtext[_ngcontent-%COMP%] {\n color: #6b7280;\n margin: 0;\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.loading-spinner[_ngcontent-%COMP%] {\n position: relative;\n width: 60px;\n height: 60px;\n margin-bottom: 1rem;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%] {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: _ngcontent-%COMP%_spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(2) {\n border-color: transparent #9c27b0 transparent transparent;\n animation-delay: -0.3s;\n}\n.loading-spinner[_ngcontent-%COMP%] .spinner-ring[_ngcontent-%COMP%]:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n}\n\n@keyframes _ngcontent-%COMP%_spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.loading-text[_ngcontent-%COMP%] {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n.error-container[_ngcontent-%COMP%] {\n text-align: center;\n padding: 4rem 2rem;\n}\n.error-container[_ngcontent-%COMP%] .error-icon[_ngcontent-%COMP%] {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n}\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n color: #374151;\n margin-bottom: 1.5rem;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%]:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.error-container[_ngcontent-%COMP%] .retry-button[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.875rem;\n}\n\n.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.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n overflow: hidden;\n animation: _ngcontent-%COMP%_slideUp 0.3s ease;\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 #e5e7eb;\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.25rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0;\n}\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%] {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n.modal-header[_ngcontent-%COMP%] .modal-close[_ngcontent-%COMP%]:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.modal-body[_ngcontent-%COMP%] {\n padding: 1.5rem;\n}\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 1rem 0;\n color: #374151;\n}\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n.modal-body[_ngcontent-%COMP%] .text-warning[_ngcontent-%COMP%] {\n color: #f57c00;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.modal-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\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@keyframes _ngcontent-%COMP%_slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 800px;\n }\n}\n.text-danger[_ngcontent-%COMP%] {\n color: #f44336;\n}"] });
663
+ i0.ɵɵconditional(ctx.showDeleteConfirm && ctx.selectedApp ? 64 : -1);
664
+ } }, dependencies: [i1.LoadingComponent, i2.ApplicationDialogComponent, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n \n\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\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(--mat-sys-surface);\n}\n\n\n\n\n\n.sticky-header[_ngcontent-%COMP%] {\n flex-shrink: 0;\n background: var(--mat-sys-surface);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-surface-container-lowest);\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(--mat-sys-surface);\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(--mat-sys-surface);\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.mj-card[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-medium);\n padding: 1rem;\n box-shadow: none;\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\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(--mat-sys-corner-medium);\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(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.stat-icon-active[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n.stat-icon-entities[_ngcontent-%COMP%] {\n background: var(--mat-sys-secondary-container);\n color: #B5751A;\n}\n\n.stat-icon-public[_ngcontent-%COMP%] {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\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(--mat-sys-surface-container);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mat-sys-corner-small);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .filters-section[_ngcontent-%COMP%] {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 0.875rem 1rem;\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\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(--mat-sys-on-surface-variant);\n font-size: 1rem;\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(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font-size: 1rem;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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 box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-on-surface-variant);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:hover {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-surface-container-lowest);\n}\n\n.mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 1024px) {\n .mj-search[_ngcontent-%COMP%] .mj-search-input[_ngcontent-%COMP%]:focus {\n box-shadow: var(--mat-sys-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n.mj-search[_ngcontent-%COMP%]:focus-within .mj-search-icon[_ngcontent-%COMP%] {\n color: var(--mat-sys-primary);\n}\n\n\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-group[_ngcontent-%COMP%] .mj-filter-label[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface);\n}\n\n.mj-filter-group[_ngcontent-%COMP%] .mj-filter-buttons[_ngcontent-%COMP%] {\n display: flex;\n background: #EDF0F4;\n border-radius: var(--mat-sys-corner-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-ghost[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-full);\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\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(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-filter-buttons[_ngcontent-%COMP%] .mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n box-shadow: var(--mat-sys-elevation-1);\n padding: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .content-area[_ngcontent-%COMP%] {\n padding: 1.5rem;\n }\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(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-large);\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(--mat-sys-elevation-2);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded[_ngcontent-%COMP%] {\n box-shadow: var(--mat-sys-elevation-3);\n border-color: var(--mat-sys-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(--mat-sys-surface-container-lowest);\n transition: background-color 0.2s ease;\n}\n\n.app-header[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-surface-container-low);\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(--mat-sys-corner-medium);\n background: var(--mat-sys-primary-container);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mat-sys-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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\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.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(--mat-sys-corner-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(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.status-badge.status-inactive[_ngcontent-%COMP%] {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n border: 1px solid var(--mat-sys-error);\n}\n\n.status-badge[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 0.625rem;\n}\n\n\n\n\n\n.app-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 0.5rem;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--mat-sys-corner-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-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.app-content[_ngcontent-%COMP%] {\n padding: 1.5rem;\n background: var(--mat-sys-surface);\n border-top: 1px solid var(--mat-sys-outline-variant);\n animation: _ngcontent-%COMP%_slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mobile-actions-bar[_ngcontent-%COMP%] {\n display: none;\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.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(--mat-sys-on-surface-variant);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-label[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats[_ngcontent-%COMP%] .stat-item[_ngcontent-%COMP%] .stat-value[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface);\n font-weight: 600;\n}\n\n\n\n\n\n.entities-section[_ngcontent-%COMP%] {\n padding: 1rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.entities-section[_ngcontent-%COMP%] .section-title[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mat-sys-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(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.entity-item[_ngcontent-%COMP%] .entity-name[_ngcontent-%COMP%] {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-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(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.entity-sequence[_ngcontent-%COMP%] {\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.no-entities[_ngcontent-%COMP%] {\n color: var(--mat-sys-on-surface-variant);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\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(--mat-sys-outline-variant);\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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\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(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-container[_ngcontent-%COMP%] .error-message[_ngcontent-%COMP%] {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\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 animation: _ngcontent-%COMP%_fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n padding: 1rem;\n}\n\n.modal-dialog[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-extra-large);\n box-shadow: var(--mat-sys-elevation-5);\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(--mat-sys-outline-variant);\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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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(--mat-sys-primary);\n color: var(--mat-sys-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: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.modal-body[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\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(--mat-sys-secondary-container);\n color: var(--mat-sys-secondary);\n border-radius: var(--mat-sys-corner-small);\n font-weight: 500;\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(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\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(--mat-sys-corner-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(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #3395C8;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #4BA5D4;\n transform: scale(0.98);\n}\n\n\n\n.mj-btn-secondary[_ngcontent-%COMP%] {\n background: var(--mat-sys-surface);\n color: var(--mat-sys-primary);\n border: 1px solid var(--mat-sys-outline);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border-color: var(--mat-sys-primary);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #005A8C;\n border-color: #005A8C;\n}\n\n\n\n.mj-btn-ghost[_ngcontent-%COMP%] {\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-btn-ghost[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #005A8C;\n}\n\n\n\n.mj-btn-danger[_ngcontent-%COMP%] {\n background: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n background: #E57373;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-danger[_ngcontent-%COMP%]:active:not(:disabled) {\n background: #EF9A9A;\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\n\n.text-danger[_ngcontent-%COMP%] {\n color: var(--mat-sys-error);\n}\n\n.text-warning[_ngcontent-%COMP%] {\n color: var(--mat-sys-secondary);\n}\n\n\n\n\n\n@media (min-width: 1440px) {\n .application-management-container[_ngcontent-%COMP%] {\n max-width: 1920px;\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@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\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(--mat-sys-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@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-btn-icon-mobile[_ngcontent-%COMP%] {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mat-sys-corner-full);\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%] i[_ngcontent-%COMP%] {\n font-size: 1.125rem;\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(--mat-sys-corner-small);\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(--mat-sys-corner-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(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\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(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n }\n\n \n\n .mj-filter-buttons[_ngcontent-%COMP%] .mj-btn.mj-btn-primary[_ngcontent-%COMP%] {\n background: var(--mat-sys-primary) !important;\n color: var(--mat-sys-on-primary) !important;\n box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-corner-small);\n }\n\n \n\n .modal-backdrop[_ngcontent-%COMP%] {\n padding: 0.5rem;\n }\n\n .modal-dialog[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-extra-large);\n max-height: 95vh;\n }\n\n .modal-footer[_ngcontent-%COMP%] {\n flex-direction: column;\n }\n\n .modal-footer[_ngcontent-%COMP%] .mj-btn[_ngcontent-%COMP%] {\n width: 100%;\n justify-content: center;\n border-radius: var(--mat-sys-corner-full);\n }\n\n \n\n .applications-list[_ngcontent-%COMP%] {\n gap: 0.5rem;\n }\n\n .app-card[_ngcontent-%COMP%] {\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-corner-small);\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(--mat-sys-corner-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(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-corner-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}"] });
584
665
  };
585
666
  ApplicationManagementComponent = __decorate([
586
667
  RegisterClass(BaseDashboard, 'ApplicationManagement')
@@ -588,7 +669,7 @@ ApplicationManagementComponent = __decorate([
588
669
  export { ApplicationManagementComponent };
589
670
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationManagementComponent, [{
590
671
  type: Component,
591
- args: [{ selector: 'mj-application-management', template: "<div class=\"application-management-container\">\n <!-- Action Buttons -->\n <div class=\"action-buttons\">\n <button class=\"mj-btn mj-btn-secondary\" (click)=\"refreshData()\" [disabled]=\"isLoading\">\n <i class=\"fa-solid fa-refresh\" [class.fa-spin]=\"isLoading\"></i>\n Refresh\n </button>\n <button class=\"mj-btn mj-btn-primary\" (click)=\"createNewApplication()\">\n <i class=\"fa-solid fa-plus\"></i>\n Add Application\n </button>\n </div>\n\n <!-- Stats Cards -->\n <div class=\"mj-grid mj-grid-4\">\n <div class=\"mj-card\">\n <div class=\"stat-icon stat-icon-total\">\n <i class=\"fa-solid fa-grid-2\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ 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\">\n <i class=\"fa-solid fa-check-circle\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ 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\">\n <i class=\"fa-solid fa-database\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ 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\">\n <i class=\"fa-solid fa-globe\"></i>\n </div>\n <div class=\"stat-content\">\n <div class=\"stat-value\">{{ 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\">\n <div class=\"filters-row\">\n <!-- Search -->\n <div class=\"mj-search\">\n <i class=\"fa-solid fa-search mj-search-icon\"></i>\n <input \n type=\"text\" \n class=\"mj-search-input\" \n placeholder=\"Search applications by name or description...\"\n (input)=\"onSearchChange($event)\"\n [value]=\"filters$.value.search\"\n />\n </div>\n \n <!-- Status Filter -->\n <div class=\"mj-filter-group\">\n <label class=\"mj-filter-label\">Status</label>\n <div class=\"mj-filter-buttons\">\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n (click)=\"onStatusFilterChange('all')\"\n >\n All\n </button>\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n (click)=\"onStatusFilterChange('active')\"\n >\n Active\n </button>\n <button \n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\n (click)=\"onStatusFilterChange('inactive')\"\n >\n Inactive\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Loading State -->\n @if (isLoading) {\n <div class=\"loading-container\">\n <div class=\"loading-spinner\">\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n <div class=\"spinner-ring\"></div>\n </div>\n <div class=\"loading-text\">Loading applications...</div>\n </div>\n }\n\n <!-- Error State -->\n @if (error && !isLoading) {\n <div class=\"error-container\">\n <div class=\"error-content\">\n <i class=\"fa-solid fa-exclamation-triangle error-icon\"></i>\n <p class=\"error-message\">{{ error }}</p>\n <button class=\"mj-btn mj-btn-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\">\n @for (app of filteredApplications; track app.ID) {\n <div class=\"app-card\" [class.expanded]=\"isAppExpanded(app.ID)\">\n <div class=\"app-header\" (click)=\"toggleAppExpansion(app.ID)\">\n <div class=\"app-info\">\n <div class=\"app-icon-wrapper\">\n <i [class]=\"'fa-solid ' + getAppIcon(app)\"></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 class=\"mj-btn mj-btn-ghost mj-btn-sm\" (click)=\"editApplication(app)\" title=\"Edit\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n <button class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\" (click)=\"confirmDeleteApplication(app)\" title=\"Delete\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n <button class=\"expand-btn\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n </div>\n \n @if (isAppExpanded(app.ID)) {\n <div class=\"app-content\">\n <div class=\"app-stats\">\n <div class=\"stat-item\">\n <i class=\"fa-solid fa-database\"></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\"></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\"></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\"></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-grid-2 empty-icon\"></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\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\">\n <div class=\"modal-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"modal-header\">\n <h3 class=\"modal-title\">\n <i class=\"fa-solid fa-exclamation-triangle text-danger\"></i>\n Confirm Delete\n </h3>\n <button class=\"modal-close\" (click)=\"showDeleteConfirm = false\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"modal-body\">\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\"></i>\n This will remove all entity associations for this application.\n </p>\n </div>\n <div class=\"modal-footer\">\n <button class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n <i class=\"fa-solid fa-times\"></i>\n Cancel\n </button>\n <button class=\"mj-btn mj-btn-danger\" (click)=\"deleteApplication()\" [disabled]=\"isLoading\">\n @if (isLoading) {\n <i class=\"fa-solid fa-spinner fa-spin\"></i>\n Deleting...\n } @else {\n <i class=\"fa-solid fa-trash\"></i>\n Delete Application\n }\n </button>\n </div>\n </div>\n </div>\n }\n</div>", styles: ["@keyframes shimmer {\n 0% {\n background-position: -200% 0;\n }\n 100% {\n background-position: 200% 0;\n }\n}\n.application-management-container {\n display: flex;\n flex-direction: column;\n height: 100%;\n max-height: 100%;\n overflow: hidden;\n position: relative;\n max-width: 1200px;\n margin: 0 auto;\n padding: 2rem;\n}\n\n.action-buttons {\n display: flex;\n gap: 0.75rem;\n justify-content: flex-end;\n margin-bottom: 1.5rem;\n}\n@media (max-width: 768px) {\n .action-buttons {\n justify-content: center;\n flex-wrap: wrap;\n }\n}\n\n.btn-primary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.btn-primary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-primary i {\n font-size: 0.875rem;\n}\n.btn-primary:hover {\n background-color: #1976d2;\n transform: translateY(-1px);\n box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);\n}\n\n.btn-secondary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #ffffff;\n color: #374151;\n border: 1px solid #e5e7eb;\n}\n.btn-secondary:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-secondary i {\n font-size: 0.875rem;\n}\n.btn-secondary:hover {\n background-color: #f9fafb;\n border-color: #2196f3;\n color: #2196f3;\n}\n\n.btn-danger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #f44336;\n color: white;\n}\n.btn-danger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.btn-danger i {\n font-size: 0.875rem;\n}\n.btn-danger:hover {\n background-color: #d32f2f;\n}\n\n.stats-grid {\n display: grid !important;\n grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n gap: 1.5rem;\n margin-bottom: 2rem;\n width: 100%;\n}\n@media (max-width: 768px) {\n .stats-grid {\n grid-template-columns: repeat(2, 1fr);\n gap: 1rem;\n }\n}\n\n.stat-card {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n display: flex;\n margin-right: 10px;\n align-items: center;\n gap: 1rem;\n transition: all 0.3s ease;\n min-width: 0;\n}\n.stat-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n\n.stat-icon {\n width: 60px;\n height: 60px;\n border-radius: 12px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 1.5rem;\n}\n.stat-icon-total {\n background: rgba(33, 150, 243, 0.1);\n color: #2196f3;\n}\n.stat-icon-active {\n background: rgba(76, 175, 80, 0.1);\n color: #4caf50;\n}\n.stat-icon-entities {\n background: rgba(156, 39, 176, 0.1);\n color: #9c27b0;\n}\n.stat-icon-public {\n background: rgba(255, 152, 0, 0.1);\n color: #ff9800;\n}\n\n.stat-content {\n flex: 1;\n}\n.stat-content .stat-value {\n font-size: 2rem;\n font-weight: 700;\n color: #1f2937;\n line-height: 1;\n}\n.stat-content .stat-label {\n color: #6b7280;\n font-size: 0.875rem;\n margin-top: 0.25rem;\n}\n\n.filters-section {\n background: white;\n border-radius: 12px;\n padding: 1.5rem;\n margin-bottom: 1.5rem;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.filters-row {\n display: flex;\n gap: 1.5rem;\n align-items: flex-end;\n flex-wrap: wrap;\n}\n\n.search-container {\n flex: 1;\n min-width: 250px;\n position: relative;\n}\n.search-container .search-icon {\n position: absolute;\n left: 1rem;\n top: 50%;\n transform: translateY(-50%);\n color: #6b7280;\n font-size: 1rem;\n}\n.search-container .search-input {\n width: 100%;\n padding: 0.75rem 1rem 0.75rem 2.75rem;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n font-size: 0.95rem;\n transition: all 0.2s;\n}\n.search-container .search-input:focus {\n outline: none;\n border-color: #2196f3;\n box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n.filter-group .filter-label {\n font-size: 0.875rem;\n font-weight: 500;\n color: #374151;\n}\n.filter-group .filter-buttons {\n display: flex;\n background: #f3f4f6;\n border-radius: 8px;\n padding: 4px;\n}\n.filter-group .filter-btn {\n padding: 0.5rem 1rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 0.875rem;\n font-weight: 500;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.filter-group .filter-btn:hover {\n color: #374151;\n}\n.filter-group .filter-btn.active {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.content-area {\n flex: 1;\n overflow-y: auto;\n overflow-x: hidden;\n min-height: 0;\n position: relative;\n background: white;\n border-radius: 12px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n padding: 1.5rem;\n}\n\n.applications-list {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n max-height: calc(100vh - 450px);\n overflow-y: auto;\n padding-right: 0.5rem;\n}\n\n.app-card {\n border: 1px solid #e5e7eb;\n border-radius: 12px;\n overflow: hidden;\n transition: all 0.3s ease;\n}\n.app-card:hover {\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n.app-card.expanded {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n}\n.app-card.expanded .expand-btn i {\n transform: rotate(180deg);\n}\n\n.app-header {\n padding: 1.5rem;\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n background: #f9fafb;\n transition: background-color 0.2s;\n}\n.app-header:hover {\n background: #f3f4f6;\n}\n\n.app-info {\n display: flex;\n align-items: center;\n gap: 1rem;\n flex: 1;\n}\n\n.app-icon-wrapper {\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(33, 150, 243, 0.1);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2196f3;\n font-size: 1.25rem;\n}\n\n.app-details {\n flex: 1;\n}\n.app-details .app-name {\n font-size: 1.125rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 0.25rem 0;\n}\n.app-details .app-description {\n font-size: 0.875rem;\n color: #6b7280;\n margin: 0;\n}\n\n.app-meta {\n display: flex;\n align-items: center;\n gap: 1rem;\n}\n\n.status-badge {\n padding: 0.375rem 0.75rem;\n border-radius: 20px;\n font-size: 0.75rem;\n font-weight: 600;\n}\n.status-badge.status-active {\n background: rgba(76, 175, 80, 0.1);\n color: #388e3c;\n}\n.status-badge.status-inactive {\n background: rgba(244, 67, 54, 0.1);\n color: #d32f2f;\n}\n\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.action-btn {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n border-radius: 6px;\n cursor: pointer;\n transition: all 0.2s;\n}\n.action-btn:hover {\n background: white;\n color: #2196f3;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n.action-btn-danger:hover {\n color: #f44336;\n}\n\n.expand-btn {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s;\n}\n.expand-btn i {\n transition: transform 0.3s ease;\n}\n\n.app-content {\n padding: 1.5rem;\n background: white;\n border-top: 1px solid #e5e7eb;\n animation: slideDown 0.3s ease-out;\n}\n\n.app-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 1.5rem;\n flex-wrap: wrap;\n}\n.app-stats .stat-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.875rem;\n}\n.app-stats .stat-item i {\n color: #6b7280;\n}\n.app-stats .stat-item .stat-label {\n color: #6b7280;\n}\n.app-stats .stat-item .stat-value {\n color: #1f2937;\n font-weight: 500;\n}\n\n.entities-section {\n padding: 1rem;\n background: #f9fafb;\n border-radius: 8px;\n}\n.entities-section .section-title {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 1rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0 0 1rem 0;\n}\n.entities-section .section-title i {\n color: #2196f3;\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.entity-item {\n padding: 0.75rem;\n background: white;\n border: 1px solid #e5e7eb;\n border-radius: 8px;\n transition: all 0.2s;\n}\n.entity-item:hover {\n border-color: #2196f3;\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);\n}\n.entity-item .entity-name {\n font-size: 0.875rem;\n font-weight: 500;\n color: #1f2937;\n margin-bottom: 0.25rem;\n}\n.entity-item .entity-meta {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n color: #6b7280;\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: 12px;\n font-size: 0.625rem;\n font-weight: 600;\n}\n.entity-badge.public {\n background: rgba(255, 152, 0, 0.1);\n color: #f57c00;\n}\n\n.entity-sequence {\n font-size: 0.75rem;\n color: #9ca3af;\n}\n\n.no-entities {\n color: #6b7280;\n font-size: 0.875rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\n}\n\n.empty-state {\n text-align: center;\n padding: 4rem 2rem;\n}\n.empty-state .empty-icon {\n font-size: 4rem;\n color: #e5e7eb;\n margin-bottom: 1rem;\n}\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: #374151;\n margin: 0 0 0.5rem 0;\n}\n.empty-state .empty-subtext {\n color: #6b7280;\n margin: 0;\n}\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.loading-spinner {\n position: relative;\n width: 60px;\n height: 60px;\n margin-bottom: 1rem;\n}\n.loading-spinner .spinner-ring {\n position: absolute;\n width: 100%;\n height: 100%;\n border: 3px solid transparent;\n border-radius: 50%;\n animation: spin 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n}\n.loading-spinner .spinner-ring:nth-child(1) {\n border-color: #2196f3 transparent transparent transparent;\n animation-delay: -0.45s;\n}\n.loading-spinner .spinner-ring:nth-child(2) {\n border-color: transparent #9c27b0 transparent transparent;\n animation-delay: -0.3s;\n}\n.loading-spinner .spinner-ring:nth-child(3) {\n border-color: transparent transparent #ff9800 transparent;\n animation-delay: -0.15s;\n}\n\n@keyframes spin {\n 0% {\n transform: rotate(0deg);\n }\n 100% {\n transform: rotate(360deg);\n }\n}\n.loading-text {\n color: #6b7280;\n font-size: 0.95rem;\n}\n\n.error-container {\n text-align: center;\n padding: 4rem 2rem;\n}\n.error-container .error-icon {\n font-size: 3rem;\n color: #f44336;\n margin-bottom: 1rem;\n}\n.error-container .error-message {\n color: #374151;\n margin-bottom: 1.5rem;\n}\n.error-container .retry-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n padding: 0.625rem 1.25rem;\n font-size: 0.95rem;\n font-weight: 500;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: all 0.2s;\n white-space: nowrap;\n background-color: #2196f3;\n color: white;\n}\n.error-container .retry-button:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n}\n.error-container .retry-button i {\n font-size: 0.875rem;\n}\n\n.modal-backdrop {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n animation: fadeIn 0.2s ease;\n}\n\n.modal-dialog {\n background: white;\n border-radius: 12px;\n box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n max-width: 500px;\n width: 90%;\n max-height: 90vh;\n overflow: hidden;\n animation: slideUp 0.3s ease;\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 #e5e7eb;\n}\n.modal-header .modal-title {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n font-size: 1.25rem;\n font-weight: 600;\n color: #1f2937;\n margin: 0;\n}\n.modal-header .modal-close {\n padding: 0.5rem;\n border: none;\n background: transparent;\n color: #6b7280;\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: 6px;\n transition: all 0.2s;\n}\n.modal-header .modal-close:hover {\n background: #f3f4f6;\n color: #374151;\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n.modal-body p {\n margin: 0 0 1rem 0;\n color: #374151;\n}\n.modal-body p:last-child {\n margin-bottom: 0;\n}\n.modal-body .text-warning {\n color: #f57c00;\n display: flex;\n align-items: center;\n gap: 0.5rem;\n}\n\n.modal-footer {\n display: flex;\n justify-content: flex-end;\n gap: 0.75rem;\n padding: 1.5rem;\n border-top: 1px solid #e5e7eb;\n background: #f9fafb;\n}\n\n@keyframes fadeIn {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\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@keyframes slideDown {\n from {\n opacity: 0;\n max-height: 0;\n }\n to {\n opacity: 1;\n max-height: 800px;\n }\n}\n.text-danger {\n color: #f44336;\n}\n"] }]
672
+ args: [{ 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 class=\"mj-btn mj-btn-secondary 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 class=\"mj-btn mj-btn-primary 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\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'all'\"\n (click)=\"onStatusFilterChange('all')\"\n [attr.aria-pressed]=\"filters$.value.status === 'all'\"\n >\n All\n </button>\n <button\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'active'\"\n (click)=\"onStatusFilterChange('active')\"\n [attr.aria-pressed]=\"filters$.value.status === 'active'\"\n >\n Active\n </button>\n <button\n class=\"mj-btn mj-btn-ghost\"\n [class.mj-btn-primary]=\"filters$.value.status === 'inactive'\"\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 class=\"mj-btn mj-btn-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 class=\"mj-btn mj-btn-ghost mj-btn-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 class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\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 class=\"mj-btn mj-btn-ghost mj-btn-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 class=\"mj-btn mj-btn-ghost mj-btn-sm mj-btn-danger\"\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 class=\"mj-btn mj-btn-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 class=\"mj-btn mj-btn-secondary\" (click)=\"showDeleteConfirm = false\">\n Cancel\n </button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["/* =============================================================================\n Application Management Component - MD3 Design System\n Following Material Design 3 color palette and design tokens\n ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n Host Element - Using shared MD3 tokens from _md3-theme.scss\n ----------------------------------------------------------------------------- */\n:host {\n /* Host element fills container but doesn't scroll itself */\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n overflow: hidden;\n}\n\n/* -----------------------------------------------------------------------------\n Container & Layout\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(--mat-sys-surface);\n}\n\n/* -----------------------------------------------------------------------------\n Sticky Header - Always visible controls\n ----------------------------------------------------------------------------- */\n.sticky-header {\n flex-shrink: 0;\n background: var(--mat-sys-surface);\n border-bottom: 1px solid var(--mat-sys-outline-variant);\n box-shadow: var(--mat-sys-elevation-1);\n z-index: 10;\n}\n\n/* -----------------------------------------------------------------------------\n Scrollable Content - Application list area\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(--mat-sys-surface-container-lowest);\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(--mat-sys-surface);\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 - 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(--mat-sys-surface);\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.mj-card {\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-medium);\n padding: 1rem;\n box-shadow: none;\n display: flex;\n align-items: center;\n gap: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\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(--mat-sys-corner-medium);\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(--mat-sys-primary-container);\n color: var(--mat-sys-primary);\n}\n\n.stat-icon-active {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\n}\n\n.stat-icon-entities {\n background: var(--mat-sys-secondary-container);\n color: #B5751A;\n}\n\n.stat-icon-public {\n background: var(--mat-sys-tertiary-container);\n color: var(--mat-sys-tertiary);\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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\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(--mat-sys-surface-container);\n margin: 0 1rem 0.75rem 1rem;\n padding: 0.75rem;\n border-radius: var(--mat-sys-corner-small);\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .filters-section {\n margin: 0 1.5rem 1rem 1.5rem;\n padding: 0.875rem 1rem;\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/* -----------------------------------------------------------------------------\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(--mat-sys-on-surface-variant);\n font-size: 1rem;\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(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-full);\n font-size: 1rem;\n background: var(--mat-sys-surface);\n color: var(--mat-sys-on-surface);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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 box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-on-surface-variant);\n}\n\n.mj-search .mj-search-input:hover {\n border-color: var(--mat-sys-primary);\n background: var(--mat-sys-surface-container-lowest);\n}\n\n.mj-search .mj-search-input:focus {\n outline: none;\n border-color: var(--mat-sys-primary);\n box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.2);\n background: var(--mat-sys-surface);\n}\n\n@media (min-width: 1024px) {\n .mj-search .mj-search-input:focus {\n box-shadow: var(--mat-sys-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n }\n}\n\n.mj-search:focus-within .mj-search-icon {\n color: var(--mat-sys-primary);\n}\n\n/* -----------------------------------------------------------------------------\n Filter Button Group\n ----------------------------------------------------------------------------- */\n.mj-filter-group {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n}\n\n.mj-filter-group .mj-filter-label {\n font-size: 0.8125rem;\n font-weight: 500;\n color: var(--mat-sys-on-surface);\n}\n\n.mj-filter-group .mj-filter-buttons {\n display: flex;\n background: #EDF0F4;\n border-radius: var(--mat-sys-corner-full);\n padding: 4px;\n gap: 2px;\n}\n\n.mj-filter-buttons .mj-btn-ghost {\n border-radius: var(--mat-sys-corner-full);\n padding: 0.5rem 1rem;\n font-size: 0.875rem;\n font-weight: 500;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\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(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-filter-buttons .mj-btn-primary {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n/* -----------------------------------------------------------------------------\n Content Area - Inside scrollable section\n ----------------------------------------------------------------------------- */\n.content-area {\n flex: 1 1 auto;\n overflow: visible;\n position: relative;\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-large);\n box-shadow: var(--mat-sys-elevation-1);\n padding: 1rem;\n border: 1px solid var(--mat-sys-outline-variant);\n}\n\n@media (min-width: 768px) {\n .content-area {\n padding: 1.5rem;\n }\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(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-large);\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(--mat-sys-elevation-2);\n border-color: var(--mat-sys-primary);\n}\n\n.app-card.expanded {\n box-shadow: var(--mat-sys-elevation-3);\n border-color: var(--mat-sys-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(--mat-sys-surface-container-lowest);\n transition: background-color 0.2s ease;\n}\n\n.app-header:hover {\n background: var(--mat-sys-surface-container-low);\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(--mat-sys-corner-medium);\n background: var(--mat-sys-primary-container);\n display: flex;\n align-items: center;\n justify-content: center;\n color: var(--mat-sys-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(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\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 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(--mat-sys-corner-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(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.status-badge.status-inactive {\n background: var(--mat-sys-error-container);\n color: var(--mat-sys-on-error-container);\n border: 1px solid var(--mat-sys-error);\n}\n\n.status-badge i {\n font-size: 0.625rem;\n}\n\n/* -----------------------------------------------------------------------------\n Application Actions\n ----------------------------------------------------------------------------- */\n.app-actions {\n display: flex;\n gap: 0.5rem;\n}\n\n.expand-btn {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1rem;\n cursor: pointer;\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n border-radius: var(--mat-sys-corner-full);\n min-width: 44px;\n min-height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n}\n\n.expand-btn:hover {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.expand-btn i {\n transition: transform 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n Application Content (Expanded)\n ----------------------------------------------------------------------------- */\n.app-content {\n padding: 1.5rem;\n background: var(--mat-sys-surface);\n border-top: 1px solid var(--mat-sys-outline-variant);\n animation: slideDown 0.3s cubic-bezier(0, 0, 0.2, 1);\n}\n\n.mobile-actions-bar {\n display: none;\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.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(--mat-sys-on-surface-variant);\n}\n\n.app-stats .stat-item .stat-label {\n color: var(--mat-sys-on-surface-variant);\n}\n\n.app-stats .stat-item .stat-value {\n color: var(--mat-sys-on-surface);\n font-weight: 600;\n}\n\n/* -----------------------------------------------------------------------------\n Entities Section\n ----------------------------------------------------------------------------- */\n.entities-section {\n padding: 1rem;\n background: var(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.entities-section .section-title i {\n color: var(--mat-sys-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(--mat-sys-surface);\n border: 1px solid var(--mat-sys-outline-variant);\n border-radius: var(--mat-sys-corner-small);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-item:hover {\n border-color: var(--mat-sys-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.entity-item .entity-name {\n font-size: 0.9375rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\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(--mat-sys-on-surface-variant);\n}\n\n.entity-badge {\n padding: 0.125rem 0.5rem;\n border-radius: var(--mat-sys-corner-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(--mat-sys-tertiary-container);\n color: #1B5E20;\n border: 1px solid var(--mat-sys-tertiary);\n}\n\n.entity-sequence {\n font-size: 0.8125rem;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.no-entities {\n color: var(--mat-sys-on-surface-variant);\n font-size: 0.9375rem;\n text-align: center;\n padding: 1rem;\n margin: 0;\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(--mat-sys-outline-variant);\n margin-bottom: 1.5rem;\n}\n\n.empty-state .empty-text {\n font-size: 1.25rem;\n font-weight: 600;\n color: var(--mat-sys-on-surface);\n margin: 0 0 0.5rem 0;\n}\n\n.empty-state .empty-subtext {\n font-size: 1rem;\n color: var(--mat-sys-on-surface-variant);\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(--mat-sys-error);\n margin-bottom: 1rem;\n}\n\n.error-container .error-message {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\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 animation: fadeIn 0.2s cubic-bezier(0, 0, 0.2, 1);\n padding: 1rem;\n}\n\n.modal-dialog {\n background: var(--mat-sys-surface);\n border-radius: var(--mat-sys-corner-extra-large);\n box-shadow: var(--mat-sys-elevation-5);\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(--mat-sys-outline-variant);\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(--mat-sys-on-surface);\n margin: 0;\n}\n\n.modal-header .modal-close {\n padding: 0.625rem;\n border: none;\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n font-size: 1.25rem;\n cursor: pointer;\n border-radius: var(--mat-sys-corner-full);\n transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\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(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.modal-body {\n padding: 1.5rem;\n}\n\n.modal-body p {\n font-size: 1.0625rem;\n color: var(--mat-sys-on-surface);\n margin: 0 0 1rem 0;\n}\n\n.modal-body p:last-child {\n margin-bottom: 0;\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(--mat-sys-secondary-container);\n color: var(--mat-sys-secondary);\n border-radius: var(--mat-sys-corner-small);\n font-weight: 500;\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(--mat-sys-outline-variant);\n background: var(--mat-sys-surface-container-low);\n}\n\n/* -----------------------------------------------------------------------------\n 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(--mat-sys-corner-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 - Dark, lightens on hover */\n.mj-btn-primary {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n background: #3395C8;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n background: #4BA5D4;\n transform: scale(0.98);\n}\n\n/* Secondary Button - Light, darkens on hover */\n.mj-btn-secondary {\n background: var(--mat-sys-surface);\n color: var(--mat-sys-primary);\n border: 1px solid var(--mat-sys-outline);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n border-color: var(--mat-sys-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n background: #005A8C;\n border-color: #005A8C;\n}\n\n/* Ghost Button - Transparent, fills on hover */\n.mj-btn-ghost {\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\n}\n\n.mj-btn-ghost:hover:not(:disabled) {\n background: var(--mat-sys-primary);\n color: var(--mat-sys-on-primary);\n}\n\n.mj-btn-ghost:active:not(:disabled) {\n background: #005A8C;\n}\n\n/* Danger Button - Dark red, lightens on hover */\n.mj-btn-danger {\n background: var(--mat-sys-error);\n color: var(--mat-sys-on-error);\n box-shadow: var(--mat-sys-elevation-1);\n}\n\n.mj-btn-danger:hover:not(:disabled) {\n background: #E57373;\n box-shadow: var(--mat-sys-elevation-2);\n}\n\n.mj-btn-danger:active:not(:disabled) {\n background: #EF9A9A;\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 buttons show text on larger 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/* -----------------------------------------------------------------------------\n Utility Classes\n ----------------------------------------------------------------------------- */\n.text-danger {\n color: var(--mat-sys-error);\n}\n\n.text-warning {\n color: var(--mat-sys-secondary);\n}\n\n/* -----------------------------------------------------------------------------\n Desktop (1440px+) - Large Screen Optimizations\n ----------------------------------------------------------------------------- */\n@media (min-width: 1440px) {\n .application-management-container {\n max-width: 1920px;\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 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/* -----------------------------------------------------------------------------\n Accessibility: Focus Indicators\n ----------------------------------------------------------------------------- */\n.mj-search-input:focus-visible,\nbutton:focus-visible,\n.mj-btn:focus-visible {\n outline: 2px solid var(--mat-sys-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/* -----------------------------------------------------------------------------\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 /* Icon-only buttons on mobile - keep pill shape */\n .mj-btn-icon-mobile {\n padding: 0.5rem 0.75rem;\n min-height: 40px;\n gap: 0;\n border-radius: var(--mat-sys-corner-full);\n }\n\n .mj-btn-icon-mobile .btn-text {\n display: none;\n }\n\n .mj-btn-icon-mobile i {\n font-size: 1.125rem;\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(--mat-sys-corner-small);\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(--mat-sys-corner-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(--mat-sys-corner-full);\n background: transparent;\n color: var(--mat-sys-on-surface-variant);\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(--mat-sys-primary);\n color: var(--mat-sys-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(--mat-sys-primary) !important;\n color: var(--mat-sys-on-primary) !important;\n box-shadow: var(--mat-sys-elevation-1);\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(--mat-sys-corner-small);\n }\n\n /* Modal styles */\n .modal-backdrop {\n padding: 0.5rem;\n }\n\n .modal-dialog {\n border-radius: var(--mat-sys-corner-extra-large);\n max-height: 95vh;\n }\n\n .modal-footer {\n flex-direction: column;\n }\n\n .modal-footer .mj-btn {\n width: 100%;\n justify-content: center;\n border-radius: var(--mat-sys-corner-full);\n }\n\n /* App Card Mobile Layout */\n .applications-list {\n gap: 0.5rem;\n }\n\n .app-card {\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-corner-small);\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(--mat-sys-corner-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(--mat-sys-surface-container-low);\n border-radius: var(--mat-sys-corner-small);\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(--mat-sys-corner-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"] }]
592
673
  }], () => [], null); })();
593
674
  (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationManagementComponent, { className: "ApplicationManagementComponent", filePath: "src/lib/application-management/application-management.component.ts", lineNumber: 28 }); })();
594
675
  //# sourceMappingURL=application-management.component.js.map