npm - @memberjunction/ng-entity-relationship-diagram - Versions diffs - 5.42.0 → 5.44.0 - Mend

@memberjunction/ng-entity-relationship-diagram 5.42.0 → 5.44.0

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

Files changed (27) hide show

package/dist/lib/components/entity-details/entity-details.component.js CHANGED Viewed

@@ -2,6 +2,7 @@ import { Component, Input, Output, EventEmitter, ViewChild } from '@angular/core
 import { UUIDsEqual } from '@memberjunction/global';
 import { BaseAngularComponent } from '@memberjunction/ng-base-types';
 import * as i0 from "@angular/core";
+import * as i1 from "@memberjunction/ng-ui-components";
 const _c0 = ["fieldsListContainer"];
 const _c1 = ["relationshipsListContainer"];
 const _c2 = (a0, a1, a2, a3) => ({ "primary-key-field": a0, "foreign-key-field": a1, "regular-field": a2, "field-expanded": a3 });
@@ -18,26 +19,35 @@ function EntityDetailsComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r0.selectedEntity == null ? null : ctx_r0.selectedEntity.Description);
 } }
-function EntityDetailsComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_ng_template_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Fields (", ctx_r0.selectedEntity ? ctx_r0.getEntityFields(ctx_r0.selectedEntity.ID).length : 0, ")");
+} }
+function EntityDetailsComponent_ng_template_24_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 16)(1, "button", 21);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("all")); });
+    i0.ɵɵelementStart(0, "div", 17)(1, "button", 18);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_ng_template_24_Conditional_0_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setFieldFilter("all")); });
     i0.ɵɵtext(2, " All ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 22);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("keys")); });
+    i0.ɵɵelementStart(3, "button", 19);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_ng_template_24_Conditional_0_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setFieldFilter("keys")); });
     i0.ɵɵtext(4, " Keys ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 23);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("foreign_keys")); });
+    i0.ɵɵelementStart(5, "button", 20);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_ng_template_24_Conditional_0_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setFieldFilter("foreign_keys")); });
     i0.ɵɵtext(6, " FKs ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 24);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_29_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.setFieldFilter("regular")); });
+    i0.ɵɵelementStart(7, "button", 21);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_ng_template_24_Conditional_0_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r2); const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.setFieldFilter("regular")); });
     i0.ɵɵtext(8, " Regular ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r0 = i0.ɵɵnextContext();
+    const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "all");
     i0.ɵɵadvance(2);
@@ -47,52 +57,58 @@ function EntityDetailsComponent_Conditional_29_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r0.fieldFilter === "regular");
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 29);
+function EntityDetailsComponent_ng_template_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, EntityDetailsComponent_ng_template_24_Conditional_0_Template, 9, 8, "div", 17);
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r0.fieldsSectionExpanded ? 0 : -1);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 30);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 26);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 27);
+} }
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 43);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldValues(field_r4.ID)); });
-    i0.ɵɵelement(1, "span", 44);
+    i0.ɵɵelementStart(0, "button", 40);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_25_For_3_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldValues(field_r4.ID)); });
+    i0.ɵɵelement(1, "span", 41);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("expanded", ctx_r0.isFieldValuesExpanded(field_r4.ID));
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 45);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldDescription(field_r4.ID)); });
-    i0.ɵɵelement(1, "span", 46);
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_25_For_3_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const field_r4 = i0.ɵɵnextContext().$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.toggleFieldDescription(field_r4.ID)); });
+    i0.ɵɵelement(1, "span", 43);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext().$implicit;
     const ctx_r0 = i0.ɵɵnextContext(2);
     i0.ɵɵclassProp("expanded", ctx_r0.isFieldDescriptionExpanded(field_r4.ID));
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 35);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 32);
     i0.ɵɵtext(1, "PK");
     i0.ɵɵelementEnd();
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 36);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 33);
     i0.ɵɵtext(1, "FK");
     i0.ɵɵelementEnd();
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "span", 47);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 36);
+    i0.ɵɵelement(1, "span", 44);
     i0.ɵɵtext(2, " Related Entity ");
     i0.ɵɵelementEnd();
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "div", 48);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "div", 45);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -100,8 +116,8 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_16_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r4.Description);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 51);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -109,12 +125,12 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_For_5_Templa
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(value_r7);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 49);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 38)(1, "div", 46);
     i0.ɵɵtext(2, "Possible Values:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 50);
-    i0.ɵɵrepeaterCreate(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_17_For_5_Template, 2, 1, "span", 51, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(3, "div", 47);
+    i0.ɵɵrepeaterCreate(4, EntityDetailsComponent_Conditional_25_For_3_Conditional_17_For_5_Template, 2, 1, "span", 48, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext().$implicit;
@@ -122,8 +138,8 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_17_Template(rf,
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r0.getFieldPossibleValues(field_r4));
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 58);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49)(1, "div", 55);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -131,8 +147,8 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(field_r4.Description);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 63);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -140,8 +156,8 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("[", fieldValue_r8.Code, "]");
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -149,13 +165,13 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(fieldValue_r8.Description);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60)(1, "div", 61)(2, "span", 62);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 57)(1, "div", 58)(2, "span", 59);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template, 2, 1, "span", 63);
+    i0.ɵɵconditionalCreate(4, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Conditional_4_Template, 2, 1, "span", 60);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template, 2, 1, "div", 64);
+    i0.ɵɵconditionalCreate(5, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Conditional_5_Template, 2, 1, "div", 61);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const fieldValue_r8 = ctx.$implicit;
@@ -166,13 +182,13 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵconditional(fieldValue_r8.Description && fieldValue_r8.Description !== fieldValue_r8.Value ? 5 : -1);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 49);
-    i0.ɵɵelement(2, "span", 44);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50)(1, "div", 46);
+    i0.ɵɵelement(2, "span", 41);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 59);
-    i0.ɵɵrepeaterCreate(5, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_For_6_Template, 6, 3, "div", 60, _forTrack0);
+    i0.ɵɵelementStart(4, "div", 56);
+    i0.ɵɵrepeaterCreate(5, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_For_6_Template, 6, 3, "div", 57, _forTrack0);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -182,11 +198,11 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.getSortedEntityFieldValues(field_r4));
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Max Length:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵelementStart(3, "span", 54);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -194,11 +210,11 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(field_r4.Length);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Precision:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵelementStart(3, "span", 54);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -206,11 +222,11 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(field_r4.Precision);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Scale:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 57);
+    i0.ɵɵelementStart(3, "span", 54);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -218,11 +234,11 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(field_r4.Scale);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Default Value:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 65);
+    i0.ɵɵelementStart(3, "span", 62);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -230,15 +246,15 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(field_r4.DefaultValue);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Related Entity:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 66);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template_span_click_3_listener($event) { i0.ɵɵrestoreView(_r9); const field_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onRelatedEntityClick($event, field_r4)); });
+    i0.ɵɵelementStart(3, "span", 63);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_23_Template_span_click_3_listener($event) { i0.ɵɵrestoreView(_r9); const field_r4 = i0.ɵɵnextContext(2).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onRelatedEntityClick($event, field_r4)); });
     i0.ɵɵtext(4);
-    i0.ɵɵelement(5, "span", 47);
+    i0.ɵɵelement(5, "span", 44);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext(2).$implicit;
@@ -247,42 +263,42 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", field_r4.RelatedEntity, " ");
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "span", 53);
     i0.ɵɵtext(2, "Auto Increment:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 67);
+    i0.ɵɵelementStart(3, "span", 64);
     i0.ɵɵtext(4, "Yes");
     i0.ɵɵelementEnd()();
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 42);
-    i0.ɵɵconditionalCreate(1, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_1_Template, 3, 1, "div", 52);
-    i0.ɵɵconditionalCreate(2, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_2_Template, 7, 1, "div", 53);
-    i0.ɵɵelementStart(3, "div", 54)(4, "div", 55)(5, "span", 56);
+function EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵconditionalCreate(1, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_1_Template, 3, 1, "div", 49);
+    i0.ɵɵconditionalCreate(2, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_2_Template, 7, 1, "div", 50);
+    i0.ɵɵelementStart(3, "div", 51)(4, "div", 52)(5, "span", 53);
     i0.ɵɵtext(6, "Data Type:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 57);
+    i0.ɵɵelementStart(7, "span", 54);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "div", 55)(10, "span", 56);
+    i0.ɵɵelementStart(9, "div", 52)(10, "span", 53);
     i0.ɵɵtext(11, "Nullable:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 57);
+    i0.ɵɵelementStart(12, "span", 54);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(14, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_14_Template, 5, 1, "div", 55);
-    i0.ɵɵconditionalCreate(15, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_15_Template, 5, 1, "div", 55);
-    i0.ɵɵconditionalCreate(16, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_16_Template, 5, 1, "div", 55);
-    i0.ɵɵelementStart(17, "div", 55)(18, "span", 56);
+    i0.ɵɵconditionalCreate(14, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_14_Template, 5, 1, "div", 52);
+    i0.ɵɵconditionalCreate(15, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_15_Template, 5, 1, "div", 52);
+    i0.ɵɵconditionalCreate(16, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_16_Template, 5, 1, "div", 52);
+    i0.ɵɵelementStart(17, "div", 52)(18, "span", 53);
     i0.ɵɵtext(19, "Virtual Field:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 57);
+    i0.ɵɵelementStart(20, "span", 54);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(22, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_22_Template, 5, 1, "div", 55);
-    i0.ɵɵconditionalCreate(23, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_23_Template, 6, 3, "div", 55);
-    i0.ɵɵconditionalCreate(24, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Conditional_24_Template, 5, 0, "div", 55);
+    i0.ɵɵconditionalCreate(22, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_22_Template, 5, 1, "div", 52);
+    i0.ɵɵconditionalCreate(23, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_23_Template, 6, 3, "div", 52);
+    i0.ɵɵconditionalCreate(24, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Conditional_24_Template, 5, 0, "div", 52);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const field_r4 = i0.ɵɵnextContext().$implicit;
@@ -313,29 +329,29 @@ function EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r4.AutoIncrement ? 24 : -1);
 } }
