@memberjunction/ng-core-entity-forms 6.2.1 → 6.3.0-edge.0

package/dist/lib/custom/Entities/entity-form.component.js

@@ -12,6 +12,7 @@ import { IndexByUUID, RegisterClass, UUIDMap, UUIDsEqual } from '@memberjunction
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { SharedService } from '@memberjunction/ng-shared';
 import { MJEntityFormComponent } from '../../generated/Entities/MJEntity/mjentity.form.component';
+import { IsPhoneViewport, WatchPhoneViewport } from '@memberjunction/ng-ui-components';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
@@ -32,15 +33,15 @@ const _forTrack3 = ($index, $item) => $item.Info.ID;
 const _forTrack4 = ($index, $item) => $item.OrganicKey.ID + $item.SourceEntityName;
 function MJEntityFormComponentExtended_Conditional_0_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 8);
-    i0.ɵɵelement(1, "i", 42);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵtext(2, " Virtual ");
     i0.ɵɵelementEnd();
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 43);
+    i0.ɵɵelementStart(0, "span", 44);
     i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_12_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.ParentChain[0])); });
-    i0.ɵɵelement(1, "i", 44);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -49,17 +50,17 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_12_Template(rf,
     i0.ɵɵtextInterpolate1(" IS-A ", ctx_r2.ParentChain[0] == null ? null : ctx_r2.ParentChain[0].Name, " ");
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_13_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 47);
-    i0.ɵɵelement(1, "i", 48);
+    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵelement(1, "i", 49);
     i0.ɵɵtext(2, " Overlapping Subtypes ");
     i0.ɵɵelementEnd();
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵelement(1, "i", 46);
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_13_Conditional_3_Template, 3, 0, "span", 47);
+    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_13_Conditional_3_Template, 3, 0, "span", 48);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
@@ -69,7 +70,7 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_13_Template(rf,
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelement(1, "i", 50);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -99,11 +100,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_42_Template(rf,
 } }
 function MJEntityFormComponentExtended_Conditional_0_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span", 23);
-    i0.ɵɵelement(1, "i", 50);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_For_49_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 53);
+function MJEntityFormComponentExtended_Conditional_0_For_50_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 54);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -111,15 +112,15 @@ function MJEntityFormComponentExtended_Conditional_0_For_49_Conditional_4_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r5.badge);
 } }
-function MJEntityFormComponentExtended_Conditional_0_For_49_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_For_50_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 51);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_For_49_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection(item_r5.id)); });
+    i0.ɵɵelementStart(0, "button", 52);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_For_50_Template_button_click_0_listener() { const item_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection(item_r5.id)); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 52);
+    i0.ɵɵelementStart(2, "span", 53);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_For_49_Conditional_4_Template, 2, 1, "span", 53);
+    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_For_50_Conditional_4_Template, 2, 1, "span", 54);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r5 = ctx.$implicit;
@@ -133,7 +134,7 @@ function MJEntityFormComponentExtended_Conditional_0_For_49_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(item_r5.badge ? 4 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -142,7 +143,7 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", ctx_r2.stats.encryptedFieldCount, " Encrypted");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_56_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "date");
@@ -152,14 +153,14 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("Updated ", i0.ɵɵpipeBind2(2, 1, ctx_r2.entity.RowCountRunAt, "short"));
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_57_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Row count");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_For_64_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 73);
-    i0.ɵɵelement(1, "i", 85);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_For_64_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -167,18 +168,18 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_For_64_Templ
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", cap_r7, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_65_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
-    i0.ɵɵelement(1, "i", 40);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_65_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 75);
+    i0.ɵɵelement(1, "i", 41);
     i0.ɵɵtext(2, " No API ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "i", 42);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Virtual Entity \u2014 read-only view backed by ");
-    i0.ɵɵelementStart(4, "span", 88);
+    i0.ɵɵelementStart(4, "span", 89);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -186,11 +187,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r2.entity.BaseView);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_For_7_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_For_7_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelement(0, "i", 96);
-    i0.ɵɵelementStart(1, "span", 97);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_For_7_Template_span_click_1_listener() { const parent_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(parent_r9)); });
+    i0.ɵɵelement(0, "i", 97);
+    i0.ɵɵelementStart(1, "span", 98);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_For_7_Template_span_click_1_listener() { const parent_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(parent_r9)); });
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -200,21 +201,21 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", parent_r9.Name, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "Field Source Inspector");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 106);
-} }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 107);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 110);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 108);
+} }
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 111);
     i0.ɵɵtext(1);
-    i0.ɵɵelementStart(2, "span", 111);
+    i0.ɵɵelementStart(2, "span", 112);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -225,16 +226,16 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r11.Type);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103)(1, "div", 104)(2, "span", 105);
-    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_3_Template, 1, 0, "i", 106)(4, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_4_Template, 1, 0, "i", 107);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 104)(1, "div", 105)(2, "span", 106);
+    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_3_Template, 1, 0, "i", 107)(4, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Conditional_4_Template, 1, 0, "i", 108);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 108);
+    i0.ɵɵelementStart(6, "span", 109);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 109);
-    i0.ɵɵrepeaterCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_For_10_Template, 4, 3, "span", 110, _forTrack0);
+    i0.ɵɵelementStart(8, "div", 110);
+    i0.ɵɵrepeaterCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_For_10_Template, 4, 3, "span", 111, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const group_r12 = ctx.$implicit;
@@ -248,31 +249,31 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(group_r12.Fields);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Template, 11, 8, "div", 102, _forTrack1);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_For_2_Template, 11, 8, "div", 103, _forTrack1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(6);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.isaFieldGroups);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 94)(1, "mj-accordion-panel", 98);
-    i0.ɵɵlistener("ExpandedChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_Template_mj_accordion_panel_ExpandedChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.isaFieldInspectorExpanded = $event); });
-    i0.ɵɵtemplate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_2_Template, 2, 0, "ng-template", 99)(3, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_ng_template_3_Template, 3, 0, "ng-template", 100);
+    i0.ɵɵelementStart(0, "div", 95)(1, "mj-accordion-panel", 99);
+    i0.ɵɵlistener("ExpandedChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_Template_mj_accordion_panel_ExpandedChange_1_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.isaFieldInspectorExpanded = $event); });
+    i0.ɵɵtemplate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_2_Template, 2, 0, "ng-template", 100)(3, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_ng_template_3_Template, 3, 0, "ng-template", 101);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
     i0.ɵɵadvance();
     i0.ɵɵproperty("FlushBody", true)("Expanded", ctx_r2.isaFieldInspectorExpanded);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_13_For_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_13_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 114);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_13_For_5_Template_span_click_0_listener() { const sibling_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(sibling_r14)); });
-    i0.ɵɵelement(1, "i", 115);
+    i0.ɵɵelementStart(0, "span", 115);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_13_For_5_Template_span_click_0_listener() { const sibling_r14 = i0.ɵɵrestoreView(_r13).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(sibling_r14)); });
+    i0.ɵɵelement(1, "i", 116);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -281,12 +282,12 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", sibling_r14.Name, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 95)(1, "div", 90);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96)(1, "div", 91);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 112);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_13_For_5_Template, 3, 2, "span", 113, _forTrack0);
+    i0.ɵɵelementStart(3, "div", 113);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_13_For_5_Template, 3, 2, "span", 114, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(5);
@@ -295,22 +296,22 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.SiblingEntities);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 90)(1, "div", 91);
     i0.ɵɵtext(2, "Inheritance Chain");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 91)(4, "span", 92);
+    i0.ɵɵelementStart(3, "div", 92)(4, "span", 93);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_For_7_Template, 3, 2, null, null, _forTrack0);
+    i0.ɵɵrepeaterCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_For_7_Template, 3, 2, null, null, _forTrack0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 93);
-    i0.ɵɵelement(9, "i", 58);
+    i0.ɵɵelementStart(8, "div", 94);
+    i0.ɵɵelement(9, "i", 59);
     i0.ɵɵelementStart(10, "span");
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_12_Template, 4, 2, "div", 94);
-    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Conditional_13_Template, 6, 2, "div", 95);
+    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_12_Template, 4, 2, "div", 95);
+    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Conditional_13_Template, 6, 2, "div", 96);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(5);
@@ -324,24 +325,24 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.SiblingEntities.length > 0 ? 13 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 50);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 51);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(0);
     i0.ɵɵpipe(1, "number");
 } if (rf & 2) {
     const childCount_r16 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(1, 1, childCount_r16.RecordCount), " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 117);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Template_span_click_0_listener() { const childCount_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(childCount_r16.EntityInfo)); });
-    i0.ɵɵelement(1, "i", 118);
+    i0.ɵɵelementStart(0, "span", 118);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Template_span_click_0_listener() { const childCount_r16 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(childCount_r16.EntityInfo)); });
+    i0.ɵɵelement(1, "i", 119);
     i0.ɵɵtext(2);
-    i0.ɵɵelementStart(3, "span", 119);
-    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Conditional_4_Template, 1, 0, "i", 50)(5, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Conditional_5_Template, 2, 3);
+    i0.ɵɵelementStart(3, "span", 120);
+    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Conditional_4_Template, 1, 0, "i", 51)(5, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Conditional_5_Template, 2, 3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const childCount_r16 = ctx.$implicit;
@@ -351,26 +352,26 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(childCount_r16.IsLoading ? 4 : 5);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 87)(1, "div", 90);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "div", 91);
     i0.ɵɵtext(2, "Child Types");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 112);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_For_5_Template, 6, 3, "span", 116, _forTrack1);
+    i0.ɵɵelementStart(3, "div", 113);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_For_5_Template, 6, 3, "span", 117, _forTrack1);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r2.childEntityCounts);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75)(1, "h3", 70);
-    i0.ɵɵelement(2, "i", 49);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 76)(1, "h3", 71);
+    i0.ɵɵelement(2, "i", 50);
     i0.ɵɵtext(3, " Type Hierarchy ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_4_Template, 6, 1, "div", 86);
-    i0.ɵɵconditionalCreate(5, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_5_Template, 14, 6);
-    i0.ɵɵconditionalCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Conditional_6_Template, 6, 0, "div", 87);
+    i0.ɵɵconditionalCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_4_Template, 6, 1, "div", 87);
+    i0.ɵɵconditionalCreate(5, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_5_Template, 14, 6);
+    i0.ɵɵconditionalCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Conditional_6_Template, 6, 0, "div", 88);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -381,11 +382,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.IsParentType ? 6 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_92_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_92_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
     i0.ɵɵtext(2, "SP Create");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 84);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -393,11 +394,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.spCreate);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_93_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_93_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
     i0.ɵɵtext(2, "SP Update");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 84);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -405,11 +406,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.spUpdate);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_94_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_94_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
     i0.ɵɵtext(2, "SP Delete");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 84);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -417,11 +418,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.spDelete);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_110_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 79)(1, "span", 80);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_110_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 80)(1, "span", 81);
     i0.ɵɵtext(2, "Subclass");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 84);
+    i0.ɵɵelementStart(3, "span", 85);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -429,134 +430,134 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.EntityObjectSubclassName);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 28)(1, "div", 54)(2, "div", 55)(3, "div", 56);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("fields")); });
-    i0.ɵɵelementStart(4, "div", 57);
-    i0.ɵɵelement(5, "i", 58);
+    i0.ɵɵelementStart(0, "section", 29)(1, "div", 55)(2, "div", 56)(3, "div", 57);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_div_click_3_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("fields")); });
+    i0.ɵɵelementStart(4, "div", 58);
+    i0.ɵɵelement(5, "i", 59);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7, "Fields");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 59)(9, "div", 60);
+    i0.ɵɵelementStart(8, "div", 60)(9, "div", 61);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 61)(12, "span");
+    i0.ɵɵelementStart(11, "div", 62)(12, "span");
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(14, "span");
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_16_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_16_Template, 2, 1, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 62);
-    i0.ɵɵelement(18, "i", 63);
+    i0.ɵɵelementStart(17, "div", 63);
+    i0.ɵɵelement(18, "i", 64);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 64);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("relationships")); });
-    i0.ɵɵelementStart(20, "div", 57);
-    i0.ɵɵelement(21, "i", 65);
+    i0.ɵɵelementStart(19, "div", 65);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("relationships")); });
+    i0.ɵɵelementStart(20, "div", 58);
+    i0.ɵɵelement(21, "i", 66);
     i0.ɵɵelementStart(22, "span");
     i0.ɵɵtext(23, "Relationships");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div", 59)(25, "div", 60);
+    i0.ɵɵelementStart(24, "div", 60)(25, "div", 61);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "div", 61)(28, "span");
+    i0.ɵɵelementStart(27, "div", 62)(28, "span");
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(30, "span");
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(32, "div", 62);
-    i0.ɵɵelement(33, "i", 63);
+    i0.ɵɵelementStart(32, "div", 63);
+    i0.ɵɵelement(33, "i", 64);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 66);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template_div_click_34_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("permissions")); });
-    i0.ɵɵelementStart(35, "div", 57);
-    i0.ɵɵelement(36, "i", 67);
+    i0.ɵɵelementStart(34, "div", 67);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_div_click_34_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.setActiveSection("permissions")); });
+    i0.ɵɵelementStart(35, "div", 58);
+    i0.ɵɵelement(36, "i", 68);
     i0.ɵɵelementStart(37, "span");
     i0.ɵɵtext(38, "Security");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 59)(40, "div", 60);
+    i0.ɵɵelementStart(39, "div", 60)(40, "div", 61);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "div", 61)(43, "span");
+    i0.ɵɵelementStart(42, "div", 62)(43, "span");
     i0.ɵɵtext(44, "Roles configured");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(45, "div", 62);
-    i0.ɵɵelement(46, "i", 63);
+    i0.ɵɵelementStart(45, "div", 63);
+    i0.ɵɵelement(46, "i", 64);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "div", 68)(48, "div", 57);
+    i0.ɵɵelementStart(47, "div", 69)(48, "div", 58);
     i0.ɵɵelement(49, "i", 22);
     i0.ɵɵelementStart(50, "span");
     i0.ɵɵtext(51, "Data");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(52, "div", 59)(53, "div", 60);
+    i0.ɵɵelementStart(52, "div", 60)(53, "div", 61);
     i0.ɵɵtext(54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(55, "div", 61);
-    i0.ɵɵconditionalCreate(56, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_56_Template, 3, 4, "span");
-    i0.ɵɵconditionalCreate(57, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_57_Template, 2, 0, "span");
+    i0.ɵɵelementStart(55, "div", 62);
+    i0.ɵɵconditionalCreate(56, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_56_Template, 3, 4, "span");
+    i0.ɵɵconditionalCreate(57, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_57_Template, 2, 0, "span");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(58, "div", 69)(59, "h3", 70);
-    i0.ɵɵelement(60, "i", 71);
+    i0.ɵɵelementStart(58, "div", 70)(59, "h3", 71);
+    i0.ɵɵelement(60, "i", 72);
     i0.ɵɵtext(61, " Capabilities ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(62, "div", 72);
-    i0.ɵɵrepeaterCreate(63, MJEntityFormComponentExtended_Conditional_0_Conditional_51_For_64_Template, 3, 1, "span", 73, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(65, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_65_Template, 3, 0, "span", 74);
+    i0.ɵɵelementStart(62, "div", 73);
+    i0.ɵɵrepeaterCreate(63, MJEntityFormComponentExtended_Conditional_0_Conditional_52_For_64_Template, 3, 1, "span", 74, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(65, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_65_Template, 3, 0, "span", 75);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(66, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_66_Template, 7, 3, "div", 75);
-    i0.ɵɵelementStart(67, "div", 76)(68, "h3", 70);
-    i0.ɵɵelement(69, "i", 77);
+    i0.ɵɵconditionalCreate(66, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_66_Template, 7, 3, "div", 76);
+    i0.ɵɵelementStart(67, "div", 77)(68, "h3", 71);
+    i0.ɵɵelement(69, "i", 78);
     i0.ɵɵtext(70, " Database ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(71, "div", 78)(72, "div", 79)(73, "span", 80);
+    i0.ɵɵelementStart(71, "div", 79)(72, "div", 80)(73, "span", 81);
     i0.ɵɵtext(74, "Schema");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(75, "span", 81);
+    i0.ɵɵelementStart(75, "span", 82);
     i0.ɵɵtext(76);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(77, "div", 79)(78, "span", 80);
+    i0.ɵɵelementStart(77, "div", 80)(78, "span", 81);
     i0.ɵɵtext(79, "Table");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(80, "span", 81);
+    i0.ɵɵelementStart(80, "span", 82);
     i0.ɵɵtext(81);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(82, "div", 79)(83, "span", 80);
+    i0.ɵɵelementStart(82, "div", 80)(83, "span", 81);
     i0.ɵɵtext(84, "View");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(85, "span", 81);
+    i0.ɵɵelementStart(85, "span", 82);
     i0.ɵɵtext(86);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(87, "div", 79)(88, "span", 80);
+    i0.ɵɵelementStart(87, "div", 80)(88, "span", 81);
     i0.ɵɵtext(89, "Delete Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(90, "span", 81);
+    i0.ɵɵelementStart(90, "span", 82);
     i0.ɵɵtext(91);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(92, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_92_Template, 5, 1, "div", 79);
-    i0.ɵɵconditionalCreate(93, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_93_Template, 5, 1, "div", 79);
-    i0.ɵɵconditionalCreate(94, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_94_Template, 5, 1, "div", 79);
+    i0.ɵɵconditionalCreate(92, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_92_Template, 5, 1, "div", 80);
+    i0.ɵɵconditionalCreate(93, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_93_Template, 5, 1, "div", 80);
+    i0.ɵɵconditionalCreate(94, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_94_Template, 5, 1, "div", 80);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(95, "div", 82)(96, "h3", 70);
-    i0.ɵɵelement(97, "i", 83);
+    i0.ɵɵelementStart(95, "div", 83)(96, "h3", 71);
+    i0.ɵɵelement(97, "i", 84);
     i0.ɵɵtext(98, " Code Generation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(99, "div", 78)(100, "div", 79)(101, "span", 80);
+    i0.ɵɵelementStart(99, "div", 79)(100, "div", 80)(101, "span", 81);
     i0.ɵɵtext(102, "Class Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(103, "span", 84);
+    i0.ɵɵelementStart(103, "span", 85);
     i0.ɵɵtext(104);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(105, "div", 79)(106, "span", 80);
+    i0.ɵɵelementStart(105, "div", 80)(106, "span", 81);
     i0.ɵɵtext(107, "Code Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(108, "span", 84);
+    i0.ɵɵelementStart(108, "span", 85);
     i0.ɵɵtext(109);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(110, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Conditional_110_Template, 5, 1, "div", 79);
+    i0.ɵɵconditionalCreate(110, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_110_Template, 5, 1, "div", 80);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -609,15 +610,15 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.entity.EntityObjectSubclassName ? 110 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 129)(1, "button", 133);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.expandAllFieldGroups()); });
-    i0.ɵɵelement(2, "i", 134);
+    i0.ɵɵelementStart(0, "div", 130)(1, "button", 134);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.expandAllFieldGroups()); });
+    i0.ɵɵelement(2, "i", 135);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 135);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.collapseAllFieldGroups()); });
-    i0.ɵɵelement(4, "i", 136);
+    i0.ɵɵelementStart(3, "button", 136);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.collapseAllFieldGroups()); });
+    i0.ɵɵelement(4, "i", 137);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -626,12 +627,12 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r2.allFieldGroupsCollapsed);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 138);
-    i0.ɵɵelementStart(1, "span", 139);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 139);
+    i0.ɵɵelementStart(1, "span", 140);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 140);
+    i0.ɵɵelementStart(3, "span", 141);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -642,16 +643,16 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(group_r20.fields.length);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 150);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 151);
     i0.ɵɵtext(1, "Required");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 157);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(6); ctx_r2.navigateToRelatedEntity(field_r22); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(0, "span", 158);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template_span_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const field_r22 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(6); ctx_r2.navigateToRelatedEntity(field_r22); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelement(1, "i", 64);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -660,24 +661,24 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getRelatedEntityName(field_r22), " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 153);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 154);
     i0.ɵɵtext(1, "PK");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 154);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 155);
     i0.ɵɵtext(1, "FK");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 155);
-    i0.ɵɵelement(1, "i", 67);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 156);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 156);
-    i0.ɵɵelement(1, "i", 44);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 157);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -687,30 +688,30 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.GetISAFieldSource(field_r22), " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 143);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Template_div_click_0_listener() { const field_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.selectField(field_r22)); });
-    i0.ɵɵelementStart(1, "div", 144);
+    i0.ɵɵelementStart(0, "div", 144);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Template_div_click_0_listener() { const field_r22 = i0.ɵɵrestoreView(_r21).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.selectField(field_r22)); });
+    i0.ɵɵelementStart(1, "div", 145);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 145)(4, "div", 146);
+    i0.ɵɵelementStart(3, "div", 146)(4, "div", 147);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 147);
+    i0.ɵɵelementStart(6, "div", 148);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 148)(9, "span", 149);
+    i0.ɵɵelementStart(8, "div", 149)(9, "span", 150);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_11_Template, 2, 0, "span", 150);
-    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template, 3, 1, "span", 151);
+    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_11_Template, 2, 0, "span", 151);
+    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_12_Template, 3, 1, "span", 152);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 152);
-    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_14_Template, 2, 0, "span", 153);
-    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_15_Template, 2, 0, "span", 154);
-    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_16_Template, 2, 0, "span", 155);
-    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Conditional_17_Template, 3, 2, "span", 156);
+    i0.ɵɵelementStart(13, "div", 153);
+    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_14_Template, 2, 0, "span", 154);
+    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_15_Template, 2, 0, "span", 155);
+    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_16_Template, 2, 0, "span", 156);
+    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Conditional_17_Template, 3, 2, "span", 157);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r22 = ctx.$implicit;
@@ -737,37 +738,37 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.IsInheritedField(field_r22) ? 17 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 141);
-    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_For_2_Template, 18, 13, "div", 142, i0.ɵɵrepeaterTrackByIdentity);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 142);
+    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_For_2_Template, 18, 13, "div", 143, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r20 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(group_r20.fields);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-accordion-panel", 98);
-    i0.ɵɵlistener("ExpandedChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { const group_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFieldGroupExpandedChange(group_r20.id, $event)); });
-    i0.ɵɵtemplate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_1_Template, 5, 4, "ng-template", 99)(2, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_ng_template_2_Template, 3, 0, "ng-template", 100);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 99);
+    i0.ɵɵlistener("ExpandedChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_Template_mj_accordion_panel_ExpandedChange_0_listener($event) { const group_r20 = i0.ɵɵrestoreView(_r19).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.onFieldGroupExpandedChange(group_r20.id, $event)); });
+    i0.ɵɵtemplate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_1_Template, 5, 4, "ng-template", 100)(2, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_ng_template_2_Template, 3, 0, "ng-template", 101);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r20 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵproperty("FlushBody", true)("Expanded", ctx_r2.isFieldGroupExpanded(group_r20.id));
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 131);
-    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_For_2_Template, 3, 2, "mj-accordion-panel", 137, i0.ɵɵrepeaterTrackByIdentity);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 132);
+    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_For_2_Template, 3, 2, "mj-accordion-panel", 138, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.getFilteredFieldGroups());
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 182);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 183);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -775,31 +776,31 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(field_r26.Length);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 183);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 184);
     i0.ɵɵtext(1, "\u2014");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 187);
-    i0.ɵɵelement(1, "i", 193);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 188);
+    i0.ɵɵelement(1, "i", 194);
     i0.ɵɵtext(2, " PK ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 188);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 189);
     i0.ɵɵelement(1, "i", 20);
     i0.ɵɵtext(2, " FK ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 189);
-    i0.ɵɵelement(1, "i", 67);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 190);
+    i0.ɵɵelement(1, "i", 68);
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 190);
-    i0.ɵɵelement(1, "i", 44);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 191);
+    i0.ɵɵelement(1, "i", 45);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -809,39 +810,39 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.GetISAFieldSource(field_r26), " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 171);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Template_div_click_0_listener() { const field_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.selectField(field_r26)); });
-    i0.ɵɵelementStart(1, "div", 172)(2, "span", 173);
+    i0.ɵɵelementStart(0, "div", 172);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Template_div_click_0_listener() { const field_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.selectField(field_r26)); });
+    i0.ɵɵelementStart(1, "div", 173)(2, "span", 174);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 174);
-    i0.ɵɵelement(5, "i", 175);
-    i0.ɵɵelementStart(6, "span", 176);
+    i0.ɵɵelementStart(4, "div", 175);
+    i0.ɵɵelement(5, "i", 176);
+    i0.ɵɵelementStart(6, "span", 177);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 177)(9, "span", 178);
+    i0.ɵɵelementStart(8, "div", 178)(9, "span", 179);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 179)(12, "span", 180);
+    i0.ɵɵelementStart(11, "div", 180)(12, "span", 181);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 181);
-    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_15_Template, 2, 1, "span", 182);
-    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_16_Template, 2, 0, "span", 183);
+    i0.ɵɵelementStart(14, "div", 182);
+    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_15_Template, 2, 1, "span", 183);
+    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_16_Template, 2, 0, "span", 184);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 184)(18, "span", 185);
+    i0.ɵɵelementStart(17, "div", 185)(18, "span", 186);
     i0.ɵɵelement(19, "i");
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 166)(22, "div", 186);
-    i0.ɵɵconditionalCreate(23, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_23_Template, 3, 0, "span", 187);
-    i0.ɵɵconditionalCreate(24, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_24_Template, 3, 0, "span", 188);
-    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_25_Template, 2, 0, "span", 189);
-    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Conditional_26_Template, 3, 2, "span", 190);
+    i0.ɵɵelementStart(21, "div", 167)(22, "div", 187);
+    i0.ɵɵconditionalCreate(23, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_23_Template, 3, 0, "span", 188);
+    i0.ɵɵconditionalCreate(24, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_24_Template, 3, 0, "span", 189);
+    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_25_Template, 2, 0, "span", 190);
+    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Conditional_26_Template, 3, 2, "span", 191);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 191)(28, "span", 192);
+    i0.ɵɵelementStart(27, "div", 192)(28, "span", 193);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -881,53 +882,53 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(field_r26.Description || "\u2014");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Conditional_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 170);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 171);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 132)(1, "div", 158)(2, "div", 159);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Sequence")); });
+    i0.ɵɵelementStart(0, "div", 133)(1, "div", 159)(2, "div", 160);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Sequence")); });
     i0.ɵɵtext(3, " # ");
-    i0.ɵɵelement(4, "i", 160);
+    i0.ɵɵelement(4, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 161);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Name")); });
+    i0.ɵɵelementStart(5, "div", 162);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Name")); });
     i0.ɵɵtext(6, " Field Name ");
-    i0.ɵɵelement(7, "i", 160);
+    i0.ɵɵelement(7, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 162);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("DisplayName")); });
+    i0.ɵɵelementStart(8, "div", 163);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("DisplayName")); });
     i0.ɵɵtext(9, " Display Name ");
-    i0.ɵɵelement(10, "i", 160);
+    i0.ɵɵelement(10, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 163);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Type")); });
+    i0.ɵɵelementStart(11, "div", 164);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_11_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Type")); });
     i0.ɵɵtext(12, " Type ");
-    i0.ɵɵelement(13, "i", 160);
+    i0.ɵɵelement(13, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 164);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Length")); });
+    i0.ɵɵelementStart(14, "div", 165);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_14_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Length")); });
     i0.ɵɵtext(15, " Length ");
-    i0.ɵɵelement(16, "i", 160);
+    i0.ɵɵelement(16, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 165);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("AllowsNull")); });
+    i0.ɵɵelementStart(17, "div", 166);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_17_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("AllowsNull")); });
     i0.ɵɵtext(18, " Required ");
-    i0.ɵɵelement(19, "i", 160);
+    i0.ɵɵelement(19, "i", 161);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 166);
+    i0.ɵɵelementStart(20, "div", 167);
     i0.ɵɵtext(21, "Flags");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 167);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Description")); });
+    i0.ɵɵelementStart(22, "div", 168);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template_div_click_22_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.sortFieldList("Description")); });
     i0.ɵɵtext(23, " Description ");
-    i0.ɵɵelement(24, "i", 160);
+    i0.ɵɵelement(24, "i", 161);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(25, "div", 168);
-    i0.ɵɵrepeaterCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_For_27_Template, 30, 23, "div", 169, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(25, "div", 169);
+    i0.ɵɵrepeaterCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_For_27_Template, 30, 23, "div", 170, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(28, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Conditional_28_Template, 1, 0, "mj-empty-state", 170);
+    i0.ɵɵconditionalCreate(28, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Conditional_28_Template, 1, 0, "mj-empty-state", 171);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -964,26 +965,26 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.getFilteredFieldsList().length === 0 ? 28 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 29)(1, "div", 120)(2, "div", 121);
-    i0.ɵɵelement(3, "i", 122);
-    i0.ɵɵelementStart(4, "input", 123);
-    i0.ɵɵlistener("ngModelChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFieldSearch($event)); });
+    i0.ɵɵelementStart(0, "section", 30)(1, "div", 121)(2, "div", 122);
+    i0.ɵɵelement(3, "i", 123);
+    i0.ɵɵelementStart(4, "input", 124);
+    i0.ɵɵlistener("ngModelChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onFieldSearch($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 124)(6, "div", 125)(7, "button", 126);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.fieldViewMode = "grouped"); });
-    i0.ɵɵelement(8, "i", 49);
+    i0.ɵɵelementStart(5, "div", 125)(6, "div", 126)(7, "button", 127);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.fieldViewMode = "grouped"); });
+    i0.ɵɵelement(8, "i", 50);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 127);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.fieldViewMode = "list"); });
-    i0.ɵɵelement(10, "i", 128);
+    i0.ɵɵelementStart(9, "button", 128);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.fieldViewMode = "list"); });
+    i0.ɵɵelement(10, "i", 129);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_11_Template, 5, 2, "div", 129);
+    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template, 5, 2, "div", 130);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 130);
-    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_13_Template, 3, 0, "div", 131);
-    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Conditional_14_Template, 29, 22, "div", 132);
+    i0.ɵɵelementStart(12, "div", 131);
+    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_13_Template, 3, 0, "div", 132);
+    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_14_Template, 29, 22, "div", 133);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1000,10 +1001,10 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.fieldViewMode === "list" ? 14 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_9_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 202);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_9_For_5_Template_button_click_0_listener() { const d_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.setErdDepth(d_r29)); });
+    i0.ɵɵelementStart(0, "button", 203);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_9_For_5_Template_button_click_0_listener() { const d_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.setErdDepth(d_r29)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1014,31 +1015,31 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", d_r29, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 196)(1, "span", 199);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 197)(1, "span", 200);
     i0.ɵɵtext(2, "Depth:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 200);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_9_For_5_Template, 2, 4, "button", 201, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 201);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_9_For_5_Template, 2, 4, "button", 202, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(i0.ɵɵpureFunction0(0, _c0));
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 197)(1, "mj-erd-composite", 203);
-    i0.ɵɵlistener("stateChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template_mj_erd_composite_stateChange_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onERDStateChange($event)); })("openRecord", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template_mj_erd_composite_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onERDOpenRecord($event)); });
+    i0.ɵɵelementStart(0, "div", 198)(1, "mj-erd-composite", 204);
+    i0.ɵɵlistener("stateChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_11_Template_mj_erd_composite_stateChange_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onERDStateChange($event)); })("openRecord", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_11_Template_mj_erd_composite_openRecord_1_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.onERDOpenRecord($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("focusEntities", ctx_r2.entity ? i0.ɵɵpureFunction1(4, _c1, ctx_r2.entity) : i0.ɵɵpureFunction0(6, _c2))("showFilterPanel", false)("showHeader", false)("depth", ctx_r2.erdDepth);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_9_For_8_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_9_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 218);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_9_For_8_Template_span_click_0_listener() { const field_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.selectField(field_r32)); });
+    i0.ɵɵelementStart(0, "span", 219);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_9_For_8_Template_span_click_0_listener() { const field_r32 = i0.ɵɵrestoreView(_r31).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.selectField(field_r32)); });
     i0.ɵɵelement(1, "i", 20);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
@@ -1048,15 +1049,15 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", field_r32.Name, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 209)(1, "div", 213)(2, "div", 214);
-    i0.ɵɵelement(3, "i", 63);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 210)(1, "div", 214)(2, "div", 215);
+    i0.ɵɵelement(3, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 215);
+    i0.ɵɵelementStart(4, "div", 216);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 216);
-    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_9_For_8_Template, 3, 2, "span", 217, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(6, "div", 217);
+    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_9_For_8_Template, 3, 2, "span", 218, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const group_r33 = ctx.$implicit;
@@ -1065,17 +1066,17 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(group_r33.fields);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 210);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 211);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 222);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_For_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 223);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 221);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 222);
     i0.ɵɵelement(1, "i", 20);
     i0.ɵɵtext(2);
