@memberjunction/ng-explorer-settings 3.2.0 → 3.3.0

package/dist/lib/application-management/application-dialog/application-dialog.component.js

@@ -1,16 +1,17 @@
-import { Component, Input, Output, EventEmitter, inject, HostListener, ViewEncapsulation } from '@angular/core';
+import { Component, Input, Output, EventEmitter, inject, HostListener } from '@angular/core';
 import { FormBuilder, Validators } from '@angular/forms';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
 import { Metadata, RunView } from '@memberjunction/core';
 import * as i0 from "@angular/core";
-import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-dialog";
+import * as i1 from "@angular/forms";
+import * as i2 from "@angular/cdk/drag-drop";
+import * as i3 from "@angular/common";
 const _forTrack0 = ($index, $item) => $item.entity.ID;
 const _forTrack1 = ($index, $item) => $item.ID;
 const _c0 = () => ({ standalone: true });
-function ApplicationDialogComponent_kendo_window_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 31);
-    i0.ɵɵelement(2, "i", 32);
+function ApplicationDialogComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 27);
+    i0.ɵɵelement(2, "i", 28);
     i0.ɵɵelementStart(3, "div");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
@@ -19,279 +20,378 @@ function ApplicationDialogComponent_kendo_window_0_Conditional_10_Template(rf, c
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r1.error);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Application name is required ");
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0, " Application name cannot exceed 100 characters ");
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 18);
-    i0.ɵɵelement(1, "i", 33);
-    i0.ɵɵtemplate(2, ApplicationDialogComponent_kendo_window_0_Conditional_24_Conditional_2_Template, 1, 0)(3, ApplicationDialogComponent_kendo_window_0_Conditional_24_Conditional_3_Template, 1, 0);
+function ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵtemplate(2, ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Conditional_2_Template, 1, 0)(3, ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Conditional_3_Template, 1, 0);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    let tmp_3_0;
+    let tmp_4_0;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(((tmp_3_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["required"]) ? 2 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(((tmp_4_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_4_0.errors == null ? null : tmp_4_0.errors["maxlength"]) ? 3 : -1);
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 29)(2, "div", 30)(3, "label", 31);
+    i0.ɵɵtext(4, "Application Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(5, "input", 32);
+    i0.ɵɵtemplate(6, ApplicationDialogComponent_Conditional_0_Conditional_26_Conditional_6_Template, 4, 2, "div", 33);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 30)(8, "label", 34);
+    i0.ɵɵtext(9, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(10, "textarea", 35);
+    i0.ɵɵelementStart(11, "div", 36);
+    i0.ɵɵtext(12, " Provide a clear description of what this application does and its main features. ");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     let tmp_2_0;
     let tmp_3_0;
+    let tmp_4_0;
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(((tmp_2_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_2_0.errors == null ? null : tmp_2_0.errors["required"]) ? 2 : -1);
+    i0.ɵɵadvance(5);
+    i0.ɵɵclassProp("error", ((tmp_2_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_2_0.invalid) && ((tmp_2_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_2_0.touched));
+    i0.ɵɵattribute("aria-invalid", ((tmp_3_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_3_0.invalid) && ((tmp_3_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_3_0.touched));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_3_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_3_0.errors == null ? null : tmp_3_0.errors["maxlength"]) ? 3 : -1);
+    i0.ɵɵconditional(((tmp_4_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_4_0.invalid) && ((tmp_4_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_4_0.touched) ? 6 : -1);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 43);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 52);
 } if (rf & 2) {
-    const config_r4 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", config_r4.entity.Description);
-    i0.ɵɵattribute("data-tooltip", config_r4.entity.Description);
+    const config_r5 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", config_r5.entity.Description);
+    i0.ɵɵattribute("aria-label", "Entity description: " + config_r5.entity.Description);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 37)(1, "div", 38)(2, "div", 39);
-    i0.ɵɵelement(3, "i", 40);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(2, "div", 47)(3, "div", 48);
+    i0.ɵɵelement(4, "i", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 41)(5, "div", 42);
-    i0.ɵɵtext(6);
-    i0.ɵɵtemplate(7, ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Conditional_7_Template, 1, 2, "i", 43);
+    i0.ɵɵelementStart(5, "div", 50)(6, "div", 51);
+    i0.ɵɵtext(7);
+    i0.ɵɵtemplate(8, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Conditional_8_Template, 1, 2, "i", 52);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 44)(9, "div", 45)(10, "label", 46)(11, "input", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template_input_ngModelChange_11_listener($event) { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; i0.ɵɵtwoWayBindingSet(config_r4.defaultForNewUser, $event) || (config_r4.defaultForNewUser = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template_input_change_11_listener() { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onDefaultForNewUserChange(config_r4)); });
+    i0.ɵɵelementStart(9, "div", 53)(10, "div", 54)(11, "label", 55)(12, "input", 56);
+    i0.ɵɵtwoWayListener("ngModelChange", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Template_input_ngModelChange_12_listener($event) { const config_r5 = i0.ɵɵrestoreView(_r4).$implicit; i0.ɵɵtwoWayBindingSet(config_r5.defaultForNewUser, $event) || (config_r5.defaultForNewUser = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Template_input_change_12_listener() { const config_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onDefaultForNewUserChange(config_r5)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 48);
-    i0.ɵɵtext(13, "Default for new users");
+    i0.ɵɵelementStart(13, "span", 57);
+    i0.ɵɵtext(14, "Default for new users");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 49);
-    i0.ɵɵtext(15);
+    i0.ɵɵelementStart(15, "div", 58);
+    i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 50)(17, "button", 51);
-    i0.ɵɵlistener("click", function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template_button_click_17_listener() { const ɵ$index_97_r5 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveEntityUp(ɵ$index_97_r5)); });
-    i0.ɵɵelement(18, "i", 52);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "button", 53);
-    i0.ɵɵlistener("click", function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template_button_click_19_listener() { const ɵ$index_97_r5 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.moveEntityDown(ɵ$index_97_r5)); });
-    i0.ɵɵelement(20, "i", 54);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "button", 55);
-    i0.ɵɵlistener("click", function ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template_button_click_21_listener() { const config_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeEntity(config_r4)); });
-    i0.ɵɵelement(22, "i", 29);
+    i0.ɵɵelementStart(17, "div", 59)(18, "button", 60);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Template_button_click_18_listener() { const config_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.removeEntity(config_r5)); });
+    i0.ɵɵelement(19, "i", 11);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const config_r4 = ctx.$implicit;
-    const ɵ$index_97_r5 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("is-new", config_r4.isNew)("has-changes", config_r4.hasChanges);
-    i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1(" ", config_r4.entity.Name, " ");
+    const config_r5 = ctx.$implicit;
+    i0.ɵɵclassProp("is-new", config_r5.isNew)("has-changes", config_r5.hasChanges);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1(" ", config_r5.entity.Name, " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(config_r4.entity.Description ? 7 : -1);
+    i0.ɵɵconditional(config_r5.entity.Description ? 8 : -1);
     i0.ɵɵadvance(4);
-    i0.ɵɵtwoWayProperty("ngModel", config_r4.defaultForNewUser);
+    i0.ɵɵtwoWayProperty("ngModel", config_r5.defaultForNewUser);
     i0.ɵɵproperty("ngModelOptions", i0.ɵɵpureFunction0(11, _c0));
-    i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(config_r4.sequence);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_97_r5 === 0);
+    i0.ɵɵadvance(3);
+    i0.ɵɵattribute("aria-label", "Sequence " + config_r5.sequence);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(config_r5.sequence);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_97_r5 === ctx_r1.applicationEntities.length - 1);
+    i0.ɵɵattribute("aria-label", "Remove " + config_r5.entity.Name);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_40_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 23)(1, "h4", 34);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 38)(1, "h4", 42);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 35);
-    i0.ɵɵrepeaterCreate(4, ApplicationDialogComponent_kendo_window_0_Conditional_40_For_5_Template, 23, 12, "div", 36, _forTrack0);
+    i0.ɵɵelementStart(3, "div", 43);
+    i0.ɵɵlistener("cdkDropListDropped", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_Template_div_cdkDropListDropped_3_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntityDrop($event)); });
+    i0.ɵɵrepeaterCreate(4, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_For_5_Template, 20, 12, "div", 44, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("Assigned Entities (", ctx_r1.applicationEntities.length, ")");
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.applicationEntities);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 24);
-    i0.ɵɵelement(1, "i", 22);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "i", 23);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No entities assigned to this application");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 56);
+    i0.ɵɵelementStart(4, "p", 61);
     i0.ɵɵtext(5, "Add entities from the available list below");
     i0.ɵɵelementEnd()();
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_42_For_5_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 59);
-    i0.ɵɵlistener("click", function ApplicationDialogComponent_kendo_window_0_Conditional_42_For_5_Template_div_click_0_listener() { const entity_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.addEntity(entity_r7)); });
-    i0.ɵɵelementStart(1, "div", 60);
-    i0.ɵɵelement(2, "i", 61);
-    i0.ɵɵelementStart(3, "span", 62);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.clearEntitySearch()); });
+    i0.ɵɵelement(1, "i", 11);
+    i0.ɵɵelementEnd();
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_8_For_2_Template_button_click_0_listener() { const entity_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r1.addEntity(entity_r9)); });
+    i0.ɵɵelementStart(1, "div", 72);
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵelementStart(3, "span", 74);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const entity_r7 = ctx.$implicit;
+    const entity_r9 = ctx.$implicit;
+    i0.ɵɵattribute("aria-label", "Add " + entity_r9.Name);
     i0.ɵɵadvance(4);
-    i0.ɵɵtextInterpolate(entity_r7.Name);
+    i0.ɵɵtextInterpolate(entity_r9.Name);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_42_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25)(1, "h4", 34);
-    i0.ɵɵtext(2);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵrepeaterCreate(1, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_8_For_2_Template, 5, 2, "button", 70, _forTrack1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 57);
-    i0.ɵɵrepeaterCreate(4, ApplicationDialogComponent_kendo_window_0_Conditional_42_For_5_Template, 5, 1, "div", 58, _forTrack1);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredAvailableEntities);
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "p");
+    i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("Available Entities (", ctx_r1.availableEntities.length, ")");
-    i0.ɵɵadvance(2);
-    i0.ɵɵrepeater(ctx_r1.availableEntities);
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("No entities match \"", ctx_r1.entitySearchTerm, "\"");
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "i", 63);
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 40)(1, "div", 62)(2, "h4", 42);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 63);
+    i0.ɵɵelement(5, "i", 64);
+    i0.ɵɵelementStart(6, "input", 65);
+    i0.ɵɵlistener("input", function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Template_input_input_6_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onEntitySearchChange($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(7, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_7_Template, 2, 0, "button", 66);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(8, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_8_Template, 3, 0, "div", 67)(9, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Conditional_9_Template, 4, 1, "div", 68);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("Available Entities (", ctx_r1.filteredAvailableEntities.length, " of ", ctx_r1.availableEntities.length, ")");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("value", ctx_r1.entitySearchTerm);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.entitySearchTerm ? 7 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.filteredAvailableEntities.length > 0 ? 8 : 9);
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵelement(1, "i", 76);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "All entities have been assigned to this application");
     i0.ɵɵelementEnd()();
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_44_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8)(1, "div", 9)(2, "div", 10)(3, "h3", 11);
-    i0.ɵɵelement(4, "i", 12);
-    i0.ɵɵtext(5, " System Information ");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 13);
-    i0.ɵɵtext(7, "Application metadata and audit information");
+function ApplicationDialogComponent_Conditional_0_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 29);
+    i0.ɵɵtemplate(2, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_2_Template, 6, 1, "div", 38)(3, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_3_Template, 6, 0, "div", 39)(4, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_4_Template, 10, 5, "div", 40)(5, ApplicationDialogComponent_Conditional_0_Conditional_36_Conditional_5_Template, 4, 0, "div", 41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 14)(9, "div", 64)(10, "div", 65)(11, "span", 66);
-    i0.ɵɵtext(12, "Created:");
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.applicationEntities.length > 0 ? 2 : 3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.availableEntities.length > 0 ? 4 : 5);
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_37_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 29)(2, "div", 77)(3, "div", 78)(4, "span", 79);
+    i0.ɵɵtext(5, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 67);
-    i0.ɵɵtext(14);
-    i0.ɵɵpipe(15, "date");
+    i0.ɵɵelementStart(6, "span", 80);
+    i0.ɵɵtext(7);
+    i0.ɵɵpipe(8, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 65)(17, "span", 66);
-    i0.ɵɵtext(18, "Last Updated:");
+    i0.ɵɵelementStart(9, "div", 78)(10, "span", 79);
+    i0.ɵɵtext(11, "Last Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 67);
-    i0.ɵɵtext(20);
-    i0.ɵɵpipe(21, "date");
+    i0.ɵɵelementStart(12, "span", 80);
+    i0.ɵɵtext(13);
+    i0.ɵɵpipe(14, "date");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(22, "div", 65)(23, "span", 66);
-    i0.ɵɵtext(24, "Application ID:");
+    i0.ɵɵelementStart(15, "div", 78)(16, "span", 79);
+    i0.ɵɵtext(17, "Application ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 67);
-    i0.ɵɵtext(26);
+    i0.ɵɵelementStart(18, "span", 80);
+    i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 65)(28, "span", 66);
-    i0.ɵɵtext(29, "Total Entities:");
+    i0.ɵɵelementStart(20, "div", 78)(21, "span", 79);
+    i0.ɵɵtext(22, "Total Entities");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 67);
-    i0.ɵɵtext(31);
-    i0.ɵɵelementEnd()()()()()();
+    i0.ɵɵelementStart(23, "span", 80);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
-    const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(14);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(15, 4, ctx_r1.data == null ? null : ctx_r1.data.application == null ? null : ctx_r1.data.application.__mj_CreatedAt, "medium"));
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(8, 4, ctx_r1.data == null ? null : ctx_r1.data.application == null ? null : ctx_r1.data.application.__mj_CreatedAt, "medium"));
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(21, 7, ctx_r1.data == null ? null : ctx_r1.data.application == null ? null : ctx_r1.data.application.__mj_UpdatedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(14, 7, ctx_r1.data == null ? null : ctx_r1.data.application == null ? null : ctx_r1.data.application.__mj_UpdatedAt, "medium"));
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.data == null ? null : ctx_r1.data.application == null ? null : ctx_r1.data.application.ID);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r1.applicationEntities.length);
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 68);
+function ApplicationDialogComponent_Conditional_0_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "fieldset", 15)(1, "legend", 16);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Conditional_37_Template_legend_click_1_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSection("systemInfo")); });
+    i0.ɵɵelementStart(2, "div", 17)(3, "span", 18);
+    i0.ɵɵelement(4, "i", 19);
+    i0.ɵɵtext(5, " System Information ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(6, "i", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 21);
+    i0.ɵɵtext(8, "Application metadata and audit information");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(9, ApplicationDialogComponent_Conditional_0_Conditional_37_Conditional_9_Template, 25, 10, "div", 22);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵclassProp("fa-chevron-up", ctx_r1.sectionExpanded.systemInfo)("fa-chevron-down", !ctx_r1.sectionExpanded.systemInfo);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.sectionExpanded.systemInfo ? 9 : -1);
+} }
+function ApplicationDialogComponent_Conditional_0_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 81);
     i0.ɵɵtext(1, " Saving... ");
 } }