-function EntityDetailsComponent_Conditional_30_For_3_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_Conditional_25_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_30_For_3_Template_div_click_0_listener() { const field_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFieldClick(field_r4)); });
-    i0.ɵɵelementStart(1, "div", 27)(2, "div", 28);
-    i0.ɵɵconditionalCreate(3, EntityDetailsComponent_Conditional_30_For_3_Conditional_3_Template, 1, 0, "span", 29)(4, EntityDetailsComponent_Conditional_30_For_3_Conditional_4_Template, 1, 0, "span", 30);
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_25_For_3_Template_div_click_0_listener() { const field_r4 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.onFieldClick(field_r4)); });
+    i0.ɵɵelementStart(1, "div", 24)(2, "div", 25);
+    i0.ɵɵconditionalCreate(3, EntityDetailsComponent_Conditional_25_For_3_Conditional_3_Template, 1, 0, "span", 26)(4, EntityDetailsComponent_Conditional_25_For_3_Conditional_4_Template, 1, 0, "span", 27);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 31);
-    i0.ɵɵconditionalCreate(7, EntityDetailsComponent_Conditional_30_For_3_Conditional_7_Template, 2, 2, "button", 32);
-    i0.ɵɵconditionalCreate(8, EntityDetailsComponent_Conditional_30_For_3_Conditional_8_Template, 2, 2, "button", 33);
-    i0.ɵɵelementStart(9, "div", 34);
-    i0.ɵɵconditionalCreate(10, EntityDetailsComponent_Conditional_30_For_3_Conditional_10_Template, 2, 0, "span", 35);
-    i0.ɵɵconditionalCreate(11, EntityDetailsComponent_Conditional_30_For_3_Conditional_11_Template, 2, 0, "span", 36);
+    i0.ɵɵelementStart(6, "div", 28);
+    i0.ɵɵconditionalCreate(7, EntityDetailsComponent_Conditional_25_For_3_Conditional_7_Template, 2, 2, "button", 29);
+    i0.ɵɵconditionalCreate(8, EntityDetailsComponent_Conditional_25_For_3_Conditional_8_Template, 2, 2, "button", 30);
+    i0.ɵɵelementStart(9, "div", 31);
+    i0.ɵɵconditionalCreate(10, EntityDetailsComponent_Conditional_25_For_3_Conditional_10_Template, 2, 0, "span", 32);
+    i0.ɵɵconditionalCreate(11, EntityDetailsComponent_Conditional_25_For_3_Conditional_11_Template, 2, 0, "span", 33);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 37)(13, "div", 38);
+    i0.ɵɵelementStart(12, "div", 34)(13, "div", 35);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(15, EntityDetailsComponent_Conditional_30_For_3_Conditional_15_Template, 3, 0, "div", 39);
+    i0.ɵɵconditionalCreate(15, EntityDetailsComponent_Conditional_25_For_3_Conditional_15_Template, 3, 0, "div", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(16, EntityDetailsComponent_Conditional_30_For_3_Conditional_16_Template, 3, 1, "div", 40);
-    i0.ɵɵconditionalCreate(17, EntityDetailsComponent_Conditional_30_For_3_Conditional_17_Template, 6, 0, "div", 41);
-    i0.ɵɵconditionalCreate(18, EntityDetailsComponent_Conditional_30_For_3_Conditional_18_Template, 25, 15, "div", 42);
+    i0.ɵɵconditionalCreate(16, EntityDetailsComponent_Conditional_25_For_3_Conditional_16_Template, 3, 1, "div", 37);
+    i0.ɵɵconditionalCreate(17, EntityDetailsComponent_Conditional_25_For_3_Conditional_17_Template, 6, 0, "div", 38);
+    i0.ɵɵconditionalCreate(18, EntityDetailsComponent_Conditional_25_For_3_Conditional_18_Template, 25, 15, "div", 39);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r4 = ctx.$implicit;
@@ -365,33 +381,42 @@ function EntityDetailsComponent_Conditional_30_For_3_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r0.isFieldDetailsExpanded(field_r4.ID) ? 18 : -1);
 } }
-function EntityDetailsComponent_Conditional_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 17, 0);
-    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_30_For_3_Template, 19, 19, "div", 25, _forTrack0);
+function EntityDetailsComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14, 0);
+    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_25_For_3_Template, 19, 19, "div", 22, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r0.getEntityFields((ctx_r0.selectedEntity == null ? null : ctx_r0.selectedEntity.ID) || ""));
 } }
-function EntityDetailsComponent_Conditional_38_For_3_Template(rf, ctx) { if (rf & 1) {
+function EntityDetailsComponent_ng_template_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r0 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1("Related Entities (", ctx_r0.selectedEntity ? ctx_r0.getRelatedEntities(ctx_r0.selectedEntity.ID).length : 0, ")");
+} }
+function EntityDetailsComponent_Conditional_28_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 69);
-    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_38_For_3_Template_div_click_0_listener() { const relatedEntity_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.selectEntity(relatedEntity_r11, true)); });
-    i0.ɵɵelement(1, "span", 70);
-    i0.ɵɵelementStart(2, "span", 71);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵlistener("click", function EntityDetailsComponent_Conditional_28_For_3_Template_div_click_0_listener() { const relatedEntity_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r0 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r0.selectEntity(relatedEntity_r11, true)); });
+    i0.ɵɵelement(1, "span", 67);
+    i0.ɵɵelementStart(2, "span", 68);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "span", 72);
+    i0.ɵɵelement(4, "span", 69);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const relatedEntity_r11 = ctx.$implicit;
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(relatedEntity_r11.Name || relatedEntity_r11.SchemaName);
 } }