-    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_For_8_Conditional_3_Template, 1, 0, "i", 222);
+    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_For_8_Conditional_3_Template, 1, 0, "i", 223);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r34 = ctx.$implicit;
@@ -1085,15 +1086,15 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r34.bundleInAPI ? 3 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 209)(1, "div", 213)(2, "div", 219);
-    i0.ɵɵelement(3, "i", 220);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 210)(1, "div", 214)(2, "div", 220);
+    i0.ɵɵelement(3, "i", 221);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 215);
+    i0.ɵɵelementStart(4, "div", 216);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 216);
-    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_For_8_Template, 4, 3, "span", 221, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(6, "div", 217);
+    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_For_8_Template, 4, 3, "span", 222, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const group_r35 = ctx.$implicit;
@@ -1102,29 +1103,29 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(group_r35.fields);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 212);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 213);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 198)(1, "div", 204)(2, "h3", 205);
-    i0.ɵɵelement(3, "i", 206);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 199)(1, "div", 205)(2, "h3", 206);
+    i0.ɵɵelement(3, "i", 207);
     i0.ɵɵtext(4, " Outgoing (References to other entities) ");
-    i0.ɵɵelementStart(5, "span", 207);
+    i0.ɵɵelementStart(5, "span", 208);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 208);
-    i0.ɵɵrepeaterCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_9_Template, 9, 1, "div", 209, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Conditional_10_Template, 1, 0, "mj-empty-state", 210);
+    i0.ɵɵelementStart(7, "div", 209);
+    i0.ɵɵrepeaterCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_9_Template, 9, 1, "div", 210, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Conditional_10_Template, 1, 0, "mj-empty-state", 211);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 204)(12, "h3", 205);
-    i0.ɵɵelement(13, "i", 211);
+    i0.ɵɵelementStart(11, "div", 205)(12, "h3", 206);
+    i0.ɵɵelement(13, "i", 212);
     i0.ɵɵtext(14, " Incoming (Entities that reference this one) ");
-    i0.ɵɵelementStart(15, "span", 207);
+    i0.ɵɵelementStart(15, "span", 208);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 208);
-    i0.ɵɵrepeaterCreate(18, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_For_19_Template, 9, 1, "div", 209, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵconditionalCreate(20, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Conditional_20_Template, 1, 0, "mj-empty-state", 212);
+    i0.ɵɵelementStart(17, "div", 209);
+    i0.ɵɵrepeaterCreate(18, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_For_19_Template, 9, 1, "div", 210, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(20, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Conditional_20_Template, 1, 0, "mj-empty-state", 213);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -1141,23 +1142,23 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.groupedIncomingRelationships.length === 0 ? 20 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 30)(1, "div", 120)(2, "div", 194)(3, "button", 195);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.relationshipViewMode = "diagram"); });
-    i0.ɵɵelement(4, "i", 65);
+    i0.ɵɵelementStart(0, "section", 31)(1, "div", 121)(2, "div", 195)(3, "button", 196);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.relationshipViewMode = "diagram"); });
+    i0.ɵɵelement(4, "i", 66);
     i0.ɵɵtext(5, " Diagram ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "button", 195);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.relationshipViewMode = "list"); });
-    i0.ɵɵelement(7, "i", 128);
+    i0.ɵɵelementStart(6, "button", 196);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r27); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.relationshipViewMode = "list"); });
+    i0.ɵɵelement(7, "i", 129);
     i0.ɵɵtext(8, " List ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_9_Template, 6, 1, "div", 196);
+    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_9_Template, 6, 1, "div", 197);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 54);
-    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_11_Template, 2, 7, "div", 197);
-    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Conditional_12_Template, 21, 4, "div", 198);
+    i0.ɵɵelementStart(10, "div", 55);
+    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_11_Template, 2, 7, "div", 198);
+    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_12_Template, 21, 4, "div", 199);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1172,11 +1173,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.relationshipViewMode === "list" ? 12 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 223);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 224);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 232);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 233);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1184,11 +1185,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(okGroup_r36.OrganicKey.Description);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 242);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 243);
     i0.ɵɵtext(1, "Direct");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 243);
+    i0.ɵɵelementStart(2, "span", 244);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1197,11 +1198,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate2("", okGroup_r36.OrganicKey.MatchFieldNames, " \u2192 ", target_r38.Info.RelatedEntityFieldNames);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 244);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 245);
     i0.ɵɵtext(1, "Transitive");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "span", 245);
+    i0.ɵɵelementStart(2, "span", 246);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1211,22 +1212,22 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("via ", target_r38.Info.TransitiveObjectName);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 235);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Template_div_click_0_listener() { const target_r38 = i0.ɵɵrestoreView(_r37).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.NavigateToEntityByID(target_r38.Info.RelatedEntityID)); });
-    i0.ɵɵelementStart(1, "div", 214);
-    i0.ɵɵelement(2, "i", 63);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 236)(4, "div", 237);
-    i0.ɵɵelement(5, "i", 238);
-    i0.ɵɵelementStart(6, "span", 239);
+    i0.ɵɵelementStart(0, "div", 236);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Template_div_click_0_listener() { const target_r38 = i0.ɵɵrestoreView(_r37).$implicit; const ctx_r2 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r2.NavigateToEntityByID(target_r38.Info.RelatedEntityID)); });
+    i0.ɵɵelementStart(1, "div", 215);
+    i0.ɵɵelement(2, "i", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 237)(4, "div", 238);
+    i0.ɵɵelement(5, "i", 239);
+    i0.ɵɵelementStart(6, "span", 240);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(8, "i", 240);
+    i0.ɵɵelement(8, "i", 241);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 241);
-    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Conditional_10_Template, 4, 2)(11, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Conditional_11_Template, 4, 2);
+    i0.ɵɵelementStart(9, "div", 242);
+    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Conditional_10_Template, 4, 2)(11, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Conditional_11_Template, 4, 2);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const target_r38 = ctx.$implicit;
@@ -1237,20 +1238,20 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(target_r38.Info.IsDirectMatch ? 10 : 11);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 225)(1, "div", 226)(2, "div", 227);
-    i0.ɵɵelement(3, "i", 228);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 226)(1, "div", 227)(2, "div", 228);
+    i0.ɵɵelement(3, "i", 229);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 229)(6, "span", 230);
+    i0.ɵɵelementStart(5, "div", 230)(6, "span", 231);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 231);
+    i0.ɵɵelementStart(8, "span", 232);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_Conditional_10_Template, 2, 1, "p", 232);
-    i0.ɵɵelementStart(11, "div", 233);
-    i0.ɵɵrepeaterCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_For_13_Template, 12, 4, "div", 234, _forTrack3);
+    i0.ɵɵconditionalCreate(10, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_Conditional_10_Template, 2, 1, "p", 233);
+    i0.ɵɵelementStart(11, "div", 234);
+    i0.ɵɵrepeaterCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_For_13_Template, 12, 4, "div", 235, _forTrack3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const okGroup_r36 = ctx.$implicit;
@@ -1265,15 +1266,15 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(okGroup_r36.RelatedEntities);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 204)(1, "h3", 205);
-    i0.ɵɵelement(2, "i", 206);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 205)(1, "h3", 206);
+    i0.ɵɵelement(2, "i", 207);
     i0.ɵɵtext(3, " Outgoing (Matches from this entity) ");
-    i0.ɵɵelementStart(4, "span", 207);
+    i0.ɵɵelementStart(4, "span", 208);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 224);
-    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_For_8_Template, 14, 4, "div", 225, _forTrack2);
+    i0.ɵɵelementStart(6, "div", 225);
+    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_For_8_Template, 14, 4, "div", 226, _forTrack2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -1282,11 +1283,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.organicKeysOutgoing);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 249)(1, "span", 250);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 250)(1, "span", 251);
     i0.ɵɵtext(2, "Matched via:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 251);
+    i0.ɵɵelementStart(3, "span", 252);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1294,11 +1295,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(incoming_r40.RelatedEntityConfig.RelatedEntityFieldNames);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 249)(1, "span", 250);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 250)(1, "span", 251);
     i0.ɵɵtext(2, "Bridge:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 251);
+    i0.ɵɵelementStart(3, "span", 252);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1306,33 +1307,33 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(incoming_r40.RelatedEntityConfig.TransitiveObjectName);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 247);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Template_div_click_0_listener() { const incoming_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntityByID(incoming_r40.SourceEntityID)); });
-    i0.ɵɵelementStart(1, "div", 226)(2, "div", 227)(3, "div", 219);
-    i0.ɵɵelement(4, "i", 220);
+    i0.ɵɵelementStart(0, "div", 248);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Template_div_click_0_listener() { const incoming_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntityByID(incoming_r40.SourceEntityID)); });
+    i0.ɵɵelementStart(1, "div", 227)(2, "div", 228)(3, "div", 220);
+    i0.ɵɵelement(4, "i", 221);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(5, "i", 238);
+    i0.ɵɵelement(5, "i", 239);
     i0.ɵɵtext(6);
-    i0.ɵɵelement(7, "i", 240);
+    i0.ɵɵelement(7, "i", 241);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 229)(9, "span", 248);
+    i0.ɵɵelementStart(8, "div", 230)(9, "span", 249);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(11, "div", 249)(12, "span", 250);
+    i0.ɵɵelementStart(11, "div", 250)(12, "span", 251);
     i0.ɵɵtext(13, "Key:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 251);
+    i0.ɵɵelementStart(14, "span", 252);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 231);
+    i0.ɵɵelementStart(16, "span", 232);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "span", 230);
+    i0.ɵɵelementStart(18, "span", 231);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(20, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Conditional_20_Template, 5, 1, "div", 249)(21, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Conditional_21_Template, 5, 1, "div", 249);
+    i0.ɵɵconditionalCreate(20, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Conditional_20_Template, 5, 1, "div", 250)(21, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Conditional_21_Template, 5, 1, "div", 250);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const incoming_r40 = ctx.$implicit;
@@ -1353,15 +1354,15 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(incoming_r40.RelatedEntityConfig.IsDirectMatch ? 20 : 21);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 204)(1, "h3", 205);
-    i0.ɵɵelement(2, "i", 211);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 205)(1, "h3", 206);
+    i0.ɵɵelement(2, "i", 212);
     i0.ɵɵtext(3, " Incoming (Other entities matching to this one) ");
-    i0.ɵɵelementStart(4, "span", 207);
+    i0.ɵɵelementStart(4, "span", 208);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 224);
-    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_For_8_Template, 22, 12, "div", 246, _forTrack4);
+    i0.ɵɵelementStart(6, "div", 225);
+    i0.ɵɵrepeaterCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_For_8_Template, 22, 12, "div", 247, _forTrack4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
@@ -1370,71 +1371,71 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.organicKeysIncoming);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_0_Template, 9, 1, "div", 204);
-    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Conditional_1_Template, 9, 1, "div", 204);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_0_Template, 9, 1, "div", 205);
+    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Conditional_1_Template, 9, 1, "div", 205);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r2.organicKeysOutgoing.length > 0 ? 0 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.organicKeysIncoming.length > 0 ? 1 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 31)(1, "div", 54);
-    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_2_Template, 1, 0, "mj-empty-state", 223)(3, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Conditional_3_Template, 2, 2);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 32)(1, "div", 55);
+    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_2_Template, 1, 0, "mj-empty-state", 224)(3, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_3_Template, 2, 2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.organicKeysOutgoing.length === 0 && ctx_r2.organicKeysIncoming.length === 0 ? 2 : 3);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 264);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 265);
     i0.ɵɵtext(1, "R");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 265);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 266);
     i0.ɵɵtext(1, "C");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 266);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 267);
     i0.ɵɵtext(1, "U");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 267);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 268);
     i0.ɵɵtext(1, "D");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 268);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 269);
     i0.ɵɵtext(1, "None");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "tr")(1, "td", 261);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "tr")(1, "td", 262);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "td", 254);
-    i0.ɵɵelement(4, "i", 262);
+    i0.ɵɵelementStart(3, "td", 255);
+    i0.ɵɵelement(4, "i", 263);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "td", 254);
-    i0.ɵɵelement(6, "i", 262);
+    i0.ɵɵelementStart(5, "td", 255);
+    i0.ɵɵelement(6, "i", 263);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "td", 254);
-    i0.ɵɵelement(8, "i", 262);
+    i0.ɵɵelementStart(7, "td", 255);
+    i0.ɵɵelement(8, "i", 263);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "td", 254);
-    i0.ɵɵelement(10, "i", 262);
+    i0.ɵɵelementStart(9, "td", 255);
+    i0.ɵɵelement(10, "i", 263);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "td", 263);
-    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_12_Template, 2, 0, "span", 264);
-    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_13_Template, 2, 0, "span", 265);
-    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_14_Template, 2, 0, "span", 266);
-    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_15_Template, 2, 0, "span", 267);
-    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Conditional_16_Template, 2, 0, "span", 268);
+    i0.ɵɵelementStart(11, "td", 264);
+    i0.ɵɵconditionalCreate(12, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_12_Template, 2, 0, "span", 265);
+    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_13_Template, 2, 0, "span", 266);
+    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_14_Template, 2, 0, "span", 267);
+    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_15_Template, 2, 0, "span", 268);
+    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Conditional_16_Template, 2, 0, "span", 269);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const perm_r41 = ctx.$implicit;
@@ -1460,69 +1461,69 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Templ
     i0.ɵɵadvance();
     i0.ɵɵconditional(!perm_r41.ReadRLSFilterID && !perm_r41.CreateRLSFilterID && !perm_r41.UpdateRLSFilterID && !perm_r41.DeleteRLSFilterID ? 16 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 255);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 256);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 32)(1, "div", 54)(2, "div", 252)(3, "table", 253)(4, "thead")(5, "tr")(6, "th");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 33)(1, "div", 55)(2, "div", 253)(3, "table", 254)(4, "thead")(5, "tr")(6, "th");
     i0.ɵɵtext(7, "Role");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "th", 254);
+    i0.ɵɵelementStart(8, "th", 255);
     i0.ɵɵtext(9, "Create");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 254);
+    i0.ɵɵelementStart(10, "th", 255);
     i0.ɵɵtext(11, "Read");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "th", 254);
+    i0.ɵɵelementStart(12, "th", 255);
     i0.ɵɵtext(13, "Update");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "th", 254);
+    i0.ɵɵelementStart(14, "th", 255);
     i0.ɵɵtext(15, "Delete");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(16, "th");
     i0.ɵɵtext(17, "RLS");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(18, "tbody");
-    i0.ɵɵrepeaterCreate(19, MJEntityFormComponentExtended_Conditional_0_Conditional_55_For_20_Template, 17, 10, "tr", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(19, MJEntityFormComponentExtended_Conditional_0_Conditional_56_For_20_Template, 17, 10, "tr", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(21, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Conditional_21_Template, 1, 0, "mj-empty-state", 255);
+    i0.ɵɵconditionalCreate(21, MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_21_Template, 1, 0, "mj-empty-state", 256);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 256)(23, "h3", 70);
-    i0.ɵɵelement(24, "i", 257);
+    i0.ɵɵelementStart(22, "div", 257)(23, "h3", 71);
+    i0.ɵɵelement(24, "i", 258);
     i0.ɵɵtext(25, " API Capabilities ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 258)(27, "div", 259);
-    i0.ɵɵelement(28, "i", 260);
+    i0.ɵɵelementStart(26, "div", 259)(27, "div", 260);
+    i0.ɵɵelement(28, "i", 261);
     i0.ɵɵelementStart(29, "span");
     i0.ɵɵtext(30, "Include in API");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(31, "div", 259);
-    i0.ɵɵelement(32, "i", 260);
+    i0.ɵɵelementStart(31, "div", 260);
+    i0.ɵɵelement(32, "i", 261);
     i0.ɵɵelementStart(33, "span");
     i0.ɵɵtext(34, "Allow All Rows");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 259);
-    i0.ɵɵelement(36, "i", 260);
+    i0.ɵɵelementStart(35, "div", 260);
+    i0.ɵɵelement(36, "i", 261);
     i0.ɵɵelementStart(37, "span");
     i0.ɵɵtext(38, "Allow Create");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 259);
-    i0.ɵɵelement(40, "i", 260);
+    i0.ɵɵelementStart(39, "div", 260);
+    i0.ɵɵelement(40, "i", 261);
     i0.ɵɵelementStart(41, "span");
     i0.ɵɵtext(42, "Allow Update");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(43, "div", 259);
-    i0.ɵɵelement(44, "i", 260);
+    i0.ɵɵelementStart(43, "div", 260);
+    i0.ɵɵelement(44, "i", 261);
     i0.ɵɵelementStart(45, "span");
     i0.ɵɵtext(46, "Allow Delete");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "div", 259);
-    i0.ɵɵelement(48, "i", 260);
+    i0.ɵɵelementStart(47, "div", 260);
+    i0.ɵɵelement(48, "i", 261);
     i0.ɵɵelementStart(49, "span");
     i0.ɵɵtext(50, "User Search");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(51, "div", 259);
-    i0.ɵɵelement(52, "i", 260);
+    i0.ɵɵelementStart(51, "div", 260);
+    i0.ɵɵelement(52, "i", 261);
     i0.ɵɵelementStart(53, "span");
     i0.ɵɵtext(54, "Custom Resolver");
     i0.ɵɵelementEnd()()()()()();
@@ -1561,122 +1562,122 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.entity.CustomResolverAPI ? "fa-check" : "fa-xmark");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r42 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-entity-viewer", 271);
-    i0.ɵɵlistener("RecordOpened", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnRecordOpened($event)); })("CreateRecordRequested", function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template_mj_entity_viewer_CreateRecordRequested_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnAddRequested()); });
+    i0.ɵɵelementStart(0, "mj-entity-viewer", 272);
+    i0.ɵɵlistener("RecordOpened", function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_2_Template_mj_entity_viewer_RecordOpened_0_listener($event) { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnRecordOpened($event)); })("CreateRecordRequested", function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_2_Template_mj_entity_viewer_CreateRecordRequested_0_listener() { i0.ɵɵrestoreView(_r42); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.OnAddRequested()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("Entity", ctx_r2.entity)("Provider", ctx_r2.Provider);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_56_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 33)(1, "div", 269);
-    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_56_Conditional_2_Template, 1, 2, "mj-entity-viewer", 270);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 34)(1, "div", 270);
+    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_2_Template, 1, 2, "mj-entity-viewer", 271);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(ctx_r2.entity ? 2 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 275);
-    i0.ɵɵelement(1, "i", 257);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 276);
+    i0.ɵɵelement(1, "i", 258);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "API Create");
     i0.ɵɵelementEnd()();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 275);
-    i0.ɵɵelement(1, "i", 282);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 276);
+    i0.ɵɵelement(1, "i", 283);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Record Changes");
     i0.ɵɵelementEnd()();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 275);
-    i0.ɵɵelement(1, "i", 42);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 276);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Access Audit");
     i0.ɵɵelementEnd()();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 34)(1, "div", 54)(2, "div", 272)(3, "div", 273)(4, "h4");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 35)(1, "div", 55)(2, "div", 273)(3, "div", 274)(4, "h4");
     i0.ɵɵtext(5, "Data Sources");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 274)(7, "div", 275);
-    i0.ɵɵelement(8, "i", 276);
+    i0.ɵɵelementStart(6, "div", 275)(7, "div", 276);
+    i0.ɵɵelement(8, "i", 277);
     i0.ɵɵelementStart(9, "span");
     i0.ɵɵtext(10, "Manual Entry");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_11_Template, 4, 0, "div", 275);
+    i0.ɵɵconditionalCreate(11, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_11_Template, 4, 0, "div", 276);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 277);
-    i0.ɵɵelement(13, "i", 63);
+    i0.ɵɵelementStart(12, "div", 278);
+    i0.ɵɵelement(13, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "div", 278)(15, "div", 279);
+    i0.ɵɵelementStart(14, "div", 279)(15, "div", 280);
     i0.ɵɵelement(16, "i");
     i0.ɵɵelementStart(17, "span");
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(19, "div", 277);
-    i0.ɵɵelement(20, "i", 63);
+    i0.ɵɵelementStart(19, "div", 278);
+    i0.ɵɵelement(20, "i", 64);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "div", 280)(22, "h4");
+    i0.ɵɵelementStart(21, "div", 281)(22, "h4");
     i0.ɵɵtext(23, "Data Sinks");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 274);
-    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_25_Template, 4, 0, "div", 275);
-    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Conditional_26_Template, 4, 0, "div", 275);
-    i0.ɵɵelementStart(27, "div", 275);
+    i0.ɵɵelementStart(24, "div", 275);
+    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_25_Template, 4, 0, "div", 276);
+    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_26_Template, 4, 0, "div", 276);
+    i0.ɵɵelementStart(27, "div", 276);
     i0.ɵɵelement(28, "i", 20);
     i0.ɵɵelementStart(29, "span");
     i0.ɵɵtext(30);
     i0.ɵɵelementEnd()()()()();
-    i0.ɵɵelementStart(31, "div", 281)(32, "h3", 70);
-    i0.ɵɵelement(33, "i", 282);
+    i0.ɵɵelementStart(31, "div", 282)(32, "h3", 71);
+    i0.ɵɵelement(33, "i", 283);
     i0.ɵɵtext(34, " Tracking Configuration ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "div", 283)(36, "div", 284);
-    i0.ɵɵelement(37, "i", 260);
+    i0.ɵɵelementStart(35, "div", 284)(36, "div", 285);
+    i0.ɵɵelement(37, "i", 261);
     i0.ɵɵelementStart(38, "span");
     i0.ɵɵtext(39, "Track Record Changes");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(40, "div", 284);
-    i0.ɵɵelement(41, "i", 260);
+    i0.ɵɵelementStart(40, "div", 285);
+    i0.ɵɵelement(41, "i", 261);
     i0.ɵɵelementStart(42, "span");
     i0.ɵɵtext(43, "Audit Record Access");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 284);
-    i0.ɵɵelement(45, "i", 260);
+    i0.ɵɵelementStart(44, "div", 285);
+    i0.ɵɵelement(45, "i", 261);
     i0.ɵɵelementStart(46, "span");
     i0.ɵɵtext(47, "Audit View Runs");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(48, "div", 284)(49, "span", 285);
+    i0.ɵɵelementStart(48, "div", 285)(49, "span", 286);
     i0.ɵɵtext(50, "Delete Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(51, "span", 286);
+    i0.ɵɵelementStart(51, "span", 287);
     i0.ɵɵtext(52);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(53, "div", 284);
-    i0.ɵɵelement(54, "i", 260);
+    i0.ɵɵelementStart(53, "div", 285);
+    i0.ɵɵelement(54, "i", 261);
     i0.ɵɵelementStart(55, "span");
     i0.ɵɵtext(56, "Cascade Deletes");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(57, "div", 281)(58, "h3", 70);
-    i0.ɵɵelement(59, "i", 287);
+    i0.ɵɵelementStart(57, "div", 282)(58, "h3", 71);
+    i0.ɵɵelement(59, "i", 288);
     i0.ɵɵtext(60, " Geocoding ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "p", 288);
+    i0.ɵɵelementStart(61, "p", 289);
     i0.ɵɵtext(62, "When enabled, CodeGen auto-detects geo fields and generates map view support");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(63, "div", 283)(64, "div", 284);
-    i0.ɵɵelement(65, "i", 260);
+    i0.ɵɵelementStart(63, "div", 284)(64, "div", 285);
+    i0.ɵɵelement(65, "i", 261);
     i0.ɵɵelementStart(66, "span");
     i0.ɵɵtext(67, "Supports Geocoding");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(68, "div", 284);
-    i0.ɵɵelement(69, "i", 260);
+    i0.ɵɵelementStart(68, "div", 285);
+    i0.ɵɵelement(69, "i", 261);
     i0.ɵɵelementStart(70, "span");
     i0.ɵɵtext(71, "Auto-Detect Geocoding");
     i0.ɵɵelementEnd()()()()()();
@@ -1721,7 +1722,7 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_57_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngClass", ctx_r2.entity.AutoUpdateSupportsGeoCoding ? "fa-check" : "fa-xmark");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " This entity has change tracking enabled. All modifications to records are stored in the ");
     i0.ɵɵelementStart(2, "code");
@@ -1730,7 +1731,7 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_
     i0.ɵɵtext(4, " table, including the user who made the change, timestamp, and the before/after values. ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " This entity does not have change tracking enabled. To enable it, set ");
     i0.ɵɵelementStart(2, "code");
@@ -1743,19 +1744,19 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_
     i0.ɵɵtext(7, " in the entity metadata. ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_17_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_17_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "li")(1, "code");
     i0.ɵɵtext(2, "__mj_DeletedAt");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(3, " - Soft delete timestamp (when applicable) ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 293)(1, "h4");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 294)(1, "h4");
     i0.ɵɵelement(2, "i", 22);
     i0.ɵɵtext(3, " Audit Fields ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "ul", 295)(5, "li")(6, "code");
+    i0.ɵɵelementStart(4, "ul", 296)(5, "li")(6, "code");
     i0.ɵɵtext(7, "__mj_CreatedAt");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(8, " - Record creation timestamp ");
@@ -1765,30 +1766,30 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_
     i0.ɵɵelementEnd();
     i0.ɵɵtext(12, " - Last modification timestamp ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_17_Conditional_13_Template, 4, 0, "li");
+    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_17_Conditional_13_Template, 4, 0, "li");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(13);
     i0.ɵɵconditional(ctx_r2.entity.DeleteType === "Soft" ? 13 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 35)(1, "div", 54)(2, "div", 289)(3, "div", 290);
-    i0.ɵɵelement(4, "i", 260);
-    i0.ɵɵelementStart(5, "div", 291)(6, "strong");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 36)(1, "div", 55)(2, "div", 290)(3, "div", 291);
+    i0.ɵɵelement(4, "i", 261);
+    i0.ɵɵelementStart(5, "div", 292)(6, "strong");
     i0.ɵɵtext(7, "Record Change Tracking");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(8, "span");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(10, "div", 292)(11, "div", 293)(12, "h4");
-    i0.ɵɵelement(13, "i", 294);
+    i0.ɵɵelementStart(10, "div", 293)(11, "div", 294)(12, "h4");
+    i0.ɵɵelement(13, "i", 295);
     i0.ɵɵtext(14, " About Change Tracking ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_15_Template, 5, 0, "p");
-    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_16_Template, 8, 0, "p");
+    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_15_Template, 5, 0, "p");
+    i0.ɵɵconditionalCreate(16, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_16_Template, 8, 0, "p");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Conditional_17_Template, 14, 1, "div", 293);
+    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_17_Template, 14, 1, "div", 294);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -1805,42 +1806,42 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_58_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.entity.TrackRecordChanges ? 17 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 313);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 314);
     i0.ɵɵtext(1, " Yes \u2014 read-only view ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 314);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 315);
     i0.ɵɵtext(1, " No ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r44 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 315);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.ParentChain[0])); });
+    i0.ɵɵelementStart(0, "span", 316);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_15_Template_span_click_0_listener() { i0.ɵɵrestoreView(_r44); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.ParentChain[0])); });
     i0.ɵɵtext(1);
-    i0.ɵɵelement(2, "i", 63);
+    i0.ɵɵelement(2, "i", 64);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.ParentChain[0] == null ? null : ctx_r2.ParentChain[0].Name, " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 312);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 313);
     i0.ɵɵtext(1, "None");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Full Inheritance Chain");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 286);
+    i0.ɵɵelementStart(3, "span", 287);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "div", 310)(6, "span", 285);
+    i0.ɵɵelementStart(5, "div", 311)(6, "span", 286);
     i0.ɵɵtext(7, "Inherited Fields");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 286);
+    i0.ɵɵelementStart(8, "span", 287);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1850,96 +1851,96 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate2("", ctx_r2.InheritedFieldCount, " field", ctx_r2.InheritedFieldCount !== 1 ? "s" : "");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_18_For_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_18_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r45 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 316);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_18_For_5_Template_span_click_0_listener() { const child_r46 = i0.ɵɵrestoreView(_r45).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(child_r46)); });
+    i0.ɵɵelementStart(0, "span", 317);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_18_For_5_Template_span_click_0_listener() { const child_r46 = i0.ɵɵrestoreView(_r45).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(child_r46)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(2);
 } if (rf & 2) {
     const child_r46 = ctx.$implicit;
-    const ɵ$index_1413_r47 = ctx.$index;
-    const ɵ$count_1413_r48 = ctx.$count;
+    const ɵ$index_1415_r47 = ctx.$index;
+    const ɵ$count_1415_r48 = ctx.$count;
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(child_r46.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ɵ$index_1413_r47 === ɵ$count_1413_r48 - 1 ? "" : ", ", " ");
+    i0.ɵɵtextInterpolate1("", ɵ$index_1415_r47 === ɵ$count_1415_r48 - 1 ? "" : ", ", " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Child Types");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 286);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_18_For_5_Template, 3, 2, null, null, _forTrack0);
+    i0.ɵɵelementStart(3, "span", 287);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_18_For_5_Template, 3, 2, null, null, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r2.ChildEntities);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_19_For_5_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_19_For_5_Template(rf, ctx) { if (rf & 1) {
     const _r49 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "span", 316);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_19_For_5_Template_span_click_0_listener() { const sibling_r50 = i0.ɵɵrestoreView(_r49).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(sibling_r50)); });
+    i0.ɵɵelementStart(0, "span", 317);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_19_For_5_Template_span_click_0_listener() { const sibling_r50 = i0.ɵɵrestoreView(_r49).$implicit; const ctx_r2 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(sibling_r50)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(2);
 } if (rf & 2) {
     const sibling_r50 = ctx.$implicit;
-    const ɵ$index_1426_r51 = ctx.$index;
-    const ɵ$count_1426_r52 = ctx.$count;
+    const ɵ$index_1428_r51 = ctx.$index;
+    const ɵ$count_1428_r52 = ctx.$count;
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(sibling_r50.Name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1("", ɵ$index_1426_r51 === ɵ$count_1426_r52 - 1 ? "" : ", ", " ");
+    i0.ɵɵtextInterpolate1("", ɵ$index_1428_r51 === ɵ$count_1428_r52 - 1 ? "" : ", ", " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Sibling Types");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 286);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_19_For_5_Template, 3, 2, null, null, _forTrack0);
+    i0.ɵɵelementStart(3, "span", 287);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_19_For_5_Template, 3, 2, null, null, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r2.SiblingEntities);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 317);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 318);
     i0.ɵɵtext(1, " Enforced \u2014 a parent record can only be one child type ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 312);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 313);
     i0.ɵɵtext(1, "N/A");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 296)(1, "h3", 70);
-    i0.ɵɵelement(2, "i", 49);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 297)(1, "h3", 71);
+    i0.ɵɵelement(2, "i", 50);
     i0.ɵɵtext(3, " Type Relationship (IS-A) ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 283)(5, "div", 310)(6, "span", 285);
+    i0.ɵɵelementStart(4, "div", 284)(5, "div", 311)(6, "span", 286);
     i0.ɵɵtext(7, "Virtual Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 286);
-    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_9_Template, 2, 0)(10, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_10_Template, 2, 0);
+    i0.ɵɵelementStart(8, "span", 287);
+    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_9_Template, 2, 0)(10, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_10_Template, 2, 0);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 310)(12, "span", 285);
+    i0.ɵɵelementStart(11, "div", 311)(12, "span", 286);
     i0.ɵɵtext(13, "Parent Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 286);
-    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_15_Template, 3, 1, "span", 311)(16, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_16_Template, 2, 0, "span", 312);
+    i0.ɵɵelementStart(14, "span", 287);
+    i0.ɵɵconditionalCreate(15, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_15_Template, 3, 1, "span", 312)(16, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_16_Template, 2, 0, "span", 313);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_17_Template, 10, 3);
-    i0.ɵɵconditionalCreate(18, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_18_Template, 6, 0, "div", 310);
-    i0.ɵɵconditionalCreate(19, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_19_Template, 6, 0, "div", 310);
-    i0.ɵɵelementStart(20, "div", 310)(21, "span", 285);
+    i0.ɵɵconditionalCreate(17, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_17_Template, 10, 3);
+    i0.ɵɵconditionalCreate(18, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_18_Template, 6, 0, "div", 311);
+    i0.ɵɵconditionalCreate(19, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_19_Template, 6, 0, "div", 311);
+    i0.ɵɵelementStart(20, "div", 311)(21, "span", 286);
     i0.ɵɵtext(22, "Disjoint Subtypes");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 286);