-function ApplicationDialogComponent_kendo_window_0_Conditional_51_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 69);
+function ApplicationDialogComponent_Conditional_0_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 82);
     i0.ɵɵtext(1);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update Application" : "Create Application", " ");
 } }
-function ApplicationDialogComponent_kendo_window_0_Template(rf, ctx) { if (rf & 1) {
+function ApplicationDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "kendo-window", 1);
-    i0.ɵɵlistener("close", function ApplicationDialogComponent_kendo_window_0_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 2)(3, "h2", 3);
-    i0.ɵɵelement(4, "i", 4);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(0, "div", 1);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelementStart(1, "div", 2);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 3)(3, "div", 4)(4, "h2", 5);
+    i0.ɵɵelement(5, "i", 6);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p", 5);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(7, "p", 7);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 8)(10, "button", 9);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFullscreen()); });
+    i0.ɵɵelement(11, "i", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 10);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵelement(13, "i", 11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 6)(9, "form", 7);
-    i0.ɵɵlistener("ngSubmit", function ApplicationDialogComponent_kendo_window_0_Template_form_ngSubmit_9_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
-    i0.ɵɵtemplate(10, ApplicationDialogComponent_kendo_window_0_Conditional_10_Template, 5, 1, "div", 8);
-    i0.ɵɵelementStart(11, "div", 8)(12, "div", 9)(13, "div", 10)(14, "h3", 11);
-    i0.ɵɵelement(15, "i", 12);
-    i0.ɵɵtext(16, " Application Information ");
+    i0.ɵɵelementStart(14, "div", 12)(15, "form", 13);
+    i0.ɵɵlistener("ngSubmit", function ApplicationDialogComponent_Conditional_0_Template_form_ngSubmit_15_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
+    i0.ɵɵtemplate(16, ApplicationDialogComponent_Conditional_0_Conditional_16_Template, 5, 1, "div", 14);
+    i0.ɵɵelementStart(17, "fieldset", 15)(18, "legend", 16);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_legend_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("basicInfo")); });
+    i0.ɵɵelementStart(19, "div", 17)(20, "span", 18);
+    i0.ɵɵelement(21, "i", 19);
+    i0.ɵɵtext(22, " Application Information ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "p", 13);
-    i0.ɵɵtext(18, "Define the application's basic properties");
+    i0.ɵɵelement(23, "i", 20);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(24, "span", 21);
+    i0.ɵɵtext(25, "Define the application's basic properties");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 14)(20, "div", 15)(21, "label", 16);
-    i0.ɵɵtext(22, "Application Name");
+    i0.ɵɵtemplate(26, ApplicationDialogComponent_Conditional_0_Conditional_26_Template, 13, 4, "div", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(23, "input", 17);
-    i0.ɵɵtemplate(24, ApplicationDialogComponent_kendo_window_0_Conditional_24_Template, 4, 2, "div", 18);
+    i0.ɵɵelementStart(27, "fieldset", 15)(28, "legend", 16);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_legend_click_28_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSection("entities")); });
+    i0.ɵɵelementStart(29, "div", 17)(30, "span", 18);
+    i0.ɵɵelement(31, "i", 23);
+    i0.ɵɵtext(32, " Application Entities ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "div", 15)(26, "label", 19);
-    i0.ɵɵtext(27, "Description");
+    i0.ɵɵelement(33, "i", 20);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(28, "textarea", 20);
-    i0.ɵɵelementStart(29, "div", 21);
-    i0.ɵɵtext(30, " Provide a clear description of what this application does and its main features. ");
-    i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(31, "div", 8)(32, "div", 9)(33, "div", 10)(34, "h3", 11);
-    i0.ɵɵelement(35, "i", 22);
-    i0.ɵɵtext(36, " Application Entities ");
+    i0.ɵɵelementStart(34, "span", 21);
+    i0.ɵɵtext(35, "Manage which entities are included in this application");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(36, ApplicationDialogComponent_Conditional_0_Conditional_36_Template, 6, 2, "div", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "p", 13);
-    i0.ɵɵtext(38, "Manage which entities are included in this application");
+    i0.ɵɵtemplate(37, ApplicationDialogComponent_Conditional_0_Conditional_37_Template, 10, 5, "fieldset", 15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 14);
-    i0.ɵɵtemplate(40, ApplicationDialogComponent_kendo_window_0_Conditional_40_Template, 6, 1, "div", 23)(41, ApplicationDialogComponent_kendo_window_0_Conditional_41_Template, 6, 0, "div", 24)(42, ApplicationDialogComponent_kendo_window_0_Conditional_42_Template, 6, 1, "div", 25)(43, ApplicationDialogComponent_kendo_window_0_Conditional_43_Template, 4, 0, "div", 26);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(44, ApplicationDialogComponent_kendo_window_0_Conditional_44_Template, 32, 10, "div", 8);
-    i0.ɵɵelementStart(45, "div", 27)(46, "button", 28);
-    i0.ɵɵlistener("click", function ApplicationDialogComponent_kendo_window_0_Template_button_click_46_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
-    i0.ɵɵelement(47, "i", 29);
-    i0.ɵɵtext(48, " Cancel ");
+    i0.ɵɵelementStart(38, "div", 24)(39, "button", 25);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_button_click_39_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSubmit()); });
+    i0.ɵɵtemplate(40, ApplicationDialogComponent_Conditional_0_Conditional_40_Template, 2, 0)(41, ApplicationDialogComponent_Conditional_0_Conditional_41_Template, 2, 1);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(49, "button", 30);
-    i0.ɵɵtemplate(50, ApplicationDialogComponent_kendo_window_0_Conditional_50_Template, 2, 0)(51, ApplicationDialogComponent_kendo_window_0_Conditional_51_Template, 2, 1);
-    i0.ɵɵelementEnd()()()()();
+    i0.ɵɵelementStart(42, "button", 26);
+    i0.ɵɵlistener("click", function ApplicationDialogComponent_Conditional_0_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onCancel()); });
+    i0.ɵɵtext(43, " Cancel ");
+    i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
-    let tmp_10_0;
-    let tmp_11_0;
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("width", 900)("height", 700)("resizable", false)("draggable", true)("keepContent", true);
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fullscreen", ctx_r1.isFullscreen);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("create-mode", !ctx_r1.isEditMode)("edit-mode", ctx_r1.isEditMode);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassProp("fa-plus", !ctx_r1.isEditMode)("fa-layer-group", ctx_r1.isEditMode);
+    i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Edit Application" : "Create New Application", " ");
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.isEditMode ? "Update application information and settings" : "Add a new application to the system", " ");
     i0.ɵɵadvance(2);
+    i0.ɵɵattribute("aria-label", ctx_r1.isFullscreen ? "Exit fullscreen" : "Enter fullscreen");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-compress", ctx_r1.isFullscreen)("fa-expand", !ctx_r1.isFullscreen);
+    i0.ɵɵadvance(4);
     i0.ɵɵproperty("formGroup", ctx_r1.applicationForm);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.error ? 10 : -1);