-function EntityDetailsComponent_Conditional_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 20, 1);
-    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_38_For_3_Template, 5, 1, "div", 68, _forTrack0);
+function EntityDetailsComponent_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 15, 1);
+    i0.ɵɵrepeaterCreate(2, EntityDetailsComponent_Conditional_28_For_3_Template, 5, 1, "div", 65, _forTrack0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -591,7 +616,7 @@ export class EntityDetailsComponent extends BaseAngularComponent {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldsListContainer = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.relationshipsListContainer = _t.first);
-        } }, inputs: { selectedEntity: "selectedEntity", allEntityFields: "allEntityFields", fieldsSectionExpanded: "fieldsSectionExpanded", relationshipsSectionExpanded: "relationshipsSectionExpanded" }, outputs: { openEntity: "openEntity", closePanel: "closePanel", fieldsSectionToggle: "fieldsSectionToggle", relationshipsSectionToggle: "relationshipsSectionToggle", entitySelected: "entitySelected", openRecord: "openRecord" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 39, vars: 21, consts: [["fieldsListContainer", ""], ["relationshipsListContainer", ""], [1, "details-panel"], [1, "panel-header"], [1, "panel-actions"], ["title", "Open Entity Record", 1, "open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "entity-info"], [1, "info-row"], [1, "fields-section"], [1, "section-header", "extra-padding"], [1, "section-title-group", 3, "click"], ["title", "Toggle fields section", 1, "expand-btn"], [1, "fa-solid", "fa-chevron-right"], [1, "field-filters"], [1, "fields-list"], [1, "relationships-section"], ["title", "Toggle relationships section", 1, "expand-btn"], [1, "related-entities-list"], ["title", "Show all fields", 1, "filter-btn", 3, "click"], ["title", "Show primary keys and ID fields", 1, "filter-btn", 3, "click"], ["title", "Show foreign key fields only", 1, "filter-btn", 3, "click"], ["title", "Show regular data fields", 1, "filter-btn", 3, "click"], [1, "field-item", 3, "class", "title"], [1, "field-item", 3, "click", "title"], [1, "field-header"], [1, "field-name"], ["title", "Primary Key", 1, "field-icon", "fa-solid", "fa-key"], ["title", "Foreign Key", 1, "field-icon", "fa-solid", "fa-link"], [1, "field-actions"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "expanded"], ["title", "Toggle field description", 1, "field-info-btn", 3, "expanded"], [1, "field-badges"], [1, "field-badge", "primary-key"], [1, "field-badge", "foreign-key"], [1, "field-details"], [1, "field-type"], [1, "field-relation"], [1, "field-description"], [1, "field-values"], [1, "field-comprehensive-details"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Toggle field description", 1, "field-info-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-arrow-right"], [1, "description-text"], [1, "values-header"], [1, "values-list"], [1, "value-tag"], [1, "comprehensive-description-top"], [1, "field-values-comprehensive"], [1, "details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "description-content"], [1, "values-grid"], [1, "value-item"], [1, "value-main"], [1, "value-text"], [1, "value-code"], [1, "value-description"], [1, "detail-value", "default-value"], [1, "detail-value", "related-entity", 3, "click", "title"], [1, "detail-value", "auto-increment"], [1, "related-entity-item"], [1, "related-entity-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "entity-name"], ["title", "Click to zoom to entity", 1, "zoom-indicator", "fa-solid", "fa-search-plus"]], template: function EntityDetailsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { selectedEntity: "selectedEntity", allEntityFields: "allEntityFields", fieldsSectionExpanded: "fieldsSectionExpanded", relationshipsSectionExpanded: "relationshipsSectionExpanded" }, outputs: { openEntity: "openEntity", closePanel: "closePanel", fieldsSectionToggle: "fieldsSectionToggle", relationshipsSectionToggle: "relationshipsSectionToggle", entitySelected: "entitySelected", openRecord: "openRecord" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature, i0.ɵɵNgOnChangesFeature], decls: 29, vars: 12, consts: [["fieldsListContainer", ""], ["relationshipsListContainer", ""], [1, "details-panel"], [1, "panel-header"], [1, "panel-actions"], ["title", "Open Entity Record", 1, "open-btn", 3, "click"], [1, "fa-solid", "fa-external-link-alt"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "entity-info"], [1, "info-row"], ["Size", "sm", 1, "erd-details-accordion", 3, "ExpandedChange", "Fill", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionActions", ""], [1, "fields-list"], [1, "related-entities-list"], [1, "erd-section-title"], [1, "field-filters"], ["title", "Show all fields", 1, "filter-btn", 3, "click"], ["title", "Show primary keys and ID fields", 1, "filter-btn", 3, "click"], ["title", "Show foreign key fields only", 1, "filter-btn", 3, "click"], ["title", "Show regular data fields", 1, "filter-btn", 3, "click"], [1, "field-item", 3, "class", "title"], [1, "field-item", 3, "click", "title"], [1, "field-header"], [1, "field-name"], ["title", "Primary Key", 1, "field-icon", "fa-solid", "fa-key"], ["title", "Foreign Key", 1, "field-icon", "fa-solid", "fa-link"], [1, "field-actions"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "expanded"], ["title", "Toggle field description", 1, "field-info-btn", 3, "expanded"], [1, "field-badges"], [1, "field-badge", "primary-key"], [1, "field-badge", "foreign-key"], [1, "field-details"], [1, "field-type"], [1, "field-relation"], [1, "field-description"], [1, "field-values"], [1, "field-comprehensive-details"], ["title", "Toggle possible values", 1, "field-values-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Toggle field description", 1, "field-info-btn", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-arrow-right"], [1, "description-text"], [1, "values-header"], [1, "values-list"], [1, "value-tag"], [1, "comprehensive-description-top"], [1, "field-values-comprehensive"], [1, "details-grid"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "description-content"], [1, "values-grid"], [1, "value-item"], [1, "value-main"], [1, "value-text"], [1, "value-code"], [1, "value-description"], [1, "detail-value", "default-value"], [1, "detail-value", "related-entity", 3, "click", "title"], [1, "detail-value", "auto-increment"], [1, "related-entity-item"], [1, "related-entity-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "entity-name"], ["title", "Click to zoom to entity", 1, "zoom-indicator", "fa-solid", "fa-search-plus"]], template: function EntityDetailsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "h3");
             i0.ɵɵtext(3);
             i0.ɵɵelementEnd();
@@ -618,27 +643,15 @@ export class EntityDetailsComponent extends BaseAngularComponent {
             i0.ɵɵelementEnd()();
             i0.ɵɵconditionalCreate(21, EntityDetailsComponent_Conditional_21_Template, 5, 1, "div", 10);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(22, "div", 11)(23, "div", 12)(24, "div", 13);
-            i0.ɵɵlistener("click", function EntityDetailsComponent_Template_div_click_24_listener() { return ctx.toggleFieldsSection(); });
-            i0.ɵɵelementStart(25, "button", 14);
-            i0.ɵɵelement(26, "span", 15);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "h4");
-            i0.ɵɵtext(28);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(29, EntityDetailsComponent_Conditional_29_Template, 9, 8, "div", 16);
-            i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(30, EntityDetailsComponent_Conditional_30_Template, 4, 0, "div", 17);
+            i0.ɵɵelementStart(22, "mj-accordion-panel", 11);
+            i0.ɵɵlistener("ExpandedChange", function EntityDetailsComponent_Template_mj_accordion_panel_ExpandedChange_22_listener() { return ctx.toggleFieldsSection(); });
+            i0.ɵɵtemplate(23, EntityDetailsComponent_ng_template_23_Template, 2, 1, "ng-template", 12)(24, EntityDetailsComponent_ng_template_24_Template, 1, 1, "ng-template", 13);
+            i0.ɵɵconditionalCreate(25, EntityDetailsComponent_Conditional_25_Template, 4, 0, "div", 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(31, "div", 18)(32, "div", 12)(33, "div", 13);
-            i0.ɵɵlistener("click", function EntityDetailsComponent_Template_div_click_33_listener() { return ctx.toggleRelationshipsSection(); });
-            i0.ɵɵelementStart(34, "button", 19);
-            i0.ɵɵelement(35, "span", 15);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(36, "h4");
-            i0.ɵɵtext(37);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵconditionalCreate(38, EntityDetailsComponent_Conditional_38_Template, 4, 0, "div", 20);
+            i0.ɵɵelementStart(26, "mj-accordion-panel", 11);
+            i0.ɵɵlistener("ExpandedChange", function EntityDetailsComponent_Template_mj_accordion_panel_ExpandedChange_26_listener() { return ctx.toggleRelationshipsSection(); });
+            i0.ɵɵtemplate(27, EntityDetailsComponent_ng_template_27_Template, 2, 1, "ng-template", 12);
+            i0.ɵɵconditionalCreate(28, EntityDetailsComponent_Conditional_28_Template, 4, 0, "div", 15);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
@@ -650,28 +663,18 @@ export class EntityDetailsComponent extends BaseAngularComponent {
             i0.ɵɵadvance();
             i0.ɵɵconditional((ctx.selectedEntity == null ? null : ctx.selectedEntity.Description) ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵclassProp("section-expanded", ctx.fieldsSectionExpanded)("section-collapsed", !ctx.fieldsSectionExpanded);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("expanded", ctx.fieldsSectionExpanded);
-            i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("Fields (", ctx.selectedEntity ? ctx.getEntityFields(ctx.selectedEntity.ID).length : 0, ")");
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.fieldsSectionExpanded ? 29 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.fieldsSectionExpanded ? 30 : -1);
-            i0.ɵɵadvance();
-            i0.ɵɵclassProp("section-expanded", ctx.relationshipsSectionExpanded)("section-collapsed", !ctx.relationshipsSectionExpanded);
-            i0.ɵɵadvance(3);
-            i0.ɵɵclassProp("expanded", ctx.relationshipsSectionExpanded);
+            i0.ɵɵproperty("Fill", true)("FlushBody", true)("Expanded", ctx.fieldsSectionExpanded);
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1("Related Entities (", ctx.selectedEntity ? ctx.getRelatedEntities(ctx.selectedEntity.ID).length : 0, ")");
+            i0.ɵɵconditional(ctx.fieldsSectionExpanded ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 38 : -1);
-        } }, styles: ["\n\n\n\n\n\n.details-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.details-panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.details-panel[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.details-panel[_ngcontent-%COMP%]   .fields-section[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%]   .relationships-section[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  transition: flex 0.3s ease;\n}\n\n.details-panel[_ngcontent-%COMP%]   .fields-section.section-expanded[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%]   .relationships-section.section-expanded[_ngcontent-%COMP%] {\n  flex: 1;\n}\n\n.details-panel[_ngcontent-%COMP%]   .fields-section.section-collapsed[_ngcontent-%COMP%], \n.details-panel[_ngcontent-%COMP%]   .relationships-section.section-collapsed[_ngcontent-%COMP%] {\n  flex: 0 0 auto;\n}\n\n.details-panel[_ngcontent-%COMP%]   .fields-section[_ngcontent-%COMP%]:last-child, \n.details-panel[_ngcontent-%COMP%]   .relationships-section[_ngcontent-%COMP%]:last-child {\n  border-bottom: none;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n\n\n.open-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border: none;\n  border-radius: 20px;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.open-btn[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.close-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n\n\n.entity-info[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n}\n\n.info-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.info-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  min-width: 60px;\n}\n\n.info-row[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  flex: 1;\n  text-align: right;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\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-card));\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-card));\n  color: var(--mj-status-error);\n}\n\n.extra-padding[_ngcontent-%COMP%] {\n  padding: 4px;\n}\n\n\n\n.fields-section[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.fields-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  padding: 16px 16px 12px 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n  border: none;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.fields-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .section-title-group[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%]   .section-header[_ngcontent-%COMP%]   .section-title-group[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fields-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%], \n.relationships-section[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.expand-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.expand-btn.expanded[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  transform: rotate(90deg);\n}\n\n.section-title-group[_ngcontent-%COMP%] {\n  cursor: pointer;\n  user-select: none;\n}\n\n.section-title-group[_ngcontent-%COMP%]:hover {\n  opacity: 0.8;\n}\n\n\n\n.field-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  font-size: 11px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n\n\n.fields-list[_ngcontent-%COMP%], \n.related-entities-list[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-text-disabled);\n  border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n\n\n.field-item[_ngcontent-%COMP%] {\n  padding: 10px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  font-size: 12px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-item.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-lg);\n  transform: scale(1.01);\n}\n\n\n\n.field-item.primary-key-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-status-success);\n}\n\n.field-item.primary-key-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n\n\n.field-item.foreign-key-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n.field-item.foreign-key-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n\n\n.field-item.regular-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.field-item.regular-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.field-icon.fa-key[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.field-icon.fa-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.field-badge.primary-key[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-badge.foreign-key[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-type[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n.field-relation[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  margin-top: 4px;\n}\n\n.field-relation[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  margin-right: 4px;\n}\n\n\n\n.field-info-btn[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.field-info-btn[_ngcontent-%COMP%]:hover, \n.field-values-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn.expanded[_ngcontent-%COMP%], \n.field-values-btn.expanded[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.field-description[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 0 8px 8px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-description[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n.field-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.field-values[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-left: 3px solid var(--mj-status-warning);\n  border-radius: 0 8px 8px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-values[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.field-values[_ngcontent-%COMP%]   .values-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.field-values[_ngcontent-%COMP%]   .value-tag[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 9px;\n  border-radius: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-values[_ngcontent-%COMP%]   .value-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  cursor: default;\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-header[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  gap: 6px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 100px 1fr;\n  gap: 8px;\n  font-size: 12px;\n  align-items: center;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-label[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-family: \"Courier New\", monospace;\n  background: var(--mj-bg-page);\n  padding: 2px 6px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.nullable-yes[_ngcontent-%COMP%], \n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.nullable-no[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border-color: var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.virtual-yes[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.virtual-no[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.default-value[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]:hover {\n  text-decoration: underline;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface-card));\n  transform: translateX(2px);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]   .fa-external-link-alt[_ngcontent-%COMP%] {\n  font-size: 8px;\n  opacity: 0.7;\n  transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]:hover   .fa-external-link-alt[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.auto-increment[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .comprehensive-description-top[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .comprehensive-description-top[_ngcontent-%COMP%]   .description-content[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  font-style: italic;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  padding: 10px;\n  border-radius: 8px;\n  border: 1px solid var(--mj-brand-primary);\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 8px;\n  border-left: 4px solid var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-status-warning);\n  border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-primary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%] {\n  padding: 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%]   .value-code[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  padding: 1px 4px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-status-warning);\n  font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-description[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  font-style: italic;\n  margin-top: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n\n\n.related-entity-item[_ngcontent-%COMP%] {\n  padding: 12px 14px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  transform: translateX(4px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover   .zoom-indicator[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover   .fa-database[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(to bottom, var(--mj-brand-primary), var(--mj-status-warning));\n  border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  margin-right: 10px;\n  color: var(--mj-text-secondary);\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .fa-database[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .zoom-indicator[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}"] });
+            i0.ɵɵproperty("Fill", true)("FlushBody", true)("Expanded", ctx.relationshipsSectionExpanded);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.relationshipsSectionExpanded ? 28 : -1);
+        } }, dependencies: [i1.MJAccordionPanelComponent, i1.MJAccordionTitleDirective, i1.MJAccordionActionsDirective], styles: ["\n\n\n\n\n\n.details-panel[_ngcontent-%COMP%] {\n  height: 100%;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; \n\n}\n\n.details-panel[_ngcontent-%COMP%]   .panel-header[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n.details-panel[_ngcontent-%COMP%]   .entity-info[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n}\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n\n\n.open-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border: none;\n  border-radius: 20px;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.open-btn[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-md);\n}\n\n\n\n.close-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n\n\n.entity-info[_ngcontent-%COMP%] {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-row[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n}\n\n.info-row[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.info-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  min-width: 60px;\n}\n\n.info-row[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  flex: 1;\n  text-align: right;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\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-card));\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-card));\n  color: var(--mj-status-error);\n}\n\n.extra-padding[_ngcontent-%COMP%] {\n  padding: 4px;\n}\n\n\n\n\n\n\n\n.erd-section-title[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n\n\n.field-filters[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  font-size: 11px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.filter-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-btn.active[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n\n\n.fields-list[_ngcontent-%COMP%], \n.related-entities-list[_ngcontent-%COMP%] {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-track, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-text-disabled);\n  border-radius: 3px;\n}\n\n.fields-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover, \n.related-entities-list[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n\n\n.field-item[_ngcontent-%COMP%] {\n  padding: 10px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  font-size: 12px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-item.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-lg);\n  transform: scale(1.01);\n}\n\n\n\n.field-item.primary-key-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-status-success);\n}\n\n.field-item.primary-key-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n\n\n.field-item.foreign-key-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n.field-item.foreign-key-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n\n\n.field-item.regular-field[_ngcontent-%COMP%] {\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.field-item.regular-field.field-expanded[_ngcontent-%COMP%] {\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-header[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.field-icon.fa-key[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n}\n\n.field-icon.fa-link[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n\n.field-badges[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.field-badge.primary-key[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-badge.foreign-key[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-type[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n.field-relation[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  margin-top: 4px;\n}\n\n.field-relation[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  margin-right: 4px;\n}\n\n\n\n.field-info-btn[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.field-info-btn[_ngcontent-%COMP%]:hover, \n.field-values-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn.expanded[_ngcontent-%COMP%], \n.field-values-btn.expanded[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%], \n.field-values-btn[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n\n\n.field-description[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 0 8px 8px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-description[_ngcontent-%COMP%]   .description-text[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n.field-details[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n\n\n.field-values[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding: 8px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-left: 3px solid var(--mj-status-warning);\n  border-radius: 0 8px 8px 0;\n  animation: _ngcontent-%COMP%_fadeIn 0.3s ease-in-out;\n}\n\n.field-values[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.field-values[_ngcontent-%COMP%]   .values-list[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.field-values[_ngcontent-%COMP%]   .value-tag[_ngcontent-%COMP%] {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 9px;\n  border-radius: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-values[_ngcontent-%COMP%]   .value-tag[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n  cursor: default;\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%] {\n  margin-top: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  animation: _ngcontent-%COMP%_slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-header[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .details-grid[_ngcontent-%COMP%] {\n  display: grid;\n  gap: 6px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 100px 1fr;\n  gap: 8px;\n  font-size: 12px;\n  align-items: center;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-label[_ngcontent-%COMP%] {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  font-family: \"Courier New\", monospace;\n  background: var(--mj-bg-page);\n  padding: 2px 6px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.nullable-yes[_ngcontent-%COMP%], \n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.nullable-no[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border-color: var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.virtual-yes[_ngcontent-%COMP%] {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.virtual-no[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.default-value[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]:hover {\n  text-decoration: underline;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface-card));\n  transform: translateX(2px);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]   .fa-external-link-alt[_ngcontent-%COMP%] {\n  font-size: 8px;\n  opacity: 0.7;\n  transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.related-entity[_ngcontent-%COMP%]:hover   .fa-external-link-alt[_ngcontent-%COMP%] {\n  opacity: 1;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .detail-value.auto-increment[_ngcontent-%COMP%] {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .comprehensive-description-top[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .comprehensive-description-top[_ngcontent-%COMP%]   .description-content[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  font-style: italic;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  padding: 10px;\n  border-radius: 8px;\n  border: 1px solid var(--mj-brand-primary);\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%] {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 8px;\n  border-left: 4px solid var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-header[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 4px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-status-warning);\n  border-radius: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .values-grid[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-primary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%] {\n  padding: 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%]   .value-text[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-main[_ngcontent-%COMP%]   .value-code[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  padding: 1px 4px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-status-warning);\n  font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details[_ngcontent-%COMP%]   .field-values-comprehensive[_ngcontent-%COMP%]   .value-item[_ngcontent-%COMP%]   .value-description[_ngcontent-%COMP%] {\n  font-size: 9px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  font-style: italic;\n  margin-top: 2px;\n}\n\n@keyframes _ngcontent-%COMP%_slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n\n\n.related-entity-item[_ngcontent-%COMP%] {\n  padding: 12px 14px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  transform: translateX(4px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover   .zoom-indicator[_ngcontent-%COMP%] {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover   .fa-database[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n.related-entity-item[_ngcontent-%COMP%]:hover::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(to bottom, var(--mj-brand-primary), var(--mj-status-warning));\n  border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .fa-solid[_ngcontent-%COMP%] {\n  margin-right: 10px;\n  color: var(--mj-text-secondary);\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .fa-database[_ngcontent-%COMP%] {\n  font-size: 14px;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .entity-name[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.related-entity-item[_ngcontent-%COMP%]   .zoom-indicator[_ngcontent-%COMP%] {\n  opacity: 0.4;\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EntityDetailsComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-entity-details', template: "<div class=\"details-panel\">\n  <div class=\"panel-header\">\n    <h3>{{ selectedEntity?.Name || selectedEntity?.SchemaName }}</h3>\n    <div class=\"panel-actions\">\n      <button class=\"open-btn\" (click)=\"onOpenEntity()\" title=\"Open Entity Record\">\n        <span class=\"fa-solid fa-external-link-alt\"></span>\n        Open\n      </button>\n      <button class=\"close-btn\" (click)=\"onClosePanel()\">\n        <span class=\"fa-solid fa-times\"></span>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"entity-info\">\n    <div class=\"info-row\">\n      <label>Schema:</label>\n      <span>{{ selectedEntity?.SchemaName }}</span>\n    </div>\n    <div class=\"info-row\">\n      <label>Table:</label>\n      <span>{{ selectedEntity?.BaseTable }}</span>\n    </div>\n    @if (selectedEntity?.Description) {\n      <div class=\"info-row\">\n        <label>Description:</label>\n        <span>{{ selectedEntity?.Description }}</span>\n      </div>\n    }\n  </div>\n\n  <div class=\"fields-section\" [class.section-expanded]=\"fieldsSectionExpanded\" [class.section-collapsed]=\"!fieldsSectionExpanded\">\n    <div class=\"section-header extra-padding\">\n      <div class=\"section-title-group\" (click)=\"toggleFieldsSection()\">\n        <button\n          class=\"expand-btn\"\n          [class.expanded]=\"fieldsSectionExpanded\"\n          title=\"Toggle fields section\">\n          <span class=\"fa-solid fa-chevron-right\"></span>\n        </button>\n        <h4>Fields ({{ selectedEntity ? getEntityFields(selectedEntity.ID).length : 0 }})</h4>\n      </div>\n      @if (fieldsSectionExpanded) {\n        <div class=\"field-filters\">\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'all'\"\n            (click)=\"setFieldFilter('all')\"\n            title=\"Show all fields\">\n            All\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'keys'\"\n            (click)=\"setFieldFilter('keys')\"\n            title=\"Show primary keys and ID fields\">\n            Keys\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'foreign_keys'\"\n            (click)=\"setFieldFilter('foreign_keys')\"\n            title=\"Show foreign key fields only\">\n            FKs\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'regular'\"\n            (click)=\"setFieldFilter('regular')\"\n            title=\"Show regular data fields\">\n            Regular\n          </button>\n        </div>\n      }\n    </div>\n    @if (fieldsSectionExpanded) {\n      <div class=\"fields-list\" #fieldsListContainer>\n        @for (field of getEntityFields(selectedEntity?.ID || ''); track field.ID) {\n          <div class=\"field-item\"\n               [class]=\"{\n                 'primary-key-field': field.IsPrimaryKey,\n                 'foreign-key-field': field.RelatedEntityID && !field.IsPrimaryKey,\n                 'regular-field': !field.IsPrimaryKey && !field.RelatedEntityID,\n                 'field-expanded': isFieldDetailsExpanded(field.ID)\n               }\"\n               (click)=\"onFieldClick(field)\"\n               [title]=\"'Click to see more details about ' + field.Name\">\n            <div class=\"field-header\">\n              <div class=\"field-name\">\n                @if (field.IsPrimaryKey) {\n                  <span class=\"field-icon fa-solid fa-key\" title=\"Primary Key\"></span>\n                } @else if (field.RelatedEntityID) {\n                  <span class=\"field-icon fa-solid fa-link\" title=\"Foreign Key\"></span>\n                }\n                {{ field.Name }}\n              </div>\n              <div class=\"field-actions\">\n                @if (hasFieldPossibleValues(field)) {\n                  <button\n                    class=\"field-values-btn\"\n                    (click)=\"toggleFieldValues(field.ID)\"\n                    [class.expanded]=\"isFieldValuesExpanded(field.ID)\"\n                    title=\"Toggle possible values\">\n                    <span class=\"fa-solid fa-list\"></span>\n                  </button>\n                }\n                @if (field.Description) {\n                  <button\n                    class=\"field-info-btn\"\n                    (click)=\"toggleFieldDescription(field.ID)\"\n                    [class.expanded]=\"isFieldDescriptionExpanded(field.ID)\"\n                    title=\"Toggle field description\">\n                    <span class=\"fa-solid fa-info-circle\"></span>\n                  </button>\n                }\n                <div class=\"field-badges\">\n                  @if (field.IsPrimaryKey) {\n                    <span class=\"field-badge primary-key\">PK</span>\n                  }\n                  @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                    <span class=\"field-badge foreign-key\">FK</span>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"field-details\">\n              <div class=\"field-type\">{{ field.Type }}</div>\n              @if (field.RelatedEntityID) {\n                <div class=\"field-relation\">\n                  <span class=\"fa-solid fa-arrow-right\"></span>\n                  Related Entity\n                </div>\n              }\n            </div>\n            @if (field.Description && isFieldDescriptionExpanded(field.ID)) {\n              <div class=\"field-description\">\n                <div class=\"description-text\">{{ field.Description }}</div>\n              </div>\n            }\n            @if (hasFieldPossibleValues(field) && isFieldValuesExpanded(field.ID)) {\n              <div class=\"field-values\">\n                <div class=\"values-header\">Possible Values:</div>\n                <div class=\"values-list\">\n                  @for (value of getFieldPossibleValues(field); track value; let i = $index) {\n                    <span class=\"value-tag\">{{ value }}</span>\n                  }\n                </div>\n              </div>\n            }\n            @if (isFieldDetailsExpanded(field.ID)) {\n              <div class=\"field-comprehensive-details\">\n                @if (field.Description) {\n                  <div class=\"comprehensive-description-top\">\n                    <div class=\"description-content\">{{ field.Description }}</div>\n                  </div>\n                }\n                @if (field.EntityFieldValues && field.EntityFieldValues.length > 0) {\n                  <div class=\"field-values-comprehensive\">\n                    <div class=\"values-header\">\n                      <span class=\"fa-solid fa-list\"></span>\n                      Possible Values ({{ field.EntityFieldValues.length }})\n                    </div>\n                    <div class=\"values-grid\">\n                      @for (fieldValue of getSortedEntityFieldValues(field); track fieldValue.ID) {\n                        <div class=\"value-item\">\n                          <div class=\"value-main\">\n                            <span class=\"value-text\">{{ fieldValue.Value }}</span>\n                            @if (fieldValue.Code && fieldValue.Code !== fieldValue.Value) {\n                              <span class=\"value-code\">[{{ fieldValue.Code }}]</span>\n                            }\n                          </div>\n                          @if (fieldValue.Description && fieldValue.Description !== fieldValue.Value) {\n                            <div class=\"value-description\">{{ fieldValue.Description }}</div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n                <div class=\"details-grid\">\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Data Type:</span>\n                    <span class=\"detail-value\">{{ field.Type }}</span>\n                  </div>\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Nullable:</span>\n                    <span class=\"detail-value\" [class]=\"field.AllowsNull ? 'nullable-yes' : 'nullable-no'\">\n                      {{ field.AllowsNull ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.Length && field.Length > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Max Length:</span>\n                      <span class=\"detail-value\">{{ field.Length }}</span>\n                    </div>\n                  }\n                  @if (field.Precision && field.Precision > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Precision:</span>\n                      <span class=\"detail-value\">{{ field.Precision }}</span>\n                    </div>\n                  }\n                  @if (field.Scale && field.Scale > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Scale:</span>\n                      <span class=\"detail-value\">{{ field.Scale }}</span>\n                    </div>\n                  }\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Virtual Field:</span>\n                    <span class=\"detail-value\" [class]=\"field.IsVirtual ? 'virtual-yes' : 'virtual-no'\">\n                      {{ field.IsVirtual ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.DefaultValue) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Default Value:</span>\n                      <span class=\"detail-value default-value\">{{ field.DefaultValue }}</span>\n                    </div>\n                  }\n                  @if (field.RelatedEntityID) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Related Entity:</span>\n                      <span class=\"detail-value related-entity\"\n                            (click)=\"onRelatedEntityClick($event, field)\"\n                            title=\"Click to select {{ field.RelatedEntity }} in ERD\">\n                        {{ field.RelatedEntity }}\n                        <span class=\"fa-solid fa-arrow-right\"></span>\n                      </span>\n                    </div>\n                  }\n                  @if (field.AutoIncrement) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Auto Increment:</span>\n                      <span class=\"detail-value auto-increment\">Yes</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </div>\n\n  <div class=\"relationships-section\" [class.section-expanded]=\"relationshipsSectionExpanded\" [class.section-collapsed]=\"!relationshipsSectionExpanded\">\n    <div class=\"section-header extra-padding\">\n      <div class=\"section-title-group\" (click)=\"toggleRelationshipsSection()\">\n        <button\n          class=\"expand-btn\"\n          [class.expanded]=\"relationshipsSectionExpanded\"\n          title=\"Toggle relationships section\">\n          <span class=\"fa-solid fa-chevron-right\"></span>\n        </button>\n        <h4>Related Entities ({{ selectedEntity ? getRelatedEntities(selectedEntity.ID).length : 0 }})</h4>\n      </div>\n    </div>\n    @if (relationshipsSectionExpanded) {\n      <div class=\"related-entities-list\" #relationshipsListContainer>\n        @for (relatedEntity of getRelatedEntities(selectedEntity?.ID || ''); track relatedEntity.ID) {\n          <div class=\"related-entity-item\" (click)=\"selectEntity(relatedEntity, true)\">\n            <span class=\"fa-solid fa-database\"></span>\n            <span class=\"entity-name\">{{ relatedEntity.Name || relatedEntity.SchemaName }}</span>\n            <span class=\"zoom-indicator fa-solid fa-search-plus\" title=\"Click to zoom to entity\"></span>\n          </div>\n        }\n      </div>\n    }\n  </div>\n</div>\n", styles: ["/**\n * Entity Details Component - MJ Design Token Styled\n * MemberJunction design tokens for the entity details panel\n */\n\n.details-panel {\n  height: 100%;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n\n.details-panel .panel-header {\n  flex-shrink: 0;\n}\n\n.details-panel .entity-info {\n  flex-shrink: 0;\n}\n\n.details-panel .fields-section,\n.details-panel .relationships-section {\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  transition: flex 0.3s ease;\n}\n\n.details-panel .fields-section.section-expanded,\n.details-panel .relationships-section.section-expanded {\n  flex: 1;\n}\n\n.details-panel .fields-section.section-collapsed,\n.details-panel .relationships-section.section-collapsed {\n  flex: 0 0 auto;\n}\n\n.details-panel .fields-section:last-child,\n.details-panel .relationships-section:last-child {\n  border-bottom: none;\n}\n\n/* Panel Header */\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/* Filled Button for Open */\n.open-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border: none;\n  border-radius: 20px;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.open-btn:hover {\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* Icon Button for Close */\n.close-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n/* Entity Info Section */\n.entity-info {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-row {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-row label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  min-width: 60px;\n}\n\n.info-row span {\n  color: var(--mj-text-primary);\n  flex: 1;\n  text-align: right;\n}\n\n/* Status Badges */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\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-card));\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-card));\n  color: var(--mj-status-error);\n}\n\n.extra-padding {\n  padding: 4px;\n}\n\n/* Fields and Relationships Sections */\n.fields-section,\n.relationships-section {\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.fields-section .section-header,\n.relationships-section .section-header {\n  flex-shrink: 0;\n  padding: 16px 16px 12px 16px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  background: var(--mj-bg-surface-sunken);\n  border: none;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.fields-section .section-header .section-title-group,\n.relationships-section .section-header .section-title-group {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.fields-section h4,\n.relationships-section h4 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n/* Expand Button */\n.expand-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.expand-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n.expand-btn .fa-solid {\n  font-size: 10px;\n  transition: transform 0.2s ease;\n}\n\n.expand-btn.expanded .fa-solid {\n  transform: rotate(90deg);\n}\n\n.section-title-group {\n  cursor: pointer;\n  user-select: none;\n}\n\n.section-title-group:hover {\n  opacity: 0.8;\n}\n\n/* Field Filter Buttons */\n.field-filters {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  font-size: 11px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.filter-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n/* Fields and Related Entities Lists */\n.fields-list,\n.related-entities-list {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n}\n\n.fields-list::-webkit-scrollbar,\n.related-entities-list::-webkit-scrollbar {\n  width: 6px;\n}\n\n.fields-list::-webkit-scrollbar-track,\n.related-entities-list::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb,\n.related-entities-list::-webkit-scrollbar-thumb {\n  background: var(--mj-text-disabled);\n  border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb:hover,\n.related-entities-list::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n/* Field Items - Card Style */\n.field-item {\n  padding: 10px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  font-size: 12px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.field-item:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-item.field-expanded {\n  box-shadow: var(--mj-shadow-lg);\n  transform: scale(1.01);\n}\n\n/* Primary Key Field - Success Accent */\n.field-item.primary-key-field {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-status-success);\n}\n\n.field-item.primary-key-field.field-expanded {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Foreign Key Field - Primary Accent */\n.field-item.foreign-key-field {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n.field-item.foreign-key-field.field-expanded {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n/* Regular Field */\n.field-item.regular-field {\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.field-item.regular-field.field-expanded {\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon {\n  font-size: 10px;\n}\n\n.field-icon.fa-key {\n  color: var(--mj-status-success);\n}\n\n.field-icon.fa-link {\n  color: var(--mj-brand-primary);\n}\n\n/* Field Badges */\n.field-badges {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.field-badge.primary-key {\n  background: var(--mj-status-success);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-badge.foreign-key {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-type {\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n.field-relation {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  margin-top: 4px;\n}\n\n.field-relation .fa-solid {\n  margin-right: 4px;\n}\n\n/* Field Info and Values Buttons */\n.field-info-btn,\n.field-values-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.field-info-btn:hover,\n.field-values-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn.expanded,\n.field-values-btn.expanded {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn .fa-solid,\n.field-values-btn .fa-solid {\n  font-size: 10px;\n}\n\n/* Field Description */\n.field-description {\n  margin-top: 8px;\n  padding: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 0 8px 8px 0;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-description .description-text {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n.field-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Field Values - Warning Accent */\n.field-values {\n  margin-top: 8px;\n  padding: 8px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-left: 3px solid var(--mj-status-warning);\n  border-radius: 0 8px 8px 0;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-values .values-header {\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.field-values .values-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.field-values .value-tag {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 9px;\n  border-radius: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-values .value-tag:hover {\n  background: var(--mj-bg-surface-active);\n  cursor: default;\n}\n\n/* Field Comprehensive Details */\n.field-comprehensive-details {\n  margin-top: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  animation: slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details .details-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .details-header .fa-solid {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details .details-grid {\n  display: grid;\n  gap: 6px;\n}\n\n.field-comprehensive-details .detail-row {\n  display: grid;\n  grid-template-columns: 100px 1fr;\n  gap: 8px;\n  font-size: 12px;\n  align-items: center;\n}\n\n.field-comprehensive-details .detail-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n.field-comprehensive-details .detail-value {\n  color: var(--mj-text-primary);\n  font-family: \"Courier New\", monospace;\n  background: var(--mj-bg-page);\n  padding: 2px 6px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .detail-value.nullable-yes,\n.field-comprehensive-details .detail-value.nullable-no {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border-color: var(--mj-border-default);\n}\n\n.field-comprehensive-details .detail-value.virtual-yes {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details .detail-value.virtual-no {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details .detail-value.default-value {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details .detail-value.related-entity {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover {\n  text-decoration: underline;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface-card));\n  transform: translateX(2px);\n}\n\n.field-comprehensive-details .detail-value.related-entity .fa-external-link-alt {\n  font-size: 8px;\n  opacity: 0.7;\n  transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover .fa-external-link-alt {\n  opacity: 1;\n}\n\n.field-comprehensive-details .detail-value.auto-increment {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details .comprehensive-description-top {\n  margin-bottom: 12px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .comprehensive-description-top .description-content {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  font-style: italic;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  padding: 10px;\n  border-radius: 8px;\n  border: 1px solid var(--mj-brand-primary);\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n/* Field Values in Comprehensive Details */\n.field-comprehensive-details .field-values-comprehensive {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 8px;\n  border-left: 4px solid var(--mj-status-warning);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header .fa-solid {\n  color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar {\n  width: 4px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-track {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb {\n  background: var(--mj-status-warning);\n  border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-primary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item {\n  padding: 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-text {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-code {\n  font-size: 9px;\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  padding: 1px 4px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-status-warning);\n  font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-description {\n  font-size: 9px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  font-style: italic;\n  margin-top: 2px;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n/* Related Entity Items - List Item Style */\n.related-entity-item {\n  padding: 12px 14px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n}\n\n.related-entity-item:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  transform: translateX(4px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.related-entity-item:hover .zoom-indicator {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.related-entity-item:hover .fa-database {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n.related-entity-item:hover::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(to bottom, var(--mj-brand-primary), var(--mj-status-warning));\n  border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item .fa-solid {\n  margin-right: 10px;\n  color: var(--mj-text-secondary);\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n\n.related-entity-item .fa-database {\n  font-size: 14px;\n}\n\n.related-entity-item .entity-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.related-entity-item .zoom-indicator {\n  opacity: 0.4;\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-entity-details', template: "<div class=\"details-panel\">\n  <div class=\"panel-header\">\n    <h3>{{ selectedEntity?.Name || selectedEntity?.SchemaName }}</h3>\n    <div class=\"panel-actions\">\n      <button class=\"open-btn\" (click)=\"onOpenEntity()\" title=\"Open Entity Record\">\n        <span class=\"fa-solid fa-external-link-alt\"></span>\n        Open\n      </button>\n      <button class=\"close-btn\" (click)=\"onClosePanel()\">\n        <span class=\"fa-solid fa-times\"></span>\n      </button>\n    </div>\n  </div>\n\n  <div class=\"entity-info\">\n    <div class=\"info-row\">\n      <label>Schema:</label>\n      <span>{{ selectedEntity?.SchemaName }}</span>\n    </div>\n    <div class=\"info-row\">\n      <label>Table:</label>\n      <span>{{ selectedEntity?.BaseTable }}</span>\n    </div>\n    @if (selectedEntity?.Description) {\n      <div class=\"info-row\">\n        <label>Description:</label>\n        <span>{{ selectedEntity?.Description }}</span>\n      </div>\n    }\n  </div>\n\n  <mj-accordion-panel class=\"erd-details-accordion\" Size=\"sm\" [Fill]=\"true\" [FlushBody]=\"true\"\n    [Expanded]=\"fieldsSectionExpanded\" (ExpandedChange)=\"toggleFieldsSection()\">\n    <ng-template mjAccordionTitle>\n      <span class=\"erd-section-title\">Fields ({{ selectedEntity ? getEntityFields(selectedEntity.ID).length : 0 }})</span>\n    </ng-template>\n    <ng-template mjAccordionActions>\n      @if (fieldsSectionExpanded) {\n        <div class=\"field-filters\">\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'all'\"\n            (click)=\"setFieldFilter('all')\"\n            title=\"Show all fields\">\n            All\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'keys'\"\n            (click)=\"setFieldFilter('keys')\"\n            title=\"Show primary keys and ID fields\">\n            Keys\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'foreign_keys'\"\n            (click)=\"setFieldFilter('foreign_keys')\"\n            title=\"Show foreign key fields only\">\n            FKs\n          </button>\n          <button\n            class=\"filter-btn\"\n            [class.active]=\"fieldFilter === 'regular'\"\n            (click)=\"setFieldFilter('regular')\"\n            title=\"Show regular data fields\">\n            Regular\n          </button>\n        </div>\n      }\n    </ng-template>\n    @if (fieldsSectionExpanded) {\n      <div class=\"fields-list\" #fieldsListContainer>\n        @for (field of getEntityFields(selectedEntity?.ID || ''); track field.ID) {\n          <div class=\"field-item\"\n               [class]=\"{\n                 'primary-key-field': field.IsPrimaryKey,\n                 'foreign-key-field': field.RelatedEntityID && !field.IsPrimaryKey,\n                 'regular-field': !field.IsPrimaryKey && !field.RelatedEntityID,\n                 'field-expanded': isFieldDetailsExpanded(field.ID)\n               }\"\n               (click)=\"onFieldClick(field)\"\n               [title]=\"'Click to see more details about ' + field.Name\">\n            <div class=\"field-header\">\n              <div class=\"field-name\">\n                @if (field.IsPrimaryKey) {\n                  <span class=\"field-icon fa-solid fa-key\" title=\"Primary Key\"></span>\n                } @else if (field.RelatedEntityID) {\n                  <span class=\"field-icon fa-solid fa-link\" title=\"Foreign Key\"></span>\n                }\n                {{ field.Name }}\n              </div>\n              <div class=\"field-actions\">\n                @if (hasFieldPossibleValues(field)) {\n                  <button\n                    class=\"field-values-btn\"\n                    (click)=\"toggleFieldValues(field.ID)\"\n                    [class.expanded]=\"isFieldValuesExpanded(field.ID)\"\n                    title=\"Toggle possible values\">\n                    <span class=\"fa-solid fa-list\"></span>\n                  </button>\n                }\n                @if (field.Description) {\n                  <button\n                    class=\"field-info-btn\"\n                    (click)=\"toggleFieldDescription(field.ID)\"\n                    [class.expanded]=\"isFieldDescriptionExpanded(field.ID)\"\n                    title=\"Toggle field description\">\n                    <span class=\"fa-solid fa-info-circle\"></span>\n                  </button>\n                }\n                <div class=\"field-badges\">\n                  @if (field.IsPrimaryKey) {\n                    <span class=\"field-badge primary-key\">PK</span>\n                  }\n                  @if (field.RelatedEntityID && !field.IsPrimaryKey) {\n                    <span class=\"field-badge foreign-key\">FK</span>\n                  }\n                </div>\n              </div>\n            </div>\n            <div class=\"field-details\">\n              <div class=\"field-type\">{{ field.Type }}</div>\n              @if (field.RelatedEntityID) {\n                <div class=\"field-relation\">\n                  <span class=\"fa-solid fa-arrow-right\"></span>\n                  Related Entity\n                </div>\n              }\n            </div>\n            @if (field.Description && isFieldDescriptionExpanded(field.ID)) {\n              <div class=\"field-description\">\n                <div class=\"description-text\">{{ field.Description }}</div>\n              </div>\n            }\n            @if (hasFieldPossibleValues(field) && isFieldValuesExpanded(field.ID)) {\n              <div class=\"field-values\">\n                <div class=\"values-header\">Possible Values:</div>\n                <div class=\"values-list\">\n                  @for (value of getFieldPossibleValues(field); track value; let i = $index) {\n                    <span class=\"value-tag\">{{ value }}</span>\n                  }\n                </div>\n              </div>\n            }\n            @if (isFieldDetailsExpanded(field.ID)) {\n              <div class=\"field-comprehensive-details\">\n                @if (field.Description) {\n                  <div class=\"comprehensive-description-top\">\n                    <div class=\"description-content\">{{ field.Description }}</div>\n                  </div>\n                }\n                @if (field.EntityFieldValues && field.EntityFieldValues.length > 0) {\n                  <div class=\"field-values-comprehensive\">\n                    <div class=\"values-header\">\n                      <span class=\"fa-solid fa-list\"></span>\n                      Possible Values ({{ field.EntityFieldValues.length }})\n                    </div>\n                    <div class=\"values-grid\">\n                      @for (fieldValue of getSortedEntityFieldValues(field); track fieldValue.ID) {\n                        <div class=\"value-item\">\n                          <div class=\"value-main\">\n                            <span class=\"value-text\">{{ fieldValue.Value }}</span>\n                            @if (fieldValue.Code && fieldValue.Code !== fieldValue.Value) {\n                              <span class=\"value-code\">[{{ fieldValue.Code }}]</span>\n                            }\n                          </div>\n                          @if (fieldValue.Description && fieldValue.Description !== fieldValue.Value) {\n                            <div class=\"value-description\">{{ fieldValue.Description }}</div>\n                          }\n                        </div>\n                      }\n                    </div>\n                  </div>\n                }\n                <div class=\"details-grid\">\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Data Type:</span>\n                    <span class=\"detail-value\">{{ field.Type }}</span>\n                  </div>\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Nullable:</span>\n                    <span class=\"detail-value\" [class]=\"field.AllowsNull ? 'nullable-yes' : 'nullable-no'\">\n                      {{ field.AllowsNull ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.Length && field.Length > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Max Length:</span>\n                      <span class=\"detail-value\">{{ field.Length }}</span>\n                    </div>\n                  }\n                  @if (field.Precision && field.Precision > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Precision:</span>\n                      <span class=\"detail-value\">{{ field.Precision }}</span>\n                    </div>\n                  }\n                  @if (field.Scale && field.Scale > 0) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Scale:</span>\n                      <span class=\"detail-value\">{{ field.Scale }}</span>\n                    </div>\n                  }\n                  <div class=\"detail-row\">\n                    <span class=\"detail-label\">Virtual Field:</span>\n                    <span class=\"detail-value\" [class]=\"field.IsVirtual ? 'virtual-yes' : 'virtual-no'\">\n                      {{ field.IsVirtual ? 'Yes' : 'No' }}\n                    </span>\n                  </div>\n                  @if (field.DefaultValue) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Default Value:</span>\n                      <span class=\"detail-value default-value\">{{ field.DefaultValue }}</span>\n                    </div>\n                  }\n                  @if (field.RelatedEntityID) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Related Entity:</span>\n                      <span class=\"detail-value related-entity\"\n                            (click)=\"onRelatedEntityClick($event, field)\"\n                            title=\"Click to select {{ field.RelatedEntity }} in ERD\">\n                        {{ field.RelatedEntity }}\n                        <span class=\"fa-solid fa-arrow-right\"></span>\n                      </span>\n                    </div>\n                  }\n                  @if (field.AutoIncrement) {\n                    <div class=\"detail-row\">\n                      <span class=\"detail-label\">Auto Increment:</span>\n                      <span class=\"detail-value auto-increment\">Yes</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        }\n      </div>\n    }\n  </mj-accordion-panel>\n\n  <mj-accordion-panel class=\"erd-details-accordion\" Size=\"sm\" [Fill]=\"true\" [FlushBody]=\"true\"\n    [Expanded]=\"relationshipsSectionExpanded\" (ExpandedChange)=\"toggleRelationshipsSection()\">\n    <ng-template mjAccordionTitle>\n      <span class=\"erd-section-title\">Related Entities ({{ selectedEntity ? getRelatedEntities(selectedEntity.ID).length : 0 }})</span>\n    </ng-template>\n    @if (relationshipsSectionExpanded) {\n      <div class=\"related-entities-list\" #relationshipsListContainer>\n        @for (relatedEntity of getRelatedEntities(selectedEntity?.ID || ''); track relatedEntity.ID) {\n          <div class=\"related-entity-item\" (click)=\"selectEntity(relatedEntity, true)\">\n            <span class=\"fa-solid fa-database\"></span>\n            <span class=\"entity-name\">{{ relatedEntity.Name || relatedEntity.SchemaName }}</span>\n            <span class=\"zoom-indicator fa-solid fa-search-plus\" title=\"Click to zoom to entity\"></span>\n          </div>\n        }\n      </div>\n    }\n  </mj-accordion-panel>\n</div>\n", styles: ["/**\n * Entity Details Component - MJ Design Token Styled\n * MemberJunction design tokens for the entity details panel\n */\n\n.details-panel {\n  height: 100%;\n  background: var(--mj-bg-page);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n  min-height: 0; /* let the [Fill] Fields / Related Entities accordions claim height */\n}\n\n.details-panel .panel-header {\n  flex-shrink: 0;\n}\n\n.details-panel .entity-info {\n  flex-shrink: 0;\n}\n\n/* The Fields / Related Entities accordions claim leftover height via the\n   accordion's own [Fill] mode (mj-accordion-fill-active host class). */\n\n/* Panel Header */\n.panel-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 12px 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.panel-header h3 {\n  margin: 0;\n  font-size: 16px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.panel-actions {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/* Filled Button for Open */\n.open-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 12px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n  border: none;\n  border-radius: 20px;\n  font-size: 11px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.open-btn:hover {\n  box-shadow: var(--mj-shadow-md);\n}\n\n/* Icon Button for Close */\n.close-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n  background: var(--mj-bg-surface-active);\n  color: var(--mj-text-primary);\n}\n\n/* Entity Info Section */\n.entity-info {\n  padding: 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.info-row {\n  display: flex;\n  justify-content: space-between;\n  margin-bottom: 8px;\n  font-size: 12px;\n}\n\n.info-row:last-child {\n  margin-bottom: 0;\n}\n\n.info-row label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  min-width: 60px;\n}\n\n.info-row span {\n  color: var(--mj-text-primary);\n  flex: 1;\n  text-align: right;\n}\n\n/* Status Badges */\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px;\n  border-radius: 8px;\n  font-size: 11px;\n  font-weight: 600;\n  text-transform: uppercase;\n}\n\n.status-badge.status-active {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\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-card));\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-card));\n  color: var(--mj-status-error);\n}\n\n.extra-padding {\n  padding: 4px;\n}\n\n/* Fields and Relationships Sections */\n/* Fields + Related Entities are now <mj-accordion-panel> with [Fill] (the field\n   filter buttons live in the mjAccordionActions slot). The bespoke .fields-section\n   / .section-header / .section-title-group / .expand-btn chrome was removed. */\n.erd-section-title {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n/* Field Filter Buttons */\n.field-filters {\n  display: flex;\n  gap: 4px;\n}\n\n.filter-btn {\n  display: inline-flex;\n  align-items: center;\n  padding: 4px 10px;\n  font-size: 11px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-secondary);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 16px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.filter-btn:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-btn.active {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n/* Fields and Related Entities Lists */\n.fields-list,\n.related-entities-list {\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  overflow-y: auto;\n  padding: 6px 16px 16px 16px;\n  min-height: 0;\n}\n\n.fields-list::-webkit-scrollbar,\n.related-entities-list::-webkit-scrollbar {\n  width: 6px;\n}\n\n.fields-list::-webkit-scrollbar-track,\n.related-entities-list::-webkit-scrollbar-track {\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb,\n.related-entities-list::-webkit-scrollbar-thumb {\n  background: var(--mj-text-disabled);\n  border-radius: 3px;\n}\n\n.fields-list::-webkit-scrollbar-thumb:hover,\n.related-entities-list::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-secondary);\n}\n\n/* Field Items - Card Style */\n.field-item {\n  padding: 10px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  font-size: 12px;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n}\n\n.field-item:hover {\n  transform: translateY(-1px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-item.field-expanded {\n  box-shadow: var(--mj-shadow-lg);\n  transform: scale(1.01);\n}\n\n/* Primary Key Field - Success Accent */\n.field-item.primary-key-field {\n  border-color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-status-success);\n}\n\n.field-item.primary-key-field.field-expanded {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 20%, transparent);\n}\n\n/* Foreign Key Field - Primary Accent */\n.field-item.foreign-key-field {\n  border-color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 12%, var(--mj-bg-surface-card));\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n.field-item.foreign-key-field.field-expanded {\n  box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n}\n\n/* Regular Field */\n.field-item.regular-field {\n  border-color: var(--mj-border-default);\n  background: var(--mj-bg-surface-sunken);\n}\n\n.field-item.regular-field.field-expanded {\n  box-shadow: var(--mj-shadow-md);\n}\n\n.field-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 4px;\n}\n\n.field-actions {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.field-name {\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-icon {\n  font-size: 10px;\n}\n\n.field-icon.fa-key {\n  color: var(--mj-status-success);\n}\n\n.field-icon.fa-link {\n  color: var(--mj-brand-primary);\n}\n\n/* Field Badges */\n.field-badges {\n  display: flex;\n  gap: 4px;\n}\n\n.field-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 6px;\n  border-radius: 4px;\n  font-size: 9px;\n  font-weight: 700;\n  text-transform: uppercase;\n}\n\n.field-badge.primary-key {\n  background: var(--mj-status-success);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-badge.foreign-key {\n  background: var(--mj-brand-primary);\n  color: var(--mj-brand-on-primary);\n}\n\n.field-type {\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n.field-relation {\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  margin-top: 4px;\n}\n\n.field-relation .fa-solid {\n  margin-right: 4px;\n}\n\n/* Field Info and Values Buttons */\n.field-info-btn,\n.field-values-btn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  padding: 0;\n  background: transparent;\n  color: var(--mj-text-secondary);\n  border: none;\n  border-radius: 50%;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n.field-info-btn:hover,\n.field-values-btn:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn.expanded,\n.field-values-btn.expanded {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  color: var(--mj-brand-primary);\n}\n\n.field-info-btn .fa-solid,\n.field-values-btn .fa-solid {\n  font-size: 10px;\n}\n\n/* Field Description */\n.field-description {\n  margin-top: 8px;\n  padding: 8px;\n  background: var(--mj-bg-surface-sunken);\n  border-left: 3px solid var(--mj-brand-primary);\n  border-radius: 0 8px 8px 0;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-description .description-text {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  line-height: 1.4;\n  font-style: italic;\n}\n\n.field-details {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n    transform: translateY(-5px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n/* Field Values - Warning Accent */\n.field-values {\n  margin-top: 8px;\n  padding: 8px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-left: 3px solid var(--mj-status-warning);\n  border-radius: 0 8px 8px 0;\n  animation: fadeIn 0.3s ease-in-out;\n}\n\n.field-values .values-header {\n  font-size: 11px;\n  color: var(--mj-text-primary);\n  font-weight: 600;\n  margin-bottom: 6px;\n}\n\n.field-values .values-list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 4px;\n}\n\n.field-values .value-tag {\n  display: inline-block;\n  padding: 2px 8px;\n  background: var(--mj-bg-page);\n  color: var(--mj-text-primary);\n  font-size: 9px;\n  border-radius: 12px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 80px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-values .value-tag:hover {\n  background: var(--mj-bg-surface-active);\n  cursor: default;\n}\n\n/* Field Comprehensive Details */\n.field-comprehensive-details {\n  margin-top: 12px;\n  padding: 12px;\n  background: var(--mj-bg-surface-sunken);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  animation: slideDown 0.3s ease-out;\n}\n\n.field-comprehensive-details .details-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .details-header .fa-solid {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details .details-grid {\n  display: grid;\n  gap: 6px;\n}\n\n.field-comprehensive-details .detail-row {\n  display: grid;\n  grid-template-columns: 100px 1fr;\n  gap: 8px;\n  font-size: 12px;\n  align-items: center;\n}\n\n.field-comprehensive-details .detail-label {\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-align: right;\n}\n\n.field-comprehensive-details .detail-value {\n  color: var(--mj-text-primary);\n  font-family: \"Courier New\", monospace;\n  background: var(--mj-bg-page);\n  padding: 2px 6px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .detail-value.nullable-yes,\n.field-comprehensive-details .detail-value.nullable-no {\n  color: var(--mj-text-primary);\n  background: var(--mj-bg-page);\n  border-color: var(--mj-border-default);\n}\n\n.field-comprehensive-details .detail-value.virtual-yes {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details .detail-value.virtual-no {\n  color: var(--mj-text-secondary);\n}\n\n.field-comprehensive-details .detail-value.default-value {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details .detail-value.related-entity {\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.2s ease;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover {\n  text-decoration: underline;\n  background: color-mix(in srgb, var(--mj-brand-primary) 25%, var(--mj-bg-surface-card));\n  transform: translateX(2px);\n}\n\n.field-comprehensive-details .detail-value.related-entity .fa-external-link-alt {\n  font-size: 8px;\n  opacity: 0.7;\n  transition: opacity 0.2s ease;\n}\n\n.field-comprehensive-details .detail-value.related-entity:hover .fa-external-link-alt {\n  opacity: 1;\n}\n\n.field-comprehensive-details .detail-value.auto-increment {\n  color: var(--mj-status-success);\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-status-success);\n}\n\n.field-comprehensive-details .comprehensive-description-top {\n  margin-bottom: 12px;\n  padding-bottom: 10px;\n  border-bottom: 1px solid var(--mj-border-default);\n}\n\n.field-comprehensive-details .comprehensive-description-top .description-content {\n  font-size: 12px;\n  color: var(--mj-text-primary);\n  line-height: 1.4;\n  font-style: italic;\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  padding: 10px;\n  border-radius: 8px;\n  border: 1px solid var(--mj-brand-primary);\n  border-left: 4px solid var(--mj-brand-primary);\n}\n\n/* Field Values in Comprehensive Details */\n.field-comprehensive-details .field-values-comprehensive {\n  margin-bottom: 12px;\n  padding: 12px;\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border: 1px solid var(--mj-status-warning);\n  border-radius: 8px;\n  border-left: 4px solid var(--mj-status-warning);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 12px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  margin-bottom: 10px;\n  padding-bottom: 6px;\n  border-bottom: 1px solid color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-header .fa-solid {\n  color: var(--mj-status-warning);\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar {\n  width: 4px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-track {\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb {\n  background: var(--mj-status-warning);\n  border-radius: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .values-grid::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-primary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item {\n  padding: 8px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  margin-bottom: 2px;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-text {\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-main .value-code {\n  font-size: 9px;\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface-card));\n  padding: 1px 4px;\n  border-radius: 4px;\n  border: 1px solid var(--mj-status-warning);\n  font-family: \"Courier New\", monospace;\n}\n\n.field-comprehensive-details .field-values-comprehensive .value-item .value-description {\n  font-size: 9px;\n  color: var(--mj-text-secondary);\n  line-height: 1.3;\n  font-style: italic;\n  margin-top: 2px;\n}\n\n@keyframes slideDown {\n  from {\n    opacity: 0;\n    transform: translateY(-10px);\n    max-height: 0;\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n    max-height: 500px;\n  }\n}\n\n/* Related Entity Items - List Item Style */\n.related-entity-item {\n  padding: 12px 14px;\n  background: var(--mj-bg-page);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 12px;\n  cursor: pointer;\n  font-size: 14px;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  transition: all 0.3s ease;\n  position: relative;\n  max-width: calc(100% - 4px);\n  min-width: 0;\n  flex-shrink: 1;\n}\n\n.related-entity-item:hover {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface-card));\n  border-color: var(--mj-brand-primary);\n  transform: translateX(4px);\n  box-shadow: var(--mj-shadow-md);\n}\n\n.related-entity-item:hover .zoom-indicator {\n  opacity: 1;\n  transform: scale(1.1);\n}\n\n.related-entity-item:hover .fa-database {\n  color: var(--mj-brand-primary);\n  transform: scale(1.1);\n}\n\n.related-entity-item:hover::before {\n  content: \"\";\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 3px;\n  background: linear-gradient(to bottom, var(--mj-brand-primary), var(--mj-status-warning));\n  border-radius: 0 3px 3px 0;\n}\n\n.related-entity-item .fa-solid {\n  margin-right: 10px;\n  color: var(--mj-text-secondary);\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n\n.related-entity-item .fa-database {\n  font-size: 14px;\n}\n\n.related-entity-item .entity-name {\n  flex: 1;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  min-width: 0;\n}\n\n.related-entity-item .zoom-indicator {\n  opacity: 0.4;\n  color: var(--mj-brand-primary);\n  font-size: 11px;\n  transition: all 0.2s ease;\n  flex-shrink: 0;\n}\n"] }]
     }], null, { fieldsListContainer: [{
             type: ViewChild,
             args: ['fieldsListContainer', { static: false }]