npm - @memberjunction/ng-explorer-settings - Versions diffs - 5.3.1 → 5.4.1 - Mend

@memberjunction/ng-explorer-settings 5.3.1 → 5.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/__tests__/explorer-settings.test.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"explorer-settings.test.js","sourceRoot":"","sources":["../../src/__tests__/explorer-settings.test.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAElD,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9B,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC5C,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC9C,KAAK,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;IACtB,YAAY,EAAE;QAAQ,IAAI,KAAI,CAAC;KAAE;IACjC,iBAAiB,EAAE;KAAQ;CAC5B,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
1	+ {"version":3,"file":"explorer-settings.test.js","sourceRoot":"","sources":["../../src/__tests__/explorer-settings.test.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAElD,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,CAAC,CAAC;IAC9B,SAAS,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC7C,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC5C,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,MAAgB,EAAE,EAAE,CAAC,MAAM;IAC9C,KAAK,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;IACrB,MAAM,EAAE,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC;IACtB,YAAY,EAAE;QAAQ,IAAI,KAAI,CAAC;KAAE;IACjC,iBAAiB,EAAE;KAAQ;CAC5B,CAAC,CAAC,CAAC;AAEJ,QAAQ,CAAC,2BAA2B,EAAE,GAAG,EAAE;IACzC,EAAE,CAAC,0BAA0B,EAAE,GAAG,EAAE;QAClC,MAAM,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC1B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["/*\n Tests for explorer-settings package:\n * - Module export verification\n */\nimport { describe, it, expect, vi } from 'vitest';\n\nvi.mock('@angular/core', () => ({\n Component: () => (target: Function) => target,\n NgModule: () => (target: Function) => target,\n Injectable: () => (target: Function) => target,\n Input: () => () => {},\n Output: () => () => {},\n EventEmitter: class { emit() {} },\n ChangeDetectorRef: class {},\n}));\n\ndescribe('explorer-settings package', () => {\n it('should be a valid module', () => {\n expect(true).toBe(true);\n });\n});\n"]}

package/dist/lib/account-info/account-info.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"account-info.component.js","sourceRoot":"","sources":["../../../src/lib/account-info/account-info.component.ts","../../../src/lib/account-info/account-info.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;;;;ICA9C,8BAA+B;IAC7B,gCAAwD;IAC1D,iBAAM;;;IAIN,8BAA2B;IACzB,uBAA8C;IAC9C,4BAAM;IAAA,YAAkB;IAC1B,AAD0B,iBAAO,EAC3B;;;IADE,eAAkB;IAAlB,yCAAkB;;;IA4CpB,AADF,8BAAsB,aACI;IACtB,wBAAwC;IACxC,4BAAM;IAAA,sBAAM;IACd,AADc,iBAAO,EACf;IAEJ,AADF,8BAAwB,eACoF;IACxG,YACF;IAEJ,AADE,AADE,iBAAO,EACH,EACF;;;IAJyB,eAAqC;IAAC,AAAtC,qDAAqC,0CAAyC;IACvG,cACF;IADE,oFACF;;;IA5CJ,AADF,AADF,8BAA0B,aACF,aACI;IACtB,uBAAgC;IAChC,4BAAM;IAAA,yBAAS;IACjB,AADiB,iBAAO,EAClB;IACN,8BAAwB;IAAA,YAAmC;IAC7D,AAD6D,iBAAM,EAC7D;IAGJ,AADF,8BAAsB,aACI;IACtB,wBAAoC;IACpC,6BAAM;IAAA,sBAAK;IACb,AADa,iBAAO,EACd;IACN,+BAAwB;IAAA,aAAoC;IAC9D,AAD8D,iBAAM,EAC9D;IAGJ,AADF,+BAAsB,cACI;IACtB,yBAAyC;IACzC,6BAAM;IAAA,6BAAY;IACpB,AADoB,iBAAO,EACrB;IAEJ,AADF,+BAAwB,gBACkE;IACtF,aACF;IAEJ,AADE,AADE,iBAAO,EACH,EACF;IAGJ,AADF,+BAAsB,cACI;IACtB,yBAAyC;IACzC,6BAAM;IAAA,gCAAe;IACvB,AADuB,iBAAO,EACxB;IACN,+BAAwB;IAAA,aAA4C;IACtE,AADsE,iBAAM,EACtE;IAEN,sGAA0C;IAa5C,iBAAM;;;IA5CsB,eAAmC;IAAnC,0DAAmC;IAQnC,eAAoC;IAApC,2DAAoC;IASjC,eAA8D;IAA9D,0EAA8D;IACrF,cACF;IADE,kEACF;IASsB,eAA4C;IAA5C,0EAA4C;IAGtE,cAYC;IAZD,qEAYC;;AD3DL;;;GAGG;AAOH,MAAM,OAAO,oBAAoB;IAKX;IAAgC;IAJpD,SAAS,GAAG,IAAI,CAAC;IACjB,WAAW,GAAwB,IAAI,CAAC;IACxC,YAAY,GAAG,EAAE,CAAC;IAElB,YAAoB,GAAsB,EAAU,MAAc;QAA9C,QAAG,GAAH,GAAG,CAAmB;QAAU,WAAM,GAAN,MAAM,CAAQ;IAAG,CAAC;IAEtE,KAAK,CAAC,QAAQ;QACZ,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,IAAI,CAAC;YACH,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,EAAE,CAAC,WAAW,CAAC;YAEhC,+CAA+C;YAC/C,MAAM,IAAI,GAAG,MAAM,EAAE,CAAC,eAAe,CAAe,WAAW,CAAC,CAAC;YACjE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAE5C,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,qCAAqC,CAAC;YAC5D,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,qCAAqC,CAAC;YAC1D,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACtD,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,IAA6B;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;YAChD,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;IACL,CAAC;8GAjDU,oBAAoB;6DAApB,oBAAoB;YCdjC,sFAAiB;YAMjB,sFAAkC;YAOlC,uFAAiC;;YAbjC,wCAIC;YAED,cAKC;YALD,6DAKC;YAED,cAoDC;YApDD,4DAoDC;;;iFDnDY,oBAAoB;cANhC,SAAS;6BACI,KAAK,YACP,iBAAiB;;kFAIhB,oBAAoB"}
1	+ {"version":3,"file":"account-info.component.js","sourceRoot":"","sources":["../../../src/lib/account-info/account-info.component.ts","../../../src/lib/account-info/account-info.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqC,MAAM,eAAe,CAAC;AAC7E,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;;;;ICA9C,8BAA+B;IAC7B,gCAAwD;IAC1D,iBAAM;;;IAIN,8BAA2B;IACzB,uBAA8C;IAC9C,4BAAM;IAAA,YAAkB;IAC1B,AAD0B,iBAAO,EAC3B;;;IADE,eAAkB;IAAlB,yCAAkB;;;IA4CpB,AADF,8BAAsB,aACI;IACtB,wBAAwC;IACxC,4BAAM;IAAA,sBAAM;IACd,AADc,iBAAO,EACf;IAEJ,AADF,8BAAwB,eACoF;IACxG,YACF;IAEJ,AADE,AADE,iBAAO,EACH,EACF;;;IAJyB,eAAqC;IAAC,AAAtC,qDAAqC,0CAAyC;IACvG,cACF;IADE,oFACF;;;IA5CJ,AADF,AADF,8BAA0B,aACF,aACI;IACtB,uBAAgC;IAChC,4BAAM;IAAA,yBAAS;IACjB,AADiB,iBAAO,EAClB;IACN,8BAAwB;IAAA,YAAmC;IAC7D,AAD6D,iBAAM,EAC7D;IAGJ,AADF,8BAAsB,aACI;IACtB,wBAAoC;IACpC,6BAAM;IAAA,sBAAK;IACb,AADa,iBAAO,EACd;IACN,+BAAwB;IAAA,aAAoC;IAC9D,AAD8D,iBAAM,EAC9D;IAGJ,AADF,+BAAsB,cACI;IACtB,yBAAyC;IACzC,6BAAM;IAAA,6BAAY;IACpB,AADoB,iBAAO,EACrB;IAEJ,AADF,+BAAwB,gBACkE;IACtF,aACF;IAEJ,AADE,AADE,iBAAO,EACH,EACF;IAGJ,AADF,+BAAsB,cACI;IACtB,yBAAyC;IACzC,6BAAM;IAAA,gCAAe;IACvB,AADuB,iBAAO,EACxB;IACN,+BAAwB;IAAA,aAA4C;IACtE,AADsE,iBAAM,EACtE;IAEN,sGAA0C;IAa5C,iBAAM;;;IA5CsB,eAAmC;IAAnC,0DAAmC;IAQnC,eAAoC;IAApC,2DAAoC;IASjC,eAA8D;IAA9D,0EAA8D;IACrF,cACF;IADE,kEACF;IASsB,eAA4C;IAA5C,0EAA4C;IAGtE,cAYC;IAZD,qEAYC;;AD3DL;;;GAGG;AAOH,MAAM,OAAO,oBAAoB;IAKX;IAAgC;IAJpD,SAAS,GAAG,IAAI,CAAC;IACjB,WAAW,GAAwB,IAAI,CAAC;IACxC,YAAY,GAAG,EAAE,CAAC;IAElB,YAAoB,GAAsB,EAAU,MAAc;QAA9C,QAAG,GAAH,GAAG,CAAmB;QAAU,WAAM,GAAN,MAAM,CAAQ;IAAG,CAAC;IAEtE,KAAK,CAAC,QAAQ;QACZ,MAAM,IAAI,CAAC,eAAe,EAAE,CAAC;IAC/B,CAAC;IAEO,KAAK,CAAC,eAAe;QAC3B,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,YAAY,GAAG,EAAE,CAAC;QAEvB,IAAI,CAAC;YACH,MAAM,EAAE,GAAG,IAAI,QAAQ,EAAE,CAAC;YAC1B,MAAM,QAAQ,GAAG,EAAE,CAAC,WAAW,CAAC;YAEhC,+CAA+C;YAC/C,MAAM,IAAI,GAAG,MAAM,EAAE,CAAC,eAAe,CAAe,WAAW,CAAC,CAAC;YACjE,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;YAE5C,IAAI,MAAM,EAAE,CAAC;gBACX,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;YAC1B,CAAC;iBAAM,CAAC;gBACN,IAAI,CAAC,YAAY,GAAG,qCAAqC,CAAC;YAC5D,CAAC;QACH,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,IAAI,CAAC,YAAY,GAAG,qCAAqC,CAAC;YAC1D,OAAO,CAAC,KAAK,CAAC,6BAA6B,EAAE,KAAK,CAAC,CAAC;QACtD,CAAC;gBAAS,CAAC;YACT,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;gBACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;gBACvB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;YAC3B,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAED;;OAEG;IACH,UAAU,CAAC,IAA6B;QACtC,IAAI,CAAC,IAAI;YAAE,OAAO,KAAK,CAAC;QACxB,OAAO,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,kBAAkB,CAAC,OAAO,EAAE;YAChD,IAAI,EAAE,SAAS;YACf,KAAK,EAAE,MAAM;YACb,GAAG,EAAE,SAAS;SACf,CAAC,CAAC;IACL,CAAC;8GAjDU,oBAAoB;6DAApB,oBAAoB;YCdjC,sFAAiB;YAMjB,sFAAkC;YAOlC,uFAAiC;;YAbjC,wCAIC;YAED,cAKC;YALD,6DAKC;YAED,cAoDC;YApDD,4DAoDC;;;iFDnDY,oBAAoB;cANhC,SAAS;6BACI,KAAK,YACP,iBAAiB;;kFAIhB,oBAAoB","sourcesContent":["import { Component, OnInit, ChangeDetectorRef, NgZone } from '@angular/core';\nimport { Metadata } from '@memberjunction/core';\nimport { MJUserEntity } from '@memberjunction/core-entities';\n\n/*\n Displays read-only account information for the current user.\n * Shows name, email, role, creation date, and last login.\n /\n@Component({\n standalone: false,\n selector: 'mj-account-info',\n templateUrl: './account-info.component.html',\n styleUrls: ['./account-info.component.css']\n})\nexport class AccountInfoComponent implements OnInit {\n IsLoading = true;\n CurrentUser: MJUserEntity \| null = null;\n ErrorMessage = '';\n\n constructor(private cdr: ChangeDetectorRef, private ngZone: NgZone) {}\n\n async ngOnInit(): Promise<void> {\n await this.LoadAccountInfo();\n }\n\n private async LoadAccountInfo(): Promise<void> {\n this.IsLoading = true;\n this.ErrorMessage = '';\n\n try {\n const md = new Metadata();\n const userInfo = md.CurrentUser;\n\n // Load full user entity for additional details\n const user = await md.GetEntityObject<MJUserEntity>('MJ: Users');\n const loaded = await user.Load(userInfo.ID);\n\n if (loaded) {\n this.CurrentUser = user;\n } else {\n this.ErrorMessage = 'Unable to load account information.';\n }\n } catch (error) {\n this.ErrorMessage = 'Failed to load account information.';\n console.error('Error loading account info:', error);\n } finally {\n this.ngZone.run(() => {\n this.IsLoading = false;\n this.cdr.detectChanges();\n });\n }\n }\n\n /\n Formats a date for display\n */\n FormatDate(date: Date \| null \| undefined): string {\n if (!date) return 'N/A';\n return new Date(date).toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'long',\n day: 'numeric'\n });\n }\n\n}\n","@if (IsLoading) {\n <div class=\"loading-container\">\n <mj-loading text=\"Loading account info...\"></mj-loading>\n </div>\n}\n\n@if (ErrorMessage && !IsLoading) {\n <div class=\"error-message\">\n <i class=\"fa-solid fa-exclamation-circle\"></i>\n <span>{{ ErrorMessage }}</span>\n </div>\n}\n\n@if (CurrentUser && !IsLoading) {\n <div class=\"account-info\">\n <div class=\"info-row\">\n <div class=\"info-label\">\n <i class=\"fa-solid fa-user\"></i>\n <span>Full Name</span>\n </div>\n <div class=\"info-value\">{{ CurrentUser.Name \|\| 'Not set' }}</div>\n </div>\n\n <div class=\"info-row\">\n <div class=\"info-label\">\n <i class=\"fa-solid fa-envelope\"></i>\n <span>Email</span>\n </div>\n <div class=\"info-value\">{{ CurrentUser.Email \|\| 'Not set' }}</div>\n </div>\n\n <div class=\"info-row\">\n <div class=\"info-label\">\n <i class=\"fa-solid fa-shield-halved\"></i>\n <span>Account Type</span>\n </div>\n <div class=\"info-value\">\n <span class=\"type-badge\" [class]=\"'type-' + (CurrentUser.Type \|\| 'user').toLowerCase()\">\n {{ CurrentUser.Type \|\| 'User' }}\n </span>\n </div>\n </div>\n\n <div class=\"info-row\">\n <div class=\"info-label\">\n <i class=\"fa-solid fa-calendar-plus\"></i>\n <span>Account Created</span>\n </div>\n <div class=\"info-value\">{{ FormatDate(CurrentUser.__mj_CreatedAt) }}</div>\n </div>\n\n @if (CurrentUser.IsActive !== undefined) {\n <div class=\"info-row\">\n <div class=\"info-label\">\n <i class=\"fa-solid fa-circle-check\"></i>\n <span>Status</span>\n </div>\n <div class=\"info-value\">\n <span class=\"status-badge\" [class.active]=\"CurrentUser.IsActive\" [class.inactive]=\"!CurrentUser.IsActive\">\n {{ CurrentUser.IsActive ? 'Active' : 'Inactive' }}\n </span>\n </div>\n </div>\n }\n </div>\n}\n"]}

package/dist/lib/appearance-settings/appearance-settings.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"appearance-settings.component.js","sourceRoot":"","sources":["../../../src/lib/appearance-settings/appearance-settings.component.ts","../../../src/lib/appearance-settings/appearance-settings.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;ICmBhC,AADF,+BAA0B,cACE;IACxB,oBAA8B;IAChC,iBAAM;IAEJ,AADF,+BAA0B,eACI;IAAA,YAAmB;IAAA,iBAAO;IACtD,gCAA2B;IAAA,YAAyB;IAExD,AADE,AADsD,iBAAO,EACvD,EACF;;;IANC,eAAsB;IAAtB,8BAAsB;IAGG,eAAmB;IAAnB,sCAAmB;IACpB,eAAyB;IAAzB,4CAAyB;;ADtBhE;;;GAGG;AAOH,MAAM,OAAO,2BAA2B;IACtC,0BAA0B;IAC1B,eAAe,GAAG;QAChB;YACE,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,OAAO;YACd,WAAW,EAAE,6CAA6C;SAC3D;QACD;YACE,IAAI,EAAE,yBAAyB;YAC/B,KAAK,EAAE,WAAW;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD;YACE,IAAI,EAAE,oBAAoB;YAC1B,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,gDAAgD;SAC9D;KACF,CAAC;qHAlBS,2BAA2B;6DAA3B,2BAA2B;YCXtC,AADF,8BAAiC,YACL;YAAA,0BAAU;YAAA,iBAAK;YACzC,4BAA+B;YAAA,4DAA4C;YAAA,iBAAI;YAG7E,AADF,8BAAgC,aACL;YACvB,uBAAmC;YACrC,iBAAM;YAEJ,AADF,8BAA4B,SACtB;YAAA,4BAAW;YAAA,iBAAK;YACpB,0BAAG;YAAA,0EAAyD;YAEhE,AADE,AAD8D,iBAAI,EAC5D,EACF;YAGJ,AADF,+BAA8B,aACD;YAAA,iCAAgB;YAAA,iBAAK;YAChD,+BAA2B;YACzB,iGAUC;YAGP,AADE,AADE,iBAAM,EACF,EACF;;YAbA,gBAUC;YAVD,kCAUC;;;iFDfM,2BAA2B;cANvC,SAAS;6BACI,KAAK,YACP,wBAAwB;;kFAIvB,2BAA2B"}
1	+ {"version":3,"file":"appearance-settings.component.js","sourceRoot":"","sources":["../../../src/lib/appearance-settings/appearance-settings.component.ts","../../../src/lib/appearance-settings/appearance-settings.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;ICmBhC,AADF,+BAA0B,cACE;IACxB,oBAA8B;IAChC,iBAAM;IAEJ,AADF,+BAA0B,eACI;IAAA,YAAmB;IAAA,iBAAO;IACtD,gCAA2B;IAAA,YAAyB;IAExD,AADE,AADsD,iBAAO,EACvD,EACF;;;IANC,eAAsB;IAAtB,8BAAsB;IAGG,eAAmB;IAAnB,sCAAmB;IACpB,eAAyB;IAAzB,4CAAyB;;ADtBhE;;;GAGG;AAOH,MAAM,OAAO,2BAA2B;IACtC,0BAA0B;IAC1B,eAAe,GAAG;QAChB;YACE,IAAI,EAAE,kBAAkB;YACxB,KAAK,EAAE,OAAO;YACd,WAAW,EAAE,6CAA6C;SAC3D;QACD;YACE,IAAI,EAAE,yBAAyB;YAC/B,KAAK,EAAE,WAAW;YAClB,WAAW,EAAE,yCAAyC;SACvD;QACD;YACE,IAAI,EAAE,oBAAoB;YAC1B,KAAK,EAAE,iBAAiB;YACxB,WAAW,EAAE,gDAAgD;SAC9D;KACF,CAAC;qHAlBS,2BAA2B;6DAA3B,2BAA2B;YCXtC,AADF,8BAAiC,YACL;YAAA,0BAAU;YAAA,iBAAK;YACzC,4BAA+B;YAAA,4DAA4C;YAAA,iBAAI;YAG7E,AADF,8BAAgC,aACL;YACvB,uBAAmC;YACrC,iBAAM;YAEJ,AADF,8BAA4B,SACtB;YAAA,4BAAW;YAAA,iBAAK;YACpB,0BAAG;YAAA,0EAAyD;YAEhE,AADE,AAD8D,iBAAI,EAC5D,EACF;YAGJ,AADF,+BAA8B,aACD;YAAA,iCAAgB;YAAA,iBAAK;YAChD,+BAA2B;YACzB,iGAUC;YAGP,AADE,AADE,iBAAM,EACF,EACF;;YAbA,gBAUC;YAVD,kCAUC;;;iFDfM,2BAA2B;cANvC,SAAS;6BACI,KAAK,YACP,wBAAwB;;kFAIvB,2BAA2B","sourcesContent":["import { Component } from '@angular/core';\n\n/*\n Placeholder component for future appearance settings.\n * Will include: theme selection, display density, font size.\n */\n@Component({\n standalone: false,\n selector: 'mj-appearance-settings',\n templateUrl: './appearance-settings.component.html',\n styleUrls: ['./appearance-settings.component.css']\n})\nexport class AppearanceSettingsComponent {\n // Future planned features\n PlannedFeatures = [\n {\n icon: 'fa-solid fa-moon',\n title: 'Theme',\n description: 'Switch between light, dark, or system theme'\n },\n {\n icon: 'fa-solid fa-text-height',\n title: 'Font Size',\n description: 'Adjust text size for better readability'\n },\n {\n icon: 'fa-solid fa-expand',\n title: 'Display Density',\n description: 'Choose between comfortable and compact layouts'\n }\n ];\n}\n","<div class=\"appearance-settings\">\n <h2 class=\"section-title\">Appearance</h2>\n <p class=\"section-description\">Customize how MemberJunction looks and feels</p>\n\n <div class=\"coming-soon-banner\">\n <div class=\"banner-icon\">\n <i class=\"fa-solid fa-palette\"></i>\n </div>\n <div class=\"banner-content\">\n <h3>Coming Soon</h3>\n <p>We're working on bringing you more customization options.</p>\n </div>\n </div>\n\n <div class=\"planned-features\">\n <h4 class=\"features-title\">Planned Features</h4>\n <div class=\"features-grid\">\n @for (feature of PlannedFeatures; track feature.title) {\n <div class=\"feature-card\">\n <div class=\"feature-icon\">\n <i [class]=\"feature.icon\"></i>\n </div>\n <div class=\"feature-info\">\n <span class=\"feature-title\">{{ feature.title }}</span>\n <span class=\"feature-desc\">{{ feature.description }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n"]}

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

@@ -718,11 +718,11 @@ export class ApplicationDialogComponent {
             i0.ɵɵconditionalCreate(0, ApplicationDialogComponent_Conditional_0_Template, 44, 33, "div", 0);
         } if (rf & 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}"] });
+        } }, 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.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(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\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: var(--mj-brand-primary);\n  color: var(--mj-brand-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(--mj-brand-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(--mj-radius-lg);\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(--mj-brand-on-primary);\n  color: var(--mj-brand-primary);\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(--mj-brand-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(--mj-brand-on-primary);\n  font-size: 1.125rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-brand-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(--mj-brand-on-primary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-bg-page);\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(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\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(--mj-border-default);\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(--mj-text-primary);\n}\n\n.section-header[_ngcontent-%COMP%]   .section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-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(--mj-text-secondary);\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(--mj-text-secondary);\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(--mj-text-primary);\n}\n\n.form-field[_ngcontent-%COMP%]   .field-label.required[_ngcontent-%COMP%]::after {\n  content: ' *';\n  color: var(--mj-status-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(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  font-size: 0.9375rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\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(--mj-brand-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(--mj-status-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(--mj-status-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(--mj-text-secondary);\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(--mj-status-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(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n\n\n\n\n.alert[_ngcontent-%COMP%] {\n  padding: 1rem 1.25rem;\n  border-radius: var(--mj-radius-md);\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(--mj-color-error-100);\n  border: 1px solid rgba(211, 47, 47, 0.2);\n  color: var(--mj-color-error-700);\n}\n\n.alert.alert-error[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-error);\n}\n\n\n\n\n\n.subsection-title[_ngcontent-%COMP%] {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-page);\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(--mj-bg-surface);\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(--mj-bg-surface-sunken);\n}\n\n.entity-item.is-new[_ngcontent-%COMP%] {\n  background: rgba(76, 175, 80, 0.08);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.entity-item.has-changes[_ngcontent-%COMP%] {\n  background: rgba(245, 166, 35, 0.08);\n  border-left: 3px solid var(--mj-color-warning-500);\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(--mj-brand-accent-subtle);\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-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(--mj-text-primary);\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(--mj-color-warning-500);\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(--mj-text-secondary);\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(--mj-brand-primary);\n}\n\n.entity-item[_ngcontent-%COMP%]   .entity-config[_ngcontent-%COMP%]   .sequence-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--mj-radius-sm);\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(--mj-text-secondary);\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(--mj-brand-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(--mj-shadow-xl);\n  transform: rotate(1deg);\n  opacity: 0.9;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-page);\n}\n\n.entity-item.cdk-drag-placeholder[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  border-style: dashed;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\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(--mj-text-secondary);\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(--mj-border-default);\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(--mj-text-secondary);\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(--mj-text-secondary);\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(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;\n  min-height: 48px;\n  box-shadow: var(--mj-shadow-sm);\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(--mj-radius-full);\n  }\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.entity-search[_ngcontent-%COMP%]   .entity-search-input[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.entity-search[_ngcontent-%COMP%]:focus-within   .entity-search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-brand-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(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n\n\n.no-search-results[_ngcontent-%COMP%] {\n  text-align: center;\n  padding: 1.5rem;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n}\n\n.no-search-results[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 1.5rem;\n  color: var(--mj-border-default);\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(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\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(--mj-brand-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(--mj-text-primary);\n}\n\n.entity-chip[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-accent-subtle);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\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(--mj-text-secondary);\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(--mj-text-primary);\n}\n\n\n\n\n\n.btn-icon[_ngcontent-%COMP%] {\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  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(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon.btn-neutral[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.btn-icon.btn-danger[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-700);\n}\n\n.btn-icon.btn-danger[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: #E57373;\n  color: var(--mj-text-inverse);\n}\n\n\n\n.btn-icon.btn-add[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-icon.btn-add[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.btn-icon.btn-add[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary-light);\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(--mj-radius-md);\n  font-size: 0.875rem;\n}\n\n.icon-wrapper-md[_ngcontent-%COMP%] {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  font-size: 1rem;\n}\n\n.icon-wrapper-lg[_ngcontent-%COMP%] {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  font-size: 1.25rem;\n}\n\n.icon-wrapper-xl[_ngcontent-%COMP%] {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--mj-radius-lg);\n  font-size: 1.5rem;\n}\n\n\n\n.icon-wrapper-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-accent-subtle);\n  color: var(--mj-brand-primary);\n}\n\n.icon-wrapper-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-color-warning-50);\n  color: #B5751A;\n}\n\n.icon-wrapper-tertiary[_ngcontent-%COMP%] {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n.icon-wrapper-error[_ngcontent-%COMP%] {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n\n\n.icon-wrapper-inverted[_ngcontent-%COMP%] {\n  background: var(--mj-brand-on-primary);\n  color: var(--mj-brand-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(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n}\n\n.mj-btn[_ngcontent-%COMP%]:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n\n\n.mj-btn-primary[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-primary[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  transform: scale(0.98);\n}\n\n\n\n.mj-btn-secondary[_ngcontent-%COMP%] {\n  background: var(--mj-bg-page);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-color-neutral-400);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-btn-secondary[_ngcontent-%COMP%]:active:not(:disabled) {\n  background: #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(--mj-brand-primary);\n  outline-offset: 2px;\n}\n\n\n\n\n\n@media (prefers-reduced-motion: reduce) {\n  *[_ngcontent-%COMP%], \n   *[_ngcontent-%COMP%]::before, \n   *[_ngcontent-%COMP%]::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n\n\n\n\n@media (max-width: 639px) {\n  .modal-backdrop[_ngcontent-%COMP%] {\n    padding: 0.5rem;\n  }\n\n  .modal-dialog[_ngcontent-%COMP%] {\n    border-radius: var(--mj-radius-2xl);\n    max-height: 95vh;\n  }\n\n  \n\n  .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(--mj-radius-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(--mj-radius-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(--mj-radius-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(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 0.5rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: var(--mj-radius-md);\n    cursor: grab;\n  }\n\n  .drag-handle[_ngcontent-%COMP%]:active {\n    cursor: grabbing;\n    background: var(--mj-brand-accent-subtle);\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(--mj-radius-md);\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(--mj-radius-md);\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(--mj-radius-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(--mj-radius-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(--mj-radius-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: [{ standalone: false, 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"] }]
+        args: [{ standalone: false, 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\n   Uses MJ Design Tokens (--mj-*)\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(--mj-bg-page);\n  border-radius: var(--mj-radius-2xl);\n  box-shadow: var(--mj-shadow-2xl);\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: var(--mj-brand-primary);\n  color: var(--mj-brand-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(--mj-brand-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(--mj-radius-lg);\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(--mj-brand-on-primary);\n  color: var(--mj-brand-primary);\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(--mj-brand-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(--mj-brand-on-primary);\n  font-size: 1.125rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-brand-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(--mj-brand-on-primary);\n  font-size: 1.25rem;\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-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(--mj-bg-page);\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(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\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(--mj-border-default);\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(--mj-text-primary);\n}\n\n.section-header .section-title i {\n  color: var(--mj-brand-primary);\n  font-size: 0.875rem;\n}\n\n.section-header .section-description {\n  font-size: 0.8125rem;\n  color: var(--mj-text-secondary);\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(--mj-text-secondary);\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(--mj-text-primary);\n}\n\n.form-field .field-label.required::after {\n  content: ' *';\n  color: var(--mj-status-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(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-md);\n  font-size: 0.9375rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\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(--mj-brand-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(--mj-status-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(--mj-status-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(--mj-text-secondary);\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(--mj-status-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(--mj-text-secondary);\n  line-height: 1.4;\n}\n\n/* -----------------------------------------------------------------------------\n   Alert Messages\n   ----------------------------------------------------------------------------- */\n.alert {\n  padding: 1rem 1.25rem;\n  border-radius: var(--mj-radius-md);\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(--mj-color-error-100);\n  border: 1px solid rgba(211, 47, 47, 0.2);\n  color: var(--mj-color-error-700);\n}\n\n.alert.alert-error i {\n  color: var(--mj-status-error);\n}\n\n/* -----------------------------------------------------------------------------\n   Entity Management Styles\n   ----------------------------------------------------------------------------- */\n.subsection-title {\n  font-size: 0.9375rem;\n  font-weight: 600;\n  color: var(--mj-text-primary);\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(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  overflow: hidden;\n  background: var(--mj-bg-page);\n}\n\n.entity-item {\n  display: flex;\n  align-items: center;\n  padding: 1rem 1.25rem;\n  border-bottom: 1px solid var(--mj-bg-surface);\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(--mj-bg-surface-sunken);\n}\n\n.entity-item.is-new {\n  background: rgba(76, 175, 80, 0.08);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.entity-item.has-changes {\n  background: rgba(245, 166, 35, 0.08);\n  border-left: 3px solid var(--mj-color-warning-500);\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(--mj-brand-accent-subtle);\n  border-radius: var(--mj-radius-md);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--mj-brand-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(--mj-text-primary);\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(--mj-color-warning-500);\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(--mj-text-secondary);\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(--mj-brand-primary);\n}\n\n.entity-item .entity-config .sequence-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  padding: 0.25rem 0.5rem;\n  border-radius: var(--mj-radius-sm);\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(--mj-text-secondary);\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(--mj-brand-primary);\n}\n\n.drag-handle:active {\n  cursor: grabbing;\n}\n\n.entity-item.cdk-drag-preview {\n  box-shadow: var(--mj-shadow-xl);\n  transform: rotate(1deg);\n  opacity: 0.9;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-page);\n}\n\n.entity-item.cdk-drag-placeholder {\n  opacity: 0.4;\n  border-style: dashed;\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\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(--mj-text-secondary);\n}\n\n.no-entities i,\n.all-assigned i {\n  font-size: 2rem;\n  color: var(--mj-border-default);\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(--mj-text-secondary);\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(--mj-text-secondary);\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(--mj-color-neutral-400);\n  border-radius: var(--mj-radius-full);\n  font-size: 1rem;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;\n  min-height: 48px;\n  box-shadow: var(--mj-shadow-sm);\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(--mj-radius-full);\n  }\n}\n\n.entity-search .entity-search-input::placeholder {\n  color: var(--mj-text-secondary);\n}\n\n.entity-search .entity-search-input:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.entity-search .entity-search-input:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-md), 0 0 0 3px rgba(0, 118, 182, 0.2);\n  background: var(--mj-bg-page);\n}\n\n.entity-search:focus-within .entity-search-icon {\n  color: var(--mj-brand-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(--mj-text-secondary);\n  cursor: pointer;\n  border-radius: var(--mj-radius-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(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n/* No Search Results State */\n.no-search-results {\n  text-align: center;\n  padding: 1.5rem;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  border-radius: var(--mj-radius-md);\n}\n\n.no-search-results i {\n  font-size: 1.5rem;\n  color: var(--mj-border-default);\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(--mj-border-default);\n  border-radius: var(--mj-radius-md);\n  background: var(--mj-bg-page);\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(--mj-brand-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(--mj-text-primary);\n}\n\n.entity-chip:hover {\n  border-color: var(--mj-brand-primary);\n  background: var(--mj-brand-accent-subtle);\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-sm);\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(--mj-text-secondary);\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(--mj-text-primary);\n}\n\n/* -----------------------------------------------------------------------------\n   Button Icon Styles\n   ----------------------------------------------------------------------------- */\n.btn-icon {\n  width: 36px;\n  height: 36px;\n  border: none;\n  border-radius: var(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  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(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n}\n\n.btn-icon.btn-neutral:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.btn-icon.btn-danger {\n  background: var(--mj-color-error-100);\n  color: var(--mj-color-error-700);\n}\n\n.btn-icon.btn-danger:hover:not(:disabled) {\n  background: #E57373;\n  color: var(--mj-text-inverse);\n}\n\n/* Add/Create Icon Button */\n.btn-icon.btn-add {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.btn-icon.btn-add:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.btn-icon.btn-add:active:not(:disabled) {\n  background: var(--mj-brand-primary-light);\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(--mj-radius-md);\n  font-size: 0.875rem;\n}\n\n.icon-wrapper-md {\n  width: 40px;\n  height: 40px;\n  border-radius: var(--mj-radius-md);\n  font-size: 1rem;\n}\n\n.icon-wrapper-lg {\n  width: 48px;\n  height: 48px;\n  border-radius: var(--mj-radius-lg);\n  font-size: 1.25rem;\n}\n\n.icon-wrapper-xl {\n  width: 56px;\n  height: 56px;\n  border-radius: var(--mj-radius-lg);\n  font-size: 1.5rem;\n}\n\n/* Icon wrapper color variants */\n.icon-wrapper-primary {\n  background: var(--mj-brand-accent-subtle);\n  color: var(--mj-brand-primary);\n}\n\n.icon-wrapper-secondary {\n  background: var(--mj-color-warning-50);\n  color: #B5751A;\n}\n\n.icon-wrapper-tertiary {\n  background: var(--mj-color-success-100);\n  color: var(--mj-status-success);\n}\n\n.icon-wrapper-error {\n  background: var(--mj-color-error-100);\n  color: var(--mj-status-error);\n}\n\n/* Inverted icon wrapper (for dark backgrounds) */\n.icon-wrapper-inverted {\n  background: var(--mj-brand-on-primary);\n  color: var(--mj-brand-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(--mj-radius-full);\n  cursor: pointer;\n  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  white-space: nowrap;\n  min-height: 44px;\n}\n\n.mj-btn:disabled {\n  opacity: 0.38;\n  cursor: not-allowed;\n}\n\n/* Primary Button - Dark, lightens on hover */\n.mj-btn-primary {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.mj-btn-primary:hover:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.mj-btn-primary:active:not(:disabled) {\n  background: var(--mj-brand-primary-light);\n  transform: scale(0.98);\n}\n\n/* Secondary Button - Light, darkens on hover */\n.mj-btn-secondary {\n  background: var(--mj-bg-page);\n  color: var(--mj-brand-primary);\n  border: 1px solid var(--mj-color-neutral-400);\n}\n\n.mj-btn-secondary:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border-color: var(--mj-brand-primary);\n}\n\n.mj-btn-secondary:active:not(:disabled) {\n  background: #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(--mj-brand-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(--mj-radius-2xl);\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(--mj-radius-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(--mj-radius-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(--mj-radius-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(--mj-brand-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    padding: 0.5rem;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: var(--mj-radius-md);\n    cursor: grab;\n  }\n\n  .drag-handle:active {\n    cursor: grabbing;\n    background: var(--mj-brand-accent-subtle);\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(--mj-radius-md);\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(--mj-radius-md);\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(--mj-radius-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(--mj-radius-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(--mj-radius-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: [{