-    i0.ɵɵadvance(13);
-    i0.ɵɵclassProp("error", ((tmp_10_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_10_0.invalid) && ((tmp_10_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_10_0.touched));
+    i0.ɵɵconditional(ctx_r1.error ? 16 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("fa-chevron-up", ctx_r1.sectionExpanded.basicInfo)("fa-chevron-down", !ctx_r1.sectionExpanded.basicInfo);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.sectionExpanded.basicInfo ? 26 : -1);
+    i0.ɵɵadvance(7);
+    i0.ɵɵclassProp("fa-chevron-up", ctx_r1.sectionExpanded.entities)("fa-chevron-down", !ctx_r1.sectionExpanded.entities);
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r1.sectionExpanded.entities ? 36 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(((tmp_11_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_11_0.invalid) && ((tmp_11_0 = ctx_r1.applicationForm.get("name")) == null ? null : tmp_11_0.touched) ? 24 : -1);
-    i0.ɵɵadvance(16);
-    i0.ɵɵconditional(ctx_r1.applicationEntities.length > 0 ? 40 : 41);
+    i0.ɵɵconditional(ctx_r1.isEditMode ? 37 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.availableEntities.length > 0 ? 42 : 43);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.isEditMode ? 44 : -1);
-    i0.ɵɵadvance(5);
     i0.ɵɵproperty("disabled", ctx_r1.applicationForm.invalid || ctx_r1.isLoading);
+    i0.ɵɵattribute("aria-busy", ctx_r1.isLoading);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.isLoading ? 50 : 51);
+    i0.ɵɵconditional(ctx_r1.isLoading ? 40 : 41);
 } }
 export class ApplicationDialogComponent {
     data = null;
@@ -306,6 +406,16 @@ export class ApplicationDialogComponent {
     applicationEntities = [];
     availableEntities = [];
     allEntities = [];
+    // Search filter for available entities
+    entitySearchTerm = '';
+    // Section expansion state
+    sectionExpanded = {
+        basicInfo: true,
+        entities: true,
+        systemInfo: false
+    };
+    // Fullscreen state
+    isFullscreen = false;
     constructor() {
         this.applicationForm = this.fb.group({
             name: ['', [Validators.required, Validators.maxLength(100)]],
@@ -362,9 +472,10 @@ export class ApplicationDialogComponent {
         });
         this.applicationEntities = [];
         this.availableEntities = [...this.allEntities];
+        this.entitySearchTerm = '';
         this.error = null;
     }
-    onEscapeKey(event) {
+    onEscapeKey() {
         if (this.visible) {
             this.onCancel();
         }
@@ -478,6 +589,34 @@ export class ApplicationDialogComponent {
     get hasEntityChanges() {
         return this.applicationEntities.some(ae => ae.isNew || ae.hasChanges);
     }
+    // Filtered available entities based on search term
+    get filteredAvailableEntities() {
+        if (!this.entitySearchTerm || !this.entitySearchTerm.trim()) {
+            return this.availableEntities;
+        }
+        const searchLower = this.entitySearchTerm.toLowerCase().trim();
+        return this.availableEntities.filter(entity => (entity.Name || '').toLowerCase().includes(searchLower) ||
+            (entity.Description || '').toLowerCase().includes(searchLower));
+    }
+    onEntitySearchChange(event) {
+        const value = event.target.value;
+        this.entitySearchTerm = value;
+    }
+    clearEntitySearch() {
+        this.entitySearchTerm = '';
+    }
+    toggleSection(section) {
+        this.sectionExpanded[section] = !this.sectionExpanded[section];
+    }
+    toggleFullscreen() {
+        this.isFullscreen = !this.isFullscreen;
+    }
+    onEntityDrop(event) {
+        if (event.previousIndex !== event.currentIndex) {
+            moveItemInArray(this.applicationEntities, event.previousIndex, event.currentIndex);
+            this.updateSequences();
+        }
+    }
     async onSubmit() {
         if (this.applicationForm.invalid) {
             this.markFormGroupTouched(this.applicationForm);
@@ -558,16 +697,16 @@ export class ApplicationDialogComponent {
     }
     static ɵfac = function ApplicationDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ApplicationDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ApplicationDialogComponent, selectors: [["mj-application-dialog"]], hostBindings: function ApplicationDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown.escape", function ApplicationDialogComponent_keydown_escape_HostBindingHandler($event) { return ctx.onEscapeKey($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["kendoWindowContainer", "", 3, "width", "height", "resizable", "draggable", "keepContent", "close", 4, "ngIf"], ["kendoWindowContainer", "", 3, "close", "width", "height", "resizable", "draggable", "keepContent"], [1, "dialog-header"], [1, "dialog-title"], [1, "fa-solid", "fa-grid-2"], [1, "dialog-subtitle"], [1, "dialog-content"], [3, "ngSubmit", "formGroup"], [1, "content-section"], [1, "form-section"], [1, "section-header"], [1, "section-title"], [1, "fa-solid", "fa-info-circle"], [1, "section-description"], [1, "form-grid"], [1, "form-field"], ["for", "name", 1, "field-label", "required"], ["id", "name", "type", "text", "formControlName", "name", "placeholder", "My Application", 1, "field-input"], [1, "field-error"], ["for", "description", 1, "field-label"], ["id", "description", "formControlName", "description", "placeholder", "Describe the application's purpose and functionality...", "rows", "6", 1, "field-textarea"], [1, "field-hint"], [1, "fa-solid", "fa-database"], [1, "assigned-entities"], [1, "no-entities"], [1, "available-entities"], [1, "all-assigned"], [1, "dialog-footer"], ["type", "button", 1, "btn", "btn-secondary", 3, "click"], [1, "fa-solid", "fa-times"], ["type", "submit", 1, "btn", "btn-primary", 3, "disabled"], [1, "alert", "alert-error"], [1, "fa-solid", "fa-exclamation-triangle"], [1, "fa-solid", "fa-exclamation-circle"], [1, "subsection-title"], [1, "entities-list"], [1, "entity-item", 3, "is-new", "has-changes"], [1, "entity-item"], [1, "entity-info"], [1, "entity-icon"], [1, "fa-solid", "fa-table"], [1, "entity-details"], [1, "entity-name"], [1, "fa-solid", "fa-info-circle", "entity-info-icon", 3, "title"], [1, "entity-config"], [1, "config-item"], [1, "config-label"], ["type", "checkbox", 1, "config-checkbox", 3, "ngModelChange", "change", "ngModel", "ngModelOptions"], [1, "checkbox-text"], [1, "sequence-badge"], [1, "entity-actions"], ["type", "button", "title", "Move up", 1, "btn-icon", "btn-neutral", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["type", "button", "title", "Move down", 1, "btn-icon", "btn-neutral", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["type", "button", "title", "Remove entity", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], [1, "entities-grid"], [1, "entity-chip"], [1, "entity-chip", 3, "click"], [1, "chip-content"], [1, "fa-solid", "fa-plus"], [1, "chip-name"], [1, "fa-solid", "fa-check-circle"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-save"]], template: function ApplicationDialogComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, ApplicationDialogComponent_kendo_window_0_Template, 52, 17, "kendo-window", 0);
+            i0.ɵɵlistener("keydown.escape", function ApplicationDialogComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument);
+        } }, inputs: { data: "data", visible: "visible" }, outputs: { result: "result" }, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [["role", "presentation", 1, "modal-backdrop"], ["role", "presentation", 1, "modal-backdrop", 3, "click"], ["role", "dialog", "aria-modal", "true", "aria-labelledby", "application-dialog-title", "aria-describedby", "application-dialog-description", 1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-header-content"], ["id", "application-dialog-title", 1, "modal-title"], ["aria-hidden", "true", 1, "fa-solid"], ["id", "application-dialog-description", 1, "modal-subtitle"], [1, "modal-header-actions"], ["type", "button", 1, "modal-action-btn", 3, "click"], ["aria-label", "Close dialog", "type", "button", 1, "modal-close", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-times"], [1, "modal-body"], [3, "ngSubmit", "formGroup"], [1, "form-section"], [1, "form-section", "collapsible-section"], [1, "section-header", "clickable", 3, "click"], [1, "section-title-row"], [1, "section-title"], ["aria-hidden", "true", 1, "fa-solid", "fa-info-circle"], ["aria-hidden", "true", 1, "fa-solid", "chevron-icon"], [1, "section-description"], [1, "section-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-database"], [1, "modal-footer"], ["type", "submit", 1, "mj-btn", "mj-btn-primary", 3, "click", "disabled"], ["type", "button", 1, "mj-btn", "mj-btn-secondary", 3, "click"], ["role", "alert", 1, "alert", "alert-error"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-triangle"], [1, "form-grid"], [1, "form-field"], ["for", "app-name", 1, "field-label", "required"], ["id", "app-name", "type", "text", "formControlName", "name", "placeholder", "My Application", "aria-describedby", "app-name-error", 1, "field-input"], ["id", "app-name-error", "role", "alert", 1, "field-error"], ["for", "app-description", 1, "field-label"], ["id", "app-description", "formControlName", "description", "placeholder", "Describe the application's purpose and functionality...", "rows", "4", 1, "field-textarea"], [1, "field-hint"], ["aria-hidden", "true", 1, "fa-solid", "fa-exclamation-circle"], [1, "assigned-entities"], [1, "no-entities"], [1, "available-entities"], [1, "all-assigned"], [1, "subsection-title"], ["role", "list", "cdkDropList", "", 1, "entities-list", 3, "cdkDropListDropped"], ["role", "listitem", "cdkDrag", "", 1, "entity-item", 3, "is-new", "has-changes"], ["role", "listitem", "cdkDrag", "", 1, "entity-item"], ["aria-hidden", "true", 1, "fa-solid", "fa-grip-vertical", "drag-handle"], [1, "entity-info"], [1, "entity-icon"], ["aria-hidden", "true", 1, "fa-solid", "fa-table"], [1, "entity-details"], [1, "entity-name"], [1, "fa-solid", "fa-info-circle", "entity-info-icon", 3, "title"], [1, "entity-config"], [1, "config-item"], [1, "config-label"], ["type", "checkbox", 1, "config-checkbox", 3, "ngModelChange", "change", "ngModel", "ngModelOptions"], [1, "checkbox-text"], [1, "sequence-badge"], [1, "entity-actions"], ["type", "button", "title", "Remove entity", 1, "btn-icon", "btn-danger", 3, "click"], [1, "empty-subtext"], [1, "available-entities-header"], [1, "entity-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-search", "entity-search-icon"], ["type", "text", "placeholder", "Search entities...", "aria-label", "Search available entities", 1, "entity-search-input", 3, "input", "value"], ["type", "button", "aria-label", "Clear search", 1, "entity-search-clear"], ["role", "list", 1, "entities-grid"], [1, "no-search-results"], ["type", "button", "aria-label", "Clear search", 1, "entity-search-clear", 3, "click"], ["type", "button", "role", "listitem", 1, "entity-chip"], ["type", "button", "role", "listitem", 1, "entity-chip", 3, "click"], [1, "chip-content"], ["aria-hidden", "true", 1, "fa-solid", "fa-plus"], [1, "chip-name"], ["aria-hidden", "true", 1, "fa-solid", "fa-search"], ["aria-hidden", "true", 1, "fa-solid", "fa-check-circle"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], ["aria-hidden", "true", 1, "fa-solid", "fa-spinner", "fa-spin"], ["aria-hidden", "true", 1, "fa-solid", "fa-save"]], template: function ApplicationDialogComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, ApplicationDialogComponent_Conditional_0_Template, 44, 33, "div", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.visible);
-        } }, dependencies: [i1.NgIf, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.NgModel, i2.FormGroupDirective, i2.FormControlName, i3.WindowComponent, i3.WindowTitleBarComponent, i3.WindowContainerDirective, i1.DatePipe], styles: ["/* Modern Dialog Styling - Matching Dashboard Design */\n:host ::ng-deep .k-window {\n  border: none;\n  border-radius: 12px;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: #ffffff;\n  overflow: hidden;\n}\n\n:host ::ng-deep .k-window-titlebar {\n  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n  border: none;\n  padding: 24px 32px;\n  min-height: 70px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-title {\n  display: none; /* Hide default title */\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: #ffffff;\n  border-radius: 6px;\n  width: 32px;\n  height: 32px;\n  min-width: auto;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n:host ::ng-deep .k-window-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n/* Custom Title Bar */\n.dialog-header {\n  position: relative;\n  color: #ffffff;\n}\n\n.dialog-header .dialog-title {\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 0;\n}\n\n.dialog-header .dialog-title i {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  opacity: 0.85;\n  font-weight: 400;\n}\n\n/* Modal Content Areas */\n.dialog-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n.dialog-content .content-section {\n  padding: 32px;\n}\n\n.dialog-content .content-section:not(:last-child) {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-footer {\n  padding: 24px 32px;\n  background: #fafafa;\n  border-top: 1px solid #e0e0e0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: #2196f3;\n  font-size: 14px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.form-grid {\n  display: grid;\n  gap: 24px;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n}\n\n/* Modern Form Fields */\n.form-field {\n  margin-bottom: 24px;\n}\n\n.form-field:last-child {\n  margin-bottom: 0;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 8px;\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: #f44336;\n}\n\n.form-field .field-input,\n.form-field .field-select,\n.form-field .field-textarea {\n  width: 100%;\n  padding: 0 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 6px;\n  font-size: 14px;\n  background: #ffffff;\n  transition: all 0.15s ease;\n}\n\n.form-field .field-input:focus,\n.form-field .field-select:focus,\n.form-field .field-textarea:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.form-field .field-input.error,\n.form-field .field-select.error,\n.form-field .field-textarea.error {\n  border-color: #f44336;\n}\n\n.form-field .field-input.error:focus,\n.form-field .field-select.error:focus,\n.form-field .field-textarea.error:focus {\n  border-color: #f44336;\n  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);\n}\n\n.form-field .field-input::placeholder,\n.form-field .field-select::placeholder,\n.form-field .field-textarea::placeholder {\n  color: #9e9e9e;\n}\n\n.form-field .field-input,\n.form-field .field-select {\n  height: 36px;\n}\n\n.form-field .field-textarea {\n  min-height: 100px;\n  padding: 16px;\n  resize: vertical;\n  line-height: 1.4;\n}\n\n.form-field .field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 24px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.form-field .field-error {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #f44336;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.form-field .field-error i {\n  font-size: 10px;\n}\n\n.form-field .field-hint {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #666666;\n  line-height: 1.4;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: 8px;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: rgba(244, 67, 54, 0.1);\n  border: 1px solid rgba(244, 67, 54, 0.2);\n  color: #c62828;\n}\n\n.alert.alert-error i {\n  color: #f44336;\n}\n\n.alert.alert-warning {\n  background: rgba(255, 193, 7, 0.1);\n  border: 1px solid rgba(255, 193, 7, 0.2);\n  color: #b7800d;\n}\n\n.alert.alert-warning i {\n  color: #ffc107;\n}\n\n.alert.alert-info {\n  background: rgba(0, 188, 212, 0.1);\n  border: 1px solid rgba(0, 188, 212, 0.2);\n  color: #00838f;\n}\n\n.alert.alert-info i {\n  color: #00bcd4;\n}\n\n/* Button Styles */\n.dialog-footer .btn {\n  padding: 8px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 36px;\n}\n\n.dialog-footer .btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.dialog-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n.dialog-footer .btn.btn-secondary {\n  background: #ffffff;\n  color: #666666;\n  border-color: #bdbdbd;\n}\n\n.dialog-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #757575;\n  color: #212121;\n}\n\n.dialog-footer .btn.btn-primary {\n  background: #2196f3;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Entity Management Styles */\n.subsection-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 16px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.assigned-entities {\n  margin-bottom: 32px;\n}\n\n.assigned-entities .entities-list {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.entity-item {\n  display: flex;\n  align-items: center;\n  padding: 16px 24px;\n  border-bottom: 1px solid #fafafa;\n  transition: all 0.15s ease;\n}\n\n.entity-item:last-child {\n  border-bottom: none;\n}\n\n.entity-item:hover {\n  background: rgba(33, 150, 243, 0.02);\n}\n\n.entity-item.is-new {\n  background: rgba(76, 175, 80, 0.05);\n  border-left: 3px solid #4caf50;\n}\n\n.entity-item.has-changes {\n  background: rgba(0, 188, 212, 0.05);\n  border-left: 3px solid #00bcd4;\n}\n\n.entity-item .entity-info {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-icon {\n  width: 40px;\n  height: 40px;\n  background: rgba(33, 150, 243, 0.1);\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  flex-shrink: 0;\n}\n\n.entity-item .entity-info .entity-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-details .entity-name {\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 2px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon {\n  color: #00bcd4;\n  font-size: 14px;\n  cursor: help;\n  opacity: 0.7;\n  transition: all 0.15s ease;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon:hover {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.entity-item .entity-info .entity-details .entity-description {\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.entity-item .entity-config {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  margin: 0 24px;\n}\n\n.entity-item .entity-config .config-item .config-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.entity-item .entity-config .config-item .config-label .config-checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.entity-item .entity-config .sequence-badge {\n  background: #2196f3;\n  color: #ffffff;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  min-width: 24px;\n  text-align: center;\n}\n\n.entity-item .entity-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.no-entities,\n.all-assigned {\n  text-align: center;\n  padding: 32px;\n  color: #666666;\n}\n\n.no-entities i,\n.all-assigned i {\n  font-size: 2rem;\n  color: #bdbdbd;\n  margin-bottom: 16px;\n}\n\n.no-entities p,\n.all-assigned p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n}\n\n.no-entities .empty-subtext,\n.all-assigned .empty-subtext {\n  font-size: 12px;\n  color: #9e9e9e;\n  margin: 0;\n}\n\n.available-entities .entities-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 8px;\n}\n\n@media (max-width: 640px) {\n  .available-entities .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  }\n}\n\n.entity-chip {\n  padding: 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n  background: #ffffff;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-chip .chip-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-chip .chip-content i {\n  color: #2196f3;\n  font-size: 14px;\n}\n\n.entity-chip .chip-content .chip-name {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n.entity-chip:hover {\n  border-color: #2196f3;\n  background: rgba(33, 150, 243, 0.05);\n  transform: translateY(-1px);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n/* Info Grid for System Information */\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .info-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.info-grid .info-item .info-label {\n  font-size: 11px;\n  color: #666666;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.info-grid .info-item .info-value {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n/* Enhanced Button Icons */\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-neutral {\n  background: rgba(189, 189, 189, 0.1);\n  color: #666666;\n}\n\n.btn-icon.btn-neutral:hover:not(:disabled) {\n  background: rgba(189, 189, 189, 0.2);\n  color: #212121;\n  transform: scale(1.05);\n}\n\n.btn-icon.btn-danger {\n  background: rgba(244, 67, 54, 0.1);\n  color: #f44336;\n}\n\n.btn-icon.btn-danger:hover:not(:disabled) {\n  background: rgba(244, 67, 54, 0.2);\n  transform: scale(1.05);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host ::ng-deep .k-window {\n    margin: 16px;\n    max-width: none;\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 24px) !important;\n  }\n  \n  :host ::ng-deep .k-window-titlebar {\n    padding: 16px 24px;\n    min-height: 60px;\n  }\n  \n  .dialog-content .content-section {\n    padding: 24px 16px;\n  }\n  \n  .dialog-footer {\n    padding: 16px 24px;\n    flex-direction: column-reverse;\n  }\n  \n  .dialog-footer .btn {\n    width: 100%;\n    justify-content: center;\n  }\n}"], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.visible ? 0 : -1);
+        } }, dependencies: [i1.ɵNgNoValidate, i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgControlStatusGroup, i1.NgModel, i1.FormGroupDirective, i1.FormControlName, i2.CdkDropList, i2.CdkDrag, i3.DatePipe], styles: ["\n\n\n\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  \n\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  \n\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  \n\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  \n\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  \n\n  --md-surface: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  \n\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  \n\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\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(--md-surface);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  max-width: 900px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n\n\n.modal-dialog.fullscreen[_ngcontent-%COMP%] {\n  max-width: 100vw;\n  width: 100vw;\n  max-height: 100vh;\n  height: 100vh;\n  border-radius: 0;\n  margin: 0;\n}\n\n\n\n\n\n.modal-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 1.5rem 1.5rem 1rem 1.5rem;\n  background: #0076B6;\n  color: var(--md-on-primary);\n  flex-shrink: 0;\n}\n\n.modal-header-content[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\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(--md-on-primary);\n  margin: 0;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: var(--md-corner-medium);\n  font-size: 1.125rem;\n  flex-shrink: 0;\n}\n\n\n\n.modal-header.create-mode[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  background: var(--md-on-primary);\n  color: #0076B6;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.modal-header.edit-mode[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.2);\n  color: var(--md-on-primary);\n}\n\n\n\n.modal-header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: 0.5rem;\n}\n\n.modal-action-btn[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-primary);\n  font-size: 1.125rem;\n  cursor: pointer;\n  border-radius: var(--md-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  flex-shrink: 0;\n}\n\n.modal-action-btn[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.modal-action-btn[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--md-on-primary);\n  outline-offset: 2px;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-subtitle[_ngcontent-%COMP%] {\n  margin: 0.375rem 0 0 0;\n  font-size: 0.8125rem;\n  color: var(--md-on-primary);\n  opacity: 0.85;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%] {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-primary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-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  flex-shrink: 0;\n  margin-left: 0.5rem;\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%]:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--md-on-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n.modal-body[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  padding: 0;\n  background: var(--md-surface);\n}\n\n\n\n\n\n.modal-footer[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--md-outline-variant);\n  background: var(--md-surface-container-low);\n  flex-shrink: 0;\n}\n\n\n\n\n\n.form-section[_ngcontent-%COMP%] {\n  border: none;\n  margin: 0;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.form-section[_ngcontent-%COMP%]:last-of-type {\n  border-bottom: none;\n}\n\n.section-header[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-bottom: 1.25rem;\n  padding: 0;\n  font-weight: normal;\n}\n\n.section-header[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n}\n\n.section-header[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--md-primary);\n  font-size: 0.875rem;\n}\n\n.section-header[_ngcontent-%COMP%]   .section-description[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n}\n\n\n\n\n\n.collapsible-section[_ngcontent-%COMP%]   .section-header.clickable[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.2s ease;\n  padding: 0.75rem 0;\n  margin: -0.75rem 0 0.75rem 0;\n}\n\n.collapsible-section[_ngcontent-%COMP%]   .section-header.clickable[_ngcontent-%COMP%]:hover {\n  opacity: 0.8;\n}\n\n.section-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-bottom: 0.25rem;\n}\n\n.chevron-icon[_ngcontent-%COMP%] {\n  color: var(--md-on-surface-variant);\n  font-size: 0.875rem;\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n.section-content[_ngcontent-%COMP%] {\n  animation: _ngcontent-%COMP%_expandSection 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes _ngcontent-%COMP%_expandSection {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n\n\n.form-grid[_ngcontent-%COMP%] {\n  display: grid;\n  gap: 1.25rem;\n}\n\n.form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.25rem;\n}\n\n\n\n\n\n.form-field[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-label[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-label.required[_ngcontent-%COMP%]::after {\n  content: ' *';\n  color: var(--md-error);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   .field-textarea[_ngcontent-%COMP%] {\n  width: 100%;\n  min-height: 44px;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--md-outline);\n  border-radius: var(--md-corner-small);\n  font-size: 0.9375rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   .field-select[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   .field-textarea[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.12);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-input.error[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   .field-select.error[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%]   .field-textarea.error[_ngcontent-%COMP%] {\n  border-color: var(--md-error);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-input.error[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   .field-select.error[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%]   .field-textarea.error[_ngcontent-%COMP%]:focus {\n  border-color: var(--md-error);\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-input[_ngcontent-%COMP%]::placeholder, \n.form-field[_ngcontent-%COMP%]   .field-textarea[_ngcontent-%COMP%]::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-textarea[_ngcontent-%COMP%] {\n  min-height: 100px;\n  resize: vertical;\n  line-height: 1.5;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-error[_ngcontent-%COMP%] {\n  margin-top: 0.25rem;\n  font-size: 0.8125rem;\n  color: var(--md-error);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 0.625rem;\n}\n\n.form-field[_ngcontent-%COMP%]   .field-hint[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n}\n\n\n\n\n\n.alert[_ngcontent-%COMP%] {\n  padding: 1rem 1.25rem;\n  border-radius: var(--md-corner-small);\n  margin-bottom: 1rem;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.alert[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1rem;\n  flex-shrink: 0;\n  margin-top: 0.125rem;\n}\n\n.alert.alert-error[_ngcontent-%COMP%] {\n  background: var(--md-error-container);\n  border: 1px solid rgba(211, 47, 47, 0.2);\n  color: var(--md-on-error-container);\n}\n\n.alert.alert-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--md-error);\n}\n\n\n\n\n\n.subsection-title[_ngcontent-%COMP%] {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 1rem 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.assigned-entities[_ngcontent-%COMP%] {\n  margin-bottom: 1.5rem;\n}\n\n.assigned-entities[_ngcontent-%COMP%]   .entities-list[_ngcontent-%COMP%] {\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  overflow: hidden;\n  background: var(--md-surface);\n}\n\n.entity-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.25rem;\n  border-bottom: 1px solid var(--md-surface-container);\n  transition: all 0.15s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n.entity-item[_ngcontent-%COMP%]:hover {\n  background: var(--md-surface-container-low);\n}\n\n.entity-item.is-new[_ngcontent-%COMP%] {\n  background: rgba(76, 175, 80, 0.08);\n  border-left: 3px solid var(--md-tertiary);\n}\n\n.entity-item.has-changes[_ngcontent-%COMP%] {\n  background: rgba(245, 166, 35, 0.08);\n  border-left: 3px solid var(--md-secondary);\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-icon[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  background: var(--md-primary-container);\n  border-radius: var(--md-corner-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--md-primary);\n  flex-shrink: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-details[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-details[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%] {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin-bottom: 0.125rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-details[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%]   .entity-info-icon[_ngcontent-%COMP%] {\n  color: var(--md-secondary);\n  font-size: 0.875rem;\n  cursor: help;\n  opacity: 0.7;\n  transition: all 0.15s ease;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-details[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%]   .entity-info-icon[_ngcontent-%COMP%]:hover {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  margin: 0 1.5rem;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%]   .config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%]   .config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%]   .config-checkbox[_ngcontent-%COMP%] {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  accent-color: var(--md-primary);\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%]   .sequence-badge[_ngcontent-%COMP%] {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--md-corner-extra-small);\n  font-size: 0.75rem;\n  font-weight: 600;\n  min-width: 24px;\n  text-align: center;\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 0.25rem;\n}\n\n\n\n\n\n.drag-handle[_ngcontent-%COMP%] {\n  color: var(--md-on-surface-variant);\n  cursor: grab;\n  margin-right: 0.75rem;\n  font-size: 1rem;\n  transition: color 0.2s ease;\n  flex-shrink: 0;\n}\n\n.drag-handle[_ngcontent-%COMP%]:hover {\n  color: var(--md-primary);\n}\n\n.drag-handle[_ngcontent-%COMP%]:active {\n  cursor: grabbing;\n}\n\n.entity-item.cdk-drag-preview[_ngcontent-%COMP%] {\n  box-shadow: var(--md-elevation-4);\n  transform: rotate(1deg);\n  opacity: 0.9;\n  border-color: var(--md-primary);\n  background: var(--md-surface);\n}\n\n.entity-item.cdk-drag-placeholder[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  border-style: dashed;\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-low);\n}\n\n.entity-item.cdk-drag-animating[_ngcontent-%COMP%] {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.entities-list.cdk-drop-list-dragging[_ngcontent-%COMP%]   .entity-item[_ngcontent-%COMP%]:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n\n\n\n\n.no-entities[_ngcontent-%COMP%], \n.all-assigned[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 2rem;\n  color: var(--md-on-surface-variant);\n}\n\n.no-entities[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.all-assigned[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 2rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 1rem;\n  display: block;\n}\n\n.no-entities[_ngcontent-%COMP%]   p[_ngcontent-%COMP%], \n.all-assigned[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0 0 0.25rem 0;\n  font-size: 0.9375rem;\n}\n\n.no-entities[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%], \n.all-assigned[_ngcontent-%COMP%]   .empty-subtext[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n\n\n\n\n.available-entities-header[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n@media (min-width: 640px) {\n  .available-entities-header[_ngcontent-%COMP%] {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n.available-entities-header[_ngcontent-%COMP%]   .subsection-title[_ngcontent-%COMP%] {\n  margin: 0;\n}\n\n\n\n.entity-search[_ngcontent-%COMP%] {\n  position: relative;\n  min-width: 200px;\n  max-width: 100%;\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .entity-search[_ngcontent-%COMP%] {\n    min-width: 280px;\n    max-width: 400px;\n    width: auto;\n  }\n}\n\n@media (min-width: 768px) {\n  .entity-search[_ngcontent-%COMP%] {\n    min-width: 320px;\n    max-width: 450px;\n  }\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-icon[_ngcontent-%COMP%] {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--md-on-surface-variant);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .entity-search[_ngcontent-%COMP%]   .entity-search-icon[_ngcontent-%COMP%] {\n    left: 1.125rem;\n    font-size: 1.125rem;\n  }\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%] {\n  width: 100%;\n  padding: 0.875rem 2.75rem 0.875rem 2.75rem;\n  border: 2px solid var(--md-outline);\n  border-radius: var(--md-corner-full);\n  font-size: 1rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;\n  min-height: 48px;\n  box-shadow: var(--md-elevation-1);\n}\n\n@media (min-width: 768px) {\n  .entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%] {\n    padding: 1rem 3rem 1rem 3rem;\n    min-height: 52px;\n    font-size: 1.0625rem;\n    border-radius: var(--md-corner-full);\n  }\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-low);\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--md-surface);\n}\n\n.entity-search[_ngcontent-%COMP%]:focus-within   .entity-search-icon[_ngcontent-%COMP%] {\n  color: var(--md-primary);\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-clear[_ngcontent-%COMP%] {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 0.375rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  cursor: pointer;\n  border-radius: var(--md-corner-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  min-height: 28px;\n  transition: all 0.15s ease;\n}\n\n@media (min-width: 768px) {\n  .entity-search[_ngcontent-%COMP%]   .entity-search-clear[_ngcontent-%COMP%] {\n    right: 0.875rem;\n    min-width: 32px;\n    min-height: 32px;\n  }\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-clear[_ngcontent-%COMP%]:hover {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n\n\n.no-search-results[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 1.5rem;\n  color: var(--md-on-surface-variant);\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-small);\n}\n\n.no-search-results[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 0.5rem;\n  display: block;\n}\n\n.no-search-results[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n\n\n\n\n.available-entities[_ngcontent-%COMP%]   .entities-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 0.5rem;\n}\n\n.entity-chip[_ngcontent-%COMP%] {\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  background: var(--md-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-chip[_ngcontent-%COMP%]   .chip-content[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.entity-chip[_ngcontent-%COMP%]   .chip-content[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--md-primary);\n  font-size: 0.875rem;\n}\n\n.entity-chip[_ngcontent-%COMP%]   .chip-content[_ngcontent-%COMP%]   .chip-name[_ngcontent-%COMP%] {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.entity-chip[_ngcontent-%COMP%]:hover {\n  border-color: var(--md-primary);\n  background: var(--md-primary-container);\n  transform: translateY(-1px);\n  box-shadow: var(--md-elevation-1);\n}\n\n\n\n\n\n.info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 1rem;\n}\n\n.info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%]   .info-label[_ngcontent-%COMP%] {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: var(--md-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%]   .info-value[_ngcontent-%COMP%] {\n  font-size: 0.9375rem;\n  color: var(--md-on-surface);\n}\n\n\n\n\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--md-corner-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n}\n\n.btn-icon[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-neutral[_ngcontent-%COMP%] {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n}\n\n.btn-icon.btn-neutral[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.btn-icon.btn-danger[_ngcontent-%COMP%] {\n  background: var(--md-error-container);\n  color: var(--md-on-error-container);\n}\n\n.btn-icon.btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #E57373;\n  color: var(--md-on-error);\n}\n\n\n\n.btn-icon.btn-add[_ngcontent-%COMP%] {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-icon.btn-add[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n}\n\n.btn-icon.btn-add[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.95);\n}\n\n\n\n\n\n.icon-wrapper[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-wrapper-sm[_ngcontent-%COMP%] {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--md-corner-small);\n  font-size: 0.875rem;\n}\n\n.icon-wrapper-md[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--md-corner-small);\n  font-size: 1rem;\n}\n\n.icon-wrapper-lg[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-corner-medium);\n  font-size: 1.25rem;\n}\n\n.icon-wrapper-xl[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--md-corner-medium);\n  font-size: 1.5rem;\n}\n\n\n\n.icon-wrapper-primary[_ngcontent-%COMP%] {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\n\n.icon-wrapper-secondary[_ngcontent-%COMP%] {\n  background: var(--md-secondary-container);\n  color: #B5751A;\n}\n\n.icon-wrapper-tertiary[_ngcontent-%COMP%] {\n  background: var(--md-tertiary-container);\n  color: var(--md-tertiary);\n}\n\n.icon-wrapper-error[_ngcontent-%COMP%] {\n  background: var(--md-error-container);\n  color: var(--md-error);\n}\n\n\n\n.icon-wrapper-inverted[_ngcontent-%COMP%] {\n  background: var(--md-on-primary);\n  color: var(--md-primary);\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(--md-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(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-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(--md-surface);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\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.field-input[_ngcontent-%COMP%]:focus-visible, \n.field-select[_ngcontent-%COMP%]:focus-visible, \n.field-textarea[_ngcontent-%COMP%]:focus-visible, \n.mj-btn[_ngcontent-%COMP%]:focus-visible, \n.btn-icon[_ngcontent-%COMP%]:focus-visible, \n.entity-chip[_ngcontent-%COMP%]:focus-visible {\n  outline: 2px solid var(--md-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  .modal-backdrop[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog[_ngcontent-%COMP%] {\n    border-radius: var(--md-corner-extra-large);\n    max-height: 95vh;\n  }\n\n  \n\n  .modal-dialog.fullscreen[_ngcontent-%COMP%] {\n    border-radius: 0;\n    max-height: 100vh;\n  }\n\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 1.25rem 1rem 1rem 1rem;\n  }\n\n  .modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%] {\n    font-size: 1.125rem;\n  }\n\n  .modal-header[_ngcontent-%COMP%]   .modal-close[_ngcontent-%COMP%] {\n    border-radius: var(--md-corner-full);\n  }\n\n  \n\n  .modal-header[_ngcontent-%COMP%]   .modal-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    font-size: 1rem;\n  }\n\n  \n\n  .icon-wrapper-lg[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    font-size: 1rem;\n  }\n\n  .icon-wrapper-xl[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n\n  \n\n  .btn-icon.btn-add[_ngcontent-%COMP%] {\n    border-radius: var(--md-corner-full);\n  }\n\n  .form-section[_ngcontent-%COMP%] {\n    padding: 1.25rem 1rem;\n  }\n\n  .form-row[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n\n  .modal-footer[_ngcontent-%COMP%] {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .modal-footer[_ngcontent-%COMP%]   .mj-btn[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: center;\n    border-radius: var(--md-corner-full);\n  }\n\n  \n\n  .entity-item[_ngcontent-%COMP%] {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.75rem;\n    padding: 0.875rem 1rem;\n    position: relative;\n  }\n\n  \n\n  .drag-handle[_ngcontent-%COMP%] {\n    position: static;\n    margin-right: 0.75rem;\n    margin-bottom: 0.5rem;\n    font-size: 1.25rem;\n    color: var(--md-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 0.5rem;\n    background: var(--md-surface-container-low);\n    border-radius: var(--md-corner-small);\n    cursor: grab;\n  }\n\n  .drag-handle[_ngcontent-%COMP%]:active {\n    cursor: grabbing;\n    background: var(--md-primary-container);\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%] {\n    gap: 0.75rem;\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    font-size: 0.875rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%]   .entity-details[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%] {\n    font-size: 0.875rem;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    line-height: 1.3;\n    flex-wrap: wrap;\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%] {\n    margin: 0;\n    width: 100%;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 0.75rem;\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%]   .config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    font-size: 0.8125rem;\n  }\n\n  .entity-item[_ngcontent-%COMP%]   .entity-actions[_ngcontent-%COMP%] {\n    width: 100%;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n\n  \n\n  .available-entities[_ngcontent-%COMP%]   .entities-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr;\n  }\n\n  .entity-chip[_ngcontent-%COMP%] {\n    padding: 0.625rem 0.875rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .entity-chip[_ngcontent-%COMP%]   .chip-content[_ngcontent-%COMP%]   .chip-name[_ngcontent-%COMP%] {\n    font-size: 0.75rem;\n    word-break: break-word;\n  }\n\n  \n\n  .entity-search[_ngcontent-%COMP%] {\n    max-width: none;\n    width: 100%;\n  }\n\n  .entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%] {\n    padding: 0.75rem 2.5rem 0.75rem 2.5rem;\n    min-height: 44px;\n    font-size: 0.9375rem;\n    border-radius: var(--md-corner-full);\n  }\n\n  .entity-search[_ngcontent-%COMP%]   .entity-search-icon[_ngcontent-%COMP%] {\n    left: 0.875rem;\n    font-size: 0.875rem;\n  }\n\n  .entity-search[_ngcontent-%COMP%]   .entity-search-clear[_ngcontent-%COMP%] {\n    right: 0.625rem;\n    border-radius: var(--md-corner-full);\n  }\n\n  .info-grid[_ngcontent-%COMP%] {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  \n\n  .btn-icon[_ngcontent-%COMP%] {\n    border-radius: var(--md-corner-full);\n  }\n}\n\n\n\n@media (min-width: 640px) {\n  .modal-dialog[_ngcontent-%COMP%] {\n    max-width: 650px;\n  }\n\n  .available-entities[_ngcontent-%COMP%]   .entities-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n  }\n}\n\n\n\n@media (min-width: 768px) {\n  .modal-dialog[_ngcontent-%COMP%] {\n    max-width: 800px;\n  }\n\n  .modal-header[_ngcontent-%COMP%] {\n    padding: 1.5rem 2rem 1.25rem 2rem;\n  }\n\n  .form-section[_ngcontent-%COMP%] {\n    padding: 1.75rem 2rem;\n  }\n\n  .modal-footer[_ngcontent-%COMP%] {\n    padding: 1.25rem 2rem;\n  }\n}\n\n\n\n@media (min-width: 1024px) {\n  .modal-dialog[_ngcontent-%COMP%] {\n    max-width: 900px;\n  }\n\n  .available-entities[_ngcontent-%COMP%]   .entities-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ApplicationDialogComponent, [{
         type: Component,
-        args: [{ selector: 'mj-application-dialog', encapsulation: ViewEncapsulation.None, template: "<kendo-window\n  *ngIf=\"visible\"\n  [width]=\"900\"\n  [height]=\"700\"\n  [resizable]=\"false\"\n  [draggable]=\"true\"\n  [keepContent]=\"true\"\n  (close)=\"onCancel()\"\n  kendoWindowContainer>\n  \n  <kendo-window-titlebar>\n    <div class=\"dialog-header\">\n      <h2 class=\"dialog-title\">\n        <i class=\"fa-solid fa-grid-2\"></i>\n        {{ isEditMode ? 'Edit Application' : 'Create New Application' }}\n      </h2>\n      <p class=\"dialog-subtitle\">\n        {{ isEditMode ? 'Update application information and settings' : 'Add a new application to the system' }}\n      </p>\n    </div>\n  </kendo-window-titlebar>\n\n  <div class=\"dialog-content\">\n    <form [formGroup]=\"applicationForm\" (ngSubmit)=\"onSubmit()\">\n      \n      @if (error) {\n        <div class=\"content-section\">\n          <div class=\"alert alert-error\">\n            <i class=\"fa-solid fa-exclamation-triangle\"></i>\n            <div>{{ error }}</div>\n          </div>\n        </div>\n      }\n\n      <!-- Basic Information Section -->\n      <div class=\"content-section\">\n        <div class=\"form-section\">\n          <div class=\"section-header\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-info-circle\"></i>\n              Application Information\n            </h3>\n            <p class=\"section-description\">Define the application's basic properties</p>\n          </div>\n          \n          <div class=\"form-grid\">\n            <div class=\"form-field\">\n              <label class=\"field-label required\" for=\"name\">Application Name</label>\n              <input \n                id=\"name\"\n                type=\"text\" \n                class=\"field-input\" \n                formControlName=\"name\"\n                placeholder=\"My Application\"\n                [class.error]=\"applicationForm.get('name')?.invalid && applicationForm.get('name')?.touched\"\n              />\n              @if (applicationForm.get('name')?.invalid && applicationForm.get('name')?.touched) {\n                <div class=\"field-error\">\n                  <i class=\"fa-solid fa-exclamation-circle\"></i>\n                  @if (applicationForm.get('name')?.errors?.['required']) {\n                    Application name is required\n                  }\n                  @if (applicationForm.get('name')?.errors?.['maxlength']) {\n                    Application name cannot exceed 100 characters\n                  }\n                </div>\n              }\n            </div>\n\n            <div class=\"form-field\">\n              <label class=\"field-label\" for=\"description\">Description</label>\n              <textarea \n                id=\"description\"\n                class=\"field-textarea\" \n                formControlName=\"description\"\n                placeholder=\"Describe the application's purpose and functionality...\"\n                rows=\"6\"\n              ></textarea>\n              <div class=\"field-hint\">\n                Provide a clear description of what this application does and its main features.\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Entity Management Section -->\n      <div class=\"content-section\">\n        <div class=\"form-section\">\n          <div class=\"section-header\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-database\"></i>\n              Application Entities\n            </h3>\n            <p class=\"section-description\">Manage which entities are included in this application</p>\n          </div>\n          \n          <div class=\"form-grid\">\n            <!-- Assigned Entities -->\n            @if (applicationEntities.length > 0) {\n              <div class=\"assigned-entities\">\n                <h4 class=\"subsection-title\">Assigned Entities ({{ applicationEntities.length }})</h4>\n                <div class=\"entities-list\">\n                  @for (config of applicationEntities; track config.entity.ID; let i = $index) {\n                    <div class=\"entity-item\" [class.is-new]=\"config.isNew\" [class.has-changes]=\"config.hasChanges\">\n                      <div class=\"entity-info\">\n                        <div class=\"entity-icon\">\n                          <i class=\"fa-solid fa-table\"></i>\n                        </div>\n                        <div class=\"entity-details\">\n                          <div class=\"entity-name\">\n                            {{ config.entity.Name }}\n                            @if (config.entity.Description) {\n                              <i class=\"fa-solid fa-info-circle entity-info-icon\" \n                                 [title]=\"config.entity.Description\"\n                                 [attr.data-tooltip]=\"config.entity.Description\"></i>\n                            }\n                          </div>\n                        </div>\n                      </div>\n                      \n                      <div class=\"entity-config\">\n                        <div class=\"config-item\">\n                          <label class=\"config-label\">\n                            <input \n                              type=\"checkbox\" \n                              [(ngModel)]=\"config.defaultForNewUser\"\n                              [ngModelOptions]=\"{standalone: true}\"\n                              (change)=\"onDefaultForNewUserChange(config)\"\n                              class=\"config-checkbox\"\n                            />\n                            <span class=\"checkbox-text\">Default for new users</span>\n                          </label>\n                        </div>\n                        <div class=\"sequence-badge\">{{ config.sequence }}</div>\n                      </div>\n                      \n                      <div class=\"entity-actions\">\n                        <button \n                          type=\"button\" \n                          class=\"btn-icon btn-neutral\"\n                          (click)=\"moveEntityUp(i)\"\n                          [disabled]=\"i === 0\"\n                          title=\"Move up\"\n                        >\n                          <i class=\"fa-solid fa-chevron-up\"></i>\n                        </button>\n                        <button \n                          type=\"button\" \n                          class=\"btn-icon btn-neutral\"\n                          (click)=\"moveEntityDown(i)\"\n                          [disabled]=\"i === applicationEntities.length - 1\"\n                          title=\"Move down\"\n                        >\n                          <i class=\"fa-solid fa-chevron-down\"></i>\n                        </button>\n                        <button \n                          type=\"button\" \n                          class=\"btn-icon btn-danger\"\n                          (click)=\"removeEntity(config)\"\n                          title=\"Remove entity\"\n                        >\n                          <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"no-entities\">\n                <i class=\"fa-solid fa-database\"></i>\n                <p>No entities assigned to this application</p>\n                <p class=\"empty-subtext\">Add entities from the available list below</p>\n              </div>\n            }\n            \n            <!-- Available Entities -->\n            @if (availableEntities.length > 0) {\n              <div class=\"available-entities\">\n                <h4 class=\"subsection-title\">Available Entities ({{ availableEntities.length }})</h4>\n                <div class=\"entities-grid\">\n                  @for (entity of availableEntities; track entity.ID) {\n                    <div class=\"entity-chip\" (click)=\"addEntity(entity)\">\n                      <div class=\"chip-content\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        <span class=\"chip-name\">{{ entity.Name }}</span>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            } @else {\n              <div class=\"all-assigned\">\n                <i class=\"fa-solid fa-check-circle\"></i>\n                <p>All entities have been assigned to this application</p>\n              </div>\n            }\n          </div>\n        </div>\n      </div>\n\n      <!-- Application Info Section -->\n      @if (isEditMode) {\n        <div class=\"content-section\">\n          <div class=\"form-section\">\n            <div class=\"section-header\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                System Information\n              </h3>\n              <p class=\"section-description\">Application metadata and audit information</p>\n            </div>\n            \n            <div class=\"form-grid\">\n              <div class=\"info-grid\">\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Created:</span>\n                  <span class=\"info-value\">{{ data?.application?.__mj_CreatedAt | date:'medium' }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Last Updated:</span>\n                  <span class=\"info-value\">{{ data?.application?.__mj_UpdatedAt | date:'medium' }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Application ID:</span>\n                  <span class=\"info-value\">{{ data?.application?.ID }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Total Entities:</span>\n                  <span class=\"info-value\">{{ applicationEntities.length }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      }\n\n      <div class=\"dialog-footer\">\n        <button type=\"button\" class=\"btn btn-secondary\" (click)=\"onCancel()\">\n          <i class=\"fa-solid fa-times\"></i>\n          Cancel\n        </button>\n        <button \n          type=\"submit\" \n          class=\"btn btn-primary\" \n          [disabled]=\"applicationForm.invalid || isLoading\"\n        >\n          @if (isLoading) {\n            <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            Saving...\n          } @else {\n            <i class=\"fa-solid fa-save\"></i>\n            {{ isEditMode ? 'Update Application' : 'Create Application' }}\n          }\n        </button>\n      </div>\n    </form>\n  </div>\n</kendo-window>", styles: ["/* Modern Dialog Styling - Matching Dashboard Design */\n:host ::ng-deep .k-window {\n  border: none;\n  border-radius: 12px;\n  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);\n  background: #ffffff;\n  overflow: hidden;\n}\n\n:host ::ng-deep .k-window-titlebar {\n  background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);\n  border: none;\n  padding: 24px 32px;\n  min-height: 70px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-title {\n  display: none; /* Hide default title */\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions {\n  position: absolute;\n  top: 24px;\n  right: 24px;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button {\n  background: rgba(255, 255, 255, 0.1);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  color: #ffffff;\n  border-radius: 6px;\n  width: 32px;\n  height: 32px;\n  min-width: auto;\n}\n\n:host ::ng-deep .k-window-titlebar .k-window-actions .k-button:hover {\n  background: rgba(255, 255, 255, 0.2);\n  border-color: rgba(255, 255, 255, 0.3);\n}\n\n:host ::ng-deep .k-window-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n/* Custom Title Bar */\n.dialog-header {\n  position: relative;\n  color: #ffffff;\n}\n\n.dialog-header .dialog-title {\n  font-size: 18px;\n  font-weight: 600;\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  margin: 0;\n}\n\n.dialog-header .dialog-title i {\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.15);\n  border-radius: 6px;\n  font-size: 14px;\n}\n\n.dialog-header .dialog-subtitle {\n  margin: 4px 0 0 0;\n  font-size: 12px;\n  opacity: 0.85;\n  font-weight: 400;\n}\n\n/* Modal Content Areas */\n.dialog-content {\n  padding: 0;\n  background: #ffffff;\n}\n\n.dialog-content .content-section {\n  padding: 32px;\n}\n\n.dialog-content .content-section:not(:last-child) {\n  border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-footer {\n  padding: 24px 32px;\n  background: #fafafa;\n  border-top: 1px solid #e0e0e0;\n  display: flex;\n  justify-content: flex-end;\n  gap: 16px;\n}\n\n/* Form Sections */\n.form-section .section-header {\n  margin-bottom: 24px;\n}\n\n.form-section .section-header .section-title {\n  font-size: 16px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 4px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.form-section .section-header .section-title i {\n  color: #2196f3;\n  font-size: 14px;\n}\n\n.form-section .section-header .section-description {\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.form-grid {\n  display: grid;\n  gap: 24px;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 24px;\n}\n\n@media (max-width: 640px) {\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 16px;\n  }\n}\n\n/* Modern Form Fields */\n.form-field {\n  margin-bottom: 24px;\n}\n\n.form-field:last-child {\n  margin-bottom: 0;\n}\n\n.form-field .field-label {\n  display: block;\n  font-size: 12px;\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 8px;\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: #f44336;\n}\n\n.form-field .field-input,\n.form-field .field-select,\n.form-field .field-textarea {\n  width: 100%;\n  padding: 0 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 6px;\n  font-size: 14px;\n  background: #ffffff;\n  transition: all 0.15s ease;\n}\n\n.form-field .field-input:focus,\n.form-field .field-select:focus,\n.form-field .field-textarea:focus {\n  outline: none;\n  border-color: #2196f3;\n  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\n\n.form-field .field-input.error,\n.form-field .field-select.error,\n.form-field .field-textarea.error {\n  border-color: #f44336;\n}\n\n.form-field .field-input.error:focus,\n.form-field .field-select.error:focus,\n.form-field .field-textarea.error:focus {\n  border-color: #f44336;\n  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.1);\n}\n\n.form-field .field-input::placeholder,\n.form-field .field-select::placeholder,\n.form-field .field-textarea::placeholder {\n  color: #9e9e9e;\n}\n\n.form-field .field-input,\n.form-field .field-select {\n  height: 36px;\n}\n\n.form-field .field-textarea {\n  min-height: 100px;\n  padding: 16px;\n  resize: vertical;\n  line-height: 1.4;\n}\n\n.form-field .field-select {\n  background-image: url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23666' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e\");\n  background-position: right 16px center;\n  background-repeat: no-repeat;\n  background-size: 16px;\n  padding-right: calc(16px + 24px);\n  appearance: none;\n  cursor: pointer;\n}\n\n.form-field .field-error {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #f44336;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.form-field .field-error i {\n  font-size: 10px;\n}\n\n.form-field .field-hint {\n  margin-top: 8px;\n  font-size: 11px;\n  color: #666666;\n  line-height: 1.4;\n}\n\n/* Alert Messages */\n.alert {\n  padding: 16px 24px;\n  border-radius: 8px;\n  margin-bottom: 24px;\n  display: flex;\n  align-items: flex-start;\n  gap: 16px;\n}\n\n.alert i {\n  font-size: 16px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.alert.alert-error {\n  background: rgba(244, 67, 54, 0.1);\n  border: 1px solid rgba(244, 67, 54, 0.2);\n  color: #c62828;\n}\n\n.alert.alert-error i {\n  color: #f44336;\n}\n\n.alert.alert-warning {\n  background: rgba(255, 193, 7, 0.1);\n  border: 1px solid rgba(255, 193, 7, 0.2);\n  color: #b7800d;\n}\n\n.alert.alert-warning i {\n  color: #ffc107;\n}\n\n.alert.alert-info {\n  background: rgba(0, 188, 212, 0.1);\n  border: 1px solid rgba(0, 188, 212, 0.2);\n  color: #00838f;\n}\n\n.alert.alert-info i {\n  color: #00bcd4;\n}\n\n/* Button Styles */\n.dialog-footer .btn {\n  padding: 8px 24px;\n  border-radius: 6px;\n  font-size: 14px;\n  font-weight: 500;\n  border: 1px solid transparent;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  min-height: 36px;\n}\n\n.dialog-footer .btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.dialog-footer .btn:disabled i.fa-spinner {\n  animation: spin 1s linear infinite;\n}\n\n.dialog-footer .btn.btn-secondary {\n  background: #ffffff;\n  color: #666666;\n  border-color: #bdbdbd;\n}\n\n.dialog-footer .btn.btn-secondary:hover:not(:disabled) {\n  background: #f8f9fa;\n  border-color: #757575;\n  color: #212121;\n}\n\n.dialog-footer .btn.btn-primary {\n  background: #2196f3;\n  color: #ffffff;\n}\n\n.dialog-footer .btn.btn-primary:hover:not(:disabled) {\n  background: #1976d2;\n  box-shadow: 0 2px 8px rgba(33, 150, 243, 0.2);\n  transform: translateY(-1px);\n}\n\n@keyframes spin {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}\n\n/* Entity Management Styles */\n.subsection-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: #212121;\n  margin: 0 0 16px 0;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.assigned-entities {\n  margin-bottom: 32px;\n}\n\n.assigned-entities .entities-list {\n  border: 1px solid #e0e0e0;\n  border-radius: 8px;\n  overflow: hidden;\n  background: #ffffff;\n}\n\n.entity-item {\n  display: flex;\n  align-items: center;\n  padding: 16px 24px;\n  border-bottom: 1px solid #fafafa;\n  transition: all 0.15s ease;\n}\n\n.entity-item:last-child {\n  border-bottom: none;\n}\n\n.entity-item:hover {\n  background: rgba(33, 150, 243, 0.02);\n}\n\n.entity-item.is-new {\n  background: rgba(76, 175, 80, 0.05);\n  border-left: 3px solid #4caf50;\n}\n\n.entity-item.has-changes {\n  background: rgba(0, 188, 212, 0.05);\n  border-left: 3px solid #00bcd4;\n}\n\n.entity-item .entity-info {\n  display: flex;\n  align-items: center;\n  gap: 16px;\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-icon {\n  width: 40px;\n  height: 40px;\n  background: rgba(33, 150, 243, 0.1);\n  border-radius: 6px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #2196f3;\n  flex-shrink: 0;\n}\n\n.entity-item .entity-info .entity-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-details .entity-name {\n  font-weight: 500;\n  color: #212121;\n  margin-bottom: 2px;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon {\n  color: #00bcd4;\n  font-size: 14px;\n  cursor: help;\n  opacity: 0.7;\n  transition: all 0.15s ease;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon:hover {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.entity-item .entity-info .entity-details .entity-description {\n  font-size: 12px;\n  color: #666666;\n  line-height: 1.4;\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n}\n\n.entity-item .entity-config {\n  display: flex;\n  align-items: center;\n  gap: 24px;\n  margin: 0 24px;\n}\n\n.entity-item .entity-config .config-item .config-label {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  font-size: 12px;\n  color: #666666;\n  margin: 0;\n}\n\n.entity-item .entity-config .config-item .config-label .config-checkbox {\n  width: 16px;\n  height: 16px;\n  cursor: pointer;\n}\n\n.entity-item .entity-config .sequence-badge {\n  background: #2196f3;\n  color: #ffffff;\n  padding: 4px 8px;\n  border-radius: 4px;\n  font-size: 11px;\n  font-weight: 500;\n  min-width: 24px;\n  text-align: center;\n}\n\n.entity-item .entity-actions {\n  display: flex;\n  gap: 4px;\n}\n\n.no-entities,\n.all-assigned {\n  text-align: center;\n  padding: 32px;\n  color: #666666;\n}\n\n.no-entities i,\n.all-assigned i {\n  font-size: 2rem;\n  color: #bdbdbd;\n  margin-bottom: 16px;\n}\n\n.no-entities p,\n.all-assigned p {\n  margin: 0 0 4px 0;\n  font-weight: 500;\n}\n\n.no-entities .empty-subtext,\n.all-assigned .empty-subtext {\n  font-size: 12px;\n  color: #9e9e9e;\n  margin: 0;\n}\n\n.available-entities .entities-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 8px;\n}\n\n@media (max-width: 640px) {\n  .available-entities .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\n  }\n}\n\n.entity-chip {\n  padding: 16px;\n  border: 1px solid #bdbdbd;\n  border-radius: 8px;\n  background: #ffffff;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n\n.entity-chip .chip-content {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.entity-chip .chip-content i {\n  color: #2196f3;\n  font-size: 14px;\n}\n\n.entity-chip .chip-content .chip-name {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n.entity-chip:hover {\n  border-color: #2196f3;\n  background: rgba(33, 150, 243, 0.05);\n  transform: translateY(-1px);\n  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);\n}\n\n/* Info Grid for System Information */\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n  gap: 16px;\n}\n\n@media (max-width: 640px) {\n  .info-grid {\n    grid-template-columns: 1fr;\n  }\n}\n\n.info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.info-grid .info-item .info-label {\n  font-size: 11px;\n  color: #666666;\n  font-weight: 500;\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.info-grid .info-item .info-value {\n  font-size: 12px;\n  color: #212121;\n  font-weight: 500;\n}\n\n/* Enhanced Button Icons */\n.btn-icon {\n  width: 32px;\n  height: 32px;\n  border: none;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 14px;\n}\n\n.btn-icon:disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-neutral {\n  background: rgba(189, 189, 189, 0.1);\n  color: #666666;\n}\n\n.btn-icon.btn-neutral:hover:not(:disabled) {\n  background: rgba(189, 189, 189, 0.2);\n  color: #212121;\n  transform: scale(1.05);\n}\n\n.btn-icon.btn-danger {\n  background: rgba(244, 67, 54, 0.1);\n  color: #f44336;\n}\n\n.btn-icon.btn-danger:hover:not(:disabled) {\n  background: rgba(244, 67, 54, 0.2);\n  transform: scale(1.05);\n}\n\n/* Responsive Design */\n@media (max-width: 768px) {\n  :host ::ng-deep .k-window {\n    margin: 16px;\n    max-width: none;\n    width: calc(100vw - 24px) !important;\n    height: calc(100vh - 24px) !important;\n  }\n  \n  :host ::ng-deep .k-window-titlebar {\n    padding: 16px 24px;\n    min-height: 60px;\n  }\n  \n  .dialog-content .content-section {\n    padding: 24px 16px;\n  }\n  \n  .dialog-footer {\n    padding: 16px 24px;\n    flex-direction: column-reverse;\n  }\n  \n  .dialog-footer .btn {\n    width: 100%;\n    justify-content: center;\n  }\n}"] }]
+        args: [{ selector: 'mj-application-dialog', template: "@if (visible) {\n  <div class=\"modal-backdrop\" (click)=\"onCancel()\" role=\"presentation\">\n    <div\n      class=\"modal-dialog\"\n      [class.fullscreen]=\"isFullscreen\"\n      (click)=\"$event.stopPropagation()\"\n      role=\"dialog\"\n      aria-modal=\"true\"\n      aria-labelledby=\"application-dialog-title\"\n      aria-describedby=\"application-dialog-description\"\n    >\n      <!-- Modal Header -->\n      <div class=\"modal-header\" [class.create-mode]=\"!isEditMode\" [class.edit-mode]=\"isEditMode\">\n        <div class=\"modal-header-content\">\n          <h2 class=\"modal-title\" id=\"application-dialog-title\">\n            <i class=\"fa-solid\" [class.fa-plus]=\"!isEditMode\" [class.fa-layer-group]=\"isEditMode\" aria-hidden=\"true\"></i>\n            {{ isEditMode ? 'Edit Application' : 'Create New Application' }}\n          </h2>\n          <p class=\"modal-subtitle\" id=\"application-dialog-description\">\n            {{ isEditMode ? 'Update application information and settings' : 'Add a new application to the system' }}\n          </p>\n        </div>\n        <div class=\"modal-header-actions\">\n          <button\n            class=\"modal-action-btn\"\n            (click)=\"toggleFullscreen()\"\n            [attr.aria-label]=\"isFullscreen ? 'Exit fullscreen' : 'Enter fullscreen'\"\n            type=\"button\"\n          >\n            <i class=\"fa-solid\" [class.fa-compress]=\"isFullscreen\" [class.fa-expand]=\"!isFullscreen\" aria-hidden=\"true\"></i>\n          </button>\n          <button\n            class=\"modal-close\"\n            (click)=\"onCancel()\"\n            aria-label=\"Close dialog\"\n            type=\"button\"\n          >\n            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n          </button>\n        </div>\n      </div>\n\n      <!-- Modal Body -->\n      <div class=\"modal-body\">\n        <form [formGroup]=\"applicationForm\" (ngSubmit)=\"onSubmit()\">\n          <!-- Error Alert -->\n          @if (error) {\n            <div class=\"form-section\">\n              <div class=\"alert alert-error\" role=\"alert\">\n                <i class=\"fa-solid fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n                <div>{{ error }}</div>\n              </div>\n            </div>\n          }\n\n          <!-- Basic Information Section -->\n          <fieldset class=\"form-section collapsible-section\">\n            <legend class=\"section-header clickable\" (click)=\"toggleSection('basicInfo')\">\n              <div class=\"section-title-row\">\n                <span class=\"section-title\">\n                  <i class=\"fa-solid fa-info-circle\" aria-hidden=\"true\"></i>\n                  Application Information\n                </span>\n                <i class=\"fa-solid chevron-icon\"\n                   [class.fa-chevron-up]=\"sectionExpanded.basicInfo\"\n                   [class.fa-chevron-down]=\"!sectionExpanded.basicInfo\"\n                   aria-hidden=\"true\"></i>\n              </div>\n              <span class=\"section-description\">Define the application's basic properties</span>\n            </legend>\n\n            @if (sectionExpanded.basicInfo) {\n              <div class=\"section-content\">\n                <div class=\"form-grid\">\n              <div class=\"form-field\">\n                <label class=\"field-label required\" for=\"app-name\">Application Name</label>\n                <input\n                  id=\"app-name\"\n                  type=\"text\"\n                  class=\"field-input\"\n                  formControlName=\"name\"\n                  placeholder=\"My Application\"\n                  [class.error]=\"applicationForm.get('name')?.invalid && applicationForm.get('name')?.touched\"\n                  [attr.aria-invalid]=\"applicationForm.get('name')?.invalid && applicationForm.get('name')?.touched\"\n                  aria-describedby=\"app-name-error\"\n                />\n                @if (applicationForm.get('name')?.invalid && applicationForm.get('name')?.touched) {\n                  <div class=\"field-error\" id=\"app-name-error\" role=\"alert\">\n                    <i class=\"fa-solid fa-exclamation-circle\" aria-hidden=\"true\"></i>\n                    @if (applicationForm.get('name')?.errors?.['required']) {\n                      Application name is required\n                    }\n                    @if (applicationForm.get('name')?.errors?.['maxlength']) {\n                      Application name cannot exceed 100 characters\n                    }\n                  </div>\n                }\n              </div>\n\n              <div class=\"form-field\">\n                <label class=\"field-label\" for=\"app-description\">Description</label>\n                <textarea\n                  id=\"app-description\"\n                  class=\"field-textarea\"\n                  formControlName=\"description\"\n                  placeholder=\"Describe the application's purpose and functionality...\"\n                  rows=\"4\"\n                ></textarea>\n                <div class=\"field-hint\">\n                  Provide a clear description of what this application does and its main features.\n                </div>\n              </div>\n            </div>\n              </div>\n            }\n          </fieldset>\n\n          <!-- Entity Management Section -->\n          <fieldset class=\"form-section collapsible-section\">\n            <legend class=\"section-header clickable\" (click)=\"toggleSection('entities')\">\n              <div class=\"section-title-row\">\n                <span class=\"section-title\">\n                  <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                  Application Entities\n                </span>\n                <i class=\"fa-solid chevron-icon\"\n                   [class.fa-chevron-up]=\"sectionExpanded.entities\"\n                   [class.fa-chevron-down]=\"!sectionExpanded.entities\"\n                   aria-hidden=\"true\"></i>\n              </div>\n              <span class=\"section-description\">Manage which entities are included in this application</span>\n            </legend>\n\n            @if (sectionExpanded.entities) {\n              <div class=\"section-content\">\n                <div class=\"form-grid\">\n              <!-- Assigned Entities -->\n              @if (applicationEntities.length > 0) {\n                <div class=\"assigned-entities\">\n                  <h4 class=\"subsection-title\">Assigned Entities ({{ applicationEntities.length }})</h4>\n                  <div class=\"entities-list\"\n                       role=\"list\"\n                       cdkDropList\n                       (cdkDropListDropped)=\"onEntityDrop($event)\">\n                    @for (config of applicationEntities; track config.entity.ID; let i = $index) {\n                      <div\n                        class=\"entity-item\"\n                        [class.is-new]=\"config.isNew\"\n                        [class.has-changes]=\"config.hasChanges\"\n                        role=\"listitem\"\n                        cdkDrag\n                      >\n                        <i class=\"fa-solid fa-grip-vertical drag-handle\" aria-hidden=\"true\"></i>\n                        <div class=\"entity-info\">\n                          <div class=\"entity-icon\">\n                            <i class=\"fa-solid fa-table\" aria-hidden=\"true\"></i>\n                          </div>\n                          <div class=\"entity-details\">\n                            <div class=\"entity-name\">\n                              {{ config.entity.Name }}\n                              @if (config.entity.Description) {\n                                <i\n                                  class=\"fa-solid fa-info-circle entity-info-icon\"\n                                  [title]=\"config.entity.Description\"\n                                  [attr.aria-label]=\"'Entity description: ' + config.entity.Description\"\n                                ></i>\n                              }\n                            </div>\n                          </div>\n                        </div>\n\n                        <div class=\"entity-config\">\n                          <div class=\"config-item\">\n                            <label class=\"config-label\">\n                              <input\n                                type=\"checkbox\"\n                                [(ngModel)]=\"config.defaultForNewUser\"\n                                [ngModelOptions]=\"{standalone: true}\"\n                                (change)=\"onDefaultForNewUserChange(config)\"\n                                class=\"config-checkbox\"\n                              />\n                              <span class=\"checkbox-text\">Default for new users</span>\n                            </label>\n                          </div>\n                          <div class=\"sequence-badge\" [attr.aria-label]=\"'Sequence ' + config.sequence\">{{ config.sequence }}</div>\n                        </div>\n\n                        <div class=\"entity-actions\">\n                          <button\n                            type=\"button\"\n                            class=\"btn-icon btn-danger\"\n                            (click)=\"removeEntity(config)\"\n                            title=\"Remove entity\"\n                            [attr.aria-label]=\"'Remove ' + config.entity.Name\"\n                          >\n                            <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n                          </button>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                </div>\n              } @else {\n                <div class=\"no-entities\">\n                  <i class=\"fa-solid fa-database\" aria-hidden=\"true\"></i>\n                  <p>No entities assigned to this application</p>\n                  <p class=\"empty-subtext\">Add entities from the available list below</p>\n                </div>\n              }\n\n              <!-- Available Entities -->\n              @if (availableEntities.length > 0) {\n                <div class=\"available-entities\">\n                  <div class=\"available-entities-header\">\n                    <h4 class=\"subsection-title\">Available Entities ({{ filteredAvailableEntities.length }} of {{ availableEntities.length }})</h4>\n                    <div class=\"entity-search\">\n                      <i class=\"fa-solid fa-search entity-search-icon\" aria-hidden=\"true\"></i>\n                      <input\n                        type=\"text\"\n                        class=\"entity-search-input\"\n                        placeholder=\"Search entities...\"\n                        [value]=\"entitySearchTerm\"\n                        (input)=\"onEntitySearchChange($event)\"\n                        aria-label=\"Search available entities\"\n                      />\n                      @if (entitySearchTerm) {\n                        <button\n                          type=\"button\"\n                          class=\"entity-search-clear\"\n                          (click)=\"clearEntitySearch()\"\n                          aria-label=\"Clear search\"\n                        >\n                          <i class=\"fa-solid fa-times\" aria-hidden=\"true\"></i>\n                        </button>\n                      }\n                    </div>\n                  </div>\n                  @if (filteredAvailableEntities.length > 0) {\n                    <div class=\"entities-grid\" role=\"list\">\n                      @for (entity of filteredAvailableEntities; track entity.ID) {\n                        <button\n                          type=\"button\"\n                          class=\"entity-chip\"\n                          (click)=\"addEntity(entity)\"\n                          role=\"listitem\"\n                          [attr.aria-label]=\"'Add ' + entity.Name\"\n                        >\n                          <div class=\"chip-content\">\n                            <i class=\"fa-solid fa-plus\" aria-hidden=\"true\"></i>\n                            <span class=\"chip-name\">{{ entity.Name }}</span>\n                          </div>\n                        </button>\n                      }\n                    </div>\n                  } @else {\n                    <div class=\"no-search-results\">\n                      <i class=\"fa-solid fa-search\" aria-hidden=\"true\"></i>\n                      <p>No entities match \"{{ entitySearchTerm }}\"</p>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <div class=\"all-assigned\">\n                  <i class=\"fa-solid fa-check-circle\" aria-hidden=\"true\"></i>\n                  <p>All entities have been assigned to this application</p>\n                </div>\n              }\n                </div>\n              </div>\n            }\n          </fieldset>\n\n          <!-- System Information Section (Edit Mode Only) -->\n          @if (isEditMode) {\n            <fieldset class=\"form-section collapsible-section\">\n              <legend class=\"section-header clickable\" (click)=\"toggleSection('systemInfo')\">\n                <div class=\"section-title-row\">\n                  <span class=\"section-title\">\n                    <i class=\"fa-solid fa-info-circle\" aria-hidden=\"true\"></i>\n                    System Information\n                  </span>\n                  <i class=\"fa-solid chevron-icon\"\n                     [class.fa-chevron-up]=\"sectionExpanded.systemInfo\"\n                     [class.fa-chevron-down]=\"!sectionExpanded.systemInfo\"\n                     aria-hidden=\"true\"></i>\n                </div>\n                <span class=\"section-description\">Application metadata and audit information</span>\n              </legend>\n\n              @if (sectionExpanded.systemInfo) {\n                <div class=\"section-content\">\n                  <div class=\"form-grid\">\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Created</span>\n                    <span class=\"info-value\">{{ data?.application?.__mj_CreatedAt | date:'medium' }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Last Updated</span>\n                    <span class=\"info-value\">{{ data?.application?.__mj_UpdatedAt | date:'medium' }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Application ID</span>\n                    <span class=\"info-value\">{{ data?.application?.ID }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Total Entities</span>\n                    <span class=\"info-value\">{{ applicationEntities.length }}</span>\n                  </div>\n                </div>\n                  </div>\n                </div>\n              }\n            </fieldset>\n          }\n        </form>\n      </div>\n\n      <!-- Modal Footer - Primary and Cancel buttons on RIGHT -->\n      <div class=\"modal-footer\">\n        <button\n          type=\"submit\"\n          class=\"mj-btn mj-btn-primary\"\n          [disabled]=\"applicationForm.invalid || isLoading\"\n          (click)=\"onSubmit()\"\n          [attr.aria-busy]=\"isLoading\"\n        >\n          @if (isLoading) {\n            <i class=\"fa-solid fa-spinner fa-spin\" aria-hidden=\"true\"></i>\n            Saving...\n          } @else {\n            <i class=\"fa-solid fa-save\" aria-hidden=\"true\"></i>\n            {{ isEditMode ? 'Update Application' : 'Create Application' }}\n          }\n        </button>\n        <button type=\"button\" class=\"mj-btn mj-btn-secondary\" (click)=\"onCancel()\">\n          Cancel\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* =============================================================================\n   Application Dialog Component - MD3 Design System\n   Following Material Design 3 color palette and design tokens\n   ============================================================================= */\n\n/* -----------------------------------------------------------------------------\n   CSS Custom Properties (Design Tokens)\n   ----------------------------------------------------------------------------- */\n:host {\n  /* Primary - Deep Blue */\n  --md-primary: #0076B6;\n  --md-on-primary: #FFFFFF;\n  --md-primary-container: #AAE7FD;\n  --md-on-primary-container: #001F2A;\n\n  /* Secondary - Light Orange */\n  --md-secondary: #F5A623;\n  --md-on-secondary: #FFFFFF;\n  --md-secondary-container: #FFECD6;\n  --md-on-secondary-container: #2D1600;\n\n  /* Tertiary - Light Green */\n  --md-tertiary: #4CAF50;\n  --md-on-tertiary: #FFFFFF;\n  --md-tertiary-container: #C8E6C9;\n  --md-on-tertiary-container: #002204;\n\n  /* Error - Red */\n  --md-error: #D32F2F;\n  --md-on-error: #FFFFFF;\n  --md-error-container: #FFCDD2;\n  --md-on-error-container: #410002;\n\n  /* Surface Colors */\n  --md-surface: #FAFCFF;\n  --md-surface-container-lowest: #FFFFFF;\n  --md-surface-container-low: #F3F5F9;\n  --md-surface-container: #EDF0F4;\n  --md-surface-container-high: #E7EAEE;\n  --md-surface-container-highest: #E1E3E8;\n  --md-on-surface: #191C20;\n  --md-on-surface-variant: #43474E;\n  --md-outline: #74777F;\n  --md-outline-variant: #C4C6D0;\n\n  /* Elevation */\n  --md-elevation-1: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);\n  --md-elevation-2: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08);\n  --md-elevation-3: 0 4px 8px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);\n  --md-elevation-4: 0 6px 12px rgba(0, 0, 0, 0.1), 0 12px 24px rgba(0, 0, 0, 0.08);\n  --md-elevation-5: 0 8px 16px rgba(0, 0, 0, 0.12), 0 16px 32px rgba(0, 0, 0, 0.1);\n\n  /* Corner Radii */\n  --md-corner-extra-small: 4px;\n  --md-corner-small: 8px;\n  --md-corner-medium: 12px;\n  --md-corner-large: 16px;\n  --md-corner-extra-large: 28px;\n  --md-corner-full: 9999px;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Backdrop & Container\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(--md-surface);\n  border-radius: var(--md-corner-extra-large);\n  box-shadow: var(--md-elevation-5);\n  max-width: 900px;\n  width: 100%;\n  max-height: 90vh;\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  animation: slideUp 0.3s cubic-bezier(0, 0, 0.2, 1);\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* Fullscreen mode */\n.modal-dialog.fullscreen {\n  max-width: 100vw;\n  width: 100vw;\n  max-height: 100vh;\n  height: 100vh;\n  border-radius: 0;\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Header\n   ----------------------------------------------------------------------------- */\n.modal-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  padding: 1.5rem 1.5rem 1rem 1.5rem;\n  background: #0076B6;\n  color: var(--md-on-primary);\n  flex-shrink: 0;\n}\n\n.modal-header-content {\n  flex: 1;\n  min-width: 0;\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(--md-on-primary);\n  margin: 0;\n}\n\n.modal-header .modal-title i {\n  width: 40px;\n  height: 40px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0.2);\n  border-radius: var(--md-corner-medium);\n  font-size: 1.125rem;\n  flex-shrink: 0;\n}\n\n/* Create mode - Plus icon with inverted styling */\n.modal-header.create-mode .modal-title i {\n  background: var(--md-on-primary);\n  color: #0076B6;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n/* Edit mode - Grid icon with semi-transparent background */\n.modal-header.edit-mode .modal-title i {\n  background: rgba(255, 255, 255, 0.2);\n  color: var(--md-on-primary);\n}\n\n/* Modal Header Actions */\n.modal-header-actions {\n  display: flex;\n  gap: 0.5rem;\n  align-items: center;\n  flex-shrink: 0;\n  margin-left: 0.5rem;\n}\n\n.modal-action-btn {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-primary);\n  font-size: 1.125rem;\n  cursor: pointer;\n  border-radius: var(--md-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  flex-shrink: 0;\n}\n\n.modal-action-btn:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.modal-action-btn:focus-visible {\n  outline: 2px solid var(--md-on-primary);\n  outline-offset: 2px;\n}\n\n.modal-header .modal-subtitle {\n  margin: 0.375rem 0 0 0;\n  font-size: 0.8125rem;\n  color: var(--md-on-primary);\n  opacity: 0.85;\n}\n\n.modal-header .modal-close {\n  padding: 0.625rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-primary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--md-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  flex-shrink: 0;\n  margin-left: 0.5rem;\n}\n\n.modal-header .modal-close:hover {\n  background: rgba(255, 255, 255, 0.15);\n}\n\n.modal-header .modal-close:focus-visible {\n  outline: 2px solid var(--md-on-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Body\n   ----------------------------------------------------------------------------- */\n.modal-body {\n  flex: 1;\n  overflow-y: auto;\n  -webkit-overflow-scrolling: touch;\n  padding: 0;\n  background: var(--md-surface);\n}\n\n/* -----------------------------------------------------------------------------\n   Modal Footer - Primary and Cancel buttons on RIGHT\n   ----------------------------------------------------------------------------- */\n.modal-footer {\n  display: flex;\n  justify-content: flex-end;\n  gap: 0.75rem;\n  padding: 1.25rem 1.5rem;\n  border-top: 1px solid var(--md-outline-variant);\n  background: var(--md-surface-container-low);\n  flex-shrink: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Form Sections (Fieldset)\n   ----------------------------------------------------------------------------- */\n.form-section {\n  border: none;\n  margin: 0;\n  padding: 1.5rem;\n  border-bottom: 1px solid var(--md-outline-variant);\n}\n\n.form-section:last-of-type {\n  border-bottom: none;\n}\n\n.section-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-bottom: 1.25rem;\n  padding: 0;\n  font-weight: normal;\n}\n\n.section-header .section-title {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  font-size: 1.0625rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n}\n\n.section-header .section-title i {\n  color: var(--md-primary);\n  font-size: 0.875rem;\n}\n\n.section-header .section-description {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n}\n\n/* -----------------------------------------------------------------------------\n   Collapsible Sections\n   ----------------------------------------------------------------------------- */\n.collapsible-section .section-header.clickable {\n  cursor: pointer;\n  user-select: none;\n  transition: background-color 0.2s ease;\n  padding: 0.75rem 0;\n  margin: -0.75rem 0 0.75rem 0;\n}\n\n.collapsible-section .section-header.clickable:hover {\n  opacity: 0.8;\n}\n\n.section-title-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  width: 100%;\n  margin-bottom: 0.25rem;\n}\n\n.chevron-icon {\n  color: var(--md-on-surface-variant);\n  font-size: 0.875rem;\n  transition: transform 0.2s ease;\n  flex-shrink: 0;\n}\n\n.section-content {\n  animation: expandSection 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n@keyframes expandSection {\n  from {\n    opacity: 0;\n    transform: translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* -----------------------------------------------------------------------------\n   Form Grid Layout\n   ----------------------------------------------------------------------------- */\n.form-grid {\n  display: grid;\n  gap: 1.25rem;\n}\n\n.form-row {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 1.25rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Form Fields\n   ----------------------------------------------------------------------------- */\n.form-field {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.form-field .field-label {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: var(--md-error);\n}\n\n.form-field .field-input,\n.form-field .field-select,\n.form-field .field-textarea {\n  width: 100%;\n  min-height: 44px;\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--md-outline);\n  border-radius: var(--md-corner-small);\n  font-size: 0.9375rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n}\n\n.form-field .field-input:focus,\n.form-field .field-select:focus,\n.form-field .field-textarea:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: 0 0 0 3px rgba(0, 118, 182, 0.12);\n}\n\n.form-field .field-input.error,\n.form-field .field-select.error,\n.form-field .field-textarea.error {\n  border-color: var(--md-error);\n}\n\n.form-field .field-input.error:focus,\n.form-field .field-select.error:focus,\n.form-field .field-textarea.error:focus {\n  border-color: var(--md-error);\n  box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.12);\n}\n\n.form-field .field-input::placeholder,\n.form-field .field-textarea::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n.form-field .field-textarea {\n  min-height: 100px;\n  resize: vertical;\n  line-height: 1.5;\n}\n\n.form-field .field-error {\n  margin-top: 0.25rem;\n  font-size: 0.8125rem;\n  color: var(--md-error);\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.form-field .field-error i {\n  font-size: 0.625rem;\n}\n\n.form-field .field-hint {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  line-height: 1.4;\n}\n\n/* -----------------------------------------------------------------------------\n   Alert Messages\n   ----------------------------------------------------------------------------- */\n.alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--md-corner-small);\n  margin-bottom: 1rem;\n  display: flex;\n  align-items: flex-start;\n  gap: 0.75rem;\n}\n\n.alert i {\n  font-size: 1rem;\n  flex-shrink: 0;\n  margin-top: 0.125rem;\n}\n\n.alert.alert-error {\n  background: var(--md-error-container);\n  border: 1px solid rgba(211, 47, 47, 0.2);\n  color: var(--md-on-error-container);\n}\n\n.alert.alert-error i {\n  color: var(--md-error);\n}\n\n/* -----------------------------------------------------------------------------\n   Entity Management Styles\n   ----------------------------------------------------------------------------- */\n.subsection-title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin: 0 0 1rem 0;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.assigned-entities {\n  margin-bottom: 1.5rem;\n}\n\n.assigned-entities .entities-list {\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  overflow: hidden;\n  background: var(--md-surface);\n}\n\n.entity-item {\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.25rem;\n  border-bottom: 1px solid var(--md-surface-container);\n  transition: all 0.15s ease;\n}\n\n.entity-item:last-child {\n  border-bottom: none;\n}\n\n.entity-item:hover {\n  background: var(--md-surface-container-low);\n}\n\n.entity-item.is-new {\n  background: rgba(76, 175, 80, 0.08);\n  border-left: 3px solid var(--md-tertiary);\n}\n\n.entity-item.has-changes {\n  background: rgba(245, 166, 35, 0.08);\n  border-left: 3px solid var(--md-secondary);\n}\n\n.entity-item .entity-info {\n  display: flex;\n  align-items: center;\n  gap: 1rem;\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-icon {\n  width: 40px;\n  height: 40px;\n  background: var(--md-primary-container);\n  border-radius: var(--md-corner-small);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--md-primary);\n  flex-shrink: 0;\n}\n\n.entity-item .entity-info .entity-details {\n  flex: 1;\n  min-width: 0;\n}\n\n.entity-item .entity-info .entity-details .entity-name {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--md-on-surface);\n  margin-bottom: 0.125rem;\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon {\n  color: var(--md-secondary);\n  font-size: 0.875rem;\n  cursor: help;\n  opacity: 0.7;\n  transition: all 0.15s ease;\n}\n\n.entity-item .entity-info .entity-details .entity-name .entity-info-icon:hover {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.entity-item .entity-config {\n  display: flex;\n  align-items: center;\n  gap: 1.5rem;\n  margin: 0 1.5rem;\n}\n\n.entity-item .entity-config .config-item .config-label {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n  cursor: pointer;\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n.entity-item .entity-config .config-item .config-label .config-checkbox {\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n  accent-color: var(--md-primary);\n}\n\n.entity-item .entity-config .sequence-badge {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--md-corner-extra-small);\n  font-size: 0.75rem;\n  font-weight: 600;\n  min-width: 24px;\n  text-align: center;\n}\n\n.entity-item .entity-actions {\n  display: flex;\n  gap: 0.25rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Drag and Drop Styles\n   ----------------------------------------------------------------------------- */\n.drag-handle {\n  color: var(--md-on-surface-variant);\n  cursor: grab;\n  margin-right: 0.75rem;\n  font-size: 1rem;\n  transition: color 0.2s ease;\n  flex-shrink: 0;\n}\n\n.drag-handle:hover {\n  color: var(--md-primary);\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n}\n\n.entity-item.cdk-drag-preview {\n  box-shadow: var(--md-elevation-4);\n  transform: rotate(1deg);\n  opacity: 0.9;\n  border-color: var(--md-primary);\n  background: var(--md-surface);\n}\n\n.entity-item.cdk-drag-placeholder {\n  opacity: 0.4;\n  border-style: dashed;\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-low);\n}\n\n.entity-item.cdk-drag-animating {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n.entities-list.cdk-drop-list-dragging .entity-item:not(.cdk-drag-placeholder) {\n  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);\n}\n\n/* -----------------------------------------------------------------------------\n   Empty States\n   ----------------------------------------------------------------------------- */\n.no-entities,\n.all-assigned {\n  text-align: center;\n  padding: 2rem;\n  color: var(--md-on-surface-variant);\n}\n\n.no-entities i,\n.all-assigned i {\n  font-size: 2rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 1rem;\n  display: block;\n}\n\n.no-entities p,\n.all-assigned p {\n  margin: 0 0 0.25rem 0;\n  font-size: 0.9375rem;\n}\n\n.no-entities .empty-subtext,\n.all-assigned .empty-subtext {\n  font-size: 0.8125rem;\n  color: var(--md-on-surface-variant);\n  margin: 0;\n}\n\n/* -----------------------------------------------------------------------------\n   Available Entities Section\n   ----------------------------------------------------------------------------- */\n.available-entities-header {\n  display: flex;\n  flex-direction: column;\n  gap: 0.75rem;\n  margin-bottom: 1rem;\n}\n\n@media (min-width: 640px) {\n  .available-entities-header {\n    flex-direction: row;\n    justify-content: space-between;\n    align-items: center;\n  }\n}\n\n.available-entities-header .subsection-title {\n  margin: 0;\n}\n\n/* Entity Search Bar - Enhanced prominent search */\n.entity-search {\n  position: relative;\n  min-width: 200px;\n  max-width: 100%;\n  width: 100%;\n}\n\n@media (min-width: 640px) {\n  .entity-search {\n    min-width: 280px;\n    max-width: 400px;\n    width: auto;\n  }\n}\n\n@media (min-width: 768px) {\n  .entity-search {\n    min-width: 320px;\n    max-width: 450px;\n  }\n}\n\n.entity-search .entity-search-icon {\n  position: absolute;\n  left: 1rem;\n  top: 50%;\n  transform: translateY(-50%);\n  color: var(--md-on-surface-variant);\n  font-size: 1rem;\n  pointer-events: none;\n  transition: color 0.2s ease;\n}\n\n@media (min-width: 768px) {\n  .entity-search .entity-search-icon {\n    left: 1.125rem;\n    font-size: 1.125rem;\n  }\n}\n\n.entity-search .entity-search-input {\n  width: 100%;\n  padding: 0.875rem 2.75rem 0.875rem 2.75rem;\n  border: 2px solid var(--md-outline);\n  border-radius: var(--md-corner-full);\n  font-size: 1rem;\n  background: var(--md-surface);\n  color: var(--md-on-surface);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;\n  min-height: 48px;\n  box-shadow: var(--md-elevation-1);\n}\n\n@media (min-width: 768px) {\n  .entity-search .entity-search-input {\n    padding: 1rem 3rem 1rem 3rem;\n    min-height: 52px;\n    font-size: 1.0625rem;\n    border-radius: var(--md-corner-full);\n  }\n}\n\n.entity-search .entity-search-input::placeholder {\n  color: var(--md-on-surface-variant);\n}\n\n.entity-search .entity-search-input:hover {\n  border-color: var(--md-primary);\n  background: var(--md-surface-container-low);\n}\n\n.entity-search .entity-search-input:focus {\n  outline: none;\n  border-color: var(--md-primary);\n  box-shadow: var(--md-elevation-2), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--md-surface);\n}\n\n.entity-search:focus-within .entity-search-icon {\n  color: var(--md-primary);\n}\n\n.entity-search .entity-search-clear {\n  position: absolute;\n  right: 0.75rem;\n  top: 50%;\n  transform: translateY(-50%);\n  padding: 0.375rem;\n  border: none;\n  background: transparent;\n  color: var(--md-on-surface-variant);\n  cursor: pointer;\n  border-radius: var(--md-corner-full);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 28px;\n  min-height: 28px;\n  transition: all 0.15s ease;\n}\n\n@media (min-width: 768px) {\n  .entity-search .entity-search-clear {\n    right: 0.875rem;\n    min-width: 32px;\n    min-height: 32px;\n  }\n}\n\n.entity-search .entity-search-clear:hover {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n/* No Search Results State */\n.no-search-results {\n  text-align: center;\n  padding: 1.5rem;\n  color: var(--md-on-surface-variant);\n  background: var(--md-surface-container-low);\n  border-radius: var(--md-corner-small);\n}\n\n.no-search-results i {\n  font-size: 1.5rem;\n  color: var(--md-outline-variant);\n  margin-bottom: 0.5rem;\n  display: block;\n}\n\n.no-search-results p {\n  margin: 0;\n  font-size: 0.8125rem;\n}\n\n/* -----------------------------------------------------------------------------\n   Available Entities Grid\n   ----------------------------------------------------------------------------- */\n.available-entities .entities-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));\n  gap: 0.5rem;\n}\n\n.entity-chip {\n  padding: 0.75rem 1rem;\n  border: 1px solid var(--md-outline-variant);\n  border-radius: var(--md-corner-small);\n  background: var(--md-surface);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.entity-chip .chip-content {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.entity-chip .chip-content i {\n  color: var(--md-primary);\n  font-size: 0.875rem;\n}\n\n.entity-chip .chip-content .chip-name {\n  font-size: 0.8125rem;\n  font-weight: 500;\n  color: var(--md-on-surface);\n}\n\n.entity-chip:hover {\n  border-color: var(--md-primary);\n  background: var(--md-primary-container);\n  transform: translateY(-1px);\n  box-shadow: var(--md-elevation-1);\n}\n\n/* -----------------------------------------------------------------------------\n   Info Grid for System Information\n   ----------------------------------------------------------------------------- */\n.info-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));\n  gap: 1rem;\n}\n\n.info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n}\n\n.info-grid .info-item .info-label {\n  font-size: 0.6875rem;\n  font-weight: 500;\n  color: var(--md-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n}\n\n.info-grid .info-item .info-value {\n  font-size: 0.9375rem;\n  color: var(--md-on-surface);\n}\n\n/* -----------------------------------------------------------------------------\n   Button Icon Styles\n   ----------------------------------------------------------------------------- */\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--md-corner-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 0.875rem;\n}\n\n.btn-icon:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n.btn-icon.btn-neutral {\n  background: var(--md-surface-container);\n  color: var(--md-on-surface-variant);\n}\n\n.btn-icon.btn-neutral:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n}\n\n.btn-icon.btn-danger {\n  background: var(--md-error-container);\n  color: var(--md-on-error-container);\n}\n\n.btn-icon.btn-danger:hover:not(:disabled) {\n  background: #E57373;\n  color: var(--md-on-error);\n}\n\n/* Add/Create Icon Button */\n.btn-icon.btn-add {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.btn-icon.btn-add:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-elevation-2);\n}\n\n.btn-icon.btn-add:active:not(:disabled) {\n  background: #4BA5D4;\n  transform: scale(0.95);\n}\n\n/* -----------------------------------------------------------------------------\n   Icon Wrapper - Prominent display icons\n   ----------------------------------------------------------------------------- */\n.icon-wrapper {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.icon-wrapper-sm {\n  width: 32px;\n  height: 32px;\n  border-radius: var(--md-corner-small);\n  font-size: 0.875rem;\n}\n\n.icon-wrapper-md {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--md-corner-small);\n  font-size: 1rem;\n}\n\n.icon-wrapper-lg {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--md-corner-medium);\n  font-size: 1.25rem;\n}\n\n.icon-wrapper-xl {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--md-corner-medium);\n  font-size: 1.5rem;\n}\n\n/* Icon wrapper color variants */\n.icon-wrapper-primary {\n  background: var(--md-primary-container);\n  color: var(--md-primary);\n}\n\n.icon-wrapper-secondary {\n  background: var(--md-secondary-container);\n  color: #B5751A;\n}\n\n.icon-wrapper-tertiary {\n  background: var(--md-tertiary-container);\n  color: var(--md-tertiary);\n}\n\n.icon-wrapper-error {\n  background: var(--md-error-container);\n  color: var(--md-error);\n}\n\n/* Inverted icon wrapper (for dark backgrounds) */\n.icon-wrapper-inverted {\n  background: var(--md-on-primary);\n  color: var(--md-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   MJ Button System\n   ----------------------------------------------------------------------------- */\n.mj-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n  padding: 0.75rem 1.5rem;\n  font-size: 0.875rem;\n  font-weight: 600;\n  border: none;\n  border-radius: var(--md-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(--md-primary);\n  color: var(--md-on-primary);\n  box-shadow: var(--md-elevation-1);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n  background: #3395C8;\n  box-shadow: var(--md-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(--md-surface);\n  color: var(--md-primary);\n  border: 1px solid var(--md-outline);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n  background: var(--md-primary);\n  color: var(--md-on-primary);\n  border-color: var(--md-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n  background: #005A8C;\n  border-color: #005A8C;\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   Focus Indicators - Accessibility\n   ----------------------------------------------------------------------------- */\n.field-input:focus-visible,\n.field-select:focus-visible,\n.field-textarea:focus-visible,\n.mj-btn:focus-visible,\n.btn-icon:focus-visible,\n.entity-chip:focus-visible {\n  outline: 2px solid var(--md-primary);\n  outline-offset: 2px;\n}\n\n/* -----------------------------------------------------------------------------\n   Reduced Motion Support\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   Responsive Design - Mobile (< 640px)\n   ----------------------------------------------------------------------------- */\n@media (max-width: 639px) {\n  .modal-backdrop {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog {\n    border-radius: var(--md-corner-extra-large);\n    max-height: 95vh;\n  }\n\n  /* Fullscreen mode on mobile */\n  .modal-dialog.fullscreen {\n    border-radius: 0;\n    max-height: 100vh;\n  }\n\n  .modal-header {\n    padding: 1.25rem 1rem 1rem 1rem;\n  }\n\n  .modal-header .modal-title {\n    font-size: 1.125rem;\n  }\n\n  .modal-header .modal-close {\n    border-radius: var(--md-corner-full);\n  }\n\n  /* Modal title icon on mobile */\n  .modal-header .modal-title i {\n    width: 36px;\n    height: 36px;\n    font-size: 1rem;\n  }\n\n  /* Icon wrappers on mobile - slightly smaller */\n  .icon-wrapper-lg {\n    width: 40px;\n    height: 40px;\n    font-size: 1rem;\n  }\n\n  .icon-wrapper-xl {\n    width: 48px;\n    height: 48px;\n    font-size: 1.25rem;\n  }\n\n  /* Add button on mobile */\n  .btn-icon.btn-add {\n    border-radius: var(--md-corner-full);\n  }\n\n  .form-section {\n    padding: 1.25rem 1rem;\n  }\n\n  .form-row {\n    grid-template-columns: 1fr;\n    gap: 1rem;\n  }\n\n  .modal-footer {\n    padding: 1rem;\n    flex-direction: column;\n  }\n\n  .modal-footer .mj-btn {\n    width: 100%;\n    justify-content: center;\n    border-radius: var(--md-corner-full);\n  }\n\n  /* Entity item mobile layout */\n  .entity-item {\n    flex-direction: column;\n    align-items: stretch;\n    gap: 0.75rem;\n    padding: 0.875rem 1rem;\n    position: relative;\n  }\n\n  /* Drag handle on mobile - Keep visible and touch-friendly */\n  .drag-handle {\n    position: static;\n    margin-right: 0.75rem;\n    margin-bottom: 0.5rem;\n    font-size: 1.25rem;\n    color: var(--md-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 0.5rem;\n    background: var(--md-surface-container-low);\n    border-radius: var(--md-corner-small);\n    cursor: grab;\n  }\n\n  .drag-handle:active {\n    cursor: grabbing;\n    background: var(--md-primary-container);\n  }\n\n  .entity-item .entity-info {\n    gap: 0.75rem;\n  }\n\n  .entity-item .entity-info .entity-icon {\n    width: 36px;\n    height: 36px;\n    font-size: 0.875rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .entity-item .entity-info .entity-details .entity-name {\n    font-size: 0.875rem;\n    word-break: break-word;\n    overflow-wrap: break-word;\n    line-height: 1.3;\n    flex-wrap: wrap;\n  }\n\n  .entity-item .entity-config {\n    margin: 0;\n    width: 100%;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 0.75rem;\n  }\n\n  .entity-item .entity-config .config-item .config-label {\n    font-size: 0.8125rem;\n  }\n\n  .entity-item .entity-actions {\n    width: 100%;\n    justify-content: flex-end;\n    gap: 0.5rem;\n  }\n\n  /* Entity chips in mobile */\n  .available-entities .entities-grid {\n    grid-template-columns: 1fr;\n  }\n\n  .entity-chip {\n    padding: 0.625rem 0.875rem;\n    border-radius: var(--md-corner-small);\n  }\n\n  .entity-chip .chip-content .chip-name {\n    font-size: 0.75rem;\n    word-break: break-word;\n  }\n\n  /* Entity search on mobile - still prominent */\n  .entity-search {\n    max-width: none;\n    width: 100%;\n  }\n\n  .entity-search .entity-search-input {\n    padding: 0.75rem 2.5rem 0.75rem 2.5rem;\n    min-height: 44px;\n    font-size: 0.9375rem;\n    border-radius: var(--md-corner-full);\n  }\n\n  .entity-search .entity-search-icon {\n    left: 0.875rem;\n    font-size: 0.875rem;\n  }\n\n  .entity-search .entity-search-clear {\n    right: 0.625rem;\n    border-radius: var(--md-corner-full);\n  }\n\n  .info-grid {\n    grid-template-columns: 1fr 1fr;\n  }\n\n  /* Icon buttons on mobile - keep rounded */\n  .btn-icon {\n    border-radius: var(--md-corner-full);\n  }\n}\n\n/* Tablet Portrait (640px - 767px) */\n@media (min-width: 640px) {\n  .modal-dialog {\n    max-width: 650px;\n  }\n\n  .available-entities .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));\n  }\n}\n\n/* Tablet Landscape (768px - 1023px) */\n@media (min-width: 768px) {\n  .modal-dialog {\n    max-width: 800px;\n  }\n\n  .modal-header {\n    padding: 1.5rem 2rem 1.25rem 2rem;\n  }\n\n  .form-section {\n    padding: 1.75rem 2rem;\n  }\n\n  .modal-footer {\n    padding: 1.25rem 2rem;\n  }\n}\n\n/* Laptop (1024px+) */\n@media (min-width: 1024px) {\n  .modal-dialog {\n    max-width: 900px;\n  }\n\n  .available-entities .entities-grid {\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  }\n}\n"] }]
     }], () => [], { data: [{
             type: Input
         }], visible: [{
@@ -576,7 +715,7 @@ export class ApplicationDialogComponent {
             type: Output
         }], onEscapeKey: [{
             type: HostListener,
-            args: ['document:keydown.escape', ['$event']]
+            args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationDialogComponent, { className: "ApplicationDialogComponent", filePath: "src/lib/application-management/application-dialog/application-dialog.component.ts", lineNumber: 33 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ApplicationDialogComponent, { className: "ApplicationDialogComponent", filePath: "src/lib/application-management/application-dialog/application-dialog.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=application-dialog.component.js.map