-    i0.ɵɵconditionalCreate(24, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_24_Template, 2, 0)(25, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Conditional_25_Template, 2, 0, "span", 312);
+    i0.ɵɵelementStart(23, "span", 287);
+    i0.ɵɵconditionalCreate(24, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_24_Template, 2, 0)(25, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Conditional_25_Template, 2, 0, "span", 313);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -1956,9 +1957,9 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(5);
     i0.ɵɵconditional(ctx_r2.IsParentType || ctx_r2.IsChildType ? 24 : 25);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 320);
-    i0.ɵɵelement(1, "mj-code-editor", 323);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 321);
+    i0.ɵɵelement(1, "mj-code-editor", 324);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const setting_r53 = i0.ɵɵnextContext().$implicit;
@@ -1966,8 +1967,8 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", ctx_r2.formatJsonValue(setting_r53.Value))("readonly", true)("lineWrapping", true);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 321);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 322);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1975,8 +1976,8 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(setting_r53.Value);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 322);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 323);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1984,12 +1985,12 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(setting_r53.Comments);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 318)(1, "div", 319);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 319)(1, "div", 320);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_3_Template, 2, 3, "div", 320)(4, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_4_Template, 2, 1, "div", 321);
-    i0.ɵɵconditionalCreate(5, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Conditional_5_Template, 2, 1, "div", 322);
+    i0.ɵɵconditionalCreate(3, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_3_Template, 2, 3, "div", 321)(4, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_4_Template, 2, 1, "div", 322);
+    i0.ɵɵconditionalCreate(5, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Conditional_5_Template, 2, 1, "div", 323);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const setting_r53 = ctx.$implicit;
@@ -2001,23 +2002,23 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(setting_r53.Comments ? 5 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 299);
-    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_For_2_Template, 6, 3, "div", 318, i0.ɵɵrepeaterTrackByIdentity);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 300);
+    i0.ɵɵrepeaterCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_For_2_Template, 6, 3, "div", 319, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.entity.Settings);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 300);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 301);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Catalog");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 326);
+    i0.ɵɵelementStart(3, "span", 327);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2025,11 +2026,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.FullTextCatalog);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Index");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 326);
+    i0.ɵɵelementStart(3, "span", 327);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2037,11 +2038,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.FullTextIndex);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Function");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 326);
+    i0.ɵɵelementStart(3, "span", 327);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2049,17 +2050,17 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.FullTextSearchFunction);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 302)(1, "div", 310)(2, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 303)(1, "div", 311)(2, "span", 286);
     i0.ɵɵtext(3, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 324);
-    i0.ɵɵelement(5, "i", 325);
+    i0.ɵɵelementStart(4, "span", 325);
+    i0.ɵɵelement(5, "i", 326);
     i0.ɵɵtext(6, " Enabled ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_7_Template, 5, 1, "div", 310);
-    i0.ɵɵconditionalCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_8_Template, 5, 1, "div", 310);
-    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Conditional_9_Template, 5, 1, "div", 310);
+    i0.ɵɵconditionalCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_7_Template, 5, 1, "div", 311);
+    i0.ɵɵconditionalCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_8_Template, 5, 1, "div", 311);
+    i0.ɵɵconditionalCreate(9, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Conditional_9_Template, 5, 1, "div", 311);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
@@ -2070,26 +2071,26 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.entity.FullTextSearchFunction ? 9 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 303);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 304);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r54 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 328);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r54); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.StartEditMode()); });
-    i0.ɵɵelement(1, "i", 329);
+    i0.ɵɵelementStart(0, "button", 329);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r54); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.StartEditMode()); });
+    i0.ɵɵelement(1, "i", 330);
     i0.ɵɵtext(2, " Edit ");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r55 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 330);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r55); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SaveCloneConfig()); });
-    i0.ɵɵelement(1, "i", 331);
+    i0.ɵɵelementStart(0, "button", 331);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r55); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.SaveCloneConfig()); });
+    i0.ɵɵelement(1, "i", 332);
     i0.ɵɵtext(2, " Save ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 332);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r55); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.CancelEdit()); });
+    i0.ɵɵelementStart(3, "button", 333);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_2_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r55); const ctx_r2 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r2.CancelEdit()); });
     i0.ɵɵtext(4, "Cancel");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2098,17 +2099,17 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", ctx_r2.IsSavingCloneConfig);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 306);
-    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_1_Template, 3, 0, "button", 327)(2, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Conditional_2_Template, 5, 2);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 307);
+    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_1_Template, 3, 0, "button", 328)(2, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Conditional_2_Template, 5, 2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.EditMode ? 1 : 2);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 307);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 308);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2116,11 +2117,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.CloneConfigSaveError);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Sample Count");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 286);
+    i0.ɵɵelementStart(3, "span", 287);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2128,11 +2129,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.RowsToPackSampleCount);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_39_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 310)(1, "span", 285);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 311)(1, "span", 286);
     i0.ɵɵtext(2, "Sample Method");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 286);
+    i0.ɵɵelementStart(3, "span", 287);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2140,53 +2141,53 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.entity.RowsToPackSampleMethod);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Template(rf, ctx) { if (rf & 1) {
     const _r43 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 36)(1, "div", 54);
-    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_2_Template, 26, 6, "div", 296);
-    i0.ɵɵelementStart(3, "div", 297)(4, "h3", 70);
-    i0.ɵɵelement(5, "i", 298);
+    i0.ɵɵelementStart(0, "section", 37)(1, "div", 55);
+    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_2_Template, 26, 6, "div", 297);
+    i0.ɵɵelementStart(3, "div", 298)(4, "h3", 71);
+    i0.ɵɵelement(5, "i", 299);
     i0.ɵɵtext(6, " Entity Settings ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_7_Template, 3, 0, "div", 299);
-    i0.ɵɵconditionalCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_8_Template, 1, 0, "mj-empty-state", 300);
+    i0.ɵɵconditionalCreate(7, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_7_Template, 3, 0, "div", 300);
+    i0.ɵɵconditionalCreate(8, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_8_Template, 1, 0, "mj-empty-state", 301);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "div", 297)(10, "h3", 70);
-    i0.ɵɵelement(11, "i", 301);
+    i0.ɵɵelementStart(9, "div", 298)(10, "h3", 71);
+    i0.ɵɵelement(11, "i", 302);
     i0.ɵɵtext(12, " Full-Text Search ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_13_Template, 10, 3, "div", 302);
-    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_14_Template, 1, 0, "mj-empty-state", 303);
+    i0.ɵɵconditionalCreate(13, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_13_Template, 10, 3, "div", 303);
+    i0.ɵɵconditionalCreate(14, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_14_Template, 1, 0, "mj-empty-state", 304);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "div", 297)(16, "h3", 70);
+    i0.ɵɵelementStart(15, "div", 298)(16, "h3", 71);
     i0.ɵɵelement(17, "i", 17);
     i0.ɵɵtext(18, " Form chrome ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "mj-entity-form-chrome-editor", 304);
-    i0.ɵɵlistener("FormConfigChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template_mj_entity_form_chrome_editor_FormConfigChange_19_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnFormChromeConfigChange($event)); });
+    i0.ɵɵelementStart(19, "mj-entity-form-chrome-editor", 305);
+    i0.ɵɵlistener("FormConfigChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Template_mj_entity_form_chrome_editor_FormConfigChange_19_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnFormChromeConfigChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 297)(21, "div", 305)(22, "h3", 70);
-    i0.ɵɵelement(23, "i", 48);
+    i0.ɵɵelementStart(20, "div", 298)(21, "div", 306)(22, "h3", 71);
+    i0.ɵɵelement(23, "i", 49);
     i0.ɵɵtext(24, " Record cloning ");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_25_Template, 3, 1, "div", 306);
+    i0.ɵɵconditionalCreate(25, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_25_Template, 3, 1, "div", 307);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_26_Template, 2, 1, "p", 307);
-    i0.ɵɵelementStart(27, "mj-entity-clone-config-editor", 308);
-    i0.ɵɵlistener("CloneConfigChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template_mj_entity_clone_config_editor_CloneConfigChange_27_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnCloneConfigChange($event)); });
+    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_26_Template, 2, 1, "p", 308);
+    i0.ɵɵelementStart(27, "mj-entity-clone-config-editor", 309);
+    i0.ɵɵlistener("CloneConfigChange", function MJEntityFormComponentExtended_Conditional_0_Conditional_60_Template_mj_entity_clone_config_editor_CloneConfigChange_27_listener($event) { i0.ɵɵrestoreView(_r43); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnCloneConfigChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(28, "div", 297)(29, "h3", 70);
-    i0.ɵɵelement(30, "i", 309);
+    i0.ɵɵelementStart(28, "div", 298)(29, "h3", 71);
+    i0.ɵɵelement(30, "i", 310);
     i0.ɵɵtext(31, " Schema Packaging ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "div", 283)(33, "div", 310)(34, "span", 285);
+    i0.ɵɵelementStart(32, "div", 284)(33, "div", 311)(34, "span", 286);
     i0.ɵɵtext(35, "Rows to Pack");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(36, "span", 286);
+    i0.ɵɵelementStart(36, "span", 287);
     i0.ɵɵtext(37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(38, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_38_Template, 5, 1, "div", 310);
-    i0.ɵɵconditionalCreate(39, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Conditional_39_Template, 5, 1, "div", 310);
+    i0.ɵɵconditionalCreate(38, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_38_Template, 5, 1, "div", 311);
+    i0.ɵɵconditionalCreate(39, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Conditional_39_Template, 5, 1, "div", 311);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -2215,18 +2216,18 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.entity.RowsToPackSampleMethod ? 39 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_62_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_63_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h3");
     i0.ɵɵtext(1, "Field Details");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_64_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "h3");
     i0.ɵɵtext(1, "Relationship Details");
     i0.ɵɵelementEnd();
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 335);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 336);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2234,11 +2235,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r2.selectedField.Description);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 337)(1, "span", 338);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 338)(1, "span", 339);
     i0.ɵɵtext(2, "Default");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 339);
+    i0.ɵɵelementStart(3, "span", 340);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2246,24 +2247,24 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.selectedField.DefaultValue);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r56 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 341)(1, "h5");
-    i0.ɵɵelement(2, "i", 44);
+    i0.ɵɵelementStart(0, "div", 342)(1, "h5");
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵtext(3, " IS-A Inherited Field ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 336)(5, "div", 337)(6, "span", 338);
+    i0.ɵɵelementStart(4, "div", 337)(5, "div", 338)(6, "span", 339);
     i0.ɵɵtext(7, "Source Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 342);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_27_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r56); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.ParentChain[0])); });
+    i0.ɵɵelementStart(8, "span", 343);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_27_Template_span_click_8_listener() { i0.ɵɵrestoreView(_r56); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.NavigateToEntity(ctx_r2.ParentChain[0])); });
     i0.ɵɵtext(9);
-    i0.ɵɵelement(10, "i", 63);
+    i0.ɵɵelement(10, "i", 64);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 337)(12, "span", 338);
+    i0.ɵɵelementStart(11, "div", 338)(12, "span", 339);
     i0.ɵɵtext(13, "Routing");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 340);
+    i0.ɵɵelementStart(14, "span", 341);
     i0.ɵɵtext(15, "ORM routes Set/Get to parent");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -2271,23 +2272,23 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(9);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.GetISAFieldSource(ctx_r2.selectedField), " ");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r57 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 333)(1, "h5");
+    i0.ɵɵelementStart(0, "div", 334)(1, "h5");
     i0.ɵɵtext(2, "Relationship");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 336)(4, "div", 337)(5, "span", 338);
+    i0.ɵɵelementStart(3, "div", 337)(4, "div", 338)(5, "span", 339);
     i0.ɵɵtext(6, "Related Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 343);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_28_Template_span_click_7_listener() { i0.ɵɵrestoreView(_r57); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.navigateToRelatedEntity(ctx_r2.selectedField)); });
+    i0.ɵɵelementStart(7, "span", 344);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_28_Template_span_click_7_listener() { i0.ɵɵrestoreView(_r57); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.navigateToRelatedEntity(ctx_r2.selectedField)); });
     i0.ɵɵtext(8);
-    i0.ɵɵelement(9, "i", 63);
+    i0.ɵɵelement(9, "i", 64);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 337)(11, "span", 338);
+    i0.ɵɵelementStart(10, "div", 338)(11, "span", 339);
     i0.ɵɵtext(12, "Display Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 340);
+    i0.ɵɵelementStart(13, "span", 341);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -2297,20 +2298,20 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r2.selectedField.RelatedEntityDisplayType);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 333)(1, "h5");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 334)(1, "h5");
     i0.ɵɵtext(2, "Encryption");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 336)(4, "div", 337)(5, "span", 338);
+    i0.ɵɵelementStart(3, "div", 337)(4, "div", 338)(5, "span", 339);
     i0.ɵɵtext(6, "Encrypted");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 340);
+    i0.ɵɵelementStart(7, "span", 341);
     i0.ɵɵtext(8, "Yes");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 337)(10, "span", 338);
+    i0.ɵɵelementStart(9, "div", 338)(10, "span", 339);
     i0.ɵɵtext(11, "Decrypt in API");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 340);
+    i0.ɵɵelementStart(12, "span", 341);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -2318,11 +2319,11 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(13);
     i0.ɵɵtextInterpolate(ctx_r2.selectedField.AllowDecryptInAPI ? "Yes" : "No");
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_63_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 337)(1, "span", 338);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_63_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 338)(1, "span", 339);
     i0.ɵɵtext(2, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 340);
+    i0.ɵɵelementStart(3, "span", 341);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2330,8 +2331,8 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.selectedField.Category);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_For_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 346);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_For_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 347);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -2339,10 +2340,10 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(val_r58.Code);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 345);
-    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_For_5_Conditional_1_Template, 2, 1, "span", 346);
-    i0.ɵɵelementStart(2, "span", 347);
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 346);
+    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_For_5_Conditional_1_Template, 2, 1, "span", 347);
+    i0.ɵɵelementStart(2, "span", 348);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -2352,97 +2353,97 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(val_r58.Value);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 333)(1, "h5");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 334)(1, "h5");
     i0.ɵɵtext(2, "Allowed Values");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 344);
-    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_For_5_Template, 4, 2, "div", 345, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 345);
+    i0.ɵɵrepeaterCreate(4, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_For_5_Template, 4, 2, "div", 346, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r2.selectedField.EntityFieldValues);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 333)(2, "h4");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42)(1, "div", 334)(2, "h4");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 334);
+    i0.ɵɵelementStart(4, "div", 335);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_6_Template, 2, 1, "p", 335);
+    i0.ɵɵconditionalCreate(6, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_6_Template, 2, 1, "p", 336);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 333)(8, "h5");
+    i0.ɵɵelementStart(7, "div", 334)(8, "h5");
     i0.ɵɵtext(9, "Type Information");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 336)(11, "div", 337)(12, "span", 338);
+    i0.ɵɵelementStart(10, "div", 337)(11, "div", 338)(12, "span", 339);
     i0.ɵɵtext(13, "SQL Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "span", 339);
+    i0.ɵɵelementStart(14, "span", 340);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 337)(17, "span", 338);
+    i0.ɵɵelementStart(16, "div", 338)(17, "span", 339);
     i0.ɵɵtext(18, "TypeScript Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 339);
+    i0.ɵɵelementStart(19, "span", 340);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 337)(22, "span", 338);
+    i0.ɵɵelementStart(21, "div", 338)(22, "span", 339);
     i0.ɵɵtext(23, "Nullable");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "span", 340);
+    i0.ɵɵelementStart(24, "span", 341);
     i0.ɵɵtext(25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_26_Template, 5, 1, "div", 337);
+    i0.ɵɵconditionalCreate(26, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_26_Template, 5, 1, "div", 338);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(27, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_27_Template, 16, 1, "div", 341);
-    i0.ɵɵconditionalCreate(28, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_28_Template, 15, 2, "div", 333);
-    i0.ɵɵconditionalCreate(29, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_29_Template, 14, 1, "div", 333);
-    i0.ɵɵelementStart(30, "div", 333)(31, "h5");
+    i0.ɵɵconditionalCreate(27, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_27_Template, 16, 1, "div", 342);
+    i0.ɵɵconditionalCreate(28, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_28_Template, 15, 2, "div", 334);
+    i0.ɵɵconditionalCreate(29, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_29_Template, 14, 1, "div", 334);
+    i0.ɵɵelementStart(30, "div", 334)(31, "h5");
     i0.ɵɵtext(32, "API Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "div", 336)(34, "div", 337)(35, "span", 338);
+    i0.ɵɵelementStart(33, "div", 337)(34, "div", 338)(35, "span", 339);
     i0.ɵɵtext(36, "Allow Update");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "span", 340);
+    i0.ɵɵelementStart(37, "span", 341);
     i0.ɵɵtext(38);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(39, "div", 337)(40, "span", 338);
+    i0.ɵɵelementStart(39, "div", 338)(40, "span", 339);
     i0.ɵɵtext(41, "Include in Search");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(42, "span", 340);
+    i0.ɵɵelementStart(42, "span", 341);
     i0.ɵɵtext(43);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(44, "div", 337)(45, "span", 338);
+    i0.ɵɵelementStart(44, "div", 338)(45, "span", 339);
     i0.ɵɵtext(46, "Full-Text Search");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(47, "span", 340);
+    i0.ɵɵelementStart(47, "span", 341);
     i0.ɵɵtext(48);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(49, "div", 333)(50, "h5");
+    i0.ɵɵelementStart(49, "div", 334)(50, "h5");
     i0.ɵɵtext(51, "Form Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "div", 336)(53, "div", 337)(54, "span", 338);
+    i0.ɵɵelementStart(52, "div", 337)(53, "div", 338)(54, "span", 339);
     i0.ɵɵtext(55, "Include in Form");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(56, "span", 340);
+    i0.ɵɵelementStart(56, "span", 341);
     i0.ɵɵtext(57);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(58, "div", 337)(59, "span", 338);
+    i0.ɵɵelementStart(58, "div", 338)(59, "span", 339);
     i0.ɵɵtext(60, "Section");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(61, "span", 340);
+    i0.ɵɵelementStart(61, "span", 341);
     i0.ɵɵtext(62);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(63, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_63_Template, 5, 1, "div", 337);
-    i0.ɵɵelementStart(64, "div", 337)(65, "span", 338);
+    i0.ɵɵconditionalCreate(63, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_63_Template, 5, 1, "div", 338);
+    i0.ɵɵelementStart(64, "div", 338)(65, "span", 339);
     i0.ɵɵtext(66, "Sequence");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(67, "span", 340);
+    i0.ɵɵelementStart(67, "span", 341);
     i0.ɵɵtext(68);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵconditionalCreate(69, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Conditional_69_Template, 6, 0, "div", 333);
+    i0.ɵɵconditionalCreate(69, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Conditional_69_Template, 6, 0, "div", 334);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -2483,50 +2484,50 @@ function MJEntityFormComponentExtended_Conditional_0_Conditional_66_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.selectedField.EntityFieldValues.length > 0 ? 69 : -1);
 } }
-function MJEntityFormComponentExtended_Conditional_0_Conditional_67_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 333)(2, "h4");
+function MJEntityFormComponentExtended_Conditional_0_Conditional_68_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42)(1, "div", 334)(2, "h4");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 333)(5, "h5");
+    i0.ɵɵelementStart(4, "div", 334)(5, "h5");
     i0.ɵɵtext(6, "Connection");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "div", 336)(8, "div", 337)(9, "span", 338);
+    i0.ɵɵelementStart(7, "div", 337)(8, "div", 338)(9, "span", 339);
     i0.ɵɵtext(10, "From Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 340);
+    i0.ɵɵelementStart(11, "span", 341);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 337)(14, "span", 338);
+    i0.ɵɵelementStart(13, "div", 338)(14, "span", 339);
     i0.ɵɵtext(15, "Join Field");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "span", 339);
+    i0.ɵɵelementStart(16, "span", 340);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "div", 337)(19, "span", 338);
+    i0.ɵɵelementStart(18, "div", 338)(19, "span", 339);
     i0.ɵɵtext(20, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 340);
+    i0.ɵɵelementStart(21, "span", 341);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(23, "div", 333)(24, "h5");
+    i0.ɵɵelementStart(23, "div", 334)(24, "h5");
     i0.ɵɵtext(25, "Display Settings");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "div", 336)(27, "div", 337)(28, "span", 338);
+    i0.ɵɵelementStart(26, "div", 337)(27, "div", 338)(28, "span", 339);
     i0.ɵɵtext(29, "Display in Form");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 340);
+    i0.ɵɵelementStart(30, "span", 341);
     i0.ɵɵtext(31);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(32, "div", 337)(33, "span", 338);
+    i0.ɵɵelementStart(32, "div", 338)(33, "span", 339);
     i0.ɵɵtext(34, "Location");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "span", 340);
+    i0.ɵɵelementStart(35, "span", 341);
     i0.ɵɵtext(36);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(37, "div", 337)(38, "span", 338);
+    i0.ɵɵelementStart(37, "div", 338)(38, "span", 339);
     i0.ɵɵtext(39, "Bundle in API");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "span", 340);
+    i0.ɵɵelementStart(40, "span", 341);
     i0.ɵɵtext(41);
     i0.ɵɵelementEnd()()()()();
 } if (rf & 2) {
@@ -2605,29 +2606,32 @@ function MJEntityFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵelementStart(44, "span", 19);
     i0.ɵɵtext(45, "Rows");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(46, "div", 24)(47, "nav", 25);
-    i0.ɵɵrepeaterCreate(48, MJEntityFormComponentExtended_Conditional_0_For_49_Template, 5, 7, "button", 26, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(50, "main", 27);
-    i0.ɵɵconditionalCreate(51, MJEntityFormComponentExtended_Conditional_0_Conditional_51_Template, 111, 23, "section", 28);
-    i0.ɵɵconditionalCreate(52, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template, 15, 8, "section", 29);
-    i0.ɵɵconditionalCreate(53, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template, 13, 7, "section", 30);
-    i0.ɵɵconditionalCreate(54, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template, 4, 1, "section", 31);
-    i0.ɵɵconditionalCreate(55, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template, 55, 22, "section", 32);
-    i0.ɵɵconditionalCreate(56, MJEntityFormComponentExtended_Conditional_0_Conditional_56_Template, 3, 1, "section", 33);
-    i0.ɵɵconditionalCreate(57, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Template, 72, 26, "section", 34);
-    i0.ɵɵconditionalCreate(58, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Template, 18, 7, "section", 35);
-    i0.ɵɵconditionalCreate(59, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template, 40, 18, "section", 36);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "aside", 37)(61, "div", 38);
-    i0.ɵɵconditionalCreate(62, MJEntityFormComponentExtended_Conditional_0_Conditional_62_Template, 2, 0, "h3");
+    i0.ɵɵelementStart(46, "div", 24)(47, "mj-section-picker", 25);
+    i0.ɵɵlistener("ActiveKeyChange", function MJEntityFormComponentExtended_Conditional_0_Template_mj_section_picker_ActiveKeyChange_47_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnSectionPicked($event)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(48, "nav", 26);
+    i0.ɵɵrepeaterCreate(49, MJEntityFormComponentExtended_Conditional_0_For_50_Template, 5, 7, "button", 27, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(51, "main", 28);
+    i0.ɵɵconditionalCreate(52, MJEntityFormComponentExtended_Conditional_0_Conditional_52_Template, 111, 23, "section", 29);
+    i0.ɵɵconditionalCreate(53, MJEntityFormComponentExtended_Conditional_0_Conditional_53_Template, 15, 8, "section", 30);
+    i0.ɵɵconditionalCreate(54, MJEntityFormComponentExtended_Conditional_0_Conditional_54_Template, 13, 7, "section", 31);
+    i0.ɵɵconditionalCreate(55, MJEntityFormComponentExtended_Conditional_0_Conditional_55_Template, 4, 1, "section", 32);
+    i0.ɵɵconditionalCreate(56, MJEntityFormComponentExtended_Conditional_0_Conditional_56_Template, 55, 22, "section", 33);
+    i0.ɵɵconditionalCreate(57, MJEntityFormComponentExtended_Conditional_0_Conditional_57_Template, 3, 1, "section", 34);
+    i0.ɵɵconditionalCreate(58, MJEntityFormComponentExtended_Conditional_0_Conditional_58_Template, 72, 26, "section", 35);
+    i0.ɵɵconditionalCreate(59, MJEntityFormComponentExtended_Conditional_0_Conditional_59_Template, 18, 7, "section", 36);
+    i0.ɵɵconditionalCreate(60, MJEntityFormComponentExtended_Conditional_0_Conditional_60_Template, 40, 18, "section", 37);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(61, "aside", 38)(62, "div", 39);
     i0.ɵɵconditionalCreate(63, MJEntityFormComponentExtended_Conditional_0_Conditional_63_Template, 2, 0, "h3");
-    i0.ɵɵelementStart(64, "button", 39);
-    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Template_button_click_64_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDetailPanel()); });
-    i0.ɵɵelement(65, "i", 40);
+    i0.ɵɵconditionalCreate(64, MJEntityFormComponentExtended_Conditional_0_Conditional_64_Template, 2, 0, "h3");
+    i0.ɵɵelementStart(65, "button", 40);
+    i0.ɵɵlistener("click", function MJEntityFormComponentExtended_Conditional_0_Template_button_click_65_listener() { i0.ɵɵrestoreView(_r1); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDetailPanel()); });
+    i0.ɵɵelement(66, "i", 41);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(66, MJEntityFormComponentExtended_Conditional_0_Conditional_66_Template, 70, 18, "div", 41);
-    i0.ɵɵconditionalCreate(67, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Template, 42, 7, "div", 41);
+    i0.ɵɵconditionalCreate(67, MJEntityFormComponentExtended_Conditional_0_Conditional_67_Template, 70, 18, "div", 42);
+    i0.ɵɵconditionalCreate(68, MJEntityFormComponentExtended_Conditional_0_Conditional_68_Template, 42, 7, "div", 42);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -2663,57 +2667,59 @@ function MJEntityFormComponentExtended_Conditional_0_Template(rf, ctx) { if (rf
     i0.ɵɵconditional(!ctx_r2.isRowCountLoading ? 42 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r2.isRowCountLoading ? 43 : -1);
-    i0.ɵɵadvance(5);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("Items", ctx_r2.SectionPickerItems)("ActiveKey", ctx_r2.ActiveSection);
+    i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r2.navItems);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("panel-open", ctx_r2.detailPanelOpen);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "overview" ? 51 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "overview" ? 52 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "fields" ? 52 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "fields" ? 53 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "relationships" ? 53 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "relationships" ? 54 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "organicKeys" ? 54 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "organicKeys" ? 55 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "permissions" ? 55 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "permissions" ? 56 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "data" ? 56 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "data" ? 57 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "lineage" ? 57 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "lineage" ? 58 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "history" ? 58 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "history" ? 59 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.activeSection === "settings" ? 59 : -1);
+    i0.ɵɵconditional(ctx_r2.activeSection === "settings" ? 60 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("open", ctx_r2.detailPanelOpen);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.selectedField ? 62 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedField ? 63 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.selectedRelationship ? 63 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedRelationship ? 64 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.selectedField ? 66 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedField ? 67 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.selectedRelationship ? 67 : -1);
+    i0.ɵɵconditional(ctx_r2.selectedRelationship ? 68 : -1);
 } }
 function MJEntityFormComponentExtended_Conditional_1_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 348);
-    i0.ɵɵelement(1, "mj-loading", 351);
+    i0.ɵɵelementStart(0, "div", 349);
+    i0.ɵɵelement(1, "mj-loading", 352);
     i0.ɵɵelementEnd();
 } }
 function MJEntityFormComponentExtended_Conditional_1_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 349);
+    i0.ɵɵelement(0, "mj-empty-state", 350);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Message", ctx_r2.explorerError);
 } }
 function MJEntityFormComponentExtended_Conditional_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 350);
+    i0.ɵɵelement(0, "mj-empty-state", 351);
 } }
 function MJEntityFormComponentExtended_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_1_Conditional_0_Template, 2, 0, "div", 348);
-    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_1_Conditional_1_Template, 1, 1, "mj-empty-state", 349);
-    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_1_Conditional_2_Template, 1, 0, "mj-empty-state", 350);
+    i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_1_Conditional_0_Template, 2, 0, "div", 349);
+    i0.ɵɵconditionalCreate(1, MJEntityFormComponentExtended_Conditional_1_Conditional_1_Template, 1, 1, "mj-empty-state", 350);
+    i0.ɵɵconditionalCreate(2, MJEntityFormComponentExtended_Conditional_1_Conditional_2_Template, 1, 0, "mj-empty-state", 351);
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵconditional(ctx_r2.isExplorerLoading ? 0 : -1);
@@ -2818,6 +2824,8 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
         this.SelectedRelationship = null;
         this.destroy$ = new Subject();
         this.stateChange$ = new Subject();
+        /** Stops following the breakpoint; set at init, called from ngOnDestroy. */
+        this.stopPhoneWatch = () => undefined;
         this.IsSavingCloneConfig = false;
         this.CloneConfigSaveError = '';
         /**
@@ -3074,11 +3082,28 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
     get _metadata() { return this.ProviderToUse; }
     async ngOnInit() {
         await super.ngOnInit();
+        this.ApplyPhoneDefaults(IsPhoneViewport());
+        this.stopPhoneWatch = WatchPhoneViewport(() => this.SyncPhoneViewport());
         this.setupStateManagement();
         this.loadExplorerData();
     }
+    /**
+     * Phone-width defaults, applied at init and whenever the breakpoint is crossed into phone width: Relations opens as the list, since the ERD is a
+     * desktop experience (pan, zoom, depth) that a 375px canvas cannot carry. The user can still
+     * switch to the diagram from the section header.
+     */
+    ApplyPhoneDefaults(isPhone) {
+        if (isPhone)
+            this.RelationshipViewMode = 'list';
+    }
+    /** Re-reads the breakpoint and re-applies the phone defaults (rotation, resize). */
+    SyncPhoneViewport() {
+        this.ApplyPhoneDefaults(IsPhoneViewport());
+        this.cdr.markForCheck();
+    }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this.stopPhoneWatch();
         this.destroy$.next();
         this.destroy$.complete();
     }
@@ -3477,6 +3502,16 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
         });
     }
     // === Public Methods ===
+    /** The rail's items as `mj-section-picker` items: same order, the badge as the count. */
+    get SectionPickerItems() {
+        return this.NavItems.map((item) => ({ Key: item.id, Title: item.label, Icon: item.icon, Count: item.badge ?? null }));
+    }
+    /** A pick from the phone section sheet; a key that names no rail item is ignored. */
+    OnSectionPicked(key) {
+        const item = this.NavItems.find((i) => i.id === key);
+        if (item)
+            this.SetActiveSection(item.id);
+    }
     SetActiveSection(section) {
         this.ActiveSection = section;
         this.CloseDetailPanel();
@@ -4114,11 +4149,11 @@ let MJEntityFormComponentExtended = class MJEntityFormComponentExtended extends
         return this.FormatJsonValue(value);
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJEntityFormComponentExtended_BaseFactory; return function MJEntityFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJEntityFormComponentExtended_BaseFactory || (ɵMJEntityFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJEntityFormComponentExtended)))(__ngFactoryType__ || MJEntityFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEntityFormComponentExtended, selectors: [["mj-entity-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "entity-explorer"], [1, "explorer-header"], [1, "entity-identity"], [1, "entity-icon"], [1, "entity-info"], [1, "entity-title-row"], [1, "entity-name"], [1, "status-badge", 3, "ngClass"], [1, "status-badge", "isa-badge", "virtual"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type"], [1, "isa-breadcrumb"], [1, "entity-subtitle"], [1, "schema-table"], [1, "separator"], [1, "entity-description", 3, "title"], [1, "header-stats"], [1, "stat-item", 3, "click"], [1, "fa-solid", "fa-table-columns"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-database"], [1, "stat-value", "loading"], [1, "explorer-body"], [1, "nav-rail"], [1, "nav-item", 3, "active", "title"], [1, "main-canvas"], [1, "section", "overview-section"], [1, "section", "fields-section"], [1, "section", "relationships-section"], [1, "section", "organic-keys-section"], [1, "section", "permissions-section"], [1, "section", "data-section"], [1, "section", "lineage-section"], [1, "section", "history-section"], [1, "section", "settings-section"], [1, "detail-panel"], [1, "panel-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "panel-content"], [1, "fa-solid", "fa-eye"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type", 3, "click"], [1, "fa-solid", "fa-arrow-up"], [1, "status-badge", "isa-badge", "parent-type"], [1, "fa-solid", "fa-sitemap"], ["title", "Multiple child types can coexist for a single parent record", 1, "status-badge", "isa-badge", "overlapping"], [1, "fa-solid", "fa-clone"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "section-content"], [1, "stats-cards"], ["title", "View all fields", 1, "stat-card", "clickable", 3, "click"], [1, "stat-card-header"], [1, "fa-solid", "fa-table-cells"], [1, "stat-card-body"], [1, "stat-main"], [1, "stat-details"], [1, "stat-card-action"], [1, "fa-solid", "fa-arrow-right"], ["title", "View relationships", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["title", "View security settings", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-lock"], [1, "stat-card"], [1, "info-panel", "capabilities-panel"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "capability-tags"], [1, "capability-tag"], [1, "capability-tag", "disabled"], [1, "info-panel", "isa-panel"], [1, "info-panel", "database-panel"], [1, "fa-solid", "fa-server"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "info-panel", "codegen-panel"], [1, "fa-solid", "fa-code"], [1, "info-value", "code"], [1, "fa-solid", "fa-check"], [1, "isa-info-row", "virtual-info"], [1, "isa-children"], [1, "code"], [1, "isa-chain"], [1, "isa-chain-label"], [1, "isa-chain-nodes"], [1, "isa-node", "current"], [1, "isa-inherited-fields"], [1, "isa-field-inspector"], [1, "isa-siblings"], [1, "fa-solid", "fa-arrow-right", "isa-arrow"], [1, "isa-node", "parent", "clickable", 3, "click", "title"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "isa-inspector-groups"], [1, "isa-inspector-group", 3, "own", "inherited"], [1, "isa-inspector-group"], [1, "isa-inspector-header"], [1, "isa-inspector-entity"], [1, "fa-solid", "fa-circle", 2, "color", "var(--mj-brand-primary)", "font-size", "8px"], [1, "fa-solid", "fa-arrow-up", 2, "color", "var(--mj-brand-primary)", "font-size", "10px"], [1, "isa-inspector-count"], [1, "isa-inspector-fields"], [1, "isa-inspector-field", 3, "title"], [1, "isa-inspector-type"], [1, "isa-child-list"], [1, "isa-sibling-chip", "clickable", 3, "title"], [1, "isa-sibling-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrows-left-right"], [1, "isa-child-chip", "clickable", 3, "title"], [1, "isa-child-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "isa-child-count"], [1, "section-header"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search fields...", 3, "ngModelChange", "ngModel"], [1, "header-controls"], [1, "view-mode-toggle"], ["title", "Group by category", 1, "toggle-btn", 3, "click"], ["title", "List view", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "expand-collapse-controls"], [1, "section-content", "fields-content"], [1, "field-groups"], [1, "fields-list-view"], ["title", "Expand all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], ["Size", "sm", 3, "FlushBody", "Expanded"], [1, "group-icon"], [1, "group-label"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], [1, "group-content"], [1, "field-item", 3, "selected"], [1, "field-item", 3, "click"], [1, "field-icon"], [1, "field-info"], [1, "field-name"], [1, "field-db-name"], [1, "field-meta"], [1, "field-type"], [1, "field-nullable"], [1, "field-related"], [1, "field-badges"], ["title", "Primary Key", 1, "badge", "pk"], ["title", "Foreign Key", 1, "badge", "fk"], ["title", "Encrypted", 1, "badge", "encrypted"], [1, "badge", "inherited", 3, "title"], [1, "field-related", 3, "click"], [1, "list-header"], [1, "list-col", "col-seq", "sortable", 3, "click"], [1, "sort-icon", "fa-solid", 3, "ngClass"], [1, "list-col", "col-name", "sortable", 3, "click"], [1, "list-col", "col-display-name", "sortable", 3, "click"], [1, "list-col", "col-type", "sortable", 3, "click"], [1, "list-col", "col-length", "sortable", 3, "click"], [1, "list-col", "col-nullable", "sortable", 3, "click"], [1, "list-col", "col-flags"], [1, "list-col", "col-desc", "sortable", 3, "click"], [1, "list-body"], [1, "list-row", 3, "selected"], ["Variant", "no-results", "Size", "compact", "Title", "No fields match your search"], [1, "list-row", 3, "click"], [1, "list-col", "col-seq"], [1, "seq-num"], [1, "list-col", "col-name"], [1, "field-type-icon"], [1, "field-name-text"], [1, "list-col", "col-display-name"], [1, "display-name-text"], [1, "list-col", "col-type"], [1, "type-tag"], [1, "list-col", "col-length"], [1, "length-value"], [1, "length-value", "muted"], [1, "list-col", "col-nullable"], [1, "required-indicator"], [1, "flag-badges"], ["title", "Primary Key", 1, "flag-badge", "pk"], ["title", "Foreign Key", 1, "flag-badge", "fk"], ["title", "Encrypted", 1, "flag-badge", "encrypted"], [1, "flag-badge", "inherited", 3, "title"], [1, "list-col", "col-desc"], [1, "desc-text", 3, "title"], [1, "fa-solid", "fa-key"], [1, "view-toggle"], [1, "toggle-btn", 3, "click"], [1, "depth-selector"], [1, "relationships-graph"], [1, "relationships-list"], [1, "depth-label"], [1, "depth-buttons"], [1, "depth-btn", 3, "active", "title"], [1, "depth-btn", 3, "click", "title"], [3, "stateChange", "openRecord", "focusEntities", "showFilterPanel", "showHeader", "depth"], [1, "relationship-group"], [1, "relationship-group-title"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "group-count"], [1, "relationship-items", "grouped"], [1, "relationship-item-grouped"], ["Size", "compact", "Icon", "fa-solid fa-arrow-right-from-bracket", "Title", "No outgoing relationships"], [1, "fa-solid", "fa-arrow-right-to-bracket"], ["Size", "compact", "Icon", "fa-solid fa-arrow-right-to-bracket", "Title", "No incoming relationships"], [1, "rel-header"], [1, "rel-icon", "outgoing"], [1, "rel-entity-name"], [1, "rel-fields-chips"], [1, "field-chip", "outgoing", 3, "title"], [1, "field-chip", "outgoing", 3, "click", "title"], [1, "rel-icon", "incoming"], [1, "fa-solid", "fa-arrow-left"], [1, "field-chip", "incoming", 3, "title"], ["title", "Bundled in API", 1, "fa-solid", "fa-box", "bundle-icon"], ["Icon", "fa-solid fa-fingerprint", "Title", "No Organic Keys", "Message", "This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints."], [1, "organic-key-cards"], [1, "organic-key-card"], [1, "organic-key-card-header"], [1, "organic-key-name"], [1, "fa-solid", "fa-fingerprint", "organic-key-icon"], [1, "organic-key-badges"], [1, "organic-key-badge", "strategy"], [1, "organic-key-badge", "fields"], [1, "organic-key-description"], [1, "organic-key-targets"], [1, "organic-key-target", "clickable"], [1, "organic-key-target", "clickable", 3, "click"], [1, "target-main"], [1, "target-header"], [1, "target-entity-icon"], [1, "target-entity-name"], [1, "fa-solid", "fa-external-link-alt", "target-nav-icon"], [1, "target-match-detail"], [1, "match-type-badge", "direct"], [1, "match-fields"], [1, "match-type-badge", "transitive"], [1, "match-fields", 3, "title"], [1, "organic-key-card", "incoming", "clickable"], [1, "organic-key-card", "incoming", "clickable", 3, "click"], [1, "match-type-badge"], [1, "organic-key-detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "permissions-matrix"], [1, "matrix-table"], [1, "center"], ["Size", "compact", "Icon", "fa-solid fa-shield-halved", "Title", "No permissions configured"], [1, "api-capabilities"], [1, "fa-solid", "fa-plug"], [1, "capability-grid"], [1, "capability-item"], [1, "fa-solid", 3, "ngClass"], [1, "role-name"], [1, "permission-icon", 3, "ngClass"], [1, "rls-info"], ["title", "Read RLS", 1, "rls-badge"], ["title", "Create RLS", 1, "rls-badge"], ["title", "Update RLS", 1, "rls-badge"], ["title", "Delete RLS", 1, "rls-badge"], [1, "no-rls"], [1, "data-viewer-container"], [3, "Entity", "Provider"], [3, "RecordOpened", "CreateRecordRequested", "Entity", "Provider"], [1, "lineage-diagram"], [1, "lineage-stage", "sources"], [1, "lineage-items"], [1, "lineage-item"], [1, "fa-solid", "fa-keyboard"], [1, "lineage-arrow"], [1, "lineage-stage", "entity-node"], [1, "entity-box"], [1, "lineage-stage", "sinks"], [1, "tracking-config"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "config-grid"], [1, "config-item"], [1, "config-label"], [1, "config-value"], [1, "fa-solid", "fa-map-location-dot"], [1, "helper-text"], [1, "history-config"], [1, "config-status"], [1, "config-text"], [1, "history-info"], [1, "info-card"], [1, "fa-solid", "fa-info-circle"], [1, "audit-fields-list"], [1, "settings-panel", "isa-settings-panel"], [1, "settings-panel"], [1, "fa-solid", "fa-sliders"], [1, "settings-list"], ["Size", "compact", "Icon", "fa-solid fa-sliders", "Title", "No custom settings configured"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fts-config"], ["Variant", "warning", "Size", "compact", "Title", "Full-text search is not enabled for this entity"], [3, "FormConfigChange", "FormConfig", "ParentSchemaName", "Candidates", "EditMode"], [1, "panel-title-row"], [1, "panel-title-actions"], [1, "panel-error"], [3, "CloneConfigChange", "Provider", "Entity", "CloneConfig", "EditMode"], [1, "fa-solid", "fa-box"], [1, "config-row"], ["title", "Navigate to parent entity", 1, "link"], [1, "muted"], [1, "fa-solid", "fa-circle-check", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-circle-minus", 2, "color", "var(--mj-text-muted)"], ["title", "Navigate to parent entity", 1, "link", 3, "click"], [1, "link", 3, "click"], [1, "fa-solid", "fa-circle-check", 2, "color", "#059669"], [1, "setting-item"], [1, "setting-name"], [1, "setting-value-json"], [1, "setting-value"], [1, "setting-comment"], ["language", "json", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], [1, "config-value", "enabled"], [1, "fa-solid", "fa-circle-check"], [1, "config-value", "code"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "disabled"], [1, "detail-section"], [1, "detail-field-db-name"], [1, "field-description"], [1, "detail-grid"], [1, "detail-item"], [1, "label"], [1, "value", "code"], [1, "value"], [1, "detail-section", "isa-source-section"], ["title", "Navigate to source entity", 1, "value", "link", 3, "click"], [1, "value", "link", 3, "click"], [1, "value-list"], [1, "value-item"], [1, "value-code"], [1, "value-display"], [1, "explorer-loading"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Failed to load entity", 1, "explorer-fill", 3, "Message"], ["Icon", "fa-solid fa-database", "Title", "Entity metadata not available", 1, "explorer-fill"], ["text", "Loading entity..."]], template: function MJEntityFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Template, 68, 36, "div", 0)(1, MJEntityFormComponentExtended_Conditional_1_Template, 3, 3);
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJEntityFormComponentExtended, selectors: [["mj-entity-form"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 2, vars: 1, consts: [[1, "entity-explorer"], [1, "explorer-header"], [1, "entity-identity"], [1, "entity-icon"], [1, "entity-info"], [1, "entity-title-row"], [1, "entity-name"], [1, "status-badge", 3, "ngClass"], [1, "status-badge", "isa-badge", "virtual"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type"], [1, "isa-breadcrumb"], [1, "entity-subtitle"], [1, "schema-table"], [1, "separator"], [1, "entity-description", 3, "title"], [1, "header-stats"], [1, "stat-item", 3, "click"], [1, "fa-solid", "fa-table-columns"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-link"], [1, "fa-solid", "fa-shield-halved"], [1, "fa-solid", "fa-database"], [1, "stat-value", "loading"], [1, "explorer-body"], [1, "phone-section-picker", 3, "ActiveKeyChange", "Items", "ActiveKey"], [1, "nav-rail"], [1, "nav-item", 3, "active", "title"], [1, "main-canvas"], [1, "section", "overview-section"], [1, "section", "fields-section"], [1, "section", "relationships-section"], [1, "section", "organic-keys-section"], [1, "section", "permissions-section"], [1, "section", "data-section"], [1, "section", "lineage-section"], [1, "section", "history-section"], [1, "section", "settings-section"], [1, "detail-panel"], [1, "panel-header"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "panel-content"], [1, "fa-solid", "fa-eye"], ["title", "Click to navigate to parent entity", 1, "status-badge", "isa-badge", "child-type", 3, "click"], [1, "fa-solid", "fa-arrow-up"], [1, "status-badge", "isa-badge", "parent-type"], [1, "fa-solid", "fa-sitemap"], ["title", "Multiple child types can coexist for a single parent record", 1, "status-badge", "isa-badge", "overlapping"], [1, "fa-solid", "fa-clone"], [1, "fa-solid", "fa-layer-group"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "section-content"], [1, "stats-cards"], ["title", "View all fields", 1, "stat-card", "clickable", 3, "click"], [1, "stat-card-header"], [1, "fa-solid", "fa-table-cells"], [1, "stat-card-body"], [1, "stat-main"], [1, "stat-details"], [1, "stat-card-action"], [1, "fa-solid", "fa-arrow-right"], ["title", "View relationships", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-diagram-project"], ["title", "View security settings", 1, "stat-card", "clickable", 3, "click"], [1, "fa-solid", "fa-lock"], [1, "stat-card"], [1, "info-panel", "capabilities-panel"], [1, "panel-title"], [1, "fa-solid", "fa-bolt"], [1, "capability-tags"], [1, "capability-tag"], [1, "capability-tag", "disabled"], [1, "info-panel", "isa-panel"], [1, "info-panel", "database-panel"], [1, "fa-solid", "fa-server"], [1, "info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "info-panel", "codegen-panel"], [1, "fa-solid", "fa-code"], [1, "info-value", "code"], [1, "fa-solid", "fa-check"], [1, "isa-info-row", "virtual-info"], [1, "isa-children"], [1, "code"], [1, "isa-chain"], [1, "isa-chain-label"], [1, "isa-chain-nodes"], [1, "isa-node", "current"], [1, "isa-inherited-fields"], [1, "isa-field-inspector"], [1, "isa-siblings"], [1, "fa-solid", "fa-arrow-right", "isa-arrow"], [1, "isa-node", "parent", "clickable", 3, "click", "title"], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "isa-inspector-groups"], [1, "isa-inspector-group", 3, "own", "inherited"], [1, "isa-inspector-group"], [1, "isa-inspector-header"], [1, "isa-inspector-entity"], [1, "fa-solid", "fa-circle", 2, "color", "var(--mj-brand-primary)", "font-size", "8px"], [1, "fa-solid", "fa-arrow-up", 2, "color", "var(--mj-brand-primary)", "font-size", "10px"], [1, "isa-inspector-count"], [1, "isa-inspector-fields"], [1, "isa-inspector-field", 3, "title"], [1, "isa-inspector-type"], [1, "isa-child-list"], [1, "isa-sibling-chip", "clickable", 3, "title"], [1, "isa-sibling-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrows-left-right"], [1, "isa-child-chip", "clickable", 3, "title"], [1, "isa-child-chip", "clickable", 3, "click", "title"], [1, "fa-solid", "fa-arrow-down"], [1, "isa-child-count"], [1, "section-header"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search fields...", 3, "ngModelChange", "ngModel"], [1, "header-controls"], [1, "view-mode-toggle"], ["title", "Group by category", 1, "toggle-btn", 3, "click"], ["title", "List view", 1, "toggle-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "expand-collapse-controls"], [1, "section-content", "fields-content"], [1, "field-groups"], [1, "fields-list-view"], ["title", "Expand all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "control-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-angles-up"], ["Size", "sm", 3, "FlushBody", "Expanded"], [1, "group-icon"], [1, "group-label"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], [1, "group-content"], [1, "field-item", 3, "selected"], [1, "field-item", 3, "click"], [1, "field-icon"], [1, "field-info"], [1, "field-name"], [1, "field-db-name"], [1, "field-meta"], [1, "field-type"], [1, "field-nullable"], [1, "field-related"], [1, "field-badges"], ["title", "Primary Key", 1, "badge", "pk"], ["title", "Foreign Key", 1, "badge", "fk"], ["title", "Encrypted", 1, "badge", "encrypted"], [1, "badge", "inherited", 3, "title"], [1, "field-related", 3, "click"], [1, "list-header"], [1, "list-col", "col-seq", "sortable", 3, "click"], [1, "sort-icon", "fa-solid", 3, "ngClass"], [1, "list-col", "col-name", "sortable", 3, "click"], [1, "list-col", "col-display-name", "sortable", 3, "click"], [1, "list-col", "col-type", "sortable", 3, "click"], [1, "list-col", "col-length", "sortable", 3, "click"], [1, "list-col", "col-nullable", "sortable", 3, "click"], [1, "list-col", "col-flags"], [1, "list-col", "col-desc", "sortable", 3, "click"], [1, "list-body"], [1, "list-row", 3, "selected"], ["Variant", "no-results", "Size", "compact", "Title", "No fields match your search"], [1, "list-row", 3, "click"], [1, "list-col", "col-seq"], [1, "seq-num"], [1, "list-col", "col-name"], [1, "field-type-icon"], [1, "field-name-text"], [1, "list-col", "col-display-name"], [1, "display-name-text"], [1, "list-col", "col-type"], [1, "type-tag"], [1, "list-col", "col-length"], [1, "length-value"], [1, "length-value", "muted"], [1, "list-col", "col-nullable"], [1, "required-indicator"], [1, "flag-badges"], ["title", "Primary Key", 1, "flag-badge", "pk"], ["title", "Foreign Key", 1, "flag-badge", "fk"], ["title", "Encrypted", 1, "flag-badge", "encrypted"], [1, "flag-badge", "inherited", 3, "title"], [1, "list-col", "col-desc"], [1, "desc-text", 3, "title"], [1, "fa-solid", "fa-key"], [1, "view-toggle"], [1, "toggle-btn", 3, "click"], [1, "depth-selector"], [1, "relationships-graph"], [1, "relationships-list"], [1, "depth-label"], [1, "depth-buttons"], [1, "depth-btn", 3, "active", "title"], [1, "depth-btn", 3, "click", "title"], [3, "stateChange", "openRecord", "focusEntities", "showFilterPanel", "showHeader", "depth"], [1, "relationship-group"], [1, "relationship-group-title"], [1, "fa-solid", "fa-arrow-right-from-bracket"], [1, "group-count"], [1, "relationship-items", "grouped"], [1, "relationship-item-grouped"], ["Size", "compact", "Icon", "fa-solid fa-arrow-right-from-bracket", "Title", "No outgoing relationships"], [1, "fa-solid", "fa-arrow-right-to-bracket"], ["Size", "compact", "Icon", "fa-solid fa-arrow-right-to-bracket", "Title", "No incoming relationships"], [1, "rel-header"], [1, "rel-icon", "outgoing"], [1, "rel-entity-name"], [1, "rel-fields-chips"], [1, "field-chip", "outgoing", 3, "title"], [1, "field-chip", "outgoing", 3, "click", "title"], [1, "rel-icon", "incoming"], [1, "fa-solid", "fa-arrow-left"], [1, "field-chip", "incoming", 3, "title"], ["title", "Bundled in API", 1, "fa-solid", "fa-box", "bundle-icon"], ["Icon", "fa-solid fa-fingerprint", "Title", "No Organic Keys", "Message", "This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints."], [1, "organic-key-cards"], [1, "organic-key-card"], [1, "organic-key-card-header"], [1, "organic-key-name"], [1, "fa-solid", "fa-fingerprint", "organic-key-icon"], [1, "organic-key-badges"], [1, "organic-key-badge", "strategy"], [1, "organic-key-badge", "fields"], [1, "organic-key-description"], [1, "organic-key-targets"], [1, "organic-key-target", "clickable"], [1, "organic-key-target", "clickable", 3, "click"], [1, "target-main"], [1, "target-header"], [1, "target-entity-icon"], [1, "target-entity-name"], [1, "fa-solid", "fa-external-link-alt", "target-nav-icon"], [1, "target-match-detail"], [1, "match-type-badge", "direct"], [1, "match-fields"], [1, "match-type-badge", "transitive"], [1, "match-fields", 3, "title"], [1, "organic-key-card", "incoming", "clickable"], [1, "organic-key-card", "incoming", "clickable", 3, "click"], [1, "match-type-badge"], [1, "organic-key-detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "permissions-matrix"], [1, "matrix-table"], [1, "center"], ["Size", "compact", "Icon", "fa-solid fa-shield-halved", "Title", "No permissions configured"], [1, "api-capabilities"], [1, "fa-solid", "fa-plug"], [1, "capability-grid"], [1, "capability-item"], [1, "fa-solid", 3, "ngClass"], [1, "role-name"], [1, "permission-icon", 3, "ngClass"], [1, "rls-info"], ["title", "Read RLS", 1, "rls-badge"], ["title", "Create RLS", 1, "rls-badge"], ["title", "Update RLS", 1, "rls-badge"], ["title", "Delete RLS", 1, "rls-badge"], [1, "no-rls"], [1, "data-viewer-container"], [3, "Entity", "Provider"], [3, "RecordOpened", "CreateRecordRequested", "Entity", "Provider"], [1, "lineage-diagram"], [1, "lineage-stage", "sources"], [1, "lineage-items"], [1, "lineage-item"], [1, "fa-solid", "fa-keyboard"], [1, "lineage-arrow"], [1, "lineage-stage", "entity-node"], [1, "entity-box"], [1, "lineage-stage", "sinks"], [1, "tracking-config"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "config-grid"], [1, "config-item"], [1, "config-label"], [1, "config-value"], [1, "fa-solid", "fa-map-location-dot"], [1, "helper-text"], [1, "history-config"], [1, "config-status"], [1, "config-text"], [1, "history-info"], [1, "info-card"], [1, "fa-solid", "fa-info-circle"], [1, "audit-fields-list"], [1, "settings-panel", "isa-settings-panel"], [1, "settings-panel"], [1, "fa-solid", "fa-sliders"], [1, "settings-list"], ["Size", "compact", "Icon", "fa-solid fa-sliders", "Title", "No custom settings configured"], [1, "fa-solid", "fa-magnifying-glass"], [1, "fts-config"], ["Variant", "warning", "Size", "compact", "Title", "Full-text search is not enabled for this entity"], [3, "FormConfigChange", "FormConfig", "ParentSchemaName", "Candidates", "EditMode"], [1, "panel-title-row"], [1, "panel-title-actions"], [1, "panel-error"], [3, "CloneConfigChange", "Provider", "Entity", "CloneConfig", "EditMode"], [1, "fa-solid", "fa-box"], [1, "config-row"], ["title", "Navigate to parent entity", 1, "link"], [1, "muted"], [1, "fa-solid", "fa-circle-check", 2, "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-circle-minus", 2, "color", "var(--mj-text-muted)"], ["title", "Navigate to parent entity", 1, "link", 3, "click"], [1, "link", 3, "click"], [1, "fa-solid", "fa-circle-check", 2, "color", "#059669"], [1, "setting-item"], [1, "setting-name"], [1, "setting-value-json"], [1, "setting-value"], [1, "setting-comment"], ["language", "json", "setup", "minimal", 3, "value", "readonly", "lineWrapping"], [1, "config-value", "enabled"], [1, "fa-solid", "fa-circle-check"], [1, "config-value", "code"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click"], [1, "fa-solid", "fa-pen-to-square"], ["type", "button", "mjButton", "", "Variant", "primary", "Size", "sm", 3, "click", "disabled"], [1, "fa-solid", "fa-floppy-disk"], ["type", "button", "mjButton", "", "Variant", "outline", "Size", "sm", 3, "click", "disabled"], [1, "detail-section"], [1, "detail-field-db-name"], [1, "field-description"], [1, "detail-grid"], [1, "detail-item"], [1, "label"], [1, "value", "code"], [1, "value"], [1, "detail-section", "isa-source-section"], ["title", "Navigate to source entity", 1, "value", "link", 3, "click"], [1, "value", "link", 3, "click"], [1, "value-list"], [1, "value-item"], [1, "value-code"], [1, "value-display"], [1, "explorer-loading"], ["Variant", "error", "Icon", "fa-solid fa-triangle-exclamation", "Title", "Failed to load entity", 1, "explorer-fill", 3, "Message"], ["Icon", "fa-solid fa-database", "Title", "Entity metadata not available", 1, "explorer-fill"], ["text", "Loading entity..."]], template: function MJEntityFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MJEntityFormComponentExtended_Conditional_0_Template, 69, 38, "div", 0)(1, MJEntityFormComponentExtended_Conditional_1_Template, 3, 3);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.isExplorerLoading && ctx.entity ? 0 : 1);
-        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJAccordionBodyDirective, i4.CodeEditorComponent, i5.LoadingComponent, i6.ERDCompositeComponent, i7.EntityViewerComponent, i8.EntityFormChromeEditorComponent, i9.EntityCloneConfigEditorComponent, i1.SlicePipe, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n\n\n\n\n.explorer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info[_ngcontent-%COMP%] {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator[_ngcontent-%COMP%] {\n    color: var(--border-color);\n}\n\n.entity-description[_ngcontent-%COMP%] {\n    color: var(--text-secondary);\n}\n\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n\n\n.explorer-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n    transform: scale(1.1);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    transform: scale(1.05);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n\n\n\n\n.main-canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open[_ngcontent-%COMP%] {\n    margin-right: var(--detail-panel-width);\n}\n\n\n.section[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--text-muted);\n}\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n\n.depth-selector[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n\n.header-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n\n.fields-list-view[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%]:hover {\n    color: var(--accent-color);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable.sorted[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.list-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n.col-seq[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.seq-num[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row[_ngcontent-%COMP%]:hover   .seq-num[_ngcontent-%COMP%], \n.list-row.selected[_ngcontent-%COMP%]   .seq-num[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.display-name-text[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.required-indicator[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.flag-badge.encrypted[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-desc[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.desc-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n\n\n\n\n.stats-cards[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover   .stat-card-action[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-main[_ngcontent-%COMP%] {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n\n.info-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n\n.capability-tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.capability-tag.disabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n.info-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n\n\n\n\n.fields-content[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n\n\n\n\n\n.group-icon[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.field-related[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.relationships-graph[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-erd[_ngcontent-%COMP%], \n.relationships-graph[_ngcontent-%COMP%]   mj-erd-composite[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n\n.relationships-graph[_ngcontent-%COMP%]   .erd-splitter[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-details[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.relationship-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.relationship-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.rel-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.rel-entity[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.rel-field[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type[_ngcontent-%COMP%], \n.rel-display-type[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n.relationship-group-title[_ngcontent-%COMP%]   .group-count[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.rel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; \n}\n\n.field-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.field-chip.incoming[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.field-chip[_ngcontent-%COMP%]   .bundle-icon[_ngcontent-%COMP%] {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n\n\n\n\n.permissions-matrix[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th.center[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td.center[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.matrix-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.permission-icon.granted[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.permission-icon.denied[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.rls-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge[_ngcontent-%COMP%] {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n\n.api-capabilities[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n\n\n\n.lineage-diagram[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.lineage-stage[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.lineage-arrow[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n}\n\n.tracking-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.config-item[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config[_ngcontent-%COMP%]   .helper-text[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n\n\n\n\n.history-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.config-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list[_ngcontent-%COMP%] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n\n\n.settings-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item[_ngcontent-%COMP%] {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config[_ngcontent-%COMP%], \n.settings-section[_ngcontent-%COMP%]   .config-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.enabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.value-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display[_ngcontent-%COMP%] {\n    color: var(--text-primary);\n}\n\n\n\n\n\n.explorer-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n\n.explorer-fill[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n\n\n\n.isa-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n\n.isa-breadcrumb[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n\n.isa-panel[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n\n.isa-chain[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-chain-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.isa-node.parent[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n\n.isa-children[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-child-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n\n.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n\n.badge.inherited[_ngcontent-%COMP%], \n.flag-badge.inherited[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n\n.isa-source-section[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\n}\n\n\n.isa-settings-panel[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n\n.isa-field-inspector[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n\n\n\n\n\n.isa-inspector-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group[_ngcontent-%COMP%] {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n\n.isa-siblings[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n\n.isa-child-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n\n.data-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n\n\n\n\n.organic-key-cards[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover, \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover   .target-nav-icon[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover   .target-nav-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-4);\n}\n\n.panel-title-row[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n}\n\n.panel-title-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-2);\n}\n\n.panel-error[_ngcontent-%COMP%] {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-error);\n}", ".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.MJEmptyStateComponent, i3.MJSectionPickerComponent, i3.MJButtonDirective, i3.MJAccordionPanelComponent, i3.MJAccordionTitleDirective, i3.MJAccordionBodyDirective, i4.CodeEditorComponent, i5.LoadingComponent, i6.ERDCompositeComponent, i7.EntityViewerComponent, i8.EntityFormChromeEditorComponent, i9.EntityCloneConfigEditorComponent, i1.SlicePipe, i1.DecimalPipe, i1.DatePipe], styles: ["\n\n\n\n\n\n[_nghost-%COMP%] {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n\n\n\n\n.explorer-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info[_ngcontent-%COMP%] {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator[_ngcontent-%COMP%] {\n    color: var(--border-color);\n}\n\n.entity-description[_ngcontent-%COMP%] {\n    color: var(--text-secondary);\n}\n\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n\n\n\n.explorer-body[_ngcontent-%COMP%] {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n\n.phone-section-picker[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.nav-rail[_ngcontent-%COMP%] {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item[_ngcontent-%COMP%]:hover   i[_ngcontent-%COMP%] {\n    transform: scale(1.1);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    transform: scale(1.05);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n\n\n\n\n.main-canvas[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open[_ngcontent-%COMP%] {\n    margin-right: var(--detail-panel-width);\n}\n\n\n.section[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n\n.search-box[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--text-muted);\n}\n\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n\n.depth-selector[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn[_ngcontent-%COMP%]:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n\n.header-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn[_ngcontent-%COMP%] {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n\n.fields-list-view[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable[_ngcontent-%COMP%]:hover {\n    color: var(--accent-color);\n}\n\n.list-header[_ngcontent-%COMP%]   .list-col.sortable.sorted[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.sort-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable[_ngcontent-%COMP%]:hover   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted[_ngcontent-%COMP%]   .sort-icon[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.list-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n.col-seq[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.seq-num[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row[_ngcontent-%COMP%]:hover   .seq-num[_ngcontent-%COMP%], \n.list-row.selected[_ngcontent-%COMP%]   .seq-num[_ngcontent-%COMP%] {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.display-name-text[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.required-indicator[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.flag-badge.encrypted[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-desc[_ngcontent-%COMP%] {\n    min-width: 0;\n}\n\n.desc-text[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n\n\n\n\n.stats-cards[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable[_ngcontent-%COMP%]:hover   .stat-card-action[_ngcontent-%COMP%] {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-main[_ngcontent-%COMP%] {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body[_ngcontent-%COMP%]   .stat-details[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n\n.info-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n\n.capability-tags[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.capability-tag.disabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n\n.info-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n\n\n\n\n.fields-content[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n\n\n\n\n\n.group-icon[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected[_ngcontent-%COMP%] {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable[_ngcontent-%COMP%] {\n    color: var(--danger-color);\n}\n\n.field-related[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.field-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n\n\n\n\n.relationships-graph[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-erd[_ngcontent-%COMP%], \n.relationships-graph[_ngcontent-%COMP%]   mj-erd-composite[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n\n.relationships-graph[_ngcontent-%COMP%]   .erd-splitter[_ngcontent-%COMP%] {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph[_ngcontent-%COMP%]   mj-entity-details[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder[_ngcontent-%COMP%] {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.graph-placeholder[_ngcontent-%COMP%]   .hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.relationship-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.relationship-item[_ngcontent-%COMP%]:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden[_ngcontent-%COMP%] {\n    display: none;\n}\n\n.rel-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.rel-entity[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.rel-field[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type[_ngcontent-%COMP%], \n.rel-display-type[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n.relationship-group-title[_ngcontent-%COMP%]   .group-count[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%] {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.rel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; \n}\n\n.field-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.field-chip.incoming[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.field-chip[_ngcontent-%COMP%]   .bundle-icon[_ngcontent-%COMP%] {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n\n\n\n\n.permissions-matrix[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table[_ngcontent-%COMP%]   th.center[_ngcontent-%COMP%], \n.matrix-table[_ngcontent-%COMP%]   td.center[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.matrix-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.permission-icon.granted[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.permission-icon.denied[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.rls-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge[_ngcontent-%COMP%] {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n\n.api-capabilities[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.capability-item.enabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n\n\n\n\n.lineage-diagram[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.lineage-stage[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.lineage-arrow[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node[_ngcontent-%COMP%]   .entity-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n}\n\n.tracking-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n.config-item[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config[_ngcontent-%COMP%]   .helper-text[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n\n\n\n\n.history-config[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--success-color);\n}\n\n.config-text[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n}\n\n.info-card[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list[_ngcontent-%COMP%] {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%] {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list[_ngcontent-%COMP%]   li[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n\n\n.settings-panel[_ngcontent-%COMP%] {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item[_ngcontent-%COMP%] {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json[_ngcontent-%COMP%] {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json[_ngcontent-%COMP%]     .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config[_ngcontent-%COMP%], \n.settings-section[_ngcontent-%COMP%]   .config-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row[_ngcontent-%COMP%]   .config-label[_ngcontent-%COMP%] {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row[_ngcontent-%COMP%]   .config-value.enabled[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.detail-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%] {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item[_ngcontent-%COMP%]   .value.link[_ngcontent-%COMP%]:hover {\n    text-decoration: underline;\n}\n\n.value-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display[_ngcontent-%COMP%] {\n    color: var(--text-primary);\n}\n\n\n\n\n\n.explorer-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n\n.explorer-fill[_ngcontent-%COMP%] {\n    height: 100%;\n}\n\n\n\n\n\n\n.isa-badge[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n\n.isa-breadcrumb[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n\n.isa-panel[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row[_ngcontent-%COMP%]   .code[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n\n.isa-chain[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-chain-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.isa-node.parent[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n\n.isa-children[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-child-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n\n.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n\n.badge.inherited[_ngcontent-%COMP%], \n.flag-badge.inherited[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n\n.isa-source-section[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section[_ngcontent-%COMP%]   h5[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 4px;\n}\n\n\n.isa-settings-panel[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel[_ngcontent-%COMP%]   .muted[_ngcontent-%COMP%] {\n    color: var(--text-muted);\n}\n\n\n.isa-field-inspector[_ngcontent-%COMP%] {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n\n\n\n\n\n.isa-inspector-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group[_ngcontent-%COMP%] {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n\n.isa-siblings[_ngcontent-%COMP%] {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n\n.isa-child-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n\n.data-section[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container[_ngcontent-%COMP%] {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n\n\n\n\n.organic-key-cards[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming[_ngcontent-%COMP%] {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover, \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable[_ngcontent-%COMP%]:hover   .target-nav-icon[_ngcontent-%COMP%], \n.organic-key-card.clickable[_ngcontent-%COMP%]:hover   .target-nav-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields[_ngcontent-%COMP%] {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n\n.panel-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-4);\n}\n\n.panel-title-row[_ngcontent-%COMP%]   .panel-title[_ngcontent-%COMP%] {\n  margin-bottom: 0;\n}\n\n.panel-title-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: var(--mj-space-2);\n}\n\n.panel-error[_ngcontent-%COMP%] {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-error);\n}\n\n\n\n@media (max-width: 768px) {\n    .explorer-body[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .nav-rail[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .phone-section-picker[_ngcontent-%COMP%] {\n        display: block;\n        flex-shrink: 0;\n        padding: 4px 8px;\n        border-bottom: 1px solid var(--border-color);\n        background: var(--bg-primary);\n    }\n\n    .explorer-header[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 12px;\n        padding: 12px 16px;\n    }\n\n    .entity-identity[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n    }\n\n    .entity-subtitle[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n\n    .entity-description[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n        white-space: normal;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        flex-basis: 100%;\n        flex-wrap: wrap;\n    }\n\n    .stat-item[_ngcontent-%COMP%] {\n        flex: 1 1 40%;\n    }\n}", ".content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
 };
 MJEntityFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Entities')
@@ -4126,7 +4161,7 @@ MJEntityFormComponentExtended = __decorate([
 export { MJEntityFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJEntityFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isExplorerLoading && entity) {\n  <div class=\"entity-explorer\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n      <div class=\"entity-identity\">\n        <div class=\"entity-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n          <i [class]=\"entityIcon\"></i>\n        </div>\n        <div class=\"entity-info\">\n          <div class=\"entity-title-row\">\n            <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n            <span class=\"status-badge\" [ngClass]=\"statusClass\">\n              {{ entity.Status }}\n            </span>\n            @if (IsVirtualEntity) {\n              <span class=\"status-badge isa-badge virtual\">\n                <i class=\"fa-solid fa-eye\"></i> Virtual\n              </span>\n            }\n            @if (IsChildType) {\n              <span class=\"status-badge isa-badge child-type\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Click to navigate to parent entity\">\n                <i class=\"fa-solid fa-arrow-up\"></i> IS-A {{ ParentChain[0]?.Name }}\n              </span>\n            }\n            @if (IsParentType) {\n              <span class=\"status-badge isa-badge parent-type\">\n                <i class=\"fa-solid fa-sitemap\"></i> {{ ChildEntities.length }} child type{{ ChildEntities.length !== 1 ? 's' : '' }}\n              </span>\n              @if (HasOverlappingSubtypes) {\n                <span class=\"status-badge isa-badge overlapping\" title=\"Multiple child types can coexist for a single parent record\">\n                  <i class=\"fa-solid fa-clone\"></i> Overlapping Subtypes\n                </span>\n              }\n            }\n          </div>\n          @if (IsChildType) {\n            <div class=\"isa-breadcrumb\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n              {{ IsaBreadcrumb }}\n            </div>\n          }\n          <div class=\"entity-subtitle\">\n            <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n            <span class=\"separator\">|</span>\n            @if (entity.Description) {\n              <span class=\"entity-description\" [title]=\"entity.Description\">\n                {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n          <i class=\"fa-solid fa-table-columns\"></i>\n          <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n          <span class=\"stat-label\">Fields</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n          <i class=\"fa-solid fa-link\"></i>\n          <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n          <span class=\"stat-label\">Relations</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n          <span class=\"stat-label\">Roles</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('data')\">\n          <i class=\"fa-solid fa-database\"></i>\n          @if (!isRowCountLoading) {\n            <span class=\"stat-value\">{{ formattedRowCount }}</span>\n          }\n          @if (isRowCountLoading) {\n            <span class=\"stat-value loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n          }\n          <span class=\"stat-label\">Rows</span>\n        </div>\n      </div>\n    </header>\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n      <!-- Navigation Rail -->\n      <nav class=\"nav-rail\">\n        @for (item of navItems; track item) {\n          <button\n            class=\"nav-item\"\n            [class.active]=\"activeSection === item.id\"\n            (click)=\"setActiveSection(item.id)\"\n            [title]=\"item.label\">\n            <i [class]=\"item.icon\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n            @if (item.badge) {\n              <span class=\"nav-badge\">{{ item.badge }}</span>\n            }\n          </button>\n        }\n      </nav>\n      <!-- Main Canvas -->\n      <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n        <!-- ============================================================ -->\n        <!-- OVERVIEW SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'overview') {\n          <section class=\"section overview-section\">\n            <div class=\"section-content\">\n              <!-- Stats Cards Row - Clickable to navigate to sections -->\n              <div class=\"stats-cards\">\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-table-cells\"></i>\n                    <span>Fields</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ stats.primaryKeyCount }} PKs</span>\n                      <span>{{ stats.foreignKeyCount }} FKs</span>\n                      @if (stats.encryptedFieldCount) {\n                        <span>{{ stats.encryptedFieldCount }} Encrypted</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <span>Relationships</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                      <span>{{ groupedIncomingRelationships.length }} In</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-lock\"></i>\n                    <span>Security</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>Roles configured</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    <span>Data</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                    <div class=\"stat-details\">\n                      @if (entity.RowCountRunAt) {\n                        <span>Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                      }\n                      @if (!entity.RowCountRunAt) {\n                        <span>Row count</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <!-- Capabilities -->\n              <div class=\"info-panel capabilities-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  Capabilities\n                </h3>\n                <div class=\"capability-tags\">\n                  @for (cap of capabilitySummary; track cap) {\n                    <span class=\"capability-tag\">\n                      <i class=\"fa-solid fa-check\"></i>\n                      {{ cap }}\n                    </span>\n                  }\n                  @if (!entity.IncludeInAPI) {\n                    <span class=\"capability-tag disabled\">\n                      <i class=\"fa-solid fa-xmark\"></i>\n                      No API\n                    </span>\n                  }\n                </div>\n              </div>\n              <!-- IS-A Type Hierarchy -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"info-panel isa-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Hierarchy\n                  </h3>\n                  @if (IsVirtualEntity) {\n                    <div class=\"isa-info-row virtual-info\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      <span>Virtual Entity \u2014 read-only view backed by <span class=\"code\">{{ entity.BaseView }}</span></span>\n                    </div>\n                  }\n                  @if (IsChildType) {\n                    <div class=\"isa-chain\">\n                      <div class=\"isa-chain-label\">Inheritance Chain</div>\n                      <div class=\"isa-chain-nodes\">\n                        <span class=\"isa-node current\">{{ entity.Name }}</span>\n                        @for (parent of ParentChain; track parent.ID) {\n                          <i class=\"fa-solid fa-arrow-right isa-arrow\"></i>\n                          <span class=\"isa-node parent clickable\" (click)=\"NavigateToEntity(parent)\" [title]=\"'Navigate to ' + parent.Name\">\n                            {{ parent.Name }}\n                          </span>\n                        }\n                      </div>\n                      <div class=\"isa-inherited-fields\">\n                        <i class=\"fa-solid fa-table-cells\"></i>\n                        <span>{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }} inherited from parent{{ ParentChain.length > 1 ? 's' : '' }}</span>\n                      </div>\n                    </div>\n                    <!-- IS-A Field Inspector: shows fields grouped by source entity -->\n                    @if (isaFieldGroups.length > 1) {\n                      <div class=\"isa-field-inspector\">\n                        <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                          [Expanded]=\"isaFieldInspectorExpanded\" (ExpandedChange)=\"isaFieldInspectorExpanded = $event\">\n                          <ng-template mjAccordionTitle>\n                            <span>Field Source Inspector</span>\n                          </ng-template>\n                          <ng-template mjAccordionBody>\n                          <div class=\"isa-inspector-groups\">\n                            @for (group of isaFieldGroups; track group.EntityName) {\n                              <div class=\"isa-inspector-group\" [class.own]=\"group.Level === 0\" [class.inherited]=\"group.Level > 0\">\n                                <div class=\"isa-inspector-header\">\n                                  <span class=\"isa-inspector-entity\">\n                                    @if (group.Level === 0) {\n                                      <i class=\"fa-solid fa-circle\" style=\"color: var(--mj-brand-primary); font-size: 8px;\"></i>\n                                    } @else {\n                                      <i class=\"fa-solid fa-arrow-up\" style=\"color: var(--mj-brand-primary); font-size: 10px;\"></i>\n                                    }\n                                    {{ group.Label }}\n                                  </span>\n                                  <span class=\"isa-inspector-count\">{{ group.Fields.length }} field{{ group.Fields.length !== 1 ? 's' : '' }}</span>\n                                </div>\n                                <div class=\"isa-inspector-fields\">\n                                  @for (field of group.Fields; track field.ID) {\n                                    <span class=\"isa-inspector-field\" [title]=\"field.Description || field.Name\">\n                                      {{ field.DisplayName || field.Name }}\n                                      <span class=\"isa-inspector-type\">{{ field.Type }}</span>\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            }\n                          </div>\n                          </ng-template>\n                        </mj-accordion-panel>\n                      </div>\n                    }\n                    <!-- Sibling Types -->\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"isa-siblings\">\n                        <div class=\"isa-chain-label\">Sibling Types ({{ ParentChain[0]?.AllowMultipleSubtypes ? 'overlapping' : 'disjoint' }} under {{ ParentChain[0]?.Name }})</div>\n                        <div class=\"isa-child-list\">\n                          @for (sibling of SiblingEntities; track sibling.ID) {\n                            <span class=\"isa-sibling-chip clickable\" (click)=\"NavigateToEntity(sibling)\" [title]=\"'Navigate to ' + sibling.Name\">\n                              <i class=\"fa-solid fa-arrows-left-right\"></i>\n                              {{ sibling.Name }}\n                            </span>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (IsParentType) {\n                    <div class=\"isa-children\">\n                      <div class=\"isa-chain-label\">Child Types</div>\n                      <div class=\"isa-child-list\">\n                        @for (childCount of childEntityCounts; track childCount.EntityName) {\n                          <span class=\"isa-child-chip clickable\" (click)=\"NavigateToEntity(childCount.EntityInfo)\" [title]=\"'Navigate to ' + childCount.EntityName\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                            {{ childCount.EntityName }}\n                            <span class=\"isa-child-count\">\n                              @if (childCount.IsLoading) {\n                                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              } @else {\n                                {{ childCount.RecordCount | number }}\n                              }\n                            </span>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <!-- Database Info -->\n              <div class=\"info-panel database-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-server\"></i>\n                  Database\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Schema</span>\n                    <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Table</span>\n                    <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">View</span>\n                    <span class=\"info-value\">{{ entity.BaseView }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Delete Type</span>\n                    <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  @if (entity.spCreate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Create</span>\n                      <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                    </div>\n                  }\n                  @if (entity.spUpdate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Update</span>\n                      <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                    </div>\n                  }\n                  @if (entity.spDelete) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Delete</span>\n                      <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Code Gen Info -->\n              <div class=\"info-panel codegen-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  Code Generation\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Class Name</span>\n                    <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Code Name</span>\n                    <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                  </div>\n                  @if (entity.EntityObjectSubclassName) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">Subclass</span>\n                      <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- FIELDS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'fields') {\n          <section class=\"section fields-section\">\n            <div class=\"section-header\">\n              <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search fields...\"\n                  [ngModel]=\"fieldSearchTerm\"\n                  (ngModelChange)=\"onFieldSearch($event)\">\n              </div>\n              <div class=\"header-controls\">\n                <!-- View mode toggle -->\n                <div class=\"view-mode-toggle\">\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'grouped'\"\n                    (click)=\"fieldViewMode = 'grouped'\"\n                    title=\"Group by category\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                  </button>\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'list'\"\n                    (click)=\"fieldViewMode = 'list'\"\n                    title=\"List view\">\n                    <i class=\"fa-solid fa-list\"></i>\n                  </button>\n                </div>\n                <!-- Expand/Collapse controls (only in grouped mode) -->\n                @if (fieldViewMode === 'grouped') {\n                  <div class=\"expand-collapse-controls\">\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"expandAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsExpanded\"\n                      title=\"Expand all\">\n                      <i class=\"fa-solid fa-angles-down\"></i>\n                    </button>\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"collapseAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsCollapsed\"\n                      title=\"Collapse all\">\n                      <i class=\"fa-solid fa-angles-up\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"section-content fields-content\">\n              <!-- Grouped View -->\n              @if (fieldViewMode === 'grouped') {\n                <div class=\"field-groups\">\n                  @for (group of getFilteredFieldGroups(); track group) {\n                    <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                      [Expanded]=\"isFieldGroupExpanded(group.id)\"\n                      (ExpandedChange)=\"onFieldGroupExpandedChange(group.id, $event)\">\n                      <ng-template mjAccordionTitle>\n                        <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                        <span class=\"group-label\">{{ group.label }}</span>\n                        <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ group.fields.length }}</span>\n                      </ng-template>\n                      <ng-template mjAccordionBody>\n                        <div class=\"group-content\">\n                          @for (field of group.fields; track field) {\n                            <div\n                              class=\"field-item\"\n                              (click)=\"selectField(field)\"\n                              [class.selected]=\"IsFieldSelected(field)\">\n                              <div class=\"field-icon\">\n                                <i [class]=\"getFieldTypeIcon(field)\"></i>\n                              </div>\n                              <div class=\"field-info\">\n                                <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                <div class=\"field-db-name\">{{ field.Name }}</div>\n                                <div class=\"field-meta\">\n                                  <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                  @if (!field.AllowsNull) {\n                                    <span class=\"field-nullable\">Required</span>\n                                  }\n                                  @if (field.RelatedEntityID) {\n                                    <span class=\"field-related\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                      <i class=\"fa-solid fa-arrow-right\"></i>\n                                      {{ getRelatedEntityName(field) }}\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                              <div class=\"field-badges\">\n                                @if (field.IsPrimaryKey) {\n                                  <span class=\"badge pk\" title=\"Primary Key\">PK</span>\n                                }\n                                @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                                  <span class=\"badge fk\" title=\"Foreign Key\">FK</span>\n                                }\n                                @if (field.Encrypt) {\n                                  <span class=\"badge encrypted\" title=\"Encrypted\">\n                                    <i class=\"fa-solid fa-lock\"></i>\n                                  </span>\n                                }\n                                @if (IsInheritedField(field)) {\n                                  <span class=\"badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                    <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </ng-template>\n                    </mj-accordion-panel>\n                  }\n                </div>\n              }\n              <!-- List View - Modern Card-style Table -->\n              @if (fieldViewMode === 'list') {\n                <div class=\"fields-list-view\">\n                  <!-- Table Header -->\n                  <div class=\"list-header\">\n                    <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                      #\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                      Field Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-display-name sortable\" (click)=\"sortFieldList('DisplayName')\" [class.sorted]=\"fieldListSortColumn === 'DisplayName'\">\n                      Display Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'DisplayName' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                      Type\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                      Length\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                      Required\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-flags\">Flags</div>\n                    <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                      Description\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                  </div>\n                  <!-- Table Body -->\n                  <div class=\"list-body\">\n                    @for (field of getFilteredFieldsList(); track field; let i = $index) {\n                      <div\n                        class=\"list-row\"\n                        [class.selected]=\"IsFieldSelected(field)\"\n                        (click)=\"selectField(field)\">\n                        <div class=\"list-col col-seq\">\n                          <span class=\"seq-num\">{{ field.Sequence }}</span>\n                        </div>\n                        <div class=\"list-col col-name\">\n                          <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                          <span class=\"field-name-text\">{{ field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-display-name\">\n                          <span class=\"display-name-text\">{{ field.DisplayName || field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-type\">\n                          <span class=\"type-tag\">{{ field.Type }}</span>\n                        </div>\n                        <div class=\"list-col col-length\">\n                          @if (field.Length > 0) {\n                            <span class=\"length-value\">{{ field.Length }}</span>\n                          }\n                          @if (field.Length <= 0) {\n                            <span class=\"length-value muted\">\u2014</span>\n                          }\n                        </div>\n                        <div class=\"list-col col-nullable\">\n                          <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                            <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                            {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                          </span>\n                        </div>\n                        <div class=\"list-col col-flags\">\n                          <div class=\"flag-badges\">\n                            @if (field.IsPrimaryKey) {\n                              <span class=\"flag-badge pk\" title=\"Primary Key\">\n                                <i class=\"fa-solid fa-key\"></i> PK\n                              </span>\n                            }\n                            @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                              <span class=\"flag-badge fk\" title=\"Foreign Key\">\n                                <i class=\"fa-solid fa-link\"></i> FK\n                              </span>\n                            }\n                            @if (field.Encrypt) {\n                              <span class=\"flag-badge encrypted\" title=\"Encrypted\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                              </span>\n                            }\n                            @if (IsInheritedField(field)) {\n                              <span class=\"flag-badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"list-col col-desc\">\n                          <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Empty state -->\n                  @if (getFilteredFieldsList().length === 0) {\n                    <mj-empty-state\n                      Variant=\"no-results\"\n                      Size=\"compact\"\n                      Title=\"No fields match your search\" />\n                  }\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- RELATIONSHIPS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'relationships') {\n          <section class=\"section relationships-section\">\n            <div class=\"section-header\">\n              <div class=\"view-toggle\">\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'diagram'\"\n                  (click)=\"relationshipViewMode = 'diagram'\">\n                  <i class=\"fa-solid fa-diagram-project\"></i>\n                  Diagram\n                </button>\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'list'\"\n                  (click)=\"relationshipViewMode = 'list'\">\n                  <i class=\"fa-solid fa-list\"></i>\n                  List\n                </button>\n              </div>\n              <!-- Depth selector (only in diagram mode) -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"depth-selector\">\n                  <span class=\"depth-label\">Depth:</span>\n                  <div class=\"depth-buttons\">\n                    @for (d of [1, 2, 3, 4, 5]; track d) {\n                      <button\n                        class=\"depth-btn\"\n                        [class.active]=\"erdDepth === d\"\n                        (click)=\"setErdDepth(d)\"\n                        [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                        {{ d }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n            <div class=\"section-content\">\n              <!-- Diagram View using the ERD composite component -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"relationships-graph\">\n                  <mj-erd-composite\n                    [focusEntities]=\"entity ? [entity] : []\"\n                    [showFilterPanel]=\"false\"\n                    [showHeader]=\"false\"\n                    [depth]=\"erdDepth\"\n                    (stateChange)=\"onERDStateChange($event)\"\n                    (openRecord)=\"onERDOpenRecord($event)\">\n                  </mj-erd-composite>\n                </div>\n              }\n              <!-- List View -->\n              @if (relationshipViewMode === 'list') {\n                <div class=\"relationships-list\">\n                  <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (References to other entities)\n                      <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedOutgoingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon outgoing\">\n                              <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip outgoing\"\n                                [title]=\"field.Description || field.Name\"\n                                (click)=\"selectField(field)\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.Name }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedOutgoingRelationships.length === 0) {\n                        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-arrow-right-from-bracket\" Title=\"No outgoing relationships\" />\n                      }\n                    </div>\n                  </div>\n                  <!-- Incoming Relationships - Grouped by source entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Entities that reference this one)\n                      <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedIncomingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon incoming\">\n                              <i class=\"fa-solid fa-arrow-left\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip incoming\"\n                                [title]=\"'Type: ' + field.type\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.fieldName }}\n                                @if (field.bundleInAPI) {\n                                  <i class=\"fa-solid fa-box bundle-icon\" title=\"Bundled in API\"></i>\n                                }\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedIncomingRelationships.length === 0) {\n                        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-arrow-right-to-bracket\" Title=\"No incoming relationships\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- ORGANIC KEYS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'organicKeys') {\n          <section class=\"section organic-keys-section\">\n            <div class=\"section-content\">\n              @if (organicKeysOutgoing.length === 0 && organicKeysIncoming.length === 0) {\n                <mj-empty-state\n                  Icon=\"fa-solid fa-fingerprint\"\n                  Title=\"No Organic Keys\"\n                  Message=\"This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints.\" />\n              } @else {\n                <!-- Outgoing: Keys defined on THIS entity -->\n                @if (organicKeysOutgoing.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (Matches from this entity)\n                      <span class=\"group-count\">{{ organicKeysOutgoing.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (okGroup of organicKeysOutgoing; track okGroup.OrganicKey.ID) {\n                        <div class=\"organic-key-card\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <i class=\"fa-solid fa-fingerprint organic-key-icon\"></i>\n                              {{ okGroup.OrganicKey.Name }}\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"organic-key-badge strategy\">{{ okGroup.OrganicKey.NormalizationStrategy }}</span>\n                              <span class=\"organic-key-badge fields\">{{ okGroup.OrganicKey.MatchFieldNames }}</span>\n                            </div>\n                          </div>\n                          @if (okGroup.OrganicKey.Description) {\n                            <p class=\"organic-key-description\">{{ okGroup.OrganicKey.Description }}</p>\n                          }\n                          <div class=\"organic-key-targets\">\n                            @for (target of okGroup.RelatedEntities; track target.Info.ID) {\n                              <div class=\"organic-key-target clickable\" (click)=\"NavigateToEntityByID(target.Info.RelatedEntityID)\">\n                                <div class=\"rel-icon outgoing\">\n                                  <i class=\"fa-solid fa-arrow-right\"></i>\n                                </div>\n                                <div class=\"target-main\">\n                                  <div class=\"target-header\">\n                                    <i [class]=\"target.EntityIcon\" class=\"target-entity-icon\"></i>\n                                    <span class=\"target-entity-name\">{{ target.Info.DisplayName || target.EntityName }}</span>\n                                    <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                                  </div>\n                                  <div class=\"target-match-detail\">\n                                    @if (target.Info.IsDirectMatch) {\n                                      <span class=\"match-type-badge direct\">Direct</span>\n                                      <span class=\"match-fields\">{{ okGroup.OrganicKey.MatchFieldNames }} \u2192 {{ target.Info.RelatedEntityFieldNames }}</span>\n                                    } @else {\n                                      <span class=\"match-type-badge transitive\">Transitive</span>\n                                      <span class=\"match-fields\" [title]=\"target.Info.TransitiveObjectName || ''\">via {{ target.Info.TransitiveObjectName }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Incoming: Keys on OTHER entities targeting THIS entity -->\n                @if (organicKeysIncoming.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Other entities matching to this one)\n                      <span class=\"group-count\">{{ organicKeysIncoming.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (incoming of organicKeysIncoming; track incoming.OrganicKey.ID + incoming.SourceEntityName) {\n                        <div class=\"organic-key-card incoming clickable\" (click)=\"NavigateToEntityByID(incoming.SourceEntityID)\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <div class=\"rel-icon incoming\">\n                                <i class=\"fa-solid fa-arrow-left\"></i>\n                              </div>\n                              <i [class]=\"incoming.SourceEntityIcon\" class=\"target-entity-icon\"></i>\n                              {{ incoming.SourceEntityName }}\n                              <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"match-type-badge\" [class.direct]=\"incoming.MatchType === 'Direct'\" [class.transitive]=\"incoming.MatchType === 'Transitive'\">{{ incoming.MatchType }}</span>\n                            </div>\n                          </div>\n                          <div class=\"organic-key-detail-row\">\n                            <span class=\"detail-label\">Key:</span>\n                            <span class=\"detail-value\">{{ incoming.OrganicKey.Name }}</span>\n                            <span class=\"organic-key-badge fields\">{{ incoming.OrganicKey.MatchFieldNames }}</span>\n                            <span class=\"organic-key-badge strategy\">{{ incoming.OrganicKey.NormalizationStrategy }}</span>\n                          </div>\n                          @if (incoming.RelatedEntityConfig.IsDirectMatch) {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Matched via:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.RelatedEntityFieldNames }}</span>\n                            </div>\n                          } @else {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Bridge:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.TransitiveObjectName }}</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- PERMISSIONS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'permissions') {\n          <section class=\"section permissions-section\">\n            <div class=\"section-content\">\n              <div class=\"permissions-matrix\">\n                <table class=\"matrix-table\">\n                  <thead>\n                    <tr>\n                      <th>Role</th>\n                      <th class=\"center\">Create</th>\n                      <th class=\"center\">Read</th>\n                      <th class=\"center\">Update</th>\n                      <th class=\"center\">Delete</th>\n                      <th>RLS</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (perm of entity.Permissions; track perm) {\n                      <tr>\n                        <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"rls-info\">\n                          @if (perm.ReadRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Read RLS\">R</span>\n                          }\n                          @if (perm.CreateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Create RLS\">C</span>\n                          }\n                          @if (perm.UpdateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Update RLS\">U</span>\n                          }\n                          @if (perm.DeleteRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                          }\n                          @if (!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID) {\n                            <span class=\"no-rls\">None</span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (entity.Permissions.length === 0) {\n                  <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-shield-halved\" Title=\"No permissions configured\" />\n                }\n              </div>\n              <div class=\"api-capabilities\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-plug\"></i>\n                  API Capabilities\n                </h3>\n                <div class=\"capability-grid\">\n                  <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Include in API</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow All Rows</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Create</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Update</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Delete</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>User Search</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Custom Resolver</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- DATA SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'data') {\n          <section class=\"section data-section\">\n            <div class=\"data-viewer-container\">\n              @if (entity) {\n                <mj-entity-viewer\n                  [Entity]=\"entity\"\n                  [Provider]=\"Provider\"\n                  (RecordOpened)=\"OnRecordOpened($event)\"\n                  (CreateRecordRequested)=\"OnAddRequested()\">\n                </mj-entity-viewer>\n              }\n            </div>\n          </section>\n        }\n                <!-- ============================================================ -->\n        <!-- LINEAGE SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'lineage') {\n          <section class=\"section lineage-section\">\n            <div class=\"section-content\">\n              <div class=\"lineage-diagram\">\n                <div class=\"lineage-stage sources\">\n                  <h4>Data Sources</h4>\n                  <div class=\"lineage-items\">\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-keyboard\"></i>\n                      <span>Manual Entry</span>\n                    </div>\n                    @if (entity.IncludeInAPI) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-plug\"></i>\n                        <span>API Create</span>\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage entity-node\">\n                  <div class=\"entity-box\">\n                    <i [class]=\"entityIcon\"></i>\n                    <span>{{ entity.Name }}</span>\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage sinks\">\n                  <h4>Data Sinks</h4>\n                  <div class=\"lineage-items\">\n                    @if (entity.TrackRecordChanges) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Record Changes</span>\n                      </div>\n                    }\n                    @if (entity.AuditRecordAccess) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        <span>Access Audit</span>\n                      </div>\n                    }\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      <span>Related Entities ({{ stats.relationshipCount }})</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Tracking Configuration\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Track Record Changes</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit Record Access</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit View Runs</span>\n                  </div>\n                  <div class=\"config-item\">\n                    <span class=\"config-label\">Delete Type:</span>\n                    <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Cascade Deletes</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-map-location-dot\"></i>\n                  Geocoding\n                </h3>\n                <p class=\"helper-text\">When enabled, CodeGen auto-detects geo fields and generates map view support</p>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.SupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.SupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Supports Geocoding</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AutoUpdateSupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AutoUpdateSupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Auto-Detect Geocoding</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- HISTORY SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'history') {\n          <section class=\"section history-section\">\n            <div class=\"section-content\">\n              <div class=\"history-config\">\n                <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                  <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                  <div class=\"config-text\">\n                    <strong>Record Change Tracking</strong>\n                    <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"history-info\">\n                <div class=\"info-card\">\n                  <h4>\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    About Change Tracking\n                  </h4>\n                  @if (entity.TrackRecordChanges) {\n                    <p>\n                      This entity has change tracking enabled. All modifications to records are stored in the\n                      <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                      the before/after values.\n                    </p>\n                  }\n                  @if (!entity.TrackRecordChanges) {\n                    <p>\n                      This entity does not have change tracking enabled. To enable it, set\n                      <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                    </p>\n                  }\n                </div>\n                @if (entity.TrackRecordChanges) {\n                  <div class=\"info-card\">\n                    <h4>\n                      <i class=\"fa-solid fa-database\"></i>\n                      Audit Fields\n                    </h4>\n                    <ul class=\"audit-fields-list\">\n                      <li>\n                        <code>__mj_CreatedAt</code> - Record creation timestamp\n                      </li>\n                      <li>\n                        <code>__mj_UpdatedAt</code> - Last modification timestamp\n                      </li>\n                      @if (entity.DeleteType === 'Soft') {\n                        <li>\n                          <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- SETTINGS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'settings') {\n          <section class=\"section settings-section\">\n            <div class=\"section-content\">\n              <!-- IS-A Type Relationship Configuration -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"settings-panel isa-settings-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Relationship (IS-A)\n                  </h3>\n                  <div class=\"config-grid\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Virtual Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsVirtualEntity) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: var(--mj-brand-primary);\"></i> Yes \u2014 read-only view\n                        } @else {\n                          <i class=\"fa-solid fa-circle-minus\" style=\"color: var(--mj-text-muted);\"></i> No\n                        }\n                      </span>\n                    </div>\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Parent Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsChildType) {\n                          <span class=\"link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to parent entity\">\n                            {{ ParentChain[0]?.Name }}\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                          </span>\n                        } @else {\n                          <span class=\"muted\">None</span>\n                        }\n                      </span>\n                    </div>\n                    @if (IsChildType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Full Inheritance Chain</span>\n                        <span class=\"config-value\">{{ IsaBreadcrumb }}</span>\n                      </div>\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Inherited Fields</span>\n                        <span class=\"config-value\">{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }}</span>\n                      </div>\n                    }\n                    @if (IsParentType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Child Types</span>\n                        <span class=\"config-value\">\n                          @for (child of ChildEntities; track child.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(child)\">{{ child.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Sibling Types</span>\n                        <span class=\"config-value\">\n                          @for (sibling of SiblingEntities; track sibling.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(sibling)\">{{ sibling.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Disjoint Subtypes</span>\n                      <span class=\"config-value\">\n                        @if (IsParentType || IsChildType) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #059669;\"></i> Enforced \u2014 a parent record can only be one child type\n                        } @else {\n                          <span class=\"muted\">N/A</span>\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Entity Settings -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  Entity Settings\n                </h3>\n                @if (entity.Settings.length > 0) {\n                  <div class=\"settings-list\">\n                    @for (setting of entity.Settings; track setting) {\n                      <div class=\"setting-item\">\n                        <div class=\"setting-name\">{{ setting.Name }}</div>\n                        @if (isJsonValue(setting.Value)) {\n                          <div class=\"setting-value-json\">\n                            <mj-code-editor\n                              [value]=\"formatJsonValue(setting.Value)\"\n                              language=\"json\"\n                              [readonly]=\"true\"\n                              [lineWrapping]=\"true\"\n                              setup=\"minimal\">\n                            </mj-code-editor>\n                          </div>\n                        } @else {\n                          <div class=\"setting-value\">{{ setting.Value }}</div>\n                        }\n                        @if (setting.Comments) {\n                          <div class=\"setting-comment\">{{ setting.Comments }}</div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (entity.Settings.length === 0) {\n                  <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-sliders\" Title=\"No custom settings configured\" />\n                }\n              </div>\n              <!-- Full Text Search -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-magnifying-glass\"></i>\n                  Full-Text Search\n                </h3>\n                @if (entity.FullTextSearchEnabled) {\n                  <div class=\"fts-config\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Status</span>\n                      <span class=\"config-value enabled\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        Enabled\n                      </span>\n                    </div>\n                    @if (entity.FullTextCatalog) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Catalog</span>\n                        <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextIndex) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Index</span>\n                        <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextSearchFunction) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Function</span>\n                        <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (!entity.FullTextSearchEnabled) {\n                  <mj-empty-state Variant=\"warning\" Size=\"compact\" Title=\"Full-text search is not enabled for this entity\" />\n                }\n              </div>\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-table-columns\"></i>\n                  Form chrome\n                </h3>\n                <mj-entity-form-chrome-editor\n                  [FormConfig]=\"FormChromeConfig\"\n                  [ParentSchemaName]=\"entity.SchemaName\"\n                  [Candidates]=\"FormChromeCandidates\"\n                  [EditMode]=\"EditMode\"\n                  (FormConfigChange)=\"OnFormChromeConfigChange($event)\">\n                </mj-entity-form-chrome-editor>\n              </div>\n              <div class=\"settings-panel\">\n                <div class=\"panel-title-row\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-clone\"></i>\n                    Record cloning\n                  </h3>\n                  <!-- This form has no toolbar, so the panel carries its own edit controls. -->\n                  @if (UserCanEdit) {\n                    <div class=\"panel-title-actions\">\n                      @if (!EditMode) {\n                        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"StartEditMode()\">\n                          <i class=\"fa-solid fa-pen-to-square\"></i> Edit\n                        </button>\n                      } @else {\n                        <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" [disabled]=\"IsSavingCloneConfig\" (click)=\"SaveCloneConfig()\">\n                          <i class=\"fa-solid fa-floppy-disk\"></i> Save\n                        </button>\n                        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" [disabled]=\"IsSavingCloneConfig\" (click)=\"CancelEdit()\">Cancel</button>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (CloneConfigSaveError) {\n                  <p class=\"panel-error\">{{ CloneConfigSaveError }}</p>\n                }\n                <mj-entity-clone-config-editor\n                  [Provider]=\"ProviderToUse\"\n                  [Entity]=\"entity\"\n                  [CloneConfig]=\"CloneConfig\"\n                  [EditMode]=\"EditMode\"\n                  (CloneConfigChange)=\"OnCloneConfigChange($event)\">\n                </mj-entity-clone-config-editor>\n              </div>\n              <!-- Row Packaging -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-box\"></i>\n                  Schema Packaging\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-row\">\n                    <span class=\"config-label\">Rows to Pack</span>\n                    <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                  </div>\n                  @if (entity.RowsToPackSampleCount) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Count</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                    </div>\n                  }\n                  @if (entity.RowsToPackSampleMethod) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Method</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n      </main>\n      <!-- ============================================================ -->\n      <!-- DETAIL PANEL (Slides in from right) -->\n      <!-- ============================================================ -->\n      <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n        <div class=\"panel-header\">\n          @if (selectedField) {\n            <h3>Field Details</h3>\n          }\n          @if (selectedRelationship) {\n            <h3>Relationship Details</h3>\n          }\n          <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <!-- Field Details -->\n        @if (selectedField) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n              <div class=\"detail-field-db-name\">{{ selectedField.Name }}</div>\n              @if (selectedField.Description) {\n                <p class=\"field-description\">{{ selectedField.Description }}</p>\n              }\n            </div>\n            <div class=\"detail-section\">\n              <h5>Type Information</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">SQL Type</span>\n                  <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">TypeScript Type</span>\n                  <span class=\"value code\">{{ selectedField.TSType }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Nullable</span>\n                  <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                </div>\n                @if (selectedField.DefaultValue) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Default</span>\n                    <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            @if (IsInheritedField(selectedField)) {\n              <div class=\"detail-section isa-source-section\">\n                <h5>\n                  <i class=\"fa-solid fa-arrow-up\"></i>\n                  IS-A Inherited Field\n                </h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Source Entity</span>\n                    <span class=\"value link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to source entity\">\n                      {{ GetISAFieldSource(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Routing</span>\n                    <span class=\"value\">ORM routes Set/Get to parent</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.RelatedEntityID) {\n              <div class=\"detail-section\">\n                <h5>Relationship</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Related Entity</span>\n                    <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                      {{ getRelatedEntityName(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Display Type</span>\n                    <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.Encrypt) {\n              <div class=\"detail-section\">\n                <h5>Encryption</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Encrypted</span>\n                    <span class=\"value\">Yes</span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Decrypt in API</span>\n                    <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"detail-section\">\n              <h5>API Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Allow Update</span>\n                  <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Search</span>\n                  <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Full-Text Search</span>\n                  <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Form Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Form</span>\n                  <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Section</span>\n                  <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                </div>\n                @if (selectedField.Category) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Category</span>\n                    <span class=\"value\">{{ selectedField.Category }}</span>\n                  </div>\n                }\n                <div class=\"detail-item\">\n                  <span class=\"label\">Sequence</span>\n                  <span class=\"value\">{{ selectedField.Sequence }}</span>\n                </div>\n              </div>\n            </div>\n            @if (selectedField.EntityFieldValues.length > 0) {\n              <div class=\"detail-section\">\n                <h5>Allowed Values</h5>\n                <div class=\"value-list\">\n                  @for (val of selectedField.EntityFieldValues; track val) {\n                    <div class=\"value-item\">\n                      @if (val.Code !== val.Value) {\n                        <span class=\"value-code\">{{ val.Code }}</span>\n                      }\n                      <span class=\"value-display\">{{ val.Value }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Relationship Details -->\n        @if (selectedRelationship) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Connection</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">From Entity</span>\n                  <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Join Field</span>\n                  <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Type</span>\n                  <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Display Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Display in Form</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Location</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Bundle in API</span>\n                  <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </aside>\n    </div>\n  </div>\n} @else {\n  @if (isExplorerLoading) {\n    <div class=\"explorer-loading\">\n      <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n  }\n  @if (!isExplorerLoading && explorerError) {\n    <mj-empty-state\n      class=\"explorer-fill\"\n      Variant=\"error\"\n      Icon=\"fa-solid fa-triangle-exclamation\"\n      Title=\"Failed to load entity\"\n      [Message]=\"explorerError\" />\n  }\n  @if (!isExplorerLoading && !explorerError && !entity) {\n    <mj-empty-state\n      class=\"explorer-fill\"\n      Icon=\"fa-solid fa-database\"\n      Title=\"Entity metadata not available\" />\n  }\n}\n\n<!-- Loading / Error State -->\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name {\n    min-width: 0;\n}\n\n.display-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.flag-badge.encrypted {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n/* Field-group disclosure migrated to <mj-accordion-panel>. The bespoke\n   .field-group separators, .group-header bar + .group-header:hover, and the\n   .expand-icon chevron are now owned by the accordion and were removed. The\n   title-slot content styling (.group-icon / .group-label) is kept below. The\n   field-group count now uses the shared .mj-accordion-badge; .group-count below\n   is retained only for the non-accordion relationship / organic-key titles. */\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.field-chip.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming:hover {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config .helper-text {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n/* Full-pane empty/error placeholders (rule 6b flex-fill). */\n.explorer-fill {\n    height: 100%;\n}\n\n/* ============================================================\n   IS-A TYPE HIERARCHY & VIRTUAL ENTITY STYLES\n   ============================================================ */\n\n/* Badge variants for header */\n.isa-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* Breadcrumb under title */\n.isa-breadcrumb {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb i {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n/* IS-A Panel (overview section) */\n.isa-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row .code {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n/* Inheritance chain */\n.isa-chain {\n    padding: 8px 0;\n}\n\n.isa-chain-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.isa-node.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n/* Child types list */\n.isa-children {\n    padding: 8px 0;\n}\n\n.isa-child-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Clickable elements */\n.clickable {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n/* Field inherited badge (card and list views) */\n.badge.inherited,\n.flag-badge.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited i {\n    font-size: 9px;\n}\n\n/* IS-A source section in field detail panel */\n.isa-source-section {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section h5 {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section h5 i {\n    margin-right: 4px;\n}\n\n/* IS-A settings panel */\n.isa-settings-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel .link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel .link:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel .muted {\n    color: var(--text-muted);\n}\n\n/* IS-A Field Inspector */\n.isa-field-inspector {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n/* Field Source Inspector disclosure migrated to <mj-accordion-panel>; the\n   bespoke .isa-chain-label header (with chevron) is now the accordion header\n   and its layout rule was removed. The .isa-field-inspector wrapper is kept\n   for its top-border separator from the inheritance chain above. */\n\n.isa-inspector-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n/* Sibling chips */\n.isa-siblings {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n/* Child count badge */\n.isa-child-count {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count i {\n    font-size: 10px;\n}\n\n/* ============================================================\n   DATA SECTION\n   ============================================================ */\n.data-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   ORGANIC KEYS SECTION\n   ============================================================ */\n\n.organic-key-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable,\n.organic-key-card.clickable {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable:hover,\n.organic-key-card.clickable:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable:hover .target-nav-icon,\n.organic-key-card.clickable:hover .target-nav-icon {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n\n.panel-title-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-4);\n}\n\n.panel-title-row .panel-title {\n  margin-bottom: 0;\n}\n\n.panel-title-actions {\n  display: flex;\n  gap: var(--mj-space-2);\n}\n\n.panel-error {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-error);\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!isExplorerLoading && entity) {\n  <div class=\"entity-explorer\">\n    <!-- ============================================================ -->\n    <!-- HEADER BAR -->\n    <!-- ============================================================ -->\n    <header class=\"explorer-header\">\n      <div class=\"entity-identity\">\n        <div class=\"entity-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n          <i [class]=\"entityIcon\"></i>\n        </div>\n        <div class=\"entity-info\">\n          <div class=\"entity-title-row\">\n            <h1 class=\"entity-name\">{{ entityDisplayName }}</h1>\n            <span class=\"status-badge\" [ngClass]=\"statusClass\">\n              {{ entity.Status }}\n            </span>\n            @if (IsVirtualEntity) {\n              <span class=\"status-badge isa-badge virtual\">\n                <i class=\"fa-solid fa-eye\"></i> Virtual\n              </span>\n            }\n            @if (IsChildType) {\n              <span class=\"status-badge isa-badge child-type\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Click to navigate to parent entity\">\n                <i class=\"fa-solid fa-arrow-up\"></i> IS-A {{ ParentChain[0]?.Name }}\n              </span>\n            }\n            @if (IsParentType) {\n              <span class=\"status-badge isa-badge parent-type\">\n                <i class=\"fa-solid fa-sitemap\"></i> {{ ChildEntities.length }} child type{{ ChildEntities.length !== 1 ? 's' : '' }}\n              </span>\n              @if (HasOverlappingSubtypes) {\n                <span class=\"status-badge isa-badge overlapping\" title=\"Multiple child types can coexist for a single parent record\">\n                  <i class=\"fa-solid fa-clone\"></i> Overlapping Subtypes\n                </span>\n              }\n            }\n          </div>\n          @if (IsChildType) {\n            <div class=\"isa-breadcrumb\">\n              <i class=\"fa-solid fa-layer-group\"></i>\n              {{ IsaBreadcrumb }}\n            </div>\n          }\n          <div class=\"entity-subtitle\">\n            <span class=\"schema-table\">{{ entity.SchemaName }}.{{ entity.BaseTable }}</span>\n            <span class=\"separator\">|</span>\n            @if (entity.Description) {\n              <span class=\"entity-description\" [title]=\"entity.Description\">\n                {{ entity.Description | slice:0:80 }}{{ entity.Description.length > 80 ? '...' : '' }}\n              </span>\n            }\n          </div>\n        </div>\n      </div>\n      <div class=\"header-stats\">\n        <div class=\"stat-item\" (click)=\"setActiveSection('fields')\">\n          <i class=\"fa-solid fa-table-columns\"></i>\n          <span class=\"stat-value\">{{ stats.fieldCount }}</span>\n          <span class=\"stat-label\">Fields</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('relationships')\">\n          <i class=\"fa-solid fa-link\"></i>\n          <span class=\"stat-value\">{{ stats.relationshipCount }}</span>\n          <span class=\"stat-label\">Relations</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('permissions')\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span class=\"stat-value\">{{ stats.permissionCount }}</span>\n          <span class=\"stat-label\">Roles</span>\n        </div>\n        <div class=\"stat-item\" (click)=\"setActiveSection('data')\">\n          <i class=\"fa-solid fa-database\"></i>\n          @if (!isRowCountLoading) {\n            <span class=\"stat-value\">{{ formattedRowCount }}</span>\n          }\n          @if (isRowCountLoading) {\n            <span class=\"stat-value loading\">\n              <i class=\"fa-solid fa-spinner fa-spin\"></i>\n            </span>\n          }\n          <span class=\"stat-label\">Rows</span>\n        </div>\n      </div>\n    </header>\n    <!-- ============================================================ -->\n    <!-- MAIN CONTENT AREA -->\n    <!-- ============================================================ -->\n    <div class=\"explorer-body\">\n      <!-- Phone: the rail becomes one button that opens the Sections sheet -->\n      <mj-section-picker class=\"phone-section-picker\"\n                         [Items]=\"SectionPickerItems\"\n                         [ActiveKey]=\"ActiveSection\"\n                         (ActiveKeyChange)=\"OnSectionPicked($event)\"></mj-section-picker>\n      <!-- Navigation Rail -->\n      <nav class=\"nav-rail\">\n        @for (item of navItems; track item) {\n          <button\n            class=\"nav-item\"\n            [class.active]=\"activeSection === item.id\"\n            (click)=\"setActiveSection(item.id)\"\n            [title]=\"item.label\">\n            <i [class]=\"item.icon\"></i>\n            <span class=\"nav-label\">{{ item.label }}</span>\n            @if (item.badge) {\n              <span class=\"nav-badge\">{{ item.badge }}</span>\n            }\n          </button>\n        }\n      </nav>\n      <!-- Main Canvas -->\n      <main class=\"main-canvas\" [class.panel-open]=\"detailPanelOpen\">\n        <!-- ============================================================ -->\n        <!-- OVERVIEW SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'overview') {\n          <section class=\"section overview-section\">\n            <div class=\"section-content\">\n              <!-- Stats Cards Row - Clickable to navigate to sections -->\n              <div class=\"stats-cards\">\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('fields')\" title=\"View all fields\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-table-cells\"></i>\n                    <span>Fields</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.fieldCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ stats.primaryKeyCount }} PKs</span>\n                      <span>{{ stats.foreignKeyCount }} FKs</span>\n                      @if (stats.encryptedFieldCount) {\n                        <span>{{ stats.encryptedFieldCount }} Encrypted</span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('relationships')\" title=\"View relationships\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-diagram-project\"></i>\n                    <span>Relationships</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.relationshipCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>{{ groupedOutgoingRelationships.length }} Out</span>\n                      <span>{{ groupedIncomingRelationships.length }} In</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card clickable\" (click)=\"setActiveSection('permissions')\" title=\"View security settings\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-lock\"></i>\n                    <span>Security</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ stats.permissionCount }}</div>\n                    <div class=\"stat-details\">\n                      <span>Roles configured</span>\n                    </div>\n                  </div>\n                  <div class=\"stat-card-action\">\n                    <i class=\"fa-solid fa-arrow-right\"></i>\n                  </div>\n                </div>\n                <div class=\"stat-card\">\n                  <div class=\"stat-card-header\">\n                    <i class=\"fa-solid fa-database\"></i>\n                    <span>Data</span>\n                  </div>\n                  <div class=\"stat-card-body\">\n                    <div class=\"stat-main\">{{ formattedRowCount }}</div>\n                    <div class=\"stat-details\">\n                      @if (entity.RowCountRunAt) {\n                        <span>Updated {{ entity.RowCountRunAt | date:'short' }}</span>\n                      }\n                      @if (!entity.RowCountRunAt) {\n                        <span>Row count</span>\n                      }\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <!-- Capabilities -->\n              <div class=\"info-panel capabilities-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-bolt\"></i>\n                  Capabilities\n                </h3>\n                <div class=\"capability-tags\">\n                  @for (cap of capabilitySummary; track cap) {\n                    <span class=\"capability-tag\">\n                      <i class=\"fa-solid fa-check\"></i>\n                      {{ cap }}\n                    </span>\n                  }\n                  @if (!entity.IncludeInAPI) {\n                    <span class=\"capability-tag disabled\">\n                      <i class=\"fa-solid fa-xmark\"></i>\n                      No API\n                    </span>\n                  }\n                </div>\n              </div>\n              <!-- IS-A Type Hierarchy -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"info-panel isa-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Hierarchy\n                  </h3>\n                  @if (IsVirtualEntity) {\n                    <div class=\"isa-info-row virtual-info\">\n                      <i class=\"fa-solid fa-eye\"></i>\n                      <span>Virtual Entity \u2014 read-only view backed by <span class=\"code\">{{ entity.BaseView }}</span></span>\n                    </div>\n                  }\n                  @if (IsChildType) {\n                    <div class=\"isa-chain\">\n                      <div class=\"isa-chain-label\">Inheritance Chain</div>\n                      <div class=\"isa-chain-nodes\">\n                        <span class=\"isa-node current\">{{ entity.Name }}</span>\n                        @for (parent of ParentChain; track parent.ID) {\n                          <i class=\"fa-solid fa-arrow-right isa-arrow\"></i>\n                          <span class=\"isa-node parent clickable\" (click)=\"NavigateToEntity(parent)\" [title]=\"'Navigate to ' + parent.Name\">\n                            {{ parent.Name }}\n                          </span>\n                        }\n                      </div>\n                      <div class=\"isa-inherited-fields\">\n                        <i class=\"fa-solid fa-table-cells\"></i>\n                        <span>{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }} inherited from parent{{ ParentChain.length > 1 ? 's' : '' }}</span>\n                      </div>\n                    </div>\n                    <!-- IS-A Field Inspector: shows fields grouped by source entity -->\n                    @if (isaFieldGroups.length > 1) {\n                      <div class=\"isa-field-inspector\">\n                        <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                          [Expanded]=\"isaFieldInspectorExpanded\" (ExpandedChange)=\"isaFieldInspectorExpanded = $event\">\n                          <ng-template mjAccordionTitle>\n                            <span>Field Source Inspector</span>\n                          </ng-template>\n                          <ng-template mjAccordionBody>\n                          <div class=\"isa-inspector-groups\">\n                            @for (group of isaFieldGroups; track group.EntityName) {\n                              <div class=\"isa-inspector-group\" [class.own]=\"group.Level === 0\" [class.inherited]=\"group.Level > 0\">\n                                <div class=\"isa-inspector-header\">\n                                  <span class=\"isa-inspector-entity\">\n                                    @if (group.Level === 0) {\n                                      <i class=\"fa-solid fa-circle\" style=\"color: var(--mj-brand-primary); font-size: 8px;\"></i>\n                                    } @else {\n                                      <i class=\"fa-solid fa-arrow-up\" style=\"color: var(--mj-brand-primary); font-size: 10px;\"></i>\n                                    }\n                                    {{ group.Label }}\n                                  </span>\n                                  <span class=\"isa-inspector-count\">{{ group.Fields.length }} field{{ group.Fields.length !== 1 ? 's' : '' }}</span>\n                                </div>\n                                <div class=\"isa-inspector-fields\">\n                                  @for (field of group.Fields; track field.ID) {\n                                    <span class=\"isa-inspector-field\" [title]=\"field.Description || field.Name\">\n                                      {{ field.DisplayName || field.Name }}\n                                      <span class=\"isa-inspector-type\">{{ field.Type }}</span>\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                            }\n                          </div>\n                          </ng-template>\n                        </mj-accordion-panel>\n                      </div>\n                    }\n                    <!-- Sibling Types -->\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"isa-siblings\">\n                        <div class=\"isa-chain-label\">Sibling Types ({{ ParentChain[0]?.AllowMultipleSubtypes ? 'overlapping' : 'disjoint' }} under {{ ParentChain[0]?.Name }})</div>\n                        <div class=\"isa-child-list\">\n                          @for (sibling of SiblingEntities; track sibling.ID) {\n                            <span class=\"isa-sibling-chip clickable\" (click)=\"NavigateToEntity(sibling)\" [title]=\"'Navigate to ' + sibling.Name\">\n                              <i class=\"fa-solid fa-arrows-left-right\"></i>\n                              {{ sibling.Name }}\n                            </span>\n                          }\n                        </div>\n                      </div>\n                    }\n                  }\n                  @if (IsParentType) {\n                    <div class=\"isa-children\">\n                      <div class=\"isa-chain-label\">Child Types</div>\n                      <div class=\"isa-child-list\">\n                        @for (childCount of childEntityCounts; track childCount.EntityName) {\n                          <span class=\"isa-child-chip clickable\" (click)=\"NavigateToEntity(childCount.EntityInfo)\" [title]=\"'Navigate to ' + childCount.EntityName\">\n                            <i class=\"fa-solid fa-arrow-down\"></i>\n                            {{ childCount.EntityName }}\n                            <span class=\"isa-child-count\">\n                              @if (childCount.IsLoading) {\n                                <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                              } @else {\n                                {{ childCount.RecordCount | number }}\n                              }\n                            </span>\n                          </span>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              }\n              <!-- Database Info -->\n              <div class=\"info-panel database-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-server\"></i>\n                  Database\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Schema</span>\n                    <span class=\"info-value\">{{ entity.SchemaName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Table</span>\n                    <span class=\"info-value\">{{ entity.BaseTable }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">View</span>\n                    <span class=\"info-value\">{{ entity.BaseView }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Delete Type</span>\n                    <span class=\"info-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  @if (entity.spCreate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Create</span>\n                      <span class=\"info-value code\">{{ entity.spCreate }}</span>\n                    </div>\n                  }\n                  @if (entity.spUpdate) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Update</span>\n                      <span class=\"info-value code\">{{ entity.spUpdate }}</span>\n                    </div>\n                  }\n                  @if (entity.spDelete) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">SP Delete</span>\n                      <span class=\"info-value code\">{{ entity.spDelete }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n              <!-- Code Gen Info -->\n              <div class=\"info-panel codegen-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-code\"></i>\n                  Code Generation\n                </h3>\n                <div class=\"info-grid\">\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Class Name</span>\n                    <span class=\"info-value code\">{{ entity.ClassName }}</span>\n                  </div>\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Code Name</span>\n                    <span class=\"info-value code\">{{ entity.CodeName }}</span>\n                  </div>\n                  @if (entity.EntityObjectSubclassName) {\n                    <div class=\"info-item\">\n                      <span class=\"info-label\">Subclass</span>\n                      <span class=\"info-value code\">{{ entity.EntityObjectSubclassName }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- FIELDS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'fields') {\n          <section class=\"section fields-section\">\n            <div class=\"section-header\">\n              <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input\n                  type=\"text\"\n                  placeholder=\"Search fields...\"\n                  [ngModel]=\"fieldSearchTerm\"\n                  (ngModelChange)=\"onFieldSearch($event)\">\n              </div>\n              <div class=\"header-controls\">\n                <!-- View mode toggle -->\n                <div class=\"view-mode-toggle\">\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'grouped'\"\n                    (click)=\"fieldViewMode = 'grouped'\"\n                    title=\"Group by category\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                  </button>\n                  <button\n                    class=\"toggle-btn\"\n                    [class.active]=\"fieldViewMode === 'list'\"\n                    (click)=\"fieldViewMode = 'list'\"\n                    title=\"List view\">\n                    <i class=\"fa-solid fa-list\"></i>\n                  </button>\n                </div>\n                <!-- Expand/Collapse controls (only in grouped mode) -->\n                @if (fieldViewMode === 'grouped') {\n                  <div class=\"expand-collapse-controls\">\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"expandAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsExpanded\"\n                      title=\"Expand all\">\n                      <i class=\"fa-solid fa-angles-down\"></i>\n                    </button>\n                    <button\n                      class=\"control-btn\"\n                      (click)=\"collapseAllFieldGroups()\"\n                      [disabled]=\"allFieldGroupsCollapsed\"\n                      title=\"Collapse all\">\n                      <i class=\"fa-solid fa-angles-up\"></i>\n                    </button>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"section-content fields-content\">\n              <!-- Grouped View -->\n              @if (fieldViewMode === 'grouped') {\n                <div class=\"field-groups\">\n                  @for (group of getFilteredFieldGroups(); track group) {\n                    <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                      [Expanded]=\"isFieldGroupExpanded(group.id)\"\n                      (ExpandedChange)=\"onFieldGroupExpandedChange(group.id, $event)\">\n                      <ng-template mjAccordionTitle>\n                        <i [class]=\"group.icon\" class=\"group-icon\"></i>\n                        <span class=\"group-label\">{{ group.label }}</span>\n                        <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{ group.fields.length }}</span>\n                      </ng-template>\n                      <ng-template mjAccordionBody>\n                        <div class=\"group-content\">\n                          @for (field of group.fields; track field) {\n                            <div\n                              class=\"field-item\"\n                              (click)=\"selectField(field)\"\n                              [class.selected]=\"IsFieldSelected(field)\">\n                              <div class=\"field-icon\">\n                                <i [class]=\"getFieldTypeIcon(field)\"></i>\n                              </div>\n                              <div class=\"field-info\">\n                                <div class=\"field-name\">{{ field.DisplayName || field.Name }}</div>\n                                <div class=\"field-db-name\">{{ field.Name }}</div>\n                                <div class=\"field-meta\">\n                                  <span class=\"field-type\">{{ formatFieldType(field) }}</span>\n                                  @if (!field.AllowsNull) {\n                                    <span class=\"field-nullable\">Required</span>\n                                  }\n                                  @if (field.RelatedEntityID) {\n                                    <span class=\"field-related\" (click)=\"navigateToRelatedEntity(field); $event.stopPropagation()\">\n                                      <i class=\"fa-solid fa-arrow-right\"></i>\n                                      {{ getRelatedEntityName(field) }}\n                                    </span>\n                                  }\n                                </div>\n                              </div>\n                              <div class=\"field-badges\">\n                                @if (field.IsPrimaryKey) {\n                                  <span class=\"badge pk\" title=\"Primary Key\">PK</span>\n                                }\n                                @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                                  <span class=\"badge fk\" title=\"Foreign Key\">FK</span>\n                                }\n                                @if (field.Encrypt) {\n                                  <span class=\"badge encrypted\" title=\"Encrypted\">\n                                    <i class=\"fa-solid fa-lock\"></i>\n                                  </span>\n                                }\n                                @if (IsInheritedField(field)) {\n                                  <span class=\"badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                    <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                                  </span>\n                                }\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </ng-template>\n                    </mj-accordion-panel>\n                  }\n                </div>\n              }\n              <!-- List View - Modern Card-style Table -->\n              @if (fieldViewMode === 'list') {\n                <div class=\"fields-list-view\">\n                  <!-- Table Header -->\n                  <div class=\"list-header\">\n                    <div class=\"list-col col-seq sortable\" (click)=\"sortFieldList('Sequence')\" [class.sorted]=\"fieldListSortColumn === 'Sequence'\">\n                      #\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Sequence' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-name sortable\" (click)=\"sortFieldList('Name')\" [class.sorted]=\"fieldListSortColumn === 'Name'\">\n                      Field Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Name' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-display-name sortable\" (click)=\"sortFieldList('DisplayName')\" [class.sorted]=\"fieldListSortColumn === 'DisplayName'\">\n                      Display Name\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'DisplayName' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-type sortable\" (click)=\"sortFieldList('Type')\" [class.sorted]=\"fieldListSortColumn === 'Type'\">\n                      Type\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Type' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-length sortable\" (click)=\"sortFieldList('Length')\" [class.sorted]=\"fieldListSortColumn === 'Length'\">\n                      Length\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Length' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-nullable sortable\" (click)=\"sortFieldList('AllowsNull')\" [class.sorted]=\"fieldListSortColumn === 'AllowsNull'\">\n                      Required\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'AllowsNull' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                    <div class=\"list-col col-flags\">Flags</div>\n                    <div class=\"list-col col-desc sortable\" (click)=\"sortFieldList('Description')\" [class.sorted]=\"fieldListSortColumn === 'Description'\">\n                      Description\n                      <i class=\"sort-icon fa-solid\" [ngClass]=\"fieldListSortColumn === 'Description' ? (fieldListSortDirection === 'asc' ? 'fa-caret-up' : 'fa-caret-down') : 'fa-sort'\"></i>\n                    </div>\n                  </div>\n                  <!-- Table Body -->\n                  <div class=\"list-body\">\n                    @for (field of getFilteredFieldsList(); track field; let i = $index) {\n                      <div\n                        class=\"list-row\"\n                        [class.selected]=\"IsFieldSelected(field)\"\n                        (click)=\"selectField(field)\">\n                        <div class=\"list-col col-seq\">\n                          <span class=\"seq-num\">{{ field.Sequence }}</span>\n                        </div>\n                        <div class=\"list-col col-name\">\n                          <i [class]=\"getFieldTypeIcon(field)\" class=\"field-type-icon\"></i>\n                          <span class=\"field-name-text\">{{ field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-display-name\">\n                          <span class=\"display-name-text\">{{ field.DisplayName || field.Name }}</span>\n                        </div>\n                        <div class=\"list-col col-type\">\n                          <span class=\"type-tag\">{{ field.Type }}</span>\n                        </div>\n                        <div class=\"list-col col-length\">\n                          @if (field.Length > 0) {\n                            <span class=\"length-value\">{{ field.Length }}</span>\n                          }\n                          @if (field.Length <= 0) {\n                            <span class=\"length-value muted\">\u2014</span>\n                          }\n                        </div>\n                        <div class=\"list-col col-nullable\">\n                          <span class=\"required-indicator\" [class.required]=\"!field.AllowsNull\" [class.optional]=\"field.AllowsNull\">\n                            <i [class]=\"field.AllowsNull ? 'fa-solid fa-circle-minus' : 'fa-solid fa-circle-check'\"></i>\n                            {{ field.AllowsNull ? 'Optional' : 'Required' }}\n                          </span>\n                        </div>\n                        <div class=\"list-col col-flags\">\n                          <div class=\"flag-badges\">\n                            @if (field.IsPrimaryKey) {\n                              <span class=\"flag-badge pk\" title=\"Primary Key\">\n                                <i class=\"fa-solid fa-key\"></i> PK\n                              </span>\n                            }\n                            @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                              <span class=\"flag-badge fk\" title=\"Foreign Key\">\n                                <i class=\"fa-solid fa-link\"></i> FK\n                              </span>\n                            }\n                            @if (field.Encrypt) {\n                              <span class=\"flag-badge encrypted\" title=\"Encrypted\">\n                                <i class=\"fa-solid fa-lock\"></i>\n                              </span>\n                            }\n                            @if (IsInheritedField(field)) {\n                              <span class=\"flag-badge inherited\" [title]=\"'Inherited from ' + GetISAFieldSource(field)\">\n                                <i class=\"fa-solid fa-arrow-up\"></i> {{ GetISAFieldSource(field) }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                        <div class=\"list-col col-desc\">\n                          <span class=\"desc-text\" [title]=\"field.Description || ''\">{{ field.Description || '\u2014' }}</span>\n                        </div>\n                      </div>\n                    }\n                  </div>\n                  <!-- Empty state -->\n                  @if (getFilteredFieldsList().length === 0) {\n                    <mj-empty-state\n                      Variant=\"no-results\"\n                      Size=\"compact\"\n                      Title=\"No fields match your search\" />\n                  }\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- RELATIONSHIPS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'relationships') {\n          <section class=\"section relationships-section\">\n            <div class=\"section-header\">\n              <div class=\"view-toggle\">\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'diagram'\"\n                  (click)=\"relationshipViewMode = 'diagram'\">\n                  <i class=\"fa-solid fa-diagram-project\"></i>\n                  Diagram\n                </button>\n                <button\n                  class=\"toggle-btn\"\n                  [class.active]=\"relationshipViewMode === 'list'\"\n                  (click)=\"relationshipViewMode = 'list'\">\n                  <i class=\"fa-solid fa-list\"></i>\n                  List\n                </button>\n              </div>\n              <!-- Depth selector (only in diagram mode) -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"depth-selector\">\n                  <span class=\"depth-label\">Depth:</span>\n                  <div class=\"depth-buttons\">\n                    @for (d of [1, 2, 3, 4, 5]; track d) {\n                      <button\n                        class=\"depth-btn\"\n                        [class.active]=\"erdDepth === d\"\n                        (click)=\"setErdDepth(d)\"\n                        [title]=\"'Show ' + d + ' level(s) of relationships'\">\n                        {{ d }}\n                      </button>\n                    }\n                  </div>\n                </div>\n              }\n            </div>\n            <div class=\"section-content\">\n              <!-- Diagram View using the ERD composite component -->\n              @if (relationshipViewMode === 'diagram') {\n                <div class=\"relationships-graph\">\n                  <mj-erd-composite\n                    [focusEntities]=\"entity ? [entity] : []\"\n                    [showFilterPanel]=\"false\"\n                    [showHeader]=\"false\"\n                    [depth]=\"erdDepth\"\n                    (stateChange)=\"onERDStateChange($event)\"\n                    (openRecord)=\"onERDOpenRecord($event)\">\n                  </mj-erd-composite>\n                </div>\n              }\n              <!-- List View -->\n              @if (relationshipViewMode === 'list') {\n                <div class=\"relationships-list\">\n                  <!-- Outgoing Relationships (FK fields on this entity) - Grouped by target entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (References to other entities)\n                      <span class=\"group-count\">{{ groupedOutgoingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedOutgoingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon outgoing\">\n                              <i class=\"fa-solid fa-arrow-right\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip outgoing\"\n                                [title]=\"field.Description || field.Name\"\n                                (click)=\"selectField(field)\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.Name }}\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedOutgoingRelationships.length === 0) {\n                        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-arrow-right-from-bracket\" Title=\"No outgoing relationships\" />\n                      }\n                    </div>\n                  </div>\n                  <!-- Incoming Relationships - Grouped by source entity -->\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Entities that reference this one)\n                      <span class=\"group-count\">{{ groupedIncomingRelationships.length }}</span>\n                    </h3>\n                    <div class=\"relationship-items grouped\">\n                      @for (group of groupedIncomingRelationships; track group) {\n                        <div\n                          class=\"relationship-item-grouped\"\n                          >\n                          <div class=\"rel-header\">\n                            <div class=\"rel-icon incoming\">\n                              <i class=\"fa-solid fa-arrow-left\"></i>\n                            </div>\n                            <div class=\"rel-entity-name\">{{ group.entityName }}</div>\n                          </div>\n                          <div class=\"rel-fields-chips\">\n                            @for (field of group.fields; track field) {\n                              <span\n                                class=\"field-chip incoming\"\n                                [title]=\"'Type: ' + field.type\">\n                                <i class=\"fa-solid fa-link\"></i>\n                                {{ field.fieldName }}\n                                @if (field.bundleInAPI) {\n                                  <i class=\"fa-solid fa-box bundle-icon\" title=\"Bundled in API\"></i>\n                                }\n                              </span>\n                            }\n                          </div>\n                        </div>\n                      }\n                      @if (groupedIncomingRelationships.length === 0) {\n                        <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-arrow-right-to-bracket\" Title=\"No incoming relationships\" />\n                      }\n                    </div>\n                  </div>\n                </div>\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- ORGANIC KEYS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'organicKeys') {\n          <section class=\"section organic-keys-section\">\n            <div class=\"section-content\">\n              @if (organicKeysOutgoing.length === 0 && organicKeysIncoming.length === 0) {\n                <mj-empty-state\n                  Icon=\"fa-solid fa-fingerprint\"\n                  Title=\"No Organic Keys\"\n                  Message=\"This entity has no organic key relationships configured. Organic keys enable cross-system matching by shared business data like email addresses, phone numbers, or domain names \u2014 without requiring foreign key constraints.\" />\n              } @else {\n                <!-- Outgoing: Keys defined on THIS entity -->\n                @if (organicKeysOutgoing.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-from-bracket\"></i>\n                      Outgoing (Matches from this entity)\n                      <span class=\"group-count\">{{ organicKeysOutgoing.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (okGroup of organicKeysOutgoing; track okGroup.OrganicKey.ID) {\n                        <div class=\"organic-key-card\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <i class=\"fa-solid fa-fingerprint organic-key-icon\"></i>\n                              {{ okGroup.OrganicKey.Name }}\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"organic-key-badge strategy\">{{ okGroup.OrganicKey.NormalizationStrategy }}</span>\n                              <span class=\"organic-key-badge fields\">{{ okGroup.OrganicKey.MatchFieldNames }}</span>\n                            </div>\n                          </div>\n                          @if (okGroup.OrganicKey.Description) {\n                            <p class=\"organic-key-description\">{{ okGroup.OrganicKey.Description }}</p>\n                          }\n                          <div class=\"organic-key-targets\">\n                            @for (target of okGroup.RelatedEntities; track target.Info.ID) {\n                              <div class=\"organic-key-target clickable\" (click)=\"NavigateToEntityByID(target.Info.RelatedEntityID)\">\n                                <div class=\"rel-icon outgoing\">\n                                  <i class=\"fa-solid fa-arrow-right\"></i>\n                                </div>\n                                <div class=\"target-main\">\n                                  <div class=\"target-header\">\n                                    <i [class]=\"target.EntityIcon\" class=\"target-entity-icon\"></i>\n                                    <span class=\"target-entity-name\">{{ target.Info.DisplayName || target.EntityName }}</span>\n                                    <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                                  </div>\n                                  <div class=\"target-match-detail\">\n                                    @if (target.Info.IsDirectMatch) {\n                                      <span class=\"match-type-badge direct\">Direct</span>\n                                      <span class=\"match-fields\">{{ okGroup.OrganicKey.MatchFieldNames }} \u2192 {{ target.Info.RelatedEntityFieldNames }}</span>\n                                    } @else {\n                                      <span class=\"match-type-badge transitive\">Transitive</span>\n                                      <span class=\"match-fields\" [title]=\"target.Info.TransitiveObjectName || ''\">via {{ target.Info.TransitiveObjectName }}</span>\n                                    }\n                                  </div>\n                                </div>\n                              </div>\n                            }\n                          </div>\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n\n                <!-- Incoming: Keys on OTHER entities targeting THIS entity -->\n                @if (organicKeysIncoming.length > 0) {\n                  <div class=\"relationship-group\">\n                    <h3 class=\"relationship-group-title\">\n                      <i class=\"fa-solid fa-arrow-right-to-bracket\"></i>\n                      Incoming (Other entities matching to this one)\n                      <span class=\"group-count\">{{ organicKeysIncoming.length }}</span>\n                    </h3>\n                    <div class=\"organic-key-cards\">\n                      @for (incoming of organicKeysIncoming; track incoming.OrganicKey.ID + incoming.SourceEntityName) {\n                        <div class=\"organic-key-card incoming clickable\" (click)=\"NavigateToEntityByID(incoming.SourceEntityID)\">\n                          <div class=\"organic-key-card-header\">\n                            <div class=\"organic-key-name\">\n                              <div class=\"rel-icon incoming\">\n                                <i class=\"fa-solid fa-arrow-left\"></i>\n                              </div>\n                              <i [class]=\"incoming.SourceEntityIcon\" class=\"target-entity-icon\"></i>\n                              {{ incoming.SourceEntityName }}\n                              <i class=\"fa-solid fa-external-link-alt target-nav-icon\"></i>\n                            </div>\n                            <div class=\"organic-key-badges\">\n                              <span class=\"match-type-badge\" [class.direct]=\"incoming.MatchType === 'Direct'\" [class.transitive]=\"incoming.MatchType === 'Transitive'\">{{ incoming.MatchType }}</span>\n                            </div>\n                          </div>\n                          <div class=\"organic-key-detail-row\">\n                            <span class=\"detail-label\">Key:</span>\n                            <span class=\"detail-value\">{{ incoming.OrganicKey.Name }}</span>\n                            <span class=\"organic-key-badge fields\">{{ incoming.OrganicKey.MatchFieldNames }}</span>\n                            <span class=\"organic-key-badge strategy\">{{ incoming.OrganicKey.NormalizationStrategy }}</span>\n                          </div>\n                          @if (incoming.RelatedEntityConfig.IsDirectMatch) {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Matched via:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.RelatedEntityFieldNames }}</span>\n                            </div>\n                          } @else {\n                            <div class=\"organic-key-detail-row\">\n                              <span class=\"detail-label\">Bridge:</span>\n                              <span class=\"detail-value\">{{ incoming.RelatedEntityConfig.TransitiveObjectName }}</span>\n                            </div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- PERMISSIONS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'permissions') {\n          <section class=\"section permissions-section\">\n            <div class=\"section-content\">\n              <div class=\"permissions-matrix\">\n                <table class=\"matrix-table\">\n                  <thead>\n                    <tr>\n                      <th>Role</th>\n                      <th class=\"center\">Create</th>\n                      <th class=\"center\">Read</th>\n                      <th class=\"center\">Update</th>\n                      <th class=\"center\">Delete</th>\n                      <th>RLS</th>\n                    </tr>\n                  </thead>\n                  <tbody>\n                    @for (perm of entity.Permissions; track perm) {\n                      <tr>\n                        <td class=\"role-name\">{{ getRoleName(perm) }}</td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanCreate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanRead ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanUpdate ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"center\">\n                          <i class=\"permission-icon\" [ngClass]=\"perm.CanDelete ? 'fa-solid fa-check granted' : 'fa-solid fa-xmark denied'\"></i>\n                        </td>\n                        <td class=\"rls-info\">\n                          @if (perm.ReadRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Read RLS\">R</span>\n                          }\n                          @if (perm.CreateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Create RLS\">C</span>\n                          }\n                          @if (perm.UpdateRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Update RLS\">U</span>\n                          }\n                          @if (perm.DeleteRLSFilterID) {\n                            <span class=\"rls-badge\" title=\"Delete RLS\">D</span>\n                          }\n                          @if (!perm.ReadRLSFilterID && !perm.CreateRLSFilterID && !perm.UpdateRLSFilterID && !perm.DeleteRLSFilterID) {\n                            <span class=\"no-rls\">None</span>\n                          }\n                        </td>\n                      </tr>\n                    }\n                  </tbody>\n                </table>\n                @if (entity.Permissions.length === 0) {\n                  <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-shield-halved\" Title=\"No permissions configured\" />\n                }\n              </div>\n              <div class=\"api-capabilities\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-plug\"></i>\n                  API Capabilities\n                </h3>\n                <div class=\"capability-grid\">\n                  <div class=\"capability-item\" [class.enabled]=\"entity.IncludeInAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.IncludeInAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Include in API</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowAllRowsAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowAllRowsAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow All Rows</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowCreateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowCreateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Create</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUpdateAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUpdateAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Update</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowDeleteAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowDeleteAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Allow Delete</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.AllowUserSearchAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AllowUserSearchAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>User Search</span>\n                  </div>\n                  <div class=\"capability-item\" [class.enabled]=\"entity.CustomResolverAPI\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CustomResolverAPI ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Custom Resolver</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- DATA SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'data') {\n          <section class=\"section data-section\">\n            <div class=\"data-viewer-container\">\n              @if (entity) {\n                <mj-entity-viewer\n                  [Entity]=\"entity\"\n                  [Provider]=\"Provider\"\n                  (RecordOpened)=\"OnRecordOpened($event)\"\n                  (CreateRecordRequested)=\"OnAddRequested()\">\n                </mj-entity-viewer>\n              }\n            </div>\n          </section>\n        }\n                <!-- ============================================================ -->\n        <!-- LINEAGE SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'lineage') {\n          <section class=\"section lineage-section\">\n            <div class=\"section-content\">\n              <div class=\"lineage-diagram\">\n                <div class=\"lineage-stage sources\">\n                  <h4>Data Sources</h4>\n                  <div class=\"lineage-items\">\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-keyboard\"></i>\n                      <span>Manual Entry</span>\n                    </div>\n                    @if (entity.IncludeInAPI) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-plug\"></i>\n                        <span>API Create</span>\n                      </div>\n                    }\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage entity-node\">\n                  <div class=\"entity-box\">\n                    <i [class]=\"entityIcon\"></i>\n                    <span>{{ entity.Name }}</span>\n                  </div>\n                </div>\n                <div class=\"lineage-arrow\">\n                  <i class=\"fa-solid fa-arrow-right\"></i>\n                </div>\n                <div class=\"lineage-stage sinks\">\n                  <h4>Data Sinks</h4>\n                  <div class=\"lineage-items\">\n                    @if (entity.TrackRecordChanges) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                        <span>Record Changes</span>\n                      </div>\n                    }\n                    @if (entity.AuditRecordAccess) {\n                      <div class=\"lineage-item\">\n                        <i class=\"fa-solid fa-eye\"></i>\n                        <span>Access Audit</span>\n                      </div>\n                    }\n                    <div class=\"lineage-item\">\n                      <i class=\"fa-solid fa-link\"></i>\n                      <span>Related Entities ({{ stats.relationshipCount }})</span>\n                    </div>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                  Tracking Configuration\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.TrackRecordChanges\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Track Record Changes</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditRecordAccess\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditRecordAccess ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit Record Access</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AuditViewRuns\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AuditViewRuns ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Audit View Runs</span>\n                  </div>\n                  <div class=\"config-item\">\n                    <span class=\"config-label\">Delete Type:</span>\n                    <span class=\"config-value\">{{ entity.DeleteType }}</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.CascadeDeletes\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.CascadeDeletes ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Cascade Deletes</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"tracking-config\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-map-location-dot\"></i>\n                  Geocoding\n                </h3>\n                <p class=\"helper-text\">When enabled, CodeGen auto-detects geo fields and generates map view support</p>\n                <div class=\"config-grid\">\n                  <div class=\"config-item\" [class.enabled]=\"entity.SupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.SupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Supports Geocoding</span>\n                  </div>\n                  <div class=\"config-item\" [class.enabled]=\"entity.AutoUpdateSupportsGeoCoding\">\n                    <i class=\"fa-solid\" [ngClass]=\"entity.AutoUpdateSupportsGeoCoding ? 'fa-check' : 'fa-xmark'\"></i>\n                    <span>Auto-Detect Geocoding</span>\n                  </div>\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- HISTORY SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'history') {\n          <section class=\"section history-section\">\n            <div class=\"section-content\">\n              <div class=\"history-config\">\n                <div class=\"config-status\" [class.enabled]=\"entity.TrackRecordChanges\">\n                  <i class=\"fa-solid\" [ngClass]=\"entity.TrackRecordChanges ? 'fa-circle-check' : 'fa-circle-xmark'\"></i>\n                  <div class=\"config-text\">\n                    <strong>Record Change Tracking</strong>\n                    <span>{{ entity.TrackRecordChanges ? 'Enabled - All changes are recorded' : 'Disabled - Changes are not tracked' }}</span>\n                  </div>\n                </div>\n              </div>\n              <div class=\"history-info\">\n                <div class=\"info-card\">\n                  <h4>\n                    <i class=\"fa-solid fa-info-circle\"></i>\n                    About Change Tracking\n                  </h4>\n                  @if (entity.TrackRecordChanges) {\n                    <p>\n                      This entity has change tracking enabled. All modifications to records are stored in the\n                      <code>RecordChange</code> table, including the user who made the change, timestamp, and\n                      the before/after values.\n                    </p>\n                  }\n                  @if (!entity.TrackRecordChanges) {\n                    <p>\n                      This entity does not have change tracking enabled. To enable it, set\n                      <code>TrackRecordChanges</code> to <code>true</code> in the entity metadata.\n                    </p>\n                  }\n                </div>\n                @if (entity.TrackRecordChanges) {\n                  <div class=\"info-card\">\n                    <h4>\n                      <i class=\"fa-solid fa-database\"></i>\n                      Audit Fields\n                    </h4>\n                    <ul class=\"audit-fields-list\">\n                      <li>\n                        <code>__mj_CreatedAt</code> - Record creation timestamp\n                      </li>\n                      <li>\n                        <code>__mj_UpdatedAt</code> - Last modification timestamp\n                      </li>\n                      @if (entity.DeleteType === 'Soft') {\n                        <li>\n                          <code>__mj_DeletedAt</code> - Soft delete timestamp (when applicable)\n                        </li>\n                      }\n                    </ul>\n                  </div>\n                }\n              </div>\n            </div>\n          </section>\n        }\n        <!-- ============================================================ -->\n        <!-- SETTINGS SECTION -->\n        <!-- ============================================================ -->\n        @if (activeSection === 'settings') {\n          <section class=\"section settings-section\">\n            <div class=\"section-content\">\n              <!-- IS-A Type Relationship Configuration -->\n              @if (HasISARelationship || IsVirtualEntity) {\n                <div class=\"settings-panel isa-settings-panel\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-layer-group\"></i>\n                    Type Relationship (IS-A)\n                  </h3>\n                  <div class=\"config-grid\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Virtual Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsVirtualEntity) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: var(--mj-brand-primary);\"></i> Yes \u2014 read-only view\n                        } @else {\n                          <i class=\"fa-solid fa-circle-minus\" style=\"color: var(--mj-text-muted);\"></i> No\n                        }\n                      </span>\n                    </div>\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Parent Entity</span>\n                      <span class=\"config-value\">\n                        @if (IsChildType) {\n                          <span class=\"link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to parent entity\">\n                            {{ ParentChain[0]?.Name }}\n                            <i class=\"fa-solid fa-arrow-right\"></i>\n                          </span>\n                        } @else {\n                          <span class=\"muted\">None</span>\n                        }\n                      </span>\n                    </div>\n                    @if (IsChildType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Full Inheritance Chain</span>\n                        <span class=\"config-value\">{{ IsaBreadcrumb }}</span>\n                      </div>\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Inherited Fields</span>\n                        <span class=\"config-value\">{{ InheritedFieldCount }} field{{ InheritedFieldCount !== 1 ? 's' : '' }}</span>\n                      </div>\n                    }\n                    @if (IsParentType) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Child Types</span>\n                        <span class=\"config-value\">\n                          @for (child of ChildEntities; track child.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(child)\">{{ child.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    @if (SiblingEntities.length > 0) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Sibling Types</span>\n                        <span class=\"config-value\">\n                          @for (sibling of SiblingEntities; track sibling.ID; let last = $last) {\n                            <span class=\"link\" (click)=\"NavigateToEntity(sibling)\">{{ sibling.Name }}</span>{{ last ? '' : ', ' }}\n                          }\n                        </span>\n                      </div>\n                    }\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Disjoint Subtypes</span>\n                      <span class=\"config-value\">\n                        @if (IsParentType || IsChildType) {\n                          <i class=\"fa-solid fa-circle-check\" style=\"color: #059669;\"></i> Enforced \u2014 a parent record can only be one child type\n                        } @else {\n                          <span class=\"muted\">N/A</span>\n                        }\n                      </span>\n                    </div>\n                  </div>\n                </div>\n              }\n              <!-- Entity Settings -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-sliders\"></i>\n                  Entity Settings\n                </h3>\n                @if (entity.Settings.length > 0) {\n                  <div class=\"settings-list\">\n                    @for (setting of entity.Settings; track setting) {\n                      <div class=\"setting-item\">\n                        <div class=\"setting-name\">{{ setting.Name }}</div>\n                        @if (isJsonValue(setting.Value)) {\n                          <div class=\"setting-value-json\">\n                            <mj-code-editor\n                              [value]=\"formatJsonValue(setting.Value)\"\n                              language=\"json\"\n                              [readonly]=\"true\"\n                              [lineWrapping]=\"true\"\n                              setup=\"minimal\">\n                            </mj-code-editor>\n                          </div>\n                        } @else {\n                          <div class=\"setting-value\">{{ setting.Value }}</div>\n                        }\n                        @if (setting.Comments) {\n                          <div class=\"setting-comment\">{{ setting.Comments }}</div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n                @if (entity.Settings.length === 0) {\n                  <mj-empty-state Size=\"compact\" Icon=\"fa-solid fa-sliders\" Title=\"No custom settings configured\" />\n                }\n              </div>\n              <!-- Full Text Search -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-magnifying-glass\"></i>\n                  Full-Text Search\n                </h3>\n                @if (entity.FullTextSearchEnabled) {\n                  <div class=\"fts-config\">\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Status</span>\n                      <span class=\"config-value enabled\">\n                        <i class=\"fa-solid fa-circle-check\"></i>\n                        Enabled\n                      </span>\n                    </div>\n                    @if (entity.FullTextCatalog) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Catalog</span>\n                        <span class=\"config-value code\">{{ entity.FullTextCatalog }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextIndex) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Index</span>\n                        <span class=\"config-value code\">{{ entity.FullTextIndex }}</span>\n                      </div>\n                    }\n                    @if (entity.FullTextSearchFunction) {\n                      <div class=\"config-row\">\n                        <span class=\"config-label\">Function</span>\n                        <span class=\"config-value code\">{{ entity.FullTextSearchFunction }}</span>\n                      </div>\n                    }\n                  </div>\n                }\n                @if (!entity.FullTextSearchEnabled) {\n                  <mj-empty-state Variant=\"warning\" Size=\"compact\" Title=\"Full-text search is not enabled for this entity\" />\n                }\n              </div>\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-table-columns\"></i>\n                  Form chrome\n                </h3>\n                <mj-entity-form-chrome-editor\n                  [FormConfig]=\"FormChromeConfig\"\n                  [ParentSchemaName]=\"entity.SchemaName\"\n                  [Candidates]=\"FormChromeCandidates\"\n                  [EditMode]=\"EditMode\"\n                  (FormConfigChange)=\"OnFormChromeConfigChange($event)\">\n                </mj-entity-form-chrome-editor>\n              </div>\n              <div class=\"settings-panel\">\n                <div class=\"panel-title-row\">\n                  <h3 class=\"panel-title\">\n                    <i class=\"fa-solid fa-clone\"></i>\n                    Record cloning\n                  </h3>\n                  <!-- This form has no toolbar, so the panel carries its own edit controls. -->\n                  @if (UserCanEdit) {\n                    <div class=\"panel-title-actions\">\n                      @if (!EditMode) {\n                        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" (click)=\"StartEditMode()\">\n                          <i class=\"fa-solid fa-pen-to-square\"></i> Edit\n                        </button>\n                      } @else {\n                        <button type=\"button\" mjButton Variant=\"primary\" Size=\"sm\" [disabled]=\"IsSavingCloneConfig\" (click)=\"SaveCloneConfig()\">\n                          <i class=\"fa-solid fa-floppy-disk\"></i> Save\n                        </button>\n                        <button type=\"button\" mjButton Variant=\"outline\" Size=\"sm\" [disabled]=\"IsSavingCloneConfig\" (click)=\"CancelEdit()\">Cancel</button>\n                      }\n                    </div>\n                  }\n                </div>\n                @if (CloneConfigSaveError) {\n                  <p class=\"panel-error\">{{ CloneConfigSaveError }}</p>\n                }\n                <mj-entity-clone-config-editor\n                  [Provider]=\"ProviderToUse\"\n                  [Entity]=\"entity\"\n                  [CloneConfig]=\"CloneConfig\"\n                  [EditMode]=\"EditMode\"\n                  (CloneConfigChange)=\"OnCloneConfigChange($event)\">\n                </mj-entity-clone-config-editor>\n              </div>\n              <!-- Row Packaging -->\n              <div class=\"settings-panel\">\n                <h3 class=\"panel-title\">\n                  <i class=\"fa-solid fa-box\"></i>\n                  Schema Packaging\n                </h3>\n                <div class=\"config-grid\">\n                  <div class=\"config-row\">\n                    <span class=\"config-label\">Rows to Pack</span>\n                    <span class=\"config-value\">{{ entity.RowsToPackWithSchema || 'None' }}</span>\n                  </div>\n                  @if (entity.RowsToPackSampleCount) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Count</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleCount }}</span>\n                    </div>\n                  }\n                  @if (entity.RowsToPackSampleMethod) {\n                    <div class=\"config-row\">\n                      <span class=\"config-label\">Sample Method</span>\n                      <span class=\"config-value\">{{ entity.RowsToPackSampleMethod }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            </div>\n          </section>\n        }\n      </main>\n      <!-- ============================================================ -->\n      <!-- DETAIL PANEL (Slides in from right) -->\n      <!-- ============================================================ -->\n      <aside class=\"detail-panel\" [class.open]=\"detailPanelOpen\">\n        <div class=\"panel-header\">\n          @if (selectedField) {\n            <h3>Field Details</h3>\n          }\n          @if (selectedRelationship) {\n            <h3>Relationship Details</h3>\n          }\n          <button class=\"close-btn\" (click)=\"closeDetailPanel()\">\n            <i class=\"fa-solid fa-xmark\"></i>\n          </button>\n        </div>\n        <!-- Field Details -->\n        @if (selectedField) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedField.DisplayName || selectedField.Name }}</h4>\n              <div class=\"detail-field-db-name\">{{ selectedField.Name }}</div>\n              @if (selectedField.Description) {\n                <p class=\"field-description\">{{ selectedField.Description }}</p>\n              }\n            </div>\n            <div class=\"detail-section\">\n              <h5>Type Information</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">SQL Type</span>\n                  <span class=\"value code\">{{ formatFieldType(selectedField) }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">TypeScript Type</span>\n                  <span class=\"value code\">{{ selectedField.TSType }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Nullable</span>\n                  <span class=\"value\">{{ selectedField.AllowsNull ? 'Yes' : 'No' }}</span>\n                </div>\n                @if (selectedField.DefaultValue) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Default</span>\n                    <span class=\"value code\">{{ selectedField.DefaultValue }}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            @if (IsInheritedField(selectedField)) {\n              <div class=\"detail-section isa-source-section\">\n                <h5>\n                  <i class=\"fa-solid fa-arrow-up\"></i>\n                  IS-A Inherited Field\n                </h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Source Entity</span>\n                    <span class=\"value link\" (click)=\"NavigateToEntity(ParentChain[0])\" title=\"Navigate to source entity\">\n                      {{ GetISAFieldSource(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Routing</span>\n                    <span class=\"value\">ORM routes Set/Get to parent</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.RelatedEntityID) {\n              <div class=\"detail-section\">\n                <h5>Relationship</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Related Entity</span>\n                    <span class=\"value link\" (click)=\"navigateToRelatedEntity(selectedField)\">\n                      {{ getRelatedEntityName(selectedField) }}\n                      <i class=\"fa-solid fa-arrow-right\"></i>\n                    </span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Display Type</span>\n                    <span class=\"value\">{{ selectedField.RelatedEntityDisplayType }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            @if (selectedField.Encrypt) {\n              <div class=\"detail-section\">\n                <h5>Encryption</h5>\n                <div class=\"detail-grid\">\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Encrypted</span>\n                    <span class=\"value\">Yes</span>\n                  </div>\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Decrypt in API</span>\n                    <span class=\"value\">{{ selectedField.AllowDecryptInAPI ? 'Yes' : 'No' }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n            <div class=\"detail-section\">\n              <h5>API Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Allow Update</span>\n                  <span class=\"value\">{{ selectedField.AllowUpdateAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Search</span>\n                  <span class=\"value\">{{ selectedField.IncludeInUserSearchAPI ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Full-Text Search</span>\n                  <span class=\"value\">{{ selectedField.FullTextSearchEnabled ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Form Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Include in Form</span>\n                  <span class=\"value\">{{ selectedField.IncludeInGeneratedForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Section</span>\n                  <span class=\"value\">{{ selectedField.GeneratedFormSection }}</span>\n                </div>\n                @if (selectedField.Category) {\n                  <div class=\"detail-item\">\n                    <span class=\"label\">Category</span>\n                    <span class=\"value\">{{ selectedField.Category }}</span>\n                  </div>\n                }\n                <div class=\"detail-item\">\n                  <span class=\"label\">Sequence</span>\n                  <span class=\"value\">{{ selectedField.Sequence }}</span>\n                </div>\n              </div>\n            </div>\n            @if (selectedField.EntityFieldValues.length > 0) {\n              <div class=\"detail-section\">\n                <h5>Allowed Values</h5>\n                <div class=\"value-list\">\n                  @for (val of selectedField.EntityFieldValues; track val) {\n                    <div class=\"value-item\">\n                      @if (val.Code !== val.Value) {\n                        <span class=\"value-code\">{{ val.Code }}</span>\n                      }\n                      <span class=\"value-display\">{{ val.Value }}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Relationship Details -->\n        @if (selectedRelationship) {\n          <div class=\"panel-content\">\n            <div class=\"detail-section\">\n              <h4>{{ selectedRelationship.DisplayName || selectedRelationship.Entity }}</h4>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Connection</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">From Entity</span>\n                  <span class=\"value\">{{ selectedRelationship.Entity }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Join Field</span>\n                  <span class=\"value code\">{{ selectedRelationship.RelatedEntityJoinField }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Type</span>\n                  <span class=\"value\">{{ selectedRelationship.Type }}</span>\n                </div>\n              </div>\n            </div>\n            <div class=\"detail-section\">\n              <h5>Display Settings</h5>\n              <div class=\"detail-grid\">\n                <div class=\"detail-item\">\n                  <span class=\"label\">Display in Form</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayInForm ? 'Yes' : 'No' }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Location</span>\n                  <span class=\"value\">{{ selectedRelationship.DisplayLocation }}</span>\n                </div>\n                <div class=\"detail-item\">\n                  <span class=\"label\">Bundle in API</span>\n                  <span class=\"value\">{{ selectedRelationship.BundleInAPI ? 'Yes' : 'No' }}</span>\n                </div>\n              </div>\n            </div>\n          </div>\n        }\n      </aside>\n    </div>\n  </div>\n} @else {\n  @if (isExplorerLoading) {\n    <div class=\"explorer-loading\">\n      <mj-loading text=\"Loading entity...\"></mj-loading>\n    </div>\n  }\n  @if (!isExplorerLoading && explorerError) {\n    <mj-empty-state\n      class=\"explorer-fill\"\n      Variant=\"error\"\n      Icon=\"fa-solid fa-triangle-exclamation\"\n      Title=\"Failed to load entity\"\n      [Message]=\"explorerError\" />\n  }\n  @if (!isExplorerLoading && !explorerError && !entity) {\n    <mj-empty-state\n      class=\"explorer-fill\"\n      Icon=\"fa-solid fa-database\"\n      Title=\"Entity metadata not available\" />\n  }\n}\n\n<!-- Loading / Error State -->\n", styles: ["/* ============================================================\n   ENTITY EXPLORER FORM - MAIN STYLES\n   A world-class exploration-focused entity intelligence hub\n   ============================================================ */\n\n/* CSS Variables */\n:host {\n    --nav-rail-width: 64px;\n    --header-height: 80px;\n    --detail-panel-width: 400px;\n\n    --bg-primary: var(--mj-bg-surface);\n    --bg-secondary: var(--mj-bg-surface-sunken);\n    --bg-tertiary: var(--mj-bg-surface-sunken);\n\n    --text-primary: var(--mj-text-primary);\n    --text-secondary: var(--mj-text-secondary);\n    --text-muted: var(--mj-text-muted);\n\n    --border-color: var(--mj-border-default);\n    --border-light: var(--mj-border-default);\n\n    --accent-color: var(--mj-brand-primary);\n    --accent-light: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    --accent-dark: var(--mj-brand-primary);\n\n    --success-color: var(--mj-status-success);\n    --warning-color: var(--mj-status-warning);\n    --danger-color: var(--mj-status-error);\n\n    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);\n    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n\n    --radius-sm: 4px;\n    --radius-md: 8px;\n    --radius-lg: 12px;\n\n    --transition-fast: 150ms ease;\n    --transition-normal: 250ms ease;\n\n    display: block;\n    height: 100%;\n    width: 100%;\n}\n\n.entity-explorer {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-secondary);\n    overflow: hidden;\n}\n\n/* ============================================================\n   HEADER BAR\n   ============================================================ */\n\n.explorer-header {\n    display: flex;\n    align-items: center;\n    gap: 24px;\n    padding: 16px 24px;\n    background: var(--bg-primary);\n    border-bottom: 1px solid var(--border-color);\n    min-height: var(--header-height);\n}\n\n.entity-identity {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex: 1;\n    min-width: 0;\n}\n\n.entity-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: var(--radius-md);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.entity-info {\n    min-width: 0;\n    flex: 1;\n}\n\n.entity-title-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.entity-name {\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.status-badge {\n    padding: 2px 8px;\n    border-radius: 9999px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.status-badge.status-active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.status-deprecated {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.status-badge.status-disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.entity-subtitle {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 4px;\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.schema-table {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.separator {\n    color: var(--border-color);\n}\n\n.entity-description {\n    color: var(--text-secondary);\n}\n\n/* Header Stats */\n.header-stats {\n    display: flex;\n    gap: 4px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 8px 16px;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: background var(--transition-fast);\n}\n\n.stat-item:hover {\n    background: var(--bg-tertiary);\n}\n\n.stat-item i {\n    font-size: 16px;\n    color: var(--text-muted);\n    margin-bottom: 4px;\n}\n\n.stat-value {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.stat-label {\n    font-size: 11px;\n    color: var(--text-muted);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* ============================================================\n   MAIN BODY (NAV RAIL + CANVAS)\n   ============================================================ */\n\n.explorer-body {\n    display: flex;\n    flex: 1;\n    overflow: hidden;\n}\n\n/* Navigation Rail - Minimalist Icon-First Design */\n.phone-section-picker {\n    display: none;\n}\n\n.nav-rail {\n    width: var(--nav-rail-width);\n    background: var(--bg-primary);\n    border-right: 1px solid var(--border-color);\n    display: flex;\n    flex-direction: column;\n    padding: 8px 0;\n    flex-shrink: 0;\n    gap: 2px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 12px 4px 8px 4px;\n    margin: 0 8px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    position: relative;\n    color: var(--text-muted);\n    min-height: 54px;\n}\n\n.nav-item i {\n    font-size: 18px;\n    margin-bottom: 4px;\n    transition: transform var(--transition-fast);\n}\n\n.nav-label {\n    font-size: 9px;\n    font-weight: 500;\n    letter-spacing: 0.2px;\n    white-space: nowrap;\n    text-align: center;\n    line-height: 1;\n    opacity: 0.9;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 4px;\n    right: 4px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    font-size: 10px;\n    font-weight: 600;\n    border-radius: 9999px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.nav-item:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.nav-item:hover i {\n    transform: scale(1.1);\n}\n\n.nav-item.active {\n    background: var(--accent-light);\n    color: var(--accent-color);\n}\n\n.nav-item.active i {\n    transform: scale(1.05);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: -8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 28px;\n    background: var(--accent-color);\n    border-radius: 0 3px 3px 0;\n}\n\n/* ============================================================\n   MAIN CANVAS\n   ============================================================ */\n\n.main-canvas {\n    flex: 1;\n    overflow: auto;\n    transition: margin-right var(--transition-normal);\n    display: flex;\n    flex-direction: column;\n}\n\n.main-canvas.panel-open {\n    margin-right: var(--detail-panel-width);\n}\n\n/* Sections */\n.section {\n    padding: 24px;\n}\n\n.section-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.section-content {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n/* Search Box */\n.search-box {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 16px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    width: 300px;\n}\n\n.search-box i {\n    color: var(--text-muted);\n}\n\n.search-box input {\n    flex: 1;\n    border: none;\n    background: transparent;\n    font-size: 14px;\n    outline: none;\n    color: var(--text-primary);\n}\n\n.search-box input::placeholder {\n    color: var(--text-muted);\n}\n\n/* View Toggle */\n.view-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.toggle-btn {\n    padding: 8px 16px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    transition: all var(--transition-fast);\n}\n\n.toggle-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.toggle-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.toggle-btn.active {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n/* Depth Selector */\n.depth-selector {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-left: auto;\n}\n\n.depth-label {\n    font-size: 13px;\n    color: var(--text-secondary);\n    font-weight: 500;\n}\n\n.depth-buttons {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.depth-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    font-size: 13px;\n    font-weight: 500;\n    transition: all var(--transition-fast);\n}\n\n.depth-btn:not(:last-child) {\n    border-right: 1px solid var(--border-color);\n}\n\n.depth-btn:hover {\n    background: var(--bg-tertiary);\n}\n\n.depth-btn.active {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n/* Header Controls (view mode + expand/collapse) */\n.header-controls {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.view-mode-toggle {\n    display: flex;\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-md);\n    overflow: hidden;\n}\n\n.expand-collapse-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.control-btn {\n    padding: 6px 10px;\n    border: 1px solid var(--border-color);\n    background: var(--bg-primary);\n    color: var(--text-secondary);\n    cursor: pointer;\n    border-radius: var(--radius-sm);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    transition: all var(--transition-fast);\n}\n\n.control-btn:hover:not(:disabled) {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.control-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n/* Fields List View - Modern Design */\n.fields-list-view {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: var(--bg-primary);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.list-header {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 12px 20px;\n    background: var(--bg-secondary);\n    border-bottom: 2px solid var(--border-color);\n    position: sticky;\n    top: 0;\n    z-index: 10;\n}\n\n.list-header .list-col {\n    font-size: 11px;\n    font-weight: 700;\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    color: var(--text-secondary);\n}\n\n.list-header .list-col.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color var(--transition-fast);\n    user-select: none;\n}\n\n.list-header .list-col.sortable:hover {\n    color: var(--accent-color);\n}\n\n.list-header .list-col.sortable.sorted {\n    color: var(--accent-color);\n}\n\n.sort-icon {\n    font-size: 10px;\n    opacity: 0.4;\n    transition: opacity var(--transition-fast);\n}\n\n.list-col.sortable:hover .sort-icon {\n    opacity: 0.7;\n}\n\n.list-col.sortable.sorted .sort-icon {\n    opacity: 1;\n}\n\n.list-body {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.list-row {\n    display: grid;\n    grid-template-columns: 50px 1fr 1fr 100px 70px 100px 100px 1fr;\n    gap: 12px;\n    padding: 14px 20px;\n    border-bottom: 1px solid var(--border-light);\n    cursor: pointer;\n    transition: all var(--transition-fast);\n    align-items: center;\n}\n\n.list-row:hover {\n    background: var(--bg-secondary);\n}\n\n.list-row.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 17px;\n}\n\n.list-row:last-child {\n    border-bottom: none;\n}\n\n/* Column-specific styling */\n.col-seq {\n    text-align: center;\n}\n\n.seq-num {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--bg-tertiary);\n    border-radius: 50%;\n    font-size: 11px;\n    font-weight: 600;\n    color: var(--text-secondary);\n}\n\n.list-row:hover .seq-num,\n.list-row.selected .seq-num {\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    min-width: 0;\n}\n\n.field-type-icon {\n    color: var(--accent-color);\n    font-size: 16px;\n    width: 20px;\n    flex-shrink: 0;\n}\n\n.field-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n}\n\n.col-display-name {\n    min-width: 0;\n}\n\n.display-name-text {\n    font-weight: 500;\n    color: var(--text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-tag {\n    display: inline-block;\n    padding: 4px 10px;\n    background: var(--bg-tertiary);\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--text-secondary);\n    font-family: 'SF Mono', 'Consolas', monospace;\n}\n\n.length-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--text-primary);\n}\n\n.length-value.muted {\n    color: var(--text-muted);\n}\n\n.required-indicator {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 11px;\n    font-weight: 500;\n    padding: 4px 8px;\n    border-radius: 4px;\n}\n\n.required-indicator.required {\n    color: var(--danger-color);\n    background: color-mix(in srgb, var(--mj-status-error) 10%, transparent);\n}\n\n.required-indicator.required i {\n    color: var(--danger-color);\n}\n\n.required-indicator.optional {\n    color: var(--text-muted);\n    background: transparent;\n}\n\n.flag-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.flag-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.flag-badge.pk {\n    background: var(--mj-status-warning);\n    color: var(--mj-bg-surface);\n}\n\n.flag-badge.fk {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.flag-badge.encrypted {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.col-desc {\n    min-width: 0;\n}\n\n.desc-text {\n    font-size: 13px;\n    color: var(--text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    display: block;\n}\n\n/* ============================================================\n   OVERVIEW SECTION\n   ============================================================ */\n\n.stats-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 16px;\n}\n\n.stat-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 16px;\n    position: relative;\n    transition: all var(--transition-fast);\n}\n\n.stat-card.clickable {\n    cursor: pointer;\n}\n\n.stat-card.clickable:hover {\n    border-color: var(--accent-color);\n    box-shadow: var(--shadow-md);\n    transform: translateY(-2px);\n}\n\n.stat-card.clickable:hover .stat-card-action {\n    opacity: 1;\n    transform: translateX(0);\n}\n\n.stat-card-action {\n    position: absolute;\n    right: 16px;\n    top: 50%;\n    transform: translateY(-50%) translateX(-4px);\n    color: var(--accent-color);\n    opacity: 0;\n    transition: all var(--transition-fast);\n}\n\n.stat-card-action i {\n    font-size: 14px;\n}\n\n.stat-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    color: var(--text-secondary);\n    font-size: 13px;\n    margin-bottom: 12px;\n}\n\n.stat-card-header i {\n    font-size: 14px;\n}\n\n.stat-card-body .stat-main {\n    font-size: 32px;\n    font-weight: 700;\n    color: var(--text-primary);\n    line-height: 1;\n    margin-bottom: 8px;\n}\n\n.stat-card-body .stat-details {\n    display: flex;\n    gap: 12px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n/* Info Panels */\n.info-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 16px 0;\n}\n\n.panel-title i {\n    color: var(--accent-color);\n}\n\n/* Capability Tags */\n.capability-tags {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.capability-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.capability-tag i {\n    font-size: 10px;\n}\n\n.capability-tag.disabled {\n    background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n/* Info Grid */\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.info-label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.info-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.info-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 13px;\n    color: var(--accent-dark);\n}\n\n/* ============================================================\n   FIELDS SECTION\n   ============================================================ */\n\n.fields-content {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.field-groups {\n    display: flex;\n    flex-direction: column;\n}\n\n/* Field-group disclosure migrated to <mj-accordion-panel>. The bespoke\n   .field-group separators, .group-header bar + .group-header:hover, and the\n   .expand-icon chevron are now owned by the accordion and were removed. The\n   title-slot content styling (.group-icon / .group-label) is kept below. The\n   field-group count now uses the shared .mj-accordion-badge; .group-count below\n   is retained only for the non-accordion relationship / organic-key titles. */\n\n.group-icon {\n    font-size: 16px;\n    color: var(--accent-color);\n    width: 20px;\n    text-align: center;\n}\n\n.group-label {\n    flex: 1;\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n    letter-spacing: 0.01em;\n    text-transform: uppercase;\n}\n\n.group-count {\n    padding: 3px 10px;\n    background: var(--accent-light);\n    border-radius: 9999px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--accent-color);\n}\n\n.group-content {\n    border-top: 1px solid var(--border-light);\n    background: var(--bg-secondary);\n}\n\n.field-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px 12px 48px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.field-item:last-child {\n    border-bottom: none;\n}\n\n.field-item:hover {\n    background: var(--accent-light);\n}\n\n.field-item.selected {\n    background: var(--accent-light);\n    border-left: 3px solid var(--accent-color);\n    padding-left: 45px;\n}\n\n.field-icon {\n    width: 28px;\n    height: 28px;\n    border-radius: var(--radius-sm);\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 12px;\n    color: var(--text-muted);\n    flex-shrink: 0;\n}\n\n.field-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.field-name {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.field-db-name {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 2px;\n}\n\n.field-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 2px;\n    font-size: 12px;\n}\n\n.field-type {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-muted);\n}\n\n.field-nullable {\n    color: var(--danger-color);\n}\n\n.field-related {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.field-related:hover {\n    text-decoration: underline;\n}\n\n.field-badges {\n    display: flex;\n    gap: 4px;\n}\n\n.badge {\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.badge.pk {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.badge.fk {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.badge.encrypted {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n/* ============================================================\n   RELATIONSHIPS SECTION\n   ============================================================ */\n\n.relationships-graph {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    min-height: 600px;\n    height: calc(100vh - 280px);\n    max-height: 800px;\n    display: flex;\n    align-items: stretch;\n    justify-content: stretch;\n    overflow: hidden;\n}\n\n.relationships-graph mj-entity-erd,\n.relationships-graph mj-erd-composite {\n    width: 100%;\n    height: 100%;\n    flex: 1;\n}\n\n/* ERD Splitter for details panel */\n.relationships-graph .erd-splitter {\n    width: 100%;\n    height: 100%;\n}\n\n.relationships-graph mj-entity-details {\n    height: 100%;\n    overflow: auto;\n}\n\n.graph-placeholder {\n    text-align: center;\n    color: var(--text-muted);\n}\n\n.graph-placeholder i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.graph-placeholder p {\n    margin: 0;\n}\n\n.graph-placeholder .hint {\n    font-size: 12px;\n    margin-top: 8px;\n}\n\n.relationships-list {\n    display: flex;\n    flex-direction: column;\n    gap: 24px;\n}\n\n.relationship-group {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.relationship-group-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 20px;\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--text-primary);\n    background: var(--bg-tertiary);\n    border-bottom: 1px solid var(--border-color);\n}\n\n.relationship-group-title i {\n    color: var(--accent-color);\n}\n\n.relationship-items {\n    display: flex;\n    flex-direction: column;\n}\n\n.relationship-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 20px;\n    cursor: pointer;\n    transition: background var(--transition-fast);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item:last-child {\n    border-bottom: none;\n}\n\n.relationship-item:hover {\n    background: var(--accent-light);\n}\n\n.relationship-item.hidden {\n    display: none;\n}\n\n.rel-icon {\n    width: 32px;\n    height: 32px;\n    border-radius: 50%;\n    background: var(--accent-light);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--accent-color);\n    font-size: 12px;\n}\n\n.rel-info {\n    flex: 1;\n}\n\n.rel-entity {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--accent-color);\n    cursor: pointer;\n}\n\n.rel-entity:hover {\n    text-decoration: underline;\n}\n\n.rel-field {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.rel-meta {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.rel-type,\n.rel-display-type {\n    padding: 2px 8px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-sm);\n    font-size: 11px;\n    color: var(--text-muted);\n}\n\n.rel-bundle {\n    color: var(--success-color);\n}\n\n/* Grouped relationship styles */\n.relationship-group-title .group-count {\n    margin-left: auto;\n    background: var(--accent-light);\n    color: var(--accent-color);\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.relationship-items.grouped {\n    padding: 8px 0;\n}\n\n.relationship-item-grouped {\n    padding: 12px 20px;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.relationship-item-grouped:last-child {\n    border-bottom: none;\n}\n\n.rel-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 10px;\n}\n\n.rel-icon.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.rel-icon.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.rel-entity-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.rel-fields-chips {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 8px;\n    padding-left: 44px; /* Align with entity name (icon width + gap) */\n}\n\n.field-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 5px 12px;\n    border-radius: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all var(--transition-fast);\n}\n\n.field-chip i {\n    font-size: 10px;\n}\n\n.field-chip.outgoing {\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border: 1px solid var(--mj-brand-primary);\n}\n\n.field-chip.outgoing:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.field-chip.incoming {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border: 1px solid var(--mj-status-success);\n}\n\n.field-chip.incoming:hover {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.field-chip .bundle-icon {\n    font-size: 9px;\n    margin-left: 2px;\n    opacity: 0.8;\n}\n\n/* ============================================================\n   PERMISSIONS SECTION\n   ============================================================ */\n\n.permissions-matrix {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    overflow: hidden;\n}\n\n.matrix-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.matrix-table th,\n.matrix-table td {\n    padding: 12px 16px;\n    text-align: left;\n    border-bottom: 1px solid var(--border-light);\n}\n\n.matrix-table th {\n    background: var(--bg-tertiary);\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.matrix-table th.center,\n.matrix-table td.center {\n    text-align: center;\n}\n\n.matrix-table tbody tr:hover {\n    background: var(--bg-secondary);\n}\n\n.role-name {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.permission-icon {\n    font-size: 14px;\n}\n\n.permission-icon.granted {\n    color: var(--success-color);\n}\n\n.permission-icon.denied {\n    color: var(--text-muted);\n}\n\n.rls-info {\n    display: flex;\n    gap: 4px;\n}\n\n.rls-badge {\n    width: 20px;\n    height: 20px;\n    border-radius: var(--radius-sm);\n    background: var(--warning-color);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.no-rls {\n    color: var(--text-muted);\n    font-size: 12px;\n}\n\n/* API Capabilities */\n.api-capabilities {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.capability-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));\n    gap: 12px;\n}\n\n.capability-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.capability-item i {\n    font-size: 12px;\n}\n\n.capability-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.capability-item.enabled i {\n    color: var(--success-color);\n}\n\n/* ============================================================\n   LINEAGE SECTION\n   ============================================================ */\n\n.lineage-diagram {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 24px;\n    padding: 40px;\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n}\n\n.lineage-stage {\n    text-align: center;\n}\n\n.lineage-stage h4 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.lineage-items {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.lineage-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 16px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-secondary);\n}\n\n.lineage-item i {\n    color: var(--accent-color);\n}\n\n.lineage-arrow {\n    font-size: 24px;\n    color: var(--text-muted);\n}\n\n.entity-node .entity-box {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 8px;\n    padding: 24px 32px;\n    background: var(--accent-color);\n    color: var(--mj-brand-on-primary);\n    border-radius: var(--radius-lg);\n    font-weight: 600;\n}\n\n.entity-node .entity-box i {\n    font-size: 24px;\n}\n\n.tracking-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n    gap: 12px;\n}\n\n.config-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n    color: var(--text-muted);\n}\n\n.config-item.enabled {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.config-item .config-label {\n    color: var(--text-muted);\n}\n\n.config-item .config-value {\n    font-weight: 500;\n    color: var(--text-primary);\n}\n\n.tracking-config .helper-text {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin: -8px 0 12px 0;\n}\n\n/* ============================================================\n   HISTORY SECTION\n   ============================================================ */\n\n.history-config {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.config-status {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n}\n\n.config-status i {\n    font-size: 24px;\n    color: var(--text-muted);\n    margin-top: 2px;\n}\n\n.config-status.enabled i {\n    color: var(--success-color);\n}\n\n.config-text strong {\n    display: block;\n    font-size: 16px;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.config-text span {\n    font-size: 14px;\n    color: var(--text-secondary);\n}\n\n.history-info {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\n    gap: 16px;\n}\n\n.info-card {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.info-card h4 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    color: var(--text-primary);\n    margin: 0 0 12px 0;\n}\n\n.info-card h4 i {\n    color: var(--accent-color);\n}\n\n.info-card p {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n.info-card code {\n    background: var(--bg-tertiary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.audit-fields-list {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n}\n\n.audit-fields-list li {\n    padding: 8px 0;\n    font-size: 14px;\n    color: var(--text-secondary);\n    border-bottom: 1px solid var(--border-light);\n}\n\n.audit-fields-list li:last-child {\n    border-bottom: none;\n}\n\n/* ============================================================\n   SETTINGS SECTION\n   ============================================================ */\n\n.settings-panel {\n    background: var(--bg-primary);\n    border: 1px solid var(--border-color);\n    border-radius: var(--radius-lg);\n    padding: 20px;\n}\n\n.settings-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.setting-item {\n    padding: 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n}\n\n.setting-name {\n    font-weight: 500;\n    color: var(--text-primary);\n    margin-bottom: 4px;\n}\n\n.setting-value {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n    word-break: break-all;\n}\n\n.setting-value-json {\n    margin-top: 8px;\n    border-radius: var(--radius-sm);\n    overflow: hidden;\n    border: 1px solid var(--border-color);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json mj-code-editor {\n    display: block;\n    max-height: 300px;\n}\n\n.setting-value-json ::ng-deep .cm-editor {\n    font-size: 12px;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.setting-value-json ::ng-deep .cm-gutters {\n    background: var(--mj-bg-surface-sunken);\n    border-right: 1px solid var(--border-color);\n}\n\n.setting-comment {\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n}\n\n.fts-config,\n.settings-section .config-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.config-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.config-row .config-label {\n    width: 100px;\n    font-size: 12px;\n    color: var(--text-muted);\n}\n\n.config-row .config-value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.config-row .config-value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.config-row .config-value.enabled {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    color: var(--success-color);\n}\n\n/* ============================================================\n   DETAIL PANEL (Slide-in from right)\n   ============================================================ */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    width: var(--detail-panel-width);\n    height: 100%;\n    background: var(--bg-primary);\n    border-left: 1px solid var(--border-color);\n    box-shadow: var(--shadow-lg);\n    transform: translateX(100%);\n    transition: transform var(--transition-normal);\n    z-index: 100;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n}\n\n.detail-panel.open {\n    transform: translateX(0);\n}\n\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--border-color);\n    flex-shrink: 0;\n}\n\n.panel-header h3 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    border: none;\n    background: transparent;\n    border-radius: var(--radius-md);\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--text-muted);\n    transition: all var(--transition-fast);\n}\n\n.close-btn:hover {\n    background: var(--bg-tertiary);\n    color: var(--text-primary);\n}\n\n.panel-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 20px;\n}\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.detail-section:last-child {\n    margin-bottom: 0;\n}\n\n.detail-section h4 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary);\n    margin: 0 0 8px 0;\n}\n\n.detail-section h5 {\n    font-size: 12px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin: 0 0 12px 0;\n}\n\n.detail-field-db-name {\n    font-size: 12px;\n    font-family: 'SF Mono', 'Consolas', monospace;\n    color: var(--text-secondary);\n    margin-top: 4px;\n    margin-bottom: 4px;\n}\n\n.field-description {\n    font-size: 14px;\n    color: var(--text-secondary);\n    line-height: 1.5;\n    margin: 0;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n}\n\n.detail-item {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.detail-item .label {\n    font-size: 11px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n}\n\n.detail-item .value {\n    font-size: 14px;\n    color: var(--text-primary);\n}\n\n.detail-item .value.code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 12px;\n    color: var(--accent-dark);\n}\n\n.detail-item .value.link {\n    color: var(--accent-color);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.detail-item .value.link:hover {\n    text-decoration: underline;\n}\n\n.value-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n    max-height: 200px;\n    overflow-y: auto;\n}\n\n.value-item {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--bg-tertiary);\n    border-radius: var(--radius-md);\n    font-size: 13px;\n}\n\n.value-code {\n    font-family: 'SF Mono', 'Consolas', monospace;\n    font-size: 11px;\n    color: var(--accent-dark);\n    background: var(--bg-primary);\n    padding: 2px 6px;\n    border-radius: var(--radius-sm);\n}\n\n.value-display {\n    color: var(--text-primary);\n}\n\n/* ============================================================\n   LOADING / ERROR STATES\n   ============================================================ */\n\n.explorer-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    padding: 40px;\n    text-align: center;\n    color: var(--text-muted);\n}\n\n/* Full-pane empty/error placeholders (rule 6b flex-fill). */\n.explorer-fill {\n    height: 100%;\n}\n\n/* ============================================================\n   IS-A TYPE HIERARCHY & VIRTUAL ENTITY STYLES\n   ============================================================ */\n\n/* Badge variants for header */\n.isa-badge {\n    font-size: 11px;\n    font-weight: 600;\n    padding: 3px 10px;\n    border-radius: 12px;\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    cursor: default;\n    white-space: nowrap;\n}\n\n.isa-badge.virtual {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n}\n\n.isa-badge.child-type {\n    background: color-mix(in srgb, var(--mj-brand-primary) 12%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 25%, transparent);\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.isa-badge.child-type:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 22%, transparent);\n}\n\n.isa-badge.parent-type {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 25%, transparent);\n}\n\n.isa-badge.overlapping {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 25%, transparent);\n}\n\n/* Breadcrumb under title */\n.isa-breadcrumb {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n    margin-top: 2px;\n    padding: 2px 0;\n}\n\n.isa-breadcrumb i {\n    font-size: 11px;\n    opacity: 0.7;\n}\n\n/* IS-A Panel (overview section) */\n.isa-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-info-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-primary);\n}\n\n.isa-info-row.virtual-info {\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.isa-info-row.virtual-info i {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.isa-info-row .code {\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n    font-size: 12px;\n    background: color-mix(in srgb, var(--mj-text-primary) 6%, transparent);\n    padding: 1px 6px;\n    border-radius: 3px;\n    color: var(--mj-brand-primary);\n}\n\n/* Inheritance chain */\n.isa-chain {\n    padding: 8px 0;\n}\n\n.isa-chain-label {\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    color: var(--text-muted);\n    margin-bottom: 8px;\n}\n\n.isa-chain-nodes {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    flex-wrap: wrap;\n    padding: 6px 0;\n}\n\n.isa-node {\n    display: inline-flex;\n    align-items: center;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n}\n\n.isa-node.current {\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n}\n\n.isa-node.parent {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n.isa-arrow {\n    color: var(--text-muted);\n    font-size: 11px;\n}\n\n.isa-inherited-fields {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--text-muted);\n    margin-top: 8px;\n    padding-top: 8px;\n    border-top: 1px solid var(--border-color);\n}\n\n.isa-inherited-fields i {\n    font-size: 12px;\n    color: var(--mj-brand-primary);\n}\n\n/* Child types list */\n.isa-children {\n    padding: 8px 0;\n}\n\n.isa-child-list {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 6px;\n    padding: 4px 0;\n}\n\n.isa-child-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n    color: var(--mj-status-success);\n    border: 1px solid color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Clickable elements */\n.clickable {\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.clickable:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);\n}\n\n.isa-node.parent.clickable:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 35%, transparent);\n}\n\n.isa-child-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-success) 35%, transparent);\n}\n\n/* Field inherited badge (card and list views) */\n.badge.inherited,\n.flag-badge.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    font-size: 10px;\n    font-weight: 600;\n    gap: 3px;\n}\n\n.flag-badge.inherited {\n    display: inline-flex;\n    align-items: center;\n    gap: 3px;\n    padding: 1px 6px;\n    border-radius: 4px;\n    font-size: 10px;\n}\n\n.flag-badge.inherited i {\n    font-size: 9px;\n}\n\n/* IS-A source section in field detail panel */\n.isa-source-section {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-radius: 6px;\n    padding: 12px;\n    margin: -4px -12px 8px;\n}\n\n.isa-source-section h5 {\n    color: var(--mj-brand-primary);\n}\n\n.isa-source-section h5 i {\n    margin-right: 4px;\n}\n\n/* IS-A settings panel */\n.isa-settings-panel {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.isa-settings-panel .link {\n    color: var(--mj-brand-primary);\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.isa-settings-panel .link:hover {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n}\n\n.isa-settings-panel .muted {\n    color: var(--text-muted);\n}\n\n/* IS-A Field Inspector */\n.isa-field-inspector {\n    margin-top: 12px;\n    padding-top: 12px;\n    border-top: 1px solid var(--border-color);\n}\n\n/* Field Source Inspector disclosure migrated to <mj-accordion-panel>; the\n   bespoke .isa-chain-label header (with chevron) is now the accordion header\n   and its layout rule was removed. The .isa-field-inspector wrapper is kept\n   for its top-border separator from the inheritance chain above. */\n\n.isa-inspector-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    margin-top: 8px;\n}\n\n.isa-inspector-group {\n    border-radius: 6px;\n    padding: 8px 12px;\n    border: 1px solid var(--border-color);\n}\n\n.isa-inspector-group.own {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-group.inherited {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border-color: color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n}\n\n.isa-inspector-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 6px;\n}\n\n.isa-inspector-entity {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--text-primary);\n}\n\n.isa-inspector-count {\n    font-size: 11px;\n    color: var(--text-muted);\n    font-weight: 500;\n}\n\n.isa-inspector-fields {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 4px;\n}\n\n.isa-inspector-field {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 11px;\n    padding: 2px 8px;\n    border-radius: 4px;\n    background: color-mix(in srgb, var(--mj-text-primary) 4%, transparent);\n    color: var(--text-primary);\n}\n\n.isa-inspector-type {\n    font-size: 10px;\n    color: var(--text-muted);\n    font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;\n}\n\n/* Sibling chips */\n.isa-siblings {\n    padding: 8px 0;\n}\n\n.isa-sibling-chip {\n    display: inline-flex;\n    align-items: center;\n    gap: 5px;\n    padding: 5px 12px;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent);\n    color: var(--mj-status-warning);\n    border: 1px solid color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n}\n\n.isa-sibling-chip.clickable:hover {\n    background: color-mix(in srgb, var(--mj-status-warning) 20%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-warning) 35%, transparent);\n}\n\n/* Child count badge */\n.isa-child-count {\n    font-size: 11px;\n    background: color-mix(in srgb, var(--mj-text-primary) 8%, transparent);\n    padding: 1px 6px;\n    border-radius: 8px;\n    margin-left: 2px;\n    font-weight: 600;\n}\n\n.isa-child-count i {\n    font-size: 10px;\n}\n\n/* ============================================================\n   DATA SECTION\n   ============================================================ */\n.data-section {\n    flex: 1;\n    min-height: 0;\n    display: flex;\n    flex-direction: column;\n    padding: 0;\n    overflow: hidden;\n}\n\n.data-viewer-container {\n    flex: 1;\n    min-height: 0;\n    overflow: hidden;\n}\n\n/* ============================================================\n   ORGANIC KEYS SECTION\n   ============================================================ */\n\n.organic-key-cards {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 4px 0;\n}\n\n.organic-key-card {\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 16px;\n    transition: border-color 0.15s ease;\n}\n\n.organic-key-card:hover {\n    border-color: var(--mj-border-strong);\n}\n\n.organic-key-card.incoming {\n    border-left: 3px solid var(--mj-brand-primary);\n}\n\n.organic-key-card-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 12px;\n    margin-bottom: 8px;\n}\n\n.organic-key-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.organic-key-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.organic-key-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.organic-key-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n.organic-key-badge.strategy {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n}\n\n.organic-key-badge.fields {\n    background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-info-text, var(--mj-status-info));\n}\n\n.organic-key-description {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    margin: 0 0 12px 0;\n    line-height: 1.4;\n}\n\n.organic-key-targets {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.organic-key-target {\n    display: flex;\n    align-items: flex-start;\n    gap: 8px;\n    padding: 10px 12px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    font-size: 13px;\n    transition: background 0.15s ease, border-color 0.15s ease;\n}\n\n.organic-key-target.clickable,\n.organic-key-card.clickable {\n    cursor: pointer;\n}\n\n.organic-key-target.clickable:hover,\n.organic-key-card.clickable:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.target-main {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n    flex: 1;\n}\n\n.target-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.target-entity-icon {\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    width: 16px;\n    text-align: center;\n}\n\n.target-entity-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    min-width: 0;\n}\n\n.target-nav-icon {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    margin-left: 4px;\n    transition: color 0.15s ease;\n}\n\n.organic-key-target.clickable:hover .target-nav-icon,\n.organic-key-card.clickable:hover .target-nav-icon {\n    color: var(--mj-brand-primary);\n}\n\n.target-match-detail {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding-left: 24px;\n}\n\n.match-type-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 2px 8px;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.match-type-badge.direct {\n    background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-success-text, var(--mj-status-success));\n}\n\n.match-type-badge.transitive {\n    background: color-mix(in srgb, var(--mj-status-warning) 12%, var(--mj-bg-surface));\n    color: var(--mj-status-warning-text, var(--mj-status-warning));\n}\n\n.match-fields {\n    font-size: 11px;\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    color: var(--mj-text-secondary);\n}\n\n.organic-key-detail-row {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 0;\n    font-size: 12px;\n}\n\n.detail-label {\n    color: var(--mj-text-muted);\n    font-weight: 500;\n    flex-shrink: 0;\n}\n\n.detail-value {\n    color: var(--mj-text-secondary);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n}\n\n\n.panel-title-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--mj-space-2);\n  margin-bottom: var(--mj-space-4);\n}\n\n.panel-title-row .panel-title {\n  margin-bottom: 0;\n}\n\n.panel-title-actions {\n  display: flex;\n  gap: var(--mj-space-2);\n}\n\n.panel-error {\n  margin: var(--mj-space-2) 0 0;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-status-error);\n}\n\n/* Phone (375px): the header stacks, the stat tiles wrap two per row, and the icon rail\n   becomes one section-picker button above the canvas (same pattern as the standard form). */\n@media (max-width: 768px) {\n    .explorer-body {\n        flex-direction: column;\n    }\n\n    .nav-rail {\n        display: none;\n    }\n\n    .phone-section-picker {\n        display: block;\n        flex-shrink: 0;\n        padding: 4px 8px;\n        border-bottom: 1px solid var(--border-color);\n        background: var(--bg-primary);\n    }\n\n    .explorer-header {\n        flex-wrap: wrap;\n        gap: 12px;\n        padding: 12px 16px;\n    }\n\n    .entity-identity {\n        flex-basis: 100%;\n    }\n\n    .entity-subtitle {\n        flex-wrap: wrap;\n    }\n\n    .entity-description {\n        flex-basis: 100%;\n        white-space: normal;\n    }\n\n    .header-stats {\n        flex-basis: 100%;\n        flex-wrap: wrap;\n    }\n\n    .stat-item {\n        flex: 1 1 40%;\n    }\n}\n", ".content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEntityFormComponentExtended, { className: "MJEntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 159 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJEntityFormComponentExtended, { className: "MJEntityFormComponentExtended", filePath: "src/lib/custom/Entities/entity-form.component.ts", lineNumber: 160 }); })();
 //# sourceMappingURL=entity-form.component.js.map