@memberjunction/ng-versions 5.43.0 → 5.45.0

package/dist/lib/label-detail/label-detail.component.js

@@ -8,7 +8,8 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "../record-micro-view/record-micro-view.component";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "../record-micro-view/record-micro-view.component";
 const _c0 = a0 => ({ $implicit: a0 });
 function MjLabelDetailComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p", 12);
@@ -439,39 +440,55 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_12_Temp
 function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "i", 95);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 110);
-    i0.ɵɵelement(1, "mj-loading", 112);
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 107);
+    i0.ɵɵelementStart(1, "span", 108);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 109);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r9 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵclassMap(group_r9.EntityIcon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r9.EntityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r9.Items.length);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 111);
+    i0.ɵɵelement(1, "mj-loading", 113);
+    i0.ɵɵelementEnd();
+} }
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_2_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 114);
-    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template_div_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r11.RecordID, item_r11.RecordChangeID, item_r11.DisplayName)); });
-    i0.ɵɵelement(1, "i", 115);
-    i0.ɵɵelementStart(2, "span", 116);
+    i0.ɵɵelementStart(0, "div", 115);
+    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_2_For_1_Template_div_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r11.RecordID, item_r11.RecordChangeID, item_r11.DisplayName)); });
+    i0.ɵɵelement(1, "i", 116);
+    i0.ɵɵelementStart(2, "span", 117);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(4, "i", 117);
+    i0.ɵɵelement(4, "i", 118);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r11 = ctx.$implicit;
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r11.DisplayName);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_For_1_Template, 5, 1, "div", 113, i0.ɵɵrepeaterTrackByIdentity);
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_2_For_1_Template, 5, 1, "div", 114, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const group_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵrepeater(group_r9.Items);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 119);
-    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template_div_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r13.RecordID, item_r13.RecordChangeID, item_r13.DisplayName)); });
-    i0.ɵɵelementStart(1, "div", 120);
-    i0.ɵɵelement(2, "i", 121);
-    i0.ɵɵelementStart(3, "span", 122);
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_3_For_2_Template_div_click_0_listener() { const item_r13 = i0.ɵɵrestoreView(_r12).$implicit; const group_r9 = i0.ɵɵnextContext(3).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.OpenMicroView(group_r9.EntityName, item_r13.RecordID, item_r13.RecordChangeID, item_r13.DisplayName)); });
+    i0.ɵɵelementStart(1, "div", 121);
+    i0.ɵɵelement(2, "i", 122);
+    i0.ɵɵelementStart(3, "span", 123);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -479,20 +496,20 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(item_r13.DisplayName);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 111);
-    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_For_2_Template, 5, 1, "div", 118, i0.ɵɵrepeaterTrackByIdentity);
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_3_For_2_Template, 5, 1, "div", 119, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r9 = i0.ɵɵnextContext(2).$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(group_r9.Items);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 109);
-    i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_1_Template, 2, 0, "div", 110);
-    i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_2_Template, 2, 0);
-    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Conditional_3_Template, 3, 0, "div", 111);
+function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_1_Template, 2, 0, "div", 111);
+    i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_2_Template, 2, 0);
+    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Conditional_3_Template, 3, 0, "div", 112);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r9 = i0.ɵɵnextContext().$implicit;
@@ -506,35 +523,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 102)(1, "div", 104);
-    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template_div_click_1_listener() { const group_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleSnapshotGroup(group_r9)); });
-    i0.ɵɵelement(2, "i", 105)(3, "i", 106);
-    i0.ɵɵelementStart(4, "span", 107);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementStart(6, "span", 108);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Conditional_8_Template, 4, 3, "div", 109);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
+    i0.ɵɵlistener("ExpandedChange", function MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template_mj_accordion_panel_ExpandedChange_0_listener() { const group_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r0 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r0.ToggleSnapshotGroup(group_r9)); });
+    i0.ɵɵtemplate(1, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_1_Template, 5, 4, "ng-template", 105)(2, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_ng_template_2_Template, 4, 3, "ng-template", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r9 = ctx.$implicit;
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("expanded", group_r9.IsExpanded);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(group_r9.EntityIcon);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("", group_r9.EntityName, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r9.Items.length);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(group_r9.IsExpanded ? 8 : -1);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", group_r9.IsExpanded);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 123);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No snapshot items found.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 103);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
@@ -564,9 +562,9 @@ function MjLabelDetailComponent_Conditional_43_Conditional_3_Template(rf, ctx) {
     i0.ɵɵelement(18, "i", 100);
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(19, "div", 101);
-    i0.ɵɵrepeaterCreate(20, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template, 9, 7, "div", 102, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(20, MjLabelDetailComponent_Conditional_43_Conditional_3_For_21_Template, 3, 2, "mj-accordion-panel", 102, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(22, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template, 4, 0, "div", 103);
+    i0.ɵɵconditionalCreate(22, MjLabelDetailComponent_Conditional_43_Conditional_3_Conditional_22_Template, 1, 0, "mj-empty-state", 103);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -604,7 +602,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Condi
     i0.ɵɵelementContainer(0);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_ng_container_0_Template, 1, 0, "ng-container", 131);
+    i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_For_1_ng_container_0_Template, 1, 0, "ng-container", 132);
 } if (rf & 2) {
     const node_r14 = ctx.$implicit;
     i0.ɵɵnextContext(4);
@@ -618,21 +616,19 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Condi
     i0.ɵɵrepeater(ctx_r0.DependencyTree);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 130)(1, "p");
-    i0.ɵɵtext(2, "No dependent entities found.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 131);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125)(1, "div", 126);
-    i0.ɵɵelement(2, "i", 127);
-    i0.ɵɵelementStart(3, "span", 128);
+    i0.ɵɵelementStart(0, "div", 125)(1, "div", 127);
+    i0.ɵɵelement(2, "i", 128);
+    i0.ɵɵelementStart(3, "span", 129);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 129);
+    i0.ɵɵelementStart(5, "span", 130);
     i0.ɵɵtext(6, "Root");
     i0.ɵɵelementEnd()();
     i0.ɵɵconditionalCreate(7, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_7_Template, 2, 0);
-    i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template, 3, 0, "div", 130);
+    i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Conditional_8_Template, 1, 0, "mj-empty-state", 131);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
@@ -646,17 +642,13 @@ function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Templ
     i0.ɵɵconditional(ctx_r0.DependencyTree.length === 0 ? 8 : -1);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 132);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No entity associated with this label.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 126);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
     i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_1_Template, 1, 0, "mj-loading", 124);
     i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_2_Template, 9, 5, "div", 125);
-    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template, 4, 0, "div", 103);
+    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_4_Conditional_3_Template, 1, 0, "mj-empty-state", 126);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(2);
@@ -689,7 +681,7 @@ function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_
     i0.ɵɵelementContainer(0);
 } }
 function MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_ng_container_0_Template, 1, 0, "ng-container", 131);
+    i0.ɵɵtemplate(0, MjLabelDetailComponent_Conditional_43_ng_template_5_Conditional_10_For_1_ng_container_0_Template, 1, 0, "ng-container", 132);
 } if (rf & 2) {
     const child_r18 = ctx.$implicit;
     i0.ɵɵnextContext(3);
@@ -743,21 +735,38 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_1_Templ
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 148)(1, "button", 150);
+    i0.ɵɵelementStart(0, "div", 148)(1, "button", 151);
     i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.ExpandAllDiffGroups()); });
-    i0.ɵɵelement(2, "i", 151);
+    i0.ɵɵelement(2, "i", 152);
     i0.ɵɵelementStart(3, "span");
     i0.ɵɵtext(4, "Expand All");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(5, "button", 152);
+    i0.ɵɵelementStart(5, "button", 153);
     i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r0 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r0.CollapseAllDiffGroups()); });
-    i0.ɵɵelement(6, "i", 153);
+    i0.ɵɵelement(6, "i", 154);
     i0.ɵɵelementStart(7, "span");
     i0.ɵɵtext(8, "Collapse All");
     i0.ɵɵelementEnd()()();
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 168);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 155);
+    i0.ɵɵelementStart(1, "span", 156);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 157);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r21 = i0.ɵɵnextContext().$implicit;
+    const ctx_r0 = i0.ɵɵnextContext(5);
+    i0.ɵɵclassMap(ctx_r0.resolveEntityIconByName(group_r21.EntityName));
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(group_r21.EntityName);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", group_r21.Records.length, " modified ");
+} }
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 166);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -766,11 +775,11 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r22.OldValue, 0, 40));
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 169);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 167);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 170);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 168);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -779,13 +788,13 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, field_r22.NewValue, 0, 40));
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 166)(1, "span", 167);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 164)(1, "span", 165);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_3_Template, 3, 5, "span", 168);
-    i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_4_Template, 1, 0, "i", 169);
-    i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Conditional_5_Template, 3, 5, "span", 170);
+    i0.ɵɵconditionalCreate(3, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_3_Template, 3, 5, "span", 166);
+    i0.ɵɵconditionalCreate(4, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_4_Template, 1, 0, "i", 167);
+    i0.ɵɵconditionalCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Conditional_5_Template, 3, 5, "span", 168);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const field_r22 = ctx.$implicit;
@@ -800,23 +809,23 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
     i0.ɵɵadvance();
     i0.ɵɵconditional(field_r22.NewValue ? 5 : -1);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 165);
-    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_For_2_Template, 6, 5, "div", 166, i0.ɵɵrepeaterTrackByIdentity);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 163);
+    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_For_2_Template, 6, 5, "div", 164, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r23 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
     i0.ɵɵrepeater(record_r23.FieldChanges);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 161)(1, "div", 162);
-    i0.ɵɵelement(2, "i", 163);
-    i0.ɵɵelementStart(3, "span", 164);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 159)(1, "div", 160);
+    i0.ɵɵelement(2, "i", 161);
+    i0.ɵɵelementStart(3, "span", 162);
     i0.ɵɵtext(4);
     i0.ɵɵpipe(5, "slice");
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(6, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Conditional_6_Template, 3, 0, "div", 165);
+    i0.ɵɵconditionalCreate(6, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Conditional_6_Template, 3, 0, "div", 163);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r23 = ctx.$implicit;
@@ -829,9 +838,9 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
     i0.ɵɵadvance(2);
     i0.ɵɵconditional(record_r23.FieldChanges.length > 0 ? 6 : -1);
 } }
-function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 160);
-    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_For_2_Template, 7, 9, "div", 161, i0.ɵɵrepeaterTrackByIdentity);
+function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 158);
+    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_For_2_Template, 7, 9, "div", 159, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r21 = i0.ɵɵnextContext().$implicit;
@@ -840,34 +849,17 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 154)(1, "div", 155);
-    i0.ɵɵlistener("click", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template_div_click_1_listener() { const group_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.ToggleDiffGroup(group_r21)); });
-    i0.ɵɵelement(2, "i", 156)(3, "i", 157);
-    i0.ɵɵelementStart(4, "span", 158);
-    i0.ɵɵtext(5);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 159);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Conditional_8_Template, 3, 0, "div", 160);
+    i0.ɵɵelementStart(0, "mj-accordion-panel", 104);
+    i0.ɵɵlistener("ExpandedChange", function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template_mj_accordion_panel_ExpandedChange_0_listener() { const group_r21 = i0.ɵɵrestoreView(_r20).$implicit; const ctx_r0 = i0.ɵɵnextContext(5); return i0.ɵɵresetView(ctx_r0.ToggleDiffGroup(group_r21)); });
+    i0.ɵɵtemplate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_1_Template, 5, 4, "ng-template", 105)(2, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_ng_template_2_Template, 3, 0, "ng-template", 106);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const group_r21 = ctx.$implicit;
-    const ctx_r0 = i0.ɵɵnextContext(5);
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("expanded", group_r21.IsExpanded);
-    i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r0.resolveEntityIconByName(group_r21.EntityName));
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(group_r21.EntityName);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", group_r21.Records.length, " modified ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(group_r21.IsExpanded ? 8 : -1);
+    i0.ɵɵproperty("FlushBody", true)("Expanded", group_r21.IsExpanded);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template, 9, 7, "div", 154, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_For_2_Template, 3, 2, "mj-accordion-panel", 102, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -875,11 +867,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Condi
     i0.ɵɵrepeater(ctx_r0.DiffResult.EntityGroups);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 171);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No changes detected since this label was created.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 150);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 143)(1, "div", 144)(2, "span", 145);
@@ -902,7 +890,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Templ
     i0.ɵɵelementEnd()()();
     i0.ɵɵconditionalCreate(16, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_16_Template, 9, 0, "div", 148);
     i0.ɵɵconditionalCreate(17, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_17_Template, 3, 0, "div", 149);
-    i0.ɵɵconditionalCreate(18, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template, 4, 0, "div", 103);
+    i0.ɵɵconditionalCreate(18, MjLabelDetailComponent_Conditional_43_Conditional_7_Conditional_2_Conditional_18_Template, 1, 0, "mj-empty-state", 150);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
@@ -931,7 +919,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_7_Template(rf, ctx) {
     i0.ɵɵconditional(!ctx_r0.IsLoadingDiff && ctx_r0.DiffResult ? 2 : -1);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 172);
+    i0.ɵɵelement(0, "mj-loading", 169);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
@@ -943,17 +931,17 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
     i0.ɵɵtextInterpolate1(" \u00B7 ", restore_r24.FailedItems, " failed");
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175)(1, "div", 176);
-    i0.ɵɵelement(2, "i", 177);
+    i0.ɵɵelementStart(0, "div", 173)(1, "div", 174);
+    i0.ɵɵelement(2, "i", 175);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 178)(4, "span", 179);
+    i0.ɵɵelementStart(3, "div", 176)(4, "span", 177);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 180);
+    i0.ɵɵelementStart(6, "span", 178);
     i0.ɵɵtext(7);
     i0.ɵɵconditionalCreate(8, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Conditional_8_Template, 2, 1, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "span", 181);
+    i0.ɵɵelementStart(9, "span", 179);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -972,11 +960,11 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
-    i0.ɵɵelement(2, "i", 173);
+    i0.ɵɵelement(2, "i", 171);
     i0.ɵɵtext(3, " Restore Operations ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 174);
-    i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template, 11, 6, "div", 175, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 172);
+    i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_For_6_Template, 11, 6, "div", 173, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -984,16 +972,16 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
     i0.ɵɵrepeater(ctx_r0.Restores);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 175)(1, "div", 183);
-    i0.ɵɵelement(2, "i", 184);
+    i0.ɵɵelementStart(0, "div", 173)(1, "div", 181);
+    i0.ɵɵelement(2, "i", 182);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 178)(4, "span", 179);
+    i0.ɵɵelementStart(3, "div", 176)(4, "span", 177);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 180)(7, "span", 185);
+    i0.ɵɵelementStart(6, "span", 178)(7, "span", 183);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "span", 181);
+    i0.ɵɵelementStart(9, "span", 179);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1010,11 +998,11 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 52)(1, "h3", 53);
-    i0.ɵɵelement(2, "i", 182);
+    i0.ɵɵelement(2, "i", 180);
     i0.ɵɵtext(3, " Related Labels ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 174);
-    i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template, 11, 4, "div", 175, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(4, "div", 172);
+    i0.ɵɵrepeaterCreate(5, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_For_6_Template, 11, 4, "div", 173, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(4);
@@ -1022,16 +1010,12 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Condi
     i0.ɵɵrepeater(ctx_r0.RelatedLabels);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 103);
-    i0.ɵɵelement(1, "i", 186);
-    i0.ɵɵelementStart(2, "p");
-    i0.ɵɵtext(3, "No restore history or related labels found.");
-    i0.ɵɵelementEnd()();
+    i0.ɵɵelement(0, "mj-empty-state", 170);
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵconditionalCreate(0, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_0_Template, 7, 0, "div", 52);
     i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_1_Template, 7, 0, "div", 52);
-    i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template, 4, 0, "div", 103);
+    i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Conditional_2_Template, 1, 0, "mj-empty-state", 170);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext(3);
     i0.ɵɵconditional(ctx_r0.Restores.length > 0 ? 0 : -1);
@@ -1042,7 +1026,7 @@ function MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Templ
 } }
 function MjLabelDetailComponent_Conditional_43_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 51);
-    i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template, 1, 0, "mj-loading", 172);
+    i0.ɵɵconditionalCreate(1, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_1_Template, 1, 0, "mj-loading", 169);
     i0.ɵɵconditionalCreate(2, MjLabelDetailComponent_Conditional_43_Conditional_8_Conditional_2_Template, 3, 3);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -1079,7 +1063,7 @@ function MjLabelDetailComponent_Conditional_43_Template(rf, ctx) { if (rf & 1) {
 } }
 function MjLabelDetailComponent_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 30)(1, "mj-record-micro-view", 187);
+    i0.ɵɵelementStart(0, "div", 30)(1, "mj-record-micro-view", 184);
     i0.ɵɵlistener("Close", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_Close_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnBackFromMicroView()); })("EntityLinkClick", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_EntityLinkClick_1_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnEntityLinkClick($event)); })("OpenRecord", function MjLabelDetailComponent_Conditional_44_Template_mj_record_micro_view_OpenRecord_1_listener($event) { i0.ɵɵrestoreView(_r26); const ctx_r0 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r0.OnOpenRecordClick($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -1977,7 +1961,7 @@ export class MjLabelDetailComponent extends BaseAngularComponent {
     static ɵfac = function MjLabelDetailComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjLabelDetailComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.NgZone), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjLabelDetailComponent, selectors: [["mj-label-detail-panel"]], hostBindings: function MjLabelDetailComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function MjLabelDetailComponent_keydown_escape_HostBindingHandler() { return ctx.OnEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Label: "Label", AllLabels: "AllLabels", ItemCountMap: "ItemCountMap" }, outputs: { Close: "Close", LabelUpdated: "LabelUpdated", EntityLinkClick: "EntityLinkClick" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 22, consts: [["depNode", ""], [1, "panel-backdrop", 3, "click"], [1, "detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "resize-handle-grip"], [1, "panel-header"], [1, "header-info"], [1, "header-title-row"], [1, "header-scope-icon"], [1, "header-title"], [1, "header-status", 3, "ngClass"], [1, "header-scope-badge"], [1, "header-description"], [1, "header-actions"], ["title", "Archive this label", 1, "header-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-box-archive"], ["title", "View changes", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "summary-kpis"], [1, "summary-kpi"], [1, "kpi-mini-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-camera"], [1, "kpi-mini-content"], [1, "kpi-mini-value"], [1, "kpi-mini-label"], [1, "fa-solid", "fa-table"], [1, "tab-bar"], [1, "breadcrumb-bar"], [1, "tab-content"], [1, "kpi-mini-icon", 2, "background", "rgba(16, 185, 129, 0.1)", "color", "#10b981"], [1, "fa-solid", "fa-stopwatch"], [1, "kpi-mini-icon", 2, "background", "rgba(245, 158, 11, 0.1)", "color", "#f59e0b"], [1, "fa-solid", "fa-layer-group"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-info-circle", "tab-icon"], [1, "fa-solid", "fa-camera", "tab-icon"], [1, "tab-count"], [1, "fa-solid", "fa-diagram-project", "tab-icon"], [1, "fa-solid", "fa-code-compare", "tab-icon"], [1, "fa-solid", "fa-clock-rotate-left", "tab-icon"], [1, "breadcrumb-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "breadcrumb-trail"], [1, "breadcrumb-item", "clickable", 3, "click"], [1, "fa-solid", "fa-camera", "breadcrumb-icon"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-item", "current"], [1, "fa-solid", "fa-file-lines", "breadcrumb-icon"], ["text", "Loading label data..."], [1, "tab-pane"], [1, "detail-section"], [1, "section-title"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "detail-grid"], [1, "detail-field"], [1, "field-label"], [1, "field-value"], [1, "inline-badge", 3, "ngClass"], [2, "margin-right", "6px"], [1, "record-card"], [1, "fa-solid", "fa-clock", "section-icon"], [2, "margin-right", "6px", "color", "var(--mj-brand-primary)"], [1, "field-value", "field-mono"], [1, "record-card-main"], [1, "record-card-icon"], [1, "record-card-info"], [1, "record-card-name"], [1, "record-card-name", "record-card-name-loading"], [1, "record-card-entity"], [1, "record-card-id"], ["title", "Open record", 1, "record-card-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-align-left", "section-icon"], [1, "description-text"], [1, "fa-solid", "fa-user", 2, "margin-right", "6px", "opacity", "0.5"], [1, "fa-solid", "fa-sitemap", "section-icon"], [1, "hierarchy-item", "parent"], [1, "hierarchy-children"], [1, "fa-solid", "fa-arrow-up", "hierarchy-icon"], [1, "hierarchy-label"], [1, "hierarchy-name"], [1, "hierarchy-item", "child"], [1, "fa-solid", "fa-arrow-turn-down-right", "hierarchy-icon"], [1, "hierarchy-meta"], [1, "snapshot-toolbar"], [1, "snapshot-search"], [1, "fa-solid", "fa-search", "snapshot-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "snapshot-search-input", 3, "ngModelChange", "ngModel"], [1, "snapshot-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-a-z"], [1, "fa-solid", "fa-arrow-up-z-a"], ["title", "Sort by record count", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-9-1"], [1, "fa-solid", "fa-arrow-up-1-9"], [1, "snapshot-view-toggle"], [1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-list"], [1, "fa-solid", "fa-grip"], [1, "snapshot-groups"], [1, "snapshot-group"], [1, "tab-empty"], [1, "group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "group-chevron"], [1, "group-entity-icon"], [1, "group-name"], [1, "group-count-inline"], [1, "group-content"], [1, "group-names-loading"], [1, "snapshot-cards"], ["text", "Loading record names...", "size", "small"], [1, "snapshot-list-item"], [1, "snapshot-list-item", 3, "click"], [1, "fa-solid", "fa-file-lines", "snapshot-item-icon"], [1, "snapshot-item-name"], [1, "fa-solid", "fa-chevron-right", "snapshot-item-arrow"], [1, "snapshot-card"], [1, "snapshot-card", 3, "click"], [1, "snapshot-card-header"], [1, "fa-solid", "fa-file-lines"], [1, "snapshot-card-name"], [1, "fa-solid", "fa-camera", "tab-empty-icon"], ["text", "Loading dependencies..."], [1, "dep-root"], [1, "dep-root-entity"], [1, "dep-root-icon"], [1, "dep-root-name"], [1, "dep-root-badge"], [1, "dep-empty"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "fa-solid", "fa-diagram-project", "tab-empty-icon"], [1, "dep-node"], [1, "dep-node-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "dep-chevron", 3, "expanded"], [1, "dep-node-spacer"], [1, "dep-node-icon"], [1, "dep-node-name"], [1, "dep-node-field"], [1, "dep-node-count"], [1, "fa-solid", "fa-chevron-right", "dep-chevron"], ["text", "Computing differences..."], [1, "diff-summary"], [1, "diff-stat"], [1, "diff-stat-value", "change-modified"], [1, "diff-stat-label"], [1, "diff-stat-value"], [1, "diff-toolbar"], [1, "diff-groups"], ["title", "Expand all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-up"], [1, "diff-group"], [1, "diff-group-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "diff-chevron"], [1, "diff-group-icon"], [1, "diff-group-name"], [1, "diff-group-count", "change-modified"], [1, "diff-group-content"], [1, "diff-record"], [1, "diff-record-header"], [3, "ngClass"], [1, "diff-record-id"], [1, "diff-fields"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], [1, "fa-solid", "fa-circle-check", "tab-empty-icon", 2, "color", "#10b981"], ["text", "Loading history..."], [1, "fa-solid", "fa-clock-rotate-left", "section-icon"], [1, "history-list"], [1, "history-item"], [1, "history-item-icon", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "history-item-content"], [1, "history-item-title"], [1, "history-item-meta"], [1, "history-item-date"], [1, "fa-solid", "fa-tags", "section-icon"], [1, "history-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-tag"], [1, "inline-badge", "small", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left", "tab-empty-icon"], [3, "Close", "EntityLinkClick", "OpenRecord", "Data", "Inline"]], template: function MjLabelDetailComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Label: "Label", AllLabels: "AllLabels", ItemCountMap: "ItemCountMap" }, outputs: { Close: "Close", LabelUpdated: "LabelUpdated", EntityLinkClick: "EntityLinkClick" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 22, consts: [["depNode", ""], [1, "panel-backdrop", 3, "click"], [1, "detail-panel"], [1, "resize-handle", 3, "mousedown"], [1, "resize-handle-grip"], [1, "panel-header"], [1, "header-info"], [1, "header-title-row"], [1, "header-scope-icon"], [1, "header-title"], [1, "header-status", 3, "ngClass"], [1, "header-scope-badge"], [1, "header-description"], [1, "header-actions"], ["title", "Archive this label", 1, "header-action-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-box-archive"], ["title", "View changes", 1, "header-action-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "close-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "summary-kpis"], [1, "summary-kpi"], [1, "kpi-mini-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-camera"], [1, "kpi-mini-content"], [1, "kpi-mini-value"], [1, "kpi-mini-label"], [1, "fa-solid", "fa-table"], [1, "tab-bar"], [1, "breadcrumb-bar"], [1, "tab-content"], [1, "kpi-mini-icon", 2, "background", "rgba(16, 185, 129, 0.1)", "color", "#10b981"], [1, "fa-solid", "fa-stopwatch"], [1, "kpi-mini-icon", 2, "background", "rgba(245, 158, 11, 0.1)", "color", "#f59e0b"], [1, "fa-solid", "fa-layer-group"], [1, "tab", 3, "click"], [1, "fa-solid", "fa-info-circle", "tab-icon"], [1, "fa-solid", "fa-camera", "tab-icon"], [1, "tab-count"], [1, "fa-solid", "fa-diagram-project", "tab-icon"], [1, "fa-solid", "fa-code-compare", "tab-icon"], [1, "fa-solid", "fa-clock-rotate-left", "tab-icon"], [1, "breadcrumb-back", 3, "click"], [1, "fa-solid", "fa-arrow-left"], [1, "breadcrumb-trail"], [1, "breadcrumb-item", "clickable", 3, "click"], [1, "fa-solid", "fa-camera", "breadcrumb-icon"], [1, "fa-solid", "fa-chevron-right", "breadcrumb-separator"], [1, "breadcrumb-item", "current"], [1, "fa-solid", "fa-file-lines", "breadcrumb-icon"], ["text", "Loading label data..."], [1, "tab-pane"], [1, "detail-section"], [1, "section-title"], [1, "fa-solid", "fa-info-circle", "section-icon"], [1, "detail-grid"], [1, "detail-field"], [1, "field-label"], [1, "field-value"], [1, "inline-badge", 3, "ngClass"], [2, "margin-right", "6px"], [1, "record-card"], [1, "fa-solid", "fa-clock", "section-icon"], [2, "margin-right", "6px", "color", "var(--mj-brand-primary)"], [1, "field-value", "field-mono"], [1, "record-card-main"], [1, "record-card-icon"], [1, "record-card-info"], [1, "record-card-name"], [1, "record-card-name", "record-card-name-loading"], [1, "record-card-entity"], [1, "record-card-id"], ["title", "Open record", 1, "record-card-open-btn", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-align-left", "section-icon"], [1, "description-text"], [1, "fa-solid", "fa-user", 2, "margin-right", "6px", "opacity", "0.5"], [1, "fa-solid", "fa-sitemap", "section-icon"], [1, "hierarchy-item", "parent"], [1, "hierarchy-children"], [1, "fa-solid", "fa-arrow-up", "hierarchy-icon"], [1, "hierarchy-label"], [1, "hierarchy-name"], [1, "hierarchy-item", "child"], [1, "fa-solid", "fa-arrow-turn-down-right", "hierarchy-icon"], [1, "hierarchy-meta"], [1, "snapshot-toolbar"], [1, "snapshot-search"], [1, "fa-solid", "fa-search", "snapshot-search-icon"], ["type", "text", "placeholder", "Search by entity or record...", 1, "snapshot-search-input", 3, "ngModelChange", "ngModel"], [1, "snapshot-sort-toggle"], ["title", "Sort by name", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-a-z"], [1, "fa-solid", "fa-arrow-up-z-a"], ["title", "Sort by record count", 1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-arrow-down-9-1"], [1, "fa-solid", "fa-arrow-up-1-9"], [1, "snapshot-view-toggle"], [1, "toggle-btn-sm", 3, "click"], [1, "fa-solid", "fa-list"], [1, "fa-solid", "fa-grip"], [1, "snapshot-groups"], ["Size", "sm", 3, "FlushBody", "Expanded"], ["Size", "compact", "Icon", "fa-solid fa-camera", "Title", "No snapshot items found."], ["Size", "sm", 3, "ExpandedChange", "FlushBody", "Expanded"], ["mjAccordionTitle", ""], ["mjAccordionBody", ""], [1, "group-entity-icon"], [1, "group-name"], [1, "mj-accordion-badge", "mj-accordion-badge--right"], [1, "group-content"], [1, "group-names-loading"], [1, "snapshot-cards"], ["text", "Loading record names...", "size", "small"], [1, "snapshot-list-item"], [1, "snapshot-list-item", 3, "click"], [1, "fa-solid", "fa-file-lines", "snapshot-item-icon"], [1, "snapshot-item-name"], [1, "fa-solid", "fa-chevron-right", "snapshot-item-arrow"], [1, "snapshot-card"], [1, "snapshot-card", 3, "click"], [1, "snapshot-card-header"], [1, "fa-solid", "fa-file-lines"], [1, "snapshot-card-name"], ["text", "Loading dependencies..."], [1, "dep-root"], ["Size", "compact", "Icon", "fa-solid fa-diagram-project", "Title", "No entity associated with this label."], [1, "dep-root-entity"], [1, "dep-root-icon"], [1, "dep-root-name"], [1, "dep-root-badge"], ["Size", "compact", "Icon", "fa-solid fa-diagram-project", "Title", "No dependent entities found."], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "dep-node"], [1, "dep-node-header", 3, "click"], [1, "fa-solid", "fa-chevron-right", "dep-chevron", 3, "expanded"], [1, "dep-node-spacer"], [1, "dep-node-icon"], [1, "dep-node-name"], [1, "dep-node-field"], [1, "dep-node-count"], [1, "fa-solid", "fa-chevron-right", "dep-chevron"], ["text", "Computing differences..."], [1, "diff-summary"], [1, "diff-stat"], [1, "diff-stat-value", "change-modified"], [1, "diff-stat-label"], [1, "diff-stat-value"], [1, "diff-toolbar"], [1, "diff-groups"], ["Size", "compact", "Variant", "success", "Title", "No changes detected since this label was created."], ["title", "Expand all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["title", "Collapse all", 1, "toolbar-action-btn", 3, "click"], [1, "fa-solid", "fa-angles-up"], [1, "diff-group-icon"], [1, "diff-group-name"], [1, "mj-accordion-badge", "mj-accordion-badge--warning", "mj-accordion-badge--right"], [1, "diff-group-content"], [1, "diff-record"], [1, "diff-record-header"], [3, "ngClass"], [1, "diff-record-id"], [1, "diff-fields"], [1, "diff-field", 3, "ngClass"], [1, "diff-field-name"], [1, "diff-field-old"], [1, "fa-solid", "fa-arrow-right", "diff-field-arrow"], [1, "diff-field-new"], ["text", "Loading history..."], ["Size", "compact", "Icon", "fa-solid fa-clock-rotate-left", "Title", "No restore history or related labels found."], [1, "fa-solid", "fa-clock-rotate-left", "section-icon"], [1, "history-list"], [1, "history-item"], [1, "history-item-icon", 3, "ngClass"], [1, "fa-solid", "fa-clock-rotate-left"], [1, "history-item-content"], [1, "history-item-title"], [1, "history-item-meta"], [1, "history-item-date"], [1, "fa-solid", "fa-tags", "section-icon"], [1, "history-item-icon", 2, "background", "color-mix(in srgb, var(--mj-brand-primary) 10%, transparent)", "color", "var(--mj-brand-primary)"], [1, "fa-solid", "fa-tag"], [1, "inline-badge", "small", 3, "ngClass"], [3, "Close", "EntityLinkClick", "OpenRecord", "Data", "Inline"]], template: function MjLabelDetailComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1);
             i0.ɵɵlistener("click", function MjLabelDetailComponent_Template_div_click_0_listener() { return ctx.OnBackdropClick(); });
             i0.ɵɵelementEnd();
@@ -2071,11 +2055,11 @@ export class MjLabelDetailComponent extends BaseAngularComponent {
             i0.ɵɵconditional(!ctx.ShowMicroView ? 43 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.ShowMicroView && ctx.MicroViewRecord ? 44 : -1);
-        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.MjRecordMicroViewComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.panel-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    \n\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:active   .resize-handle-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.breadcrumb-back[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    overflow: hidden;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-border-strong);\n    flex-shrink: 0;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 20px 24px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.header-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.header-scope-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.header-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-scope-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.header-action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 14px;\n}\n\n.header-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.header-action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.status-active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n\n\n\n\n\n\n\n.summary-kpis[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.summary-kpi[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.kpi-mini-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-mini-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n\n\n\n\n\n\n\n.tab-bar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0;\n    padding: 0 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.tab-icon[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.tab-pane[_ngcontent-%COMP%] {\n    padding: 20px 24px;\n    animation: _ngcontent-%COMP%_tabFadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_tabFadeIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.tab-empty-icon[_ngcontent-%COMP%] {\n    font-size: 40px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.tab-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n\n\n\n\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 14px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n}\n\n.detail-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.field-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.field-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n}\n\n.field-mono[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 13px;\n    word-break: break-all;\n}\n\n.field-record-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n\n\n.record-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 16px 18px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.record-card-main[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n    flex: 1;\n}\n\n.record-card-icon[_ngcontent-%COMP%] {\n    font-size: 22px;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.record-card-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.record-card-name[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-name-loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n    font-style: italic;\n}\n\n.record-card-entity[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.record-card-id[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.inline-badge.small[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    font-size: 11px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n\n\n.hierarchy-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: background 0.15s ease;\n}\n\n.hierarchy-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n    width: 16px;\n    text-align: center;\n}\n\n.hierarchy-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n}\n\n.hierarchy-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.hierarchy-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.hierarchy-children[_ngcontent-%COMP%] {\n    margin-left: 16px;\n    border-left: 2px solid var(--mj-border-default);\n    padding-left: 8px;\n}\n\n\n\n\n\n\n\n\n.snapshot-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n}\n\n.snapshot-search[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n}\n\n.snapshot-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n    transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle[_ngcontent-%COMP%], \n.snapshot-view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n    font-size: 12px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]    + .toggle-btn-sm[_ngcontent-%COMP%] {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n.snapshot-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.snapshot-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.group-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.group-chevron[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 14px;\n    text-align: center;\n}\n\n.group-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.group-entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.group-count-inline[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    margin-left: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 12px;\n    font-weight: 600;\n    vertical-align: middle;\n}\n\n.group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.group-names-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 8px 14px;\n}\n\n\n\n.snapshot-list-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px 10px 40px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-item-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-item-id[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.snapshot-item-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-border-strong);\n    font-size: 11px;\n    transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover   .snapshot-item-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n\n\n\n.snapshot-cards[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 10px;\n    padding: 12px 14px;\n}\n\n.snapshot-card[_ngcontent-%COMP%] {\n    padding: 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.snapshot-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.snapshot-card-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-card-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n\n\n\n\n\n\n\n.dep-root[_ngcontent-%COMP%] {\n    padding: 4px 0;\n}\n\n.dep-root-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\n.dep-root-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n.dep-root-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.dep-root-badge[_ngcontent-%COMP%] {\n    padding: 2px 10px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.dep-node[_ngcontent-%COMP%] {\n    margin-left: 8px;\n    border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-radius: 6px;\n}\n\n.dep-node-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 12px;\n    text-align: center;\n}\n\n.dep-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.dep-node-spacer[_ngcontent-%COMP%] {\n    width: 12px;\n}\n\n.dep-node-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n.dep-node-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dep-node-field[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.dep-node-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    padding: 1px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n}\n\n.dep-empty[_ngcontent-%COMP%] {\n    padding: 20px;\n    text-align: center;\n}\n\n.dep-empty[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n\n\n\n\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    min-width: 80px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.diff-group[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.diff-group-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-group-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.diff-chevron[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 14px;\n    text-align: center;\n}\n\n.diff-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.diff-group-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.diff-group-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.diff-group-count[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    padding: 2px 10px;\n    border-radius: 10px;\n}\n\n.diff-group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.diff-record[_ngcontent-%COMP%] {\n    padding: 10px 14px 10px 40px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.diff-record-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.diff-record-id[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-family: monospace;\n}\n\n.diff-fields[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-left: 22px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 100px;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.7;\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-family: monospace;\n    font-size: 12px;\n}\n\n\n\n.change-added[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.change-modified[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.change-removed[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.diff-field.change-added[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n\n\n\n\n\n\n\n.history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.history-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    transition: background 0.15s ease;\n}\n\n.history-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.history-item-icon.status-complete[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.history-item-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.history-item-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.history-item-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n    .detail-panel[_ngcontent-%COMP%] {\n        min-width: 360px;\n    }\n\n    .summary-kpis[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 768px) {\n    .detail-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .summary-kpis[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 8px;\n        padding: 12px 16px;\n    }\n\n    .summary-kpi[_ngcontent-%COMP%] {\n        padding: 8px 10px;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n        padding: 16px 16px 12px;\n    }\n\n    .tab-bar[_ngcontent-%COMP%] {\n        padding: 0 16px;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .breadcrumb-bar[_ngcontent-%COMP%] {\n        padding: 8px 16px;\n    }\n\n    .snapshot-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .diff-summary[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .diff-stat[_ngcontent-%COMP%] {\n        padding: 10px 14px;\n        min-width: 60px;\n    }\n}\n\n@media (max-width: 480px) {\n    .header-title[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .header-title-row[_ngcontent-%COMP%] {\n        gap: 6px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        margin-left: 8px;\n    }\n\n    .tab[_ngcontent-%COMP%] {\n        padding: 10px 10px;\n        font-size: 12px;\n    }\n\n    .snapshot-cards[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent, i4.MJEmptyStateComponent, i4.MJAccordionPanelComponent, i4.MJAccordionTitleDirective, i4.MJAccordionBodyDirective, i5.MjRecordMicroViewComponent, i1.SlicePipe], styles: ["\n\n\n\n\n\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.panel-backdrop.visible[_ngcontent-%COMP%] {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n\n\n\n\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    \n\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.detail-panel.visible[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n\n\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover   .resize-handle-grip[_ngcontent-%COMP%], \n.resize-handle[_ngcontent-%COMP%]:active   .resize-handle-grip[_ngcontent-%COMP%] {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip[_ngcontent-%COMP%] {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n\n\n\n\n\n\n\n.breadcrumb-bar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.breadcrumb-back[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    overflow: hidden;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n    font-size: 9px;\n    color: var(--mj-border-strong);\n    flex-shrink: 0;\n}\n\n.breadcrumb-icon[_ngcontent-%COMP%] {\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 20px 24px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.header-title-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.header-scope-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.header-title[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.header-status[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-scope-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-description[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.header-action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 14px;\n}\n\n.header-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.header-action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n\n\n.status-active[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n\n\n\n\n\n\n\n.summary-kpis[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.summary-kpi[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.kpi-mini-value[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-mini-label[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n\n\n\n\n\n\n\n.tab-bar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 0;\n    padding: 0 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.tab[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.tab-icon[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n\n\n\n\n\n\n.tab-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.tab-pane[_ngcontent-%COMP%] {\n    padding: 20px 24px;\n    animation: _ngcontent-%COMP%_tabFadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_tabFadeIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n\n\n\n\n\n\n\n.detail-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 14px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.detail-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n}\n\n.detail-field[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.field-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.field-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n}\n\n.field-mono[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 13px;\n    word-break: break-all;\n}\n\n.field-record-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n\n\n.record-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 16px 18px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.record-card-main[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n    flex: 1;\n}\n\n.record-card-icon[_ngcontent-%COMP%] {\n    font-size: 22px;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.record-card-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.record-card-name[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-name-loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n    font-style: italic;\n}\n\n.record-card-entity[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.record-card-id[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n}\n\n.record-card-open-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.inline-badge.small[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    font-size: 11px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n\n\n.hierarchy-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: background 0.15s ease;\n}\n\n.hierarchy-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n    width: 16px;\n    text-align: center;\n}\n\n.hierarchy-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n}\n\n.hierarchy-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.hierarchy-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.hierarchy-children[_ngcontent-%COMP%] {\n    margin-left: 16px;\n    border-left: 2px solid var(--mj-border-default);\n    padding-left: 8px;\n}\n\n\n\n\n\n\n\n\n.snapshot-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n}\n\n.snapshot-search[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n}\n\n.snapshot-search-icon[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n    transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input[_ngcontent-%COMP%]:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle[_ngcontent-%COMP%], \n.snapshot-view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n    font-size: 12px;\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm[_ngcontent-%COMP%]    + .toggle-btn-sm[_ngcontent-%COMP%] {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n\n\n.snapshot-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n\n\n\n\n\n.group-entity-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.group-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n\n\n\n.group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.group-names-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 8px 14px;\n}\n\n\n\n.snapshot-list-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px 10px 40px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-item-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-item-id[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.snapshot-item-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-border-strong);\n    font-size: 11px;\n    transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item[_ngcontent-%COMP%]:hover   .snapshot-item-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n\n\n\n.snapshot-cards[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 10px;\n    padding: 12px 14px;\n}\n\n.snapshot-card[_ngcontent-%COMP%] {\n    padding: 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.snapshot-card[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.snapshot-card-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.snapshot-card-name[_ngcontent-%COMP%] {\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-card-meta[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n\n\n\n\n\n\n\n.dep-root[_ngcontent-%COMP%] {\n    padding: 4px 0;\n}\n\n.dep-root-entity[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\n.dep-root-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n.dep-root-name[_ngcontent-%COMP%] {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.dep-root-badge[_ngcontent-%COMP%] {\n    padding: 2px 10px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.dep-node[_ngcontent-%COMP%] {\n    margin-left: 8px;\n    border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-radius: 6px;\n}\n\n.dep-node-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron[_ngcontent-%COMP%] {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 12px;\n    text-align: center;\n}\n\n.dep-chevron.expanded[_ngcontent-%COMP%] {\n    transform: rotate(90deg);\n}\n\n.dep-node-spacer[_ngcontent-%COMP%] {\n    width: 12px;\n}\n\n.dep-node-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n.dep-node-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dep-node-field[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.dep-node-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    padding: 1px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n}\n\n\n\n\n\n\n\n\n.diff-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.diff-stat[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    min-width: 80px;\n}\n\n.diff-stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.diff-stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n\n\n.diff-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.toolbar-action-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n\n\n.diff-group-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.diff-group-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n\n\n\n\n.diff-group-content[_ngcontent-%COMP%] {\n    border-top: 1px solid var(--mj-border-default);\n    animation: _ngcontent-%COMP%_tabFadeIn 0.15s ease;\n}\n\n.diff-record[_ngcontent-%COMP%] {\n    padding: 10px 14px 10px 40px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.diff-record-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.diff-record-id[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-family: monospace;\n}\n\n.diff-fields[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-left: 22px;\n}\n\n.diff-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n}\n\n.diff-field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 100px;\n}\n\n.diff-field-old[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.7;\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.diff-field-arrow[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n.diff-field-new[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-family: monospace;\n    font-size: 12px;\n}\n\n\n\n.change-added[_ngcontent-%COMP%] { color: var(--mj-status-success); }\n.change-modified[_ngcontent-%COMP%] { color: var(--mj-status-warning); }\n.change-removed[_ngcontent-%COMP%] { color: var(--mj-status-error); }\n\n.diff-field.change-added[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n\n\n\n\n\n\n\n.history-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.history-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    transition: background 0.15s ease;\n}\n\n.history-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.history-item-icon.status-complete[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending[_ngcontent-%COMP%] { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content[_ngcontent-%COMP%] {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.history-item-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.history-item-meta[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.history-item-date[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n}\n\n\n\n\n\n\n\n\n@media (max-width: 1024px) {\n    .detail-panel[_ngcontent-%COMP%] {\n        min-width: 360px;\n    }\n\n    .summary-kpis[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 768px) {\n    .detail-panel[_ngcontent-%COMP%] {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .resize-handle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .detail-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .summary-kpis[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 8px;\n        padding: 12px 16px;\n    }\n\n    .summary-kpi[_ngcontent-%COMP%] {\n        padding: 8px 10px;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n        padding: 16px 16px 12px;\n    }\n\n    .tab-bar[_ngcontent-%COMP%] {\n        padding: 0 16px;\n    }\n\n    .tab-pane[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .breadcrumb-bar[_ngcontent-%COMP%] {\n        padding: 8px 16px;\n    }\n\n    .snapshot-toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .diff-summary[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .diff-stat[_ngcontent-%COMP%] {\n        padding: 10px 14px;\n        min-width: 60px;\n    }\n}\n\n@media (max-width: 480px) {\n    .header-title[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .header-title-row[_ngcontent-%COMP%] {\n        gap: 6px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        margin-left: 8px;\n    }\n\n    .tab[_ngcontent-%COMP%] {\n        padding: 10px 10px;\n        font-size: 12px;\n    }\n\n    .snapshot-cards[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjLabelDetailComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-label-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"panel-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n\n<!-- Slide-in panel -->\n<div class=\"detail-panel\" [class.visible]=\"IsVisible\" [style.width.px]=\"PanelWidthPx\">\n  <!-- Resize handle -->\n  <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n    <div class=\"resize-handle-grip\"></div>\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- HEADER -->\n  <!-- ============================================================ -->\n  <div class=\"panel-header\">\n    <div class=\"header-info\">\n      <div class=\"header-title-row\">\n        <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"header-scope-icon\"></i>\n        <h2 class=\"header-title\">{{Label.Name}}</h2>\n        <span class=\"header-status\" [ngClass]=\"GetStatusClass(Label.Status)\">\n          {{Label.Status}}\n        </span>\n        <span class=\"header-scope-badge\">{{Label.Scope}}</span>\n      </div>\n      @if (Label.Description) {\n        <p class=\"header-description\">{{Label.Description}}</p>\n      }\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"header-action-btn\" (click)=\"OnArchive()\"\n        [disabled]=\"IsArchiving || Label.Status === 'Archived'\"\n        title=\"Archive this label\">\n        <i class=\"fa-solid fa-box-archive\"></i>\n      </button>\n      <button class=\"header-action-btn\" (click)=\"OnTabChange('changes')\" title=\"View changes\">\n        <i class=\"fa-solid fa-code-compare\"></i>\n      </button>\n      <button class=\"close-btn\" (click)=\"OnClose()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- SUMMARY KPIs -->\n  <!-- ============================================================ -->\n  <div class=\"summary-kpis\">\n    <div class=\"summary-kpi\">\n      <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n        <i class=\"fa-solid fa-camera\"></i>\n      </div>\n      <div class=\"kpi-mini-content\">\n        <span class=\"kpi-mini-value\">{{LabelItems.length || Label.ItemCount || GetItemCount(Label.ID)}}</span>\n        <span class=\"kpi-mini-label\">Items</span>\n      </div>\n    </div>\n    <div class=\"summary-kpi\">\n      <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n        <i class=\"fa-solid fa-table\"></i>\n      </div>\n      <div class=\"kpi-mini-content\">\n        <span class=\"kpi-mini-value\">{{UniqueEntityCount}}</span>\n        <span class=\"kpi-mini-label\">Entities</span>\n      </div>\n    </div>\n    @if (Label.CreationDurationMS) {\n      <div class=\"summary-kpi\">\n        <div class=\"kpi-mini-icon\" style=\"background: rgba(16, 185, 129, 0.1); color: #10b981;\">\n          <i class=\"fa-solid fa-stopwatch\"></i>\n        </div>\n        <div class=\"kpi-mini-content\">\n          <span class=\"kpi-mini-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n          <span class=\"kpi-mini-label\">Duration</span>\n        </div>\n      </div>\n    }\n    @if (ChildLabels.length > 0) {\n      <div class=\"summary-kpi\">\n        <div class=\"kpi-mini-icon\" style=\"background: rgba(245, 158, 11, 0.1); color: #f59e0b;\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n        </div>\n        <div class=\"kpi-mini-content\">\n          <span class=\"kpi-mini-value\">{{ChildLabels.length}}</span>\n          <span class=\"kpi-mini-label\">Children</span>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- TAB BAR (hidden when micro-view is active) -->\n  <!-- ============================================================ -->\n  @if (!ShowMicroView) {\n    <div class=\"tab-bar\">\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'overview'\" (click)=\"OnTabChange('overview')\">\n        <i class=\"fa-solid fa-info-circle tab-icon\"></i> Overview\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'snapshots'\" (click)=\"OnTabChange('snapshots')\">\n        <i class=\"fa-solid fa-camera tab-icon\"></i> Snapshots\n        @if (LabelItems.length > 0) {\n          <span class=\"tab-count\">{{LabelItems.length}}</span>\n        }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'dependencies'\" (click)=\"OnTabChange('dependencies')\">\n        <i class=\"fa-solid fa-diagram-project tab-icon\"></i> Dependencies\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'changes'\" (click)=\"OnTabChange('changes')\">\n        <i class=\"fa-solid fa-code-compare tab-icon\"></i> Changes\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'history'\" (click)=\"OnTabChange('history')\">\n        <i class=\"fa-solid fa-clock-rotate-left tab-icon\"></i> History\n      </button>\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- BREADCRUMB (shown when micro-view is active) -->\n  <!-- ============================================================ -->\n  @if (ShowMicroView) {\n    <div class=\"breadcrumb-bar\">\n      <button class=\"breadcrumb-back\" (click)=\"OnBackFromMicroView()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n      </button>\n      <div class=\"breadcrumb-trail\">\n        <span class=\"breadcrumb-item clickable\" (click)=\"OnBackFromMicroView()\">\n          <i class=\"fa-solid fa-camera breadcrumb-icon\"></i> Snapshots\n        </span>\n        <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n        <span class=\"breadcrumb-item current\">\n          <i class=\"fa-solid fa-file-lines breadcrumb-icon\"></i> {{BreadcrumbLabel}}\n        </span>\n      </div>\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- TAB CONTENT (scrollable) - or inline micro-view -->\n  <!-- ============================================================ -->\n  @if (!ShowMicroView) {\n    <div class=\"tab-content\">\n      <!-- Loading state for items -->\n      @if (IsLoadingItems && ActiveTab !== 'dependencies') {\n        <mj-loading text=\"Loading label data...\"></mj-loading>\n      }\n      <!-- ======================================================== -->\n      <!-- OVERVIEW TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'overview' && !IsLoadingItems) {\n        <div class=\"tab-pane\">\n          <!-- Metadata section -->\n          <div class=\"detail-section\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-info-circle section-icon\"></i> Label Details\n            </h3>\n            <div class=\"detail-grid\">\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Name</span>\n                <span class=\"field-value\">{{Label.Name}}</span>\n              </div>\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Status</span>\n                <span class=\"field-value\">\n                  <span class=\"inline-badge\" [ngClass]=\"GetStatusClass(Label.Status)\">{{Label.Status}}</span>\n                </span>\n              </div>\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Scope</span>\n                <span class=\"field-value\">\n                  <i [class]=\"GetScopeIcon(Label.Scope)\" style=\"margin-right: 6px;\"></i>{{Label.Scope}}\n                </span>\n              </div>\n              @if (Label.EntityID) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Entity</span>\n                  <span class=\"field-value\">\n                    <i [class]=\"OverviewEntityIcon\" style=\"margin-right: 6px; color: var(--mj-brand-primary);\"></i>{{Label.Entity ?? resolveEntityName(Label.EntityID)}}\n                  </span>\n                </div>\n              }\n              @if (Label.RecordID && Label.Scope !== 'Record') {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Record ID</span>\n                  <span class=\"field-value field-mono\">{{FormatRecordID(Label.RecordID)}}</span>\n                </div>\n              }\n              @if (Label.ExternalSystemID) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">External Ref</span>\n                  <span class=\"field-value field-mono\">{{Label.ExternalSystemID}}</span>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Record card (Record-scoped labels) -->\n          @if (Label.Scope === 'Record' && Label.RecordID) {\n            <div class=\"record-card\">\n              <div class=\"record-card-main\">\n                <i [class]=\"OverviewEntityIcon\" class=\"record-card-icon\"></i>\n                <div class=\"record-card-info\">\n                  @if (OverviewRecordName) {\n                    <span class=\"record-card-name\">{{OverviewRecordName}}</span>\n                  }\n                  @if (!OverviewRecordName) {\n                    <span class=\"record-card-name record-card-name-loading\">Loading...</span>\n                  }\n                  <span class=\"record-card-entity\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n                  <span class=\"record-card-id\">{{FormatRecordID(Label.RecordID)}}</span>\n                </div>\n              </div>\n              <button class=\"record-card-open-btn\" (click)=\"OnOpenOverviewRecord()\" title=\"Open record\">\n                <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n              </button>\n            </div>\n          }\n          <!-- Description -->\n          @if (Label.Description) {\n            <div class=\"detail-section\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-align-left section-icon\"></i> Description\n              </h3>\n              <p class=\"description-text\">{{Label.Description}}</p>\n            </div>\n          }\n          <!-- Creation info -->\n          <div class=\"detail-section\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-clock section-icon\"></i> Creation\n            </h3>\n            <div class=\"detail-grid\">\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Created</span>\n                <span class=\"field-value\">{{FormatDate(Label.__mj_CreatedAt)}}</span>\n              </div>\n              @if (Label.CreatedByUser) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Created By</span>\n                  <span class=\"field-value\">\n                    <i class=\"fa-solid fa-user\" style=\"margin-right: 6px; opacity: 0.5;\"></i>{{Label.CreatedByUser}}\n                  </span>\n                </div>\n              }\n              @if (Label.CreationDurationMS) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Capture Duration</span>\n                  <span class=\"field-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n                </div>\n              }\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Items Captured</span>\n                <span class=\"field-value\">{{LabelItems.length}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Parent / Children -->\n          @if (Label.ParentID || ChildLabels.length > 0) {\n            <div class=\"detail-section\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-sitemap section-icon\"></i> Hierarchy\n              </h3>\n              <!-- Parent reference -->\n              @if (Label.ParentID) {\n                <div class=\"hierarchy-item parent\">\n                  <i class=\"fa-solid fa-arrow-up hierarchy-icon\"></i>\n                  <span class=\"hierarchy-label\">Parent:</span>\n                  <span class=\"hierarchy-name\">\n                    @for (pl of AllLabels; track pl) {\n                      @if (IsParentLabel(pl)) {\n                        <span>{{pl.Name}}</span>\n                      }\n                    }\n                  </span>\n                </div>\n              }\n              <!-- Children -->\n              @if (ChildLabels.length > 0) {\n                <div class=\"hierarchy-children\">\n                  @for (child of ChildLabels; track child) {\n                    <div class=\"hierarchy-item child\">\n                      <i class=\"fa-solid fa-arrow-turn-down-right hierarchy-icon\"></i>\n                      <span class=\"hierarchy-name\">{{child.Name}}</span>\n                      @if (child.RecordID) {\n                        <span class=\"hierarchy-meta\">{{child.RecordID | slice:0:12}}...</span>\n                      }\n                      @if (child.ItemCount) {\n                        <span class=\"hierarchy-meta\">{{child.ItemCount}} items</span>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- SNAPSHOTS TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'snapshots' && !IsLoadingItems) {\n        <div class=\"tab-pane\">\n          <!-- Snapshot toolbar -->\n          <div class=\"snapshot-toolbar\">\n            <div class=\"snapshot-search\">\n              <i class=\"fa-solid fa-search snapshot-search-icon\"></i>\n              <input type=\"text\" class=\"snapshot-search-input\"\n                placeholder=\"Search by entity or record...\"\n                [ngModel]=\"SnapshotSearch\"\n                (ngModelChange)=\"OnSnapshotSearchChange($event)\" />\n            </div>\n            <div class=\"snapshot-sort-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'name'\"\n                (click)=\"OnSnapshotSortChange('name')\" title=\"Sort by name\">\n                @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'asc') {\n                  <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n                }\n                @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'desc') {\n                  <i class=\"fa-solid fa-arrow-up-z-a\"></i>\n                }\n                @if (SnapshotSortBy !== 'name') {\n                  <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n                }\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'count'\"\n                (click)=\"OnSnapshotSortChange('count')\" title=\"Sort by record count\">\n                @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'desc') {\n                  <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n                }\n                @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'asc') {\n                  <i class=\"fa-solid fa-arrow-up-1-9\"></i>\n                }\n                @if (SnapshotSortBy !== 'count') {\n                  <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n                }\n              </button>\n            </div>\n            <div class=\"snapshot-view-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'list'\" (click)=\"SnapshotViewMode = 'list'\">\n                <i class=\"fa-solid fa-list\"></i>\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'card'\" (click)=\"SnapshotViewMode = 'card'\">\n                <i class=\"fa-solid fa-grip\"></i>\n              </button>\n            </div>\n          </div>\n          <!-- Entity groups -->\n          <div class=\"snapshot-groups\">\n            @for (group of FilteredSnapshotGroups; track group) {\n              <div class=\"snapshot-group\">\n                <div class=\"group-header\" (click)=\"ToggleSnapshotGroup(group)\">\n                  <i class=\"fa-solid fa-chevron-right group-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n                  <i [class]=\"group.EntityIcon\" class=\"group-entity-icon\"></i>\n                  <span class=\"group-name\">{{group.EntityName}} <span class=\"group-count-inline\">{{group.Items.length}}</span></span>\n                </div>\n                @if (group.IsExpanded) {\n                  <div class=\"group-content\">\n                    <!-- Loading names indicator -->\n                    @if (group.IsLoadingNames) {\n                      <div class=\"group-names-loading\">\n                        <mj-loading text=\"Loading record names...\" size=\"small\"></mj-loading>\n                      </div>\n                    }\n                    <!-- List mode -->\n                    @if (SnapshotViewMode === 'list') {\n                      @for (item of group.Items; track item) {\n                        <div class=\"snapshot-list-item\"\n                          (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n                          <i class=\"fa-solid fa-file-lines snapshot-item-icon\"></i>\n                          <span class=\"snapshot-item-name\">{{item.DisplayName}}</span>\n                          <i class=\"fa-solid fa-chevron-right snapshot-item-arrow\"></i>\n                        </div>\n                      }\n                    }\n                    <!-- Card mode -->\n                    @if (SnapshotViewMode === 'card') {\n                      <div class=\"snapshot-cards\">\n                        @for (item of group.Items; track item) {\n                          <div class=\"snapshot-card\"\n                            (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n                            <div class=\"snapshot-card-header\">\n                              <i class=\"fa-solid fa-file-lines\"></i>\n                              <span class=\"snapshot-card-name\">{{item.DisplayName}}</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n          <!-- Empty state -->\n          @if (FilteredSnapshotGroups.length === 0) {\n            <div class=\"tab-empty\">\n              <i class=\"fa-solid fa-camera tab-empty-icon\"></i>\n              <p>No snapshot items found.</p>\n            </div>\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- DEPENDENCIES TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'dependencies') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingDependencies) {\n            <mj-loading text=\"Loading dependencies...\"></mj-loading>\n          }\n          @if (!IsLoadingDependencies && Label.EntityID) {\n            <div class=\"dep-root\">\n              <div class=\"dep-root-entity\">\n                <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"dep-root-icon\"></i>\n                <span class=\"dep-root-name\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n                <span class=\"dep-root-badge\">Root</span>\n              </div>\n              @if (DependencyTree.length > 0) {\n                @for (node of DependencyTree; track node) {\n                  <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: node }\"></ng-container>\n                }\n              }\n              @if (DependencyTree.length === 0) {\n                <div class=\"dep-empty\">\n                  <p>No dependent entities found.</p>\n                </div>\n              }\n            </div>\n          }\n          @if (!IsLoadingDependencies && !Label.EntityID) {\n            <div class=\"tab-empty\">\n              <i class=\"fa-solid fa-diagram-project tab-empty-icon\"></i>\n              <p>No entity associated with this label.</p>\n            </div>\n          }\n        </div>\n      }\n      <!-- Dependency tree node template -->\n      <ng-template #depNode let-node>\n        <div class=\"dep-node\" [style.padding-left.px]=\"node.Depth * 24\">\n          <div class=\"dep-node-header\" (click)=\"ToggleDependencyNode(node)\">\n            @if (node.Children.length > 0) {\n              <i class=\"fa-solid fa-chevron-right dep-chevron\"\n                [class.expanded]=\"node.IsExpanded\"\n              ></i>\n            }\n            @if (node.Children.length === 0) {\n              <span class=\"dep-node-spacer\"></span>\n            }\n            <i [class]=\"resolveEntityIconByName(node.EntityName)\" class=\"dep-node-icon\"></i>\n            <span class=\"dep-node-name\">{{node.EntityName}}</span>\n            <span class=\"dep-node-field\">via {{node.RelationshipField}}</span>\n            @if (node.Children.length > 0) {\n              <span class=\"dep-node-count\">\n                {{node.Children.length}} dep{{node.Children.length !== 1 ? 's' : ''}}\n              </span>\n            }\n          </div>\n          @if (node.IsExpanded && node.Children.length > 0) {\n            @for (child of node.Children; track child) {\n              <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: child }\"></ng-container>\n            }\n          }\n        </div>\n      </ng-template>\n      <!-- ======================================================== -->\n      <!-- CHANGES TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'changes') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingDiff) {\n            <mj-loading text=\"Computing differences...\"></mj-loading>\n          }\n          @if (!IsLoadingDiff && DiffResult) {\n            <!-- Diff summary -->\n            <div class=\"diff-summary\">\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value change-modified\">{{DiffResult.Summary.Changed}}</span>\n                <span class=\"diff-stat-label\">Changed</span>\n              </div>\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value\">{{DiffResult.Summary.Unchanged}}</span>\n                <span class=\"diff-stat-label\">Unchanged</span>\n              </div>\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value\">{{DiffResult.Summary.EntitiesAffected}}</span>\n                <span class=\"diff-stat-label\">Entities</span>\n              </div>\n            </div>\n            <!-- Expand/collapse all -->\n            @if (DiffResult.EntityGroups.length > 0) {\n              <div class=\"diff-toolbar\">\n                <button class=\"toolbar-action-btn\" (click)=\"ExpandAllDiffGroups()\" title=\"Expand all\">\n                  <i class=\"fa-solid fa-angles-down\"></i>\n                  <span>Expand All</span>\n                </button>\n                <button class=\"toolbar-action-btn\" (click)=\"CollapseAllDiffGroups()\" title=\"Collapse all\">\n                  <i class=\"fa-solid fa-angles-up\"></i>\n                  <span>Collapse All</span>\n                </button>\n              </div>\n            }\n            <!-- Entity diff groups -->\n            @if (DiffResult.EntityGroups.length > 0) {\n              <div class=\"diff-groups\">\n                @for (group of DiffResult.EntityGroups; track group) {\n                  <div class=\"diff-group\">\n                    <div class=\"diff-group-header\" (click)=\"ToggleDiffGroup(group)\">\n                      <i class=\"fa-solid fa-chevron-right diff-chevron\" [class.expanded]=\"group.IsExpanded\"></i>\n                      <i [class]=\"resolveEntityIconByName(group.EntityName)\" class=\"diff-group-icon\"></i>\n                      <span class=\"diff-group-name\">{{group.EntityName}}</span>\n                      <span class=\"diff-group-count change-modified\">\n                        {{group.Records.length}} modified\n                      </span>\n                    </div>\n                    @if (group.IsExpanded) {\n                      <div class=\"diff-group-content\">\n                        @for (record of group.Records; track record) {\n                          <div class=\"diff-record\">\n                            <div class=\"diff-record-header\">\n                              <i [class]=\"GetChangeTypeIcon(record.ChangeType)\" [ngClass]=\"GetChangeTypeClass(record.ChangeType)\"></i>\n                              <span class=\"diff-record-id\">{{record.RecordID | slice:0:20}}...</span>\n                            </div>\n                            @if (record.FieldChanges.length > 0) {\n                              <div class=\"diff-fields\">\n                                @for (field of record.FieldChanges; track field) {\n                                  <div class=\"diff-field\"\n                                    [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n                                    <span class=\"diff-field-name\">{{field.FieldName}}</span>\n                                    @if (field.OldValue) {\n                                      <span class=\"diff-field-old\">{{field.OldValue | slice:0:40}}</span>\n                                    }\n                                    @if (field.OldValue && field.NewValue) {\n                                      <i class=\"fa-solid fa-arrow-right diff-field-arrow\"></i>\n                                    }\n                                    @if (field.NewValue) {\n                                      <span class=\"diff-field-new\">{{field.NewValue | slice:0:40}}</span>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n            <!-- No changes -->\n            @if (DiffResult.EntityGroups.length === 0 && DiffResult.Summary.Changed === 0) {\n              <div class=\"tab-empty\">\n                <i class=\"fa-solid fa-circle-check tab-empty-icon\" style=\"color: #10b981;\"></i>\n                <p>No changes detected since this label was created.</p>\n              </div>\n            }\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- HISTORY TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'history') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingHistory) {\n            <mj-loading text=\"Loading history...\"></mj-loading>\n          }\n          @if (!IsLoadingHistory) {\n            <!-- Restores -->\n            @if (Restores.length > 0) {\n              <div class=\"detail-section\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left section-icon\"></i> Restore Operations\n                </h3>\n                <div class=\"history-list\">\n                  @for (restore of Restores; track restore) {\n                    <div class=\"history-item\">\n                      <div class=\"history-item-icon\" [ngClass]=\"'status-' + (restore.Status ?? '').toLowerCase().replace(' ', '-')\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                      </div>\n                      <div class=\"history-item-content\">\n                        <span class=\"history-item-title\">Restore {{restore.Status}}</span>\n                        <span class=\"history-item-meta\">\n                          {{restore.CompletedItems ?? 0}}/{{restore.TotalItems ?? 0}} items\n                          @if (restore.FailedItems) {\n                            <span> &middot; {{restore.FailedItems}} failed</span>\n                          }\n                        </span>\n                      </div>\n                      <span class=\"history-item-date\">{{FormatRelativeDate(restore.__mj_CreatedAt)}}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Related labels -->\n            @if (RelatedLabels.length > 0) {\n              <div class=\"detail-section\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-tags section-icon\"></i> Related Labels\n                </h3>\n                <div class=\"history-list\">\n                  @for (related of RelatedLabels; track related) {\n                    <div class=\"history-item\">\n                      <div class=\"history-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n                        <i class=\"fa-solid fa-tag\"></i>\n                      </div>\n                      <div class=\"history-item-content\">\n                        <span class=\"history-item-title\">{{related.Name}}</span>\n                        <span class=\"history-item-meta\">\n                          <span class=\"inline-badge small\" [ngClass]=\"GetStatusClass(related.Status)\">{{related.Status}}</span>\n                        </span>\n                      </div>\n                      <span class=\"history-item-date\">{{FormatRelativeDate(related.__mj_CreatedAt)}}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Empty -->\n            @if (Restores.length === 0 && RelatedLabels.length === 0) {\n              <div class=\"tab-empty\">\n                <i class=\"fa-solid fa-clock-rotate-left tab-empty-icon\"></i>\n                <p>No restore history or related labels found.</p>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- INLINE MICRO VIEW (replaces tab content when active) -->\n  <!-- ============================================================ -->\n  @if (ShowMicroView && MicroViewRecord) {\n    <div class=\"tab-content\">\n      <mj-record-micro-view\n        [Data]=\"MicroViewRecord\"\n        [Inline]=\"true\"\n        (Close)=\"OnBackFromMicroView()\"\n        (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n        (OpenRecord)=\"OnOpenRecordClick($event)\">\n      </mj-record-micro-view>\n    </div>\n  }\n</div>\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.panel-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.panel-backdrop.visible {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n/* ================================================================= */\n/* PANEL */\n/* ================================================================= */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    /* Width is set dynamically via [style.width.px] */\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.detail-panel.visible {\n    transform: translateX(0);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:active .resize-handle-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* BREADCRUMB BAR */\n/* ================================================================= */\n\n.breadcrumb-bar {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.breadcrumb-back:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    overflow: hidden;\n}\n\n.breadcrumb-item {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable {\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable:hover {\n    color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator {\n    font-size: 9px;\n    color: var(--mj-border-strong);\n    flex-shrink: 0;\n}\n\n.breadcrumb-icon {\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.panel-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 20px 24px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.header-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.header-title-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.header-scope-icon {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.header-title {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.header-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-scope-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-description {\n    margin: 8px 0 0 0;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.header-action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 14px;\n}\n\n.header-action-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.header-action-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n}\n\n.close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* Status badges (reused) */\n.status-active { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n/* ================================================================= */\n/* SUMMARY KPIs */\n/* ================================================================= */\n\n.summary-kpis {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.summary-kpi {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.kpi-mini-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-mini-label {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n/* ================================================================= */\n/* TAB BAR */\n/* ================================================================= */\n\n.tab-bar {\n    display: flex;\n    gap: 0;\n    padding: 0 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.tab {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.tab:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.tab-icon {\n    font-size: 13px;\n}\n\n.tab-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* ================================================================= */\n/* TAB CONTENT */\n/* ================================================================= */\n\n.tab-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.tab-pane {\n    padding: 20px 24px;\n    animation: tabFadeIn 0.2s ease;\n}\n\n@keyframes tabFadeIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.tab-empty {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.tab-empty-icon {\n    font-size: 40px;\n    color: var(--mj-border-strong);\n    margin-bottom: 12px;\n}\n\n.tab-empty p {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n/* ================================================================= */\n/* OVERVIEW TAB */\n/* ================================================================= */\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 14px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n}\n\n.detail-field {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.field-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.field-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n}\n\n.field-mono {\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 13px;\n    word-break: break-all;\n}\n\n.field-record-name {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n/* Record card for Record-scoped labels on overview tab */\n.record-card {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 16px 18px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.record-card-main {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n    flex: 1;\n}\n\n.record-card-icon {\n    font-size: 22px;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.record-card-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.record-card-name {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-name-loading {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n    font-style: italic;\n}\n\n.record-card-entity {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.record-card-id {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-open-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n}\n\n.record-card-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.inline-badge.small {\n    padding: 2px 8px;\n    font-size: 11px;\n}\n\n.description-text {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n/* Hierarchy */\n.hierarchy-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: background 0.15s ease;\n}\n\n.hierarchy-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n    width: 16px;\n    text-align: center;\n}\n\n.hierarchy-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n}\n\n.hierarchy-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.hierarchy-meta {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.hierarchy-children {\n    margin-left: 16px;\n    border-left: 2px solid var(--mj-border-default);\n    padding-left: 8px;\n}\n\n/* ================================================================= */\n/* SNAPSHOTS TAB */\n/* ================================================================= */\n\n.snapshot-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n}\n\n.snapshot-search {\n    position: relative;\n    flex: 1;\n}\n\n.snapshot-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-search-input {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n    transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle,\n.snapshot-view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn-sm {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n    font-size: 12px;\n}\n\n.toggle-btn-sm:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm + .toggle-btn-sm {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n/* Snapshot groups */\n.snapshot-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.snapshot-group {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.group-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.group-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.group-chevron {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 14px;\n    text-align: center;\n}\n\n.group-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n.group-entity-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.group-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.group-count-inline {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    margin-left: 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 12px;\n    font-weight: 600;\n    vertical-align: middle;\n}\n\n.group-content {\n    border-top: 1px solid var(--mj-border-default);\n    animation: tabFadeIn 0.15s ease;\n}\n\n.group-names-loading {\n    display: flex;\n    justify-content: center;\n    padding: 8px 14px;\n}\n\n/* Snapshot list items */\n.snapshot-list-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px 10px 40px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item:last-child {\n    border-bottom: none;\n}\n\n.snapshot-list-item:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-item-name {\n    flex: 1;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-item-id {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.snapshot-item-arrow {\n    color: var(--mj-border-strong);\n    font-size: 11px;\n    transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item:hover .snapshot-item-arrow {\n    color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n\n/* Snapshot cards */\n.snapshot-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 10px;\n    padding: 12px 14px;\n}\n\n.snapshot-card {\n    padding: 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.snapshot-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.snapshot-card-header i {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.snapshot-card-name {\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-card-meta {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n/* ================================================================= */\n/* DEPENDENCIES TAB */\n/* ================================================================= */\n\n.dep-root {\n    padding: 4px 0;\n}\n\n.dep-root-entity {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\n.dep-root-icon {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n.dep-root-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.dep-root-badge {\n    padding: 2px 10px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.dep-node {\n    margin-left: 8px;\n    border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-radius: 6px;\n}\n\n.dep-node-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 12px;\n    text-align: center;\n}\n\n.dep-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n.dep-node-spacer {\n    width: 12px;\n}\n\n.dep-node-icon {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n.dep-node-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dep-node-field {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.dep-node-count {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    padding: 1px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n}\n\n.dep-empty {\n    padding: 20px;\n    text-align: center;\n}\n\n.dep-empty p {\n    font-size: 14px;\n    color: var(--mj-text-disabled);\n    margin: 0;\n}\n\n/* ================================================================= */\n/* CHANGES TAB */\n/* ================================================================= */\n\n.diff-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.diff-stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    min-width: 80px;\n}\n\n.diff-stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.diff-stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n/* Diff toolbar */\n.diff-toolbar {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n}\n\n.toolbar-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toolbar-action-btn i {\n    font-size: 11px;\n}\n\n.toolbar-action-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.diff-group {\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.diff-group-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n}\n\n.diff-group-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.diff-chevron {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 14px;\n    text-align: center;\n}\n\n.diff-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n.diff-group-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.diff-group-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.diff-group-count {\n    font-size: 12px;\n    font-weight: 600;\n    padding: 2px 10px;\n    border-radius: 10px;\n}\n\n.diff-group-content {\n    border-top: 1px solid var(--mj-border-default);\n    animation: tabFadeIn 0.15s ease;\n}\n\n.diff-record {\n    padding: 10px 14px 10px 40px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record:last-child {\n    border-bottom: none;\n}\n\n.diff-record-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.diff-record-id {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-family: monospace;\n}\n\n.diff-fields {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-left: 22px;\n}\n\n.diff-field {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n}\n\n.diff-field-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 100px;\n}\n\n.diff-field-old {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.7;\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.diff-field-arrow {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n.diff-field-new {\n    color: var(--mj-status-success);\n    font-family: monospace;\n    font-size: 12px;\n}\n\n/* Change type colors */\n.change-added { color: var(--mj-status-success); }\n.change-modified { color: var(--mj-status-warning); }\n.change-removed { color: var(--mj-status-error); }\n\n.diff-field.change-added { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n/* ================================================================= */\n/* HISTORY TAB */\n/* ================================================================= */\n\n.history-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.history-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    transition: background 0.15s ease;\n}\n\n.history-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.history-item-icon.status-complete { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.history-item-title {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.history-item-meta {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.history-item-date {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 1024px) {\n    .detail-panel {\n        min-width: 360px;\n    }\n\n    .summary-kpis {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 768px) {\n    .detail-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .detail-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .summary-kpis {\n        flex-wrap: wrap;\n        gap: 8px;\n        padding: 12px 16px;\n    }\n\n    .summary-kpi {\n        padding: 8px 10px;\n    }\n\n    .panel-header {\n        padding: 16px 16px 12px;\n    }\n\n    .tab-bar {\n        padding: 0 16px;\n    }\n\n    .tab-pane {\n        padding: 16px;\n    }\n\n    .breadcrumb-bar {\n        padding: 8px 16px;\n    }\n\n    .snapshot-toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .diff-summary {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .diff-stat {\n        padding: 10px 14px;\n        min-width: 60px;\n    }\n}\n\n@media (max-width: 480px) {\n    .header-title {\n        font-size: 16px;\n    }\n\n    .header-title-row {\n        gap: 6px;\n    }\n\n    .header-actions {\n        margin-left: 8px;\n    }\n\n    .tab {\n        padding: 10px 10px;\n        font-size: 12px;\n    }\n\n    .snapshot-cards {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-label-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Backdrop overlay -->\n<div class=\"panel-backdrop\" [class.visible]=\"IsVisible\" (click)=\"OnBackdropClick()\"></div>\n\n<!-- Slide-in panel -->\n<div class=\"detail-panel\" [class.visible]=\"IsVisible\" [style.width.px]=\"PanelWidthPx\">\n  <!-- Resize handle -->\n  <div class=\"resize-handle\" (mousedown)=\"OnResizeStart($event)\">\n    <div class=\"resize-handle-grip\"></div>\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- HEADER -->\n  <!-- ============================================================ -->\n  <div class=\"panel-header\">\n    <div class=\"header-info\">\n      <div class=\"header-title-row\">\n        <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"header-scope-icon\"></i>\n        <h2 class=\"header-title\">{{Label.Name}}</h2>\n        <span class=\"header-status\" [ngClass]=\"GetStatusClass(Label.Status)\">\n          {{Label.Status}}\n        </span>\n        <span class=\"header-scope-badge\">{{Label.Scope}}</span>\n      </div>\n      @if (Label.Description) {\n        <p class=\"header-description\">{{Label.Description}}</p>\n      }\n    </div>\n    <div class=\"header-actions\">\n      <button class=\"header-action-btn\" (click)=\"OnArchive()\"\n        [disabled]=\"IsArchiving || Label.Status === 'Archived'\"\n        title=\"Archive this label\">\n        <i class=\"fa-solid fa-box-archive\"></i>\n      </button>\n      <button class=\"header-action-btn\" (click)=\"OnTabChange('changes')\" title=\"View changes\">\n        <i class=\"fa-solid fa-code-compare\"></i>\n      </button>\n      <button class=\"close-btn\" (click)=\"OnClose()\">\n        <i class=\"fa-solid fa-xmark\"></i>\n      </button>\n    </div>\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- SUMMARY KPIs -->\n  <!-- ============================================================ -->\n  <div class=\"summary-kpis\">\n    <div class=\"summary-kpi\">\n      <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n        <i class=\"fa-solid fa-camera\"></i>\n      </div>\n      <div class=\"kpi-mini-content\">\n        <span class=\"kpi-mini-value\">{{LabelItems.length || Label.ItemCount || GetItemCount(Label.ID)}}</span>\n        <span class=\"kpi-mini-label\">Items</span>\n      </div>\n    </div>\n    <div class=\"summary-kpi\">\n      <div class=\"kpi-mini-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n        <i class=\"fa-solid fa-table\"></i>\n      </div>\n      <div class=\"kpi-mini-content\">\n        <span class=\"kpi-mini-value\">{{UniqueEntityCount}}</span>\n        <span class=\"kpi-mini-label\">Entities</span>\n      </div>\n    </div>\n    @if (Label.CreationDurationMS) {\n      <div class=\"summary-kpi\">\n        <div class=\"kpi-mini-icon\" style=\"background: rgba(16, 185, 129, 0.1); color: #10b981;\">\n          <i class=\"fa-solid fa-stopwatch\"></i>\n        </div>\n        <div class=\"kpi-mini-content\">\n          <span class=\"kpi-mini-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n          <span class=\"kpi-mini-label\">Duration</span>\n        </div>\n      </div>\n    }\n    @if (ChildLabels.length > 0) {\n      <div class=\"summary-kpi\">\n        <div class=\"kpi-mini-icon\" style=\"background: rgba(245, 158, 11, 0.1); color: #f59e0b;\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n        </div>\n        <div class=\"kpi-mini-content\">\n          <span class=\"kpi-mini-value\">{{ChildLabels.length}}</span>\n          <span class=\"kpi-mini-label\">Children</span>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- ============================================================ -->\n  <!-- TAB BAR (hidden when micro-view is active) -->\n  <!-- ============================================================ -->\n  @if (!ShowMicroView) {\n    <div class=\"tab-bar\">\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'overview'\" (click)=\"OnTabChange('overview')\">\n        <i class=\"fa-solid fa-info-circle tab-icon\"></i> Overview\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'snapshots'\" (click)=\"OnTabChange('snapshots')\">\n        <i class=\"fa-solid fa-camera tab-icon\"></i> Snapshots\n        @if (LabelItems.length > 0) {\n          <span class=\"tab-count\">{{LabelItems.length}}</span>\n        }\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'dependencies'\" (click)=\"OnTabChange('dependencies')\">\n        <i class=\"fa-solid fa-diagram-project tab-icon\"></i> Dependencies\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'changes'\" (click)=\"OnTabChange('changes')\">\n        <i class=\"fa-solid fa-code-compare tab-icon\"></i> Changes\n      </button>\n      <button class=\"tab\" [class.active]=\"ActiveTab === 'history'\" (click)=\"OnTabChange('history')\">\n        <i class=\"fa-solid fa-clock-rotate-left tab-icon\"></i> History\n      </button>\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- BREADCRUMB (shown when micro-view is active) -->\n  <!-- ============================================================ -->\n  @if (ShowMicroView) {\n    <div class=\"breadcrumb-bar\">\n      <button class=\"breadcrumb-back\" (click)=\"OnBackFromMicroView()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n      </button>\n      <div class=\"breadcrumb-trail\">\n        <span class=\"breadcrumb-item clickable\" (click)=\"OnBackFromMicroView()\">\n          <i class=\"fa-solid fa-camera breadcrumb-icon\"></i> Snapshots\n        </span>\n        <i class=\"fa-solid fa-chevron-right breadcrumb-separator\"></i>\n        <span class=\"breadcrumb-item current\">\n          <i class=\"fa-solid fa-file-lines breadcrumb-icon\"></i> {{BreadcrumbLabel}}\n        </span>\n      </div>\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- TAB CONTENT (scrollable) - or inline micro-view -->\n  <!-- ============================================================ -->\n  @if (!ShowMicroView) {\n    <div class=\"tab-content\">\n      <!-- Loading state for items -->\n      @if (IsLoadingItems && ActiveTab !== 'dependencies') {\n        <mj-loading text=\"Loading label data...\"></mj-loading>\n      }\n      <!-- ======================================================== -->\n      <!-- OVERVIEW TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'overview' && !IsLoadingItems) {\n        <div class=\"tab-pane\">\n          <!-- Metadata section -->\n          <div class=\"detail-section\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-info-circle section-icon\"></i> Label Details\n            </h3>\n            <div class=\"detail-grid\">\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Name</span>\n                <span class=\"field-value\">{{Label.Name}}</span>\n              </div>\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Status</span>\n                <span class=\"field-value\">\n                  <span class=\"inline-badge\" [ngClass]=\"GetStatusClass(Label.Status)\">{{Label.Status}}</span>\n                </span>\n              </div>\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Scope</span>\n                <span class=\"field-value\">\n                  <i [class]=\"GetScopeIcon(Label.Scope)\" style=\"margin-right: 6px;\"></i>{{Label.Scope}}\n                </span>\n              </div>\n              @if (Label.EntityID) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Entity</span>\n                  <span class=\"field-value\">\n                    <i [class]=\"OverviewEntityIcon\" style=\"margin-right: 6px; color: var(--mj-brand-primary);\"></i>{{Label.Entity ?? resolveEntityName(Label.EntityID)}}\n                  </span>\n                </div>\n              }\n              @if (Label.RecordID && Label.Scope !== 'Record') {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Record ID</span>\n                  <span class=\"field-value field-mono\">{{FormatRecordID(Label.RecordID)}}</span>\n                </div>\n              }\n              @if (Label.ExternalSystemID) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">External Ref</span>\n                  <span class=\"field-value field-mono\">{{Label.ExternalSystemID}}</span>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Record card (Record-scoped labels) -->\n          @if (Label.Scope === 'Record' && Label.RecordID) {\n            <div class=\"record-card\">\n              <div class=\"record-card-main\">\n                <i [class]=\"OverviewEntityIcon\" class=\"record-card-icon\"></i>\n                <div class=\"record-card-info\">\n                  @if (OverviewRecordName) {\n                    <span class=\"record-card-name\">{{OverviewRecordName}}</span>\n                  }\n                  @if (!OverviewRecordName) {\n                    <span class=\"record-card-name record-card-name-loading\">Loading...</span>\n                  }\n                  <span class=\"record-card-entity\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n                  <span class=\"record-card-id\">{{FormatRecordID(Label.RecordID)}}</span>\n                </div>\n              </div>\n              <button class=\"record-card-open-btn\" (click)=\"OnOpenOverviewRecord()\" title=\"Open record\">\n                <i class=\"fa-solid fa-arrow-up-right-from-square\"></i> Open\n              </button>\n            </div>\n          }\n          <!-- Description -->\n          @if (Label.Description) {\n            <div class=\"detail-section\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-align-left section-icon\"></i> Description\n              </h3>\n              <p class=\"description-text\">{{Label.Description}}</p>\n            </div>\n          }\n          <!-- Creation info -->\n          <div class=\"detail-section\">\n            <h3 class=\"section-title\">\n              <i class=\"fa-solid fa-clock section-icon\"></i> Creation\n            </h3>\n            <div class=\"detail-grid\">\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Created</span>\n                <span class=\"field-value\">{{FormatDate(Label.__mj_CreatedAt)}}</span>\n              </div>\n              @if (Label.CreatedByUser) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Created By</span>\n                  <span class=\"field-value\">\n                    <i class=\"fa-solid fa-user\" style=\"margin-right: 6px; opacity: 0.5;\"></i>{{Label.CreatedByUser}}\n                  </span>\n                </div>\n              }\n              @if (Label.CreationDurationMS) {\n                <div class=\"detail-field\">\n                  <span class=\"field-label\">Capture Duration</span>\n                  <span class=\"field-value\">{{FormatDuration(Label.CreationDurationMS)}}</span>\n                </div>\n              }\n              <div class=\"detail-field\">\n                <span class=\"field-label\">Items Captured</span>\n                <span class=\"field-value\">{{LabelItems.length}}</span>\n              </div>\n            </div>\n          </div>\n          <!-- Parent / Children -->\n          @if (Label.ParentID || ChildLabels.length > 0) {\n            <div class=\"detail-section\">\n              <h3 class=\"section-title\">\n                <i class=\"fa-solid fa-sitemap section-icon\"></i> Hierarchy\n              </h3>\n              <!-- Parent reference -->\n              @if (Label.ParentID) {\n                <div class=\"hierarchy-item parent\">\n                  <i class=\"fa-solid fa-arrow-up hierarchy-icon\"></i>\n                  <span class=\"hierarchy-label\">Parent:</span>\n                  <span class=\"hierarchy-name\">\n                    @for (pl of AllLabels; track pl) {\n                      @if (IsParentLabel(pl)) {\n                        <span>{{pl.Name}}</span>\n                      }\n                    }\n                  </span>\n                </div>\n              }\n              <!-- Children -->\n              @if (ChildLabels.length > 0) {\n                <div class=\"hierarchy-children\">\n                  @for (child of ChildLabels; track child) {\n                    <div class=\"hierarchy-item child\">\n                      <i class=\"fa-solid fa-arrow-turn-down-right hierarchy-icon\"></i>\n                      <span class=\"hierarchy-name\">{{child.Name}}</span>\n                      @if (child.RecordID) {\n                        <span class=\"hierarchy-meta\">{{child.RecordID | slice:0:12}}...</span>\n                      }\n                      @if (child.ItemCount) {\n                        <span class=\"hierarchy-meta\">{{child.ItemCount}} items</span>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- SNAPSHOTS TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'snapshots' && !IsLoadingItems) {\n        <div class=\"tab-pane\">\n          <!-- Snapshot toolbar -->\n          <div class=\"snapshot-toolbar\">\n            <div class=\"snapshot-search\">\n              <i class=\"fa-solid fa-search snapshot-search-icon\"></i>\n              <input type=\"text\" class=\"snapshot-search-input\"\n                placeholder=\"Search by entity or record...\"\n                [ngModel]=\"SnapshotSearch\"\n                (ngModelChange)=\"OnSnapshotSearchChange($event)\" />\n            </div>\n            <div class=\"snapshot-sort-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'name'\"\n                (click)=\"OnSnapshotSortChange('name')\" title=\"Sort by name\">\n                @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'asc') {\n                  <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n                }\n                @if (SnapshotSortBy === 'name' && SnapshotSortDir === 'desc') {\n                  <i class=\"fa-solid fa-arrow-up-z-a\"></i>\n                }\n                @if (SnapshotSortBy !== 'name') {\n                  <i class=\"fa-solid fa-arrow-down-a-z\"></i>\n                }\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotSortBy === 'count'\"\n                (click)=\"OnSnapshotSortChange('count')\" title=\"Sort by record count\">\n                @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'desc') {\n                  <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n                }\n                @if (SnapshotSortBy === 'count' && SnapshotSortDir === 'asc') {\n                  <i class=\"fa-solid fa-arrow-up-1-9\"></i>\n                }\n                @if (SnapshotSortBy !== 'count') {\n                  <i class=\"fa-solid fa-arrow-down-9-1\"></i>\n                }\n              </button>\n            </div>\n            <div class=\"snapshot-view-toggle\">\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'list'\" (click)=\"SnapshotViewMode = 'list'\">\n                <i class=\"fa-solid fa-list\"></i>\n              </button>\n              <button class=\"toggle-btn-sm\" [class.active]=\"SnapshotViewMode === 'card'\" (click)=\"SnapshotViewMode = 'card'\">\n                <i class=\"fa-solid fa-grip\"></i>\n              </button>\n            </div>\n          </div>\n          <!-- Entity groups -->\n          <div class=\"snapshot-groups\">\n            @for (group of FilteredSnapshotGroups; track group) {\n              <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                  [Expanded]=\"group.IsExpanded\" (ExpandedChange)=\"ToggleSnapshotGroup(group)\">\n                <ng-template mjAccordionTitle>\n                  <i [class]=\"group.EntityIcon\" class=\"group-entity-icon\"></i>\n                  <span class=\"group-name\">{{group.EntityName}}</span>\n                  <span class=\"mj-accordion-badge mj-accordion-badge--right\">{{group.Items.length}}</span>\n                </ng-template>\n                <ng-template mjAccordionBody>\n                  <div class=\"group-content\">\n                    <!-- Loading names indicator -->\n                    @if (group.IsLoadingNames) {\n                      <div class=\"group-names-loading\">\n                        <mj-loading text=\"Loading record names...\" size=\"small\"></mj-loading>\n                      </div>\n                    }\n                    <!-- List mode -->\n                    @if (SnapshotViewMode === 'list') {\n                      @for (item of group.Items; track item) {\n                        <div class=\"snapshot-list-item\"\n                          (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n                          <i class=\"fa-solid fa-file-lines snapshot-item-icon\"></i>\n                          <span class=\"snapshot-item-name\">{{item.DisplayName}}</span>\n                          <i class=\"fa-solid fa-chevron-right snapshot-item-arrow\"></i>\n                        </div>\n                      }\n                    }\n                    <!-- Card mode -->\n                    @if (SnapshotViewMode === 'card') {\n                      <div class=\"snapshot-cards\">\n                        @for (item of group.Items; track item) {\n                          <div class=\"snapshot-card\"\n                            (click)=\"OpenMicroView(group.EntityName, item.RecordID, item.RecordChangeID, item.DisplayName)\">\n                            <div class=\"snapshot-card-header\">\n                              <i class=\"fa-solid fa-file-lines\"></i>\n                              <span class=\"snapshot-card-name\">{{item.DisplayName}}</span>\n                            </div>\n                          </div>\n                        }\n                      </div>\n                    }\n                  </div>\n                </ng-template>\n              </mj-accordion-panel>\n            }\n          </div>\n          <!-- Empty state -->\n          @if (FilteredSnapshotGroups.length === 0) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-camera\"\n              Title=\"No snapshot items found.\" />\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- DEPENDENCIES TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'dependencies') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingDependencies) {\n            <mj-loading text=\"Loading dependencies...\"></mj-loading>\n          }\n          @if (!IsLoadingDependencies && Label.EntityID) {\n            <div class=\"dep-root\">\n              <div class=\"dep-root-entity\">\n                <i [class]=\"GetScopeIcon(Label.Scope)\" class=\"dep-root-icon\"></i>\n                <span class=\"dep-root-name\">{{Label.Entity ?? resolveEntityName(Label.EntityID)}}</span>\n                <span class=\"dep-root-badge\">Root</span>\n              </div>\n              @if (DependencyTree.length > 0) {\n                @for (node of DependencyTree; track node) {\n                  <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: node }\"></ng-container>\n                }\n              }\n              @if (DependencyTree.length === 0) {\n                <mj-empty-state\n                  Size=\"compact\"\n                  Icon=\"fa-solid fa-diagram-project\"\n                  Title=\"No dependent entities found.\" />\n              }\n            </div>\n          }\n          @if (!IsLoadingDependencies && !Label.EntityID) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-diagram-project\"\n              Title=\"No entity associated with this label.\" />\n          }\n        </div>\n      }\n      <!-- Dependency tree node template -->\n      <ng-template #depNode let-node>\n        <div class=\"dep-node\" [style.padding-left.px]=\"node.Depth * 24\">\n          <div class=\"dep-node-header\" (click)=\"ToggleDependencyNode(node)\">\n            @if (node.Children.length > 0) {\n              <i class=\"fa-solid fa-chevron-right dep-chevron\"\n                [class.expanded]=\"node.IsExpanded\"\n              ></i>\n            }\n            @if (node.Children.length === 0) {\n              <span class=\"dep-node-spacer\"></span>\n            }\n            <i [class]=\"resolveEntityIconByName(node.EntityName)\" class=\"dep-node-icon\"></i>\n            <span class=\"dep-node-name\">{{node.EntityName}}</span>\n            <span class=\"dep-node-field\">via {{node.RelationshipField}}</span>\n            @if (node.Children.length > 0) {\n              <span class=\"dep-node-count\">\n                {{node.Children.length}} dep{{node.Children.length !== 1 ? 's' : ''}}\n              </span>\n            }\n          </div>\n          @if (node.IsExpanded && node.Children.length > 0) {\n            @for (child of node.Children; track child) {\n              <ng-container *ngTemplateOutlet=\"depNode; context: { $implicit: child }\"></ng-container>\n            }\n          }\n        </div>\n      </ng-template>\n      <!-- ======================================================== -->\n      <!-- CHANGES TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'changes') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingDiff) {\n            <mj-loading text=\"Computing differences...\"></mj-loading>\n          }\n          @if (!IsLoadingDiff && DiffResult) {\n            <!-- Diff summary -->\n            <div class=\"diff-summary\">\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value change-modified\">{{DiffResult.Summary.Changed}}</span>\n                <span class=\"diff-stat-label\">Changed</span>\n              </div>\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value\">{{DiffResult.Summary.Unchanged}}</span>\n                <span class=\"diff-stat-label\">Unchanged</span>\n              </div>\n              <div class=\"diff-stat\">\n                <span class=\"diff-stat-value\">{{DiffResult.Summary.EntitiesAffected}}</span>\n                <span class=\"diff-stat-label\">Entities</span>\n              </div>\n            </div>\n            <!-- Expand/collapse all -->\n            @if (DiffResult.EntityGroups.length > 0) {\n              <div class=\"diff-toolbar\">\n                <button class=\"toolbar-action-btn\" (click)=\"ExpandAllDiffGroups()\" title=\"Expand all\">\n                  <i class=\"fa-solid fa-angles-down\"></i>\n                  <span>Expand All</span>\n                </button>\n                <button class=\"toolbar-action-btn\" (click)=\"CollapseAllDiffGroups()\" title=\"Collapse all\">\n                  <i class=\"fa-solid fa-angles-up\"></i>\n                  <span>Collapse All</span>\n                </button>\n              </div>\n            }\n            <!-- Entity diff groups -->\n            @if (DiffResult.EntityGroups.length > 0) {\n              <div class=\"diff-groups\">\n                @for (group of DiffResult.EntityGroups; track group) {\n                  <mj-accordion-panel Size=\"sm\" [FlushBody]=\"true\"\n                      [Expanded]=\"group.IsExpanded\" (ExpandedChange)=\"ToggleDiffGroup(group)\">\n                    <ng-template mjAccordionTitle>\n                      <i [class]=\"resolveEntityIconByName(group.EntityName)\" class=\"diff-group-icon\"></i>\n                      <span class=\"diff-group-name\">{{group.EntityName}}</span>\n                      <span class=\"mj-accordion-badge mj-accordion-badge--warning mj-accordion-badge--right\">\n                        {{group.Records.length}} modified\n                      </span>\n                    </ng-template>\n                    <ng-template mjAccordionBody>\n                      <div class=\"diff-group-content\">\n                        @for (record of group.Records; track record) {\n                          <div class=\"diff-record\">\n                            <div class=\"diff-record-header\">\n                              <i [class]=\"GetChangeTypeIcon(record.ChangeType)\" [ngClass]=\"GetChangeTypeClass(record.ChangeType)\"></i>\n                              <span class=\"diff-record-id\">{{record.RecordID | slice:0:20}}...</span>\n                            </div>\n                            @if (record.FieldChanges.length > 0) {\n                              <div class=\"diff-fields\">\n                                @for (field of record.FieldChanges; track field) {\n                                  <div class=\"diff-field\"\n                                    [ngClass]=\"GetChangeTypeClass(field.ChangeType)\">\n                                    <span class=\"diff-field-name\">{{field.FieldName}}</span>\n                                    @if (field.OldValue) {\n                                      <span class=\"diff-field-old\">{{field.OldValue | slice:0:40}}</span>\n                                    }\n                                    @if (field.OldValue && field.NewValue) {\n                                      <i class=\"fa-solid fa-arrow-right diff-field-arrow\"></i>\n                                    }\n                                    @if (field.NewValue) {\n                                      <span class=\"diff-field-new\">{{field.NewValue | slice:0:40}}</span>\n                                    }\n                                  </div>\n                                }\n                              </div>\n                            }\n                          </div>\n                        }\n                      </div>\n                    </ng-template>\n                  </mj-accordion-panel>\n                }\n              </div>\n            }\n            <!-- No changes -->\n            @if (DiffResult.EntityGroups.length === 0 && DiffResult.Summary.Changed === 0) {\n              <mj-empty-state\n                Size=\"compact\"\n                Variant=\"success\"\n                Title=\"No changes detected since this label was created.\" />\n            }\n          }\n        </div>\n      }\n      <!-- ======================================================== -->\n      <!-- HISTORY TAB -->\n      <!-- ======================================================== -->\n      @if (ActiveTab === 'history') {\n        <div class=\"tab-pane\">\n          @if (IsLoadingHistory) {\n            <mj-loading text=\"Loading history...\"></mj-loading>\n          }\n          @if (!IsLoadingHistory) {\n            <!-- Restores -->\n            @if (Restores.length > 0) {\n              <div class=\"detail-section\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-clock-rotate-left section-icon\"></i> Restore Operations\n                </h3>\n                <div class=\"history-list\">\n                  @for (restore of Restores; track restore) {\n                    <div class=\"history-item\">\n                      <div class=\"history-item-icon\" [ngClass]=\"'status-' + (restore.Status ?? '').toLowerCase().replace(' ', '-')\">\n                        <i class=\"fa-solid fa-clock-rotate-left\"></i>\n                      </div>\n                      <div class=\"history-item-content\">\n                        <span class=\"history-item-title\">Restore {{restore.Status}}</span>\n                        <span class=\"history-item-meta\">\n                          {{restore.CompletedItems ?? 0}}/{{restore.TotalItems ?? 0}} items\n                          @if (restore.FailedItems) {\n                            <span> &middot; {{restore.FailedItems}} failed</span>\n                          }\n                        </span>\n                      </div>\n                      <span class=\"history-item-date\">{{FormatRelativeDate(restore.__mj_CreatedAt)}}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Related labels -->\n            @if (RelatedLabels.length > 0) {\n              <div class=\"detail-section\">\n                <h3 class=\"section-title\">\n                  <i class=\"fa-solid fa-tags section-icon\"></i> Related Labels\n                </h3>\n                <div class=\"history-list\">\n                  @for (related of RelatedLabels; track related) {\n                    <div class=\"history-item\">\n                      <div class=\"history-item-icon\" style=\"background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary);\">\n                        <i class=\"fa-solid fa-tag\"></i>\n                      </div>\n                      <div class=\"history-item-content\">\n                        <span class=\"history-item-title\">{{related.Name}}</span>\n                        <span class=\"history-item-meta\">\n                          <span class=\"inline-badge small\" [ngClass]=\"GetStatusClass(related.Status)\">{{related.Status}}</span>\n                        </span>\n                      </div>\n                      <span class=\"history-item-date\">{{FormatRelativeDate(related.__mj_CreatedAt)}}</span>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Empty -->\n            @if (Restores.length === 0 && RelatedLabels.length === 0) {\n              <mj-empty-state\n                Size=\"compact\"\n                Icon=\"fa-solid fa-clock-rotate-left\"\n                Title=\"No restore history or related labels found.\" />\n            }\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- ============================================================ -->\n  <!-- INLINE MICRO VIEW (replaces tab content when active) -->\n  <!-- ============================================================ -->\n  @if (ShowMicroView && MicroViewRecord) {\n    <div class=\"tab-content\">\n      <mj-record-micro-view\n        [Data]=\"MicroViewRecord\"\n        [Inline]=\"true\"\n        (Close)=\"OnBackFromMicroView()\"\n        (EntityLinkClick)=\"OnEntityLinkClick($event)\"\n        (OpenRecord)=\"OnOpenRecordClick($event)\">\n      </mj-record-micro-view>\n    </div>\n  }\n</div>\n", styles: ["/* ================================================================= */\n/* BACKDROP */\n/* ================================================================= */\n\n.panel-backdrop {\n    position: fixed;\n    inset: 0;\n    background: transparent;\n    z-index: 1000;\n    transition: background 0.3s ease;\n    pointer-events: none;\n}\n\n.panel-backdrop.visible {\n    background: var(--mj-bg-overlay);\n    pointer-events: auto;\n}\n\n/* ================================================================= */\n/* PANEL */\n/* ================================================================= */\n\n.detail-panel {\n    position: fixed;\n    top: 0;\n    right: 0;\n    height: 100vh;\n    background: var(--mj-bg-surface);\n    box-shadow: var(--mj-shadow-lg);\n    z-index: 1001;\n    display: flex;\n    flex-direction: column;\n    transform: translateX(100%);\n    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);\n    /* Width is set dynamically via [style.width.px] */\n    min-width: 400px;\n    max-width: 92vw;\n}\n\n.detail-panel.visible {\n    transform: translateX(0);\n}\n\n/* ================================================================= */\n/* RESIZE HANDLE */\n/* ================================================================= */\n\n.resize-handle {\n    position: absolute;\n    left: -4px;\n    top: 0;\n    width: 8px;\n    height: 100%;\n    cursor: col-resize;\n    z-index: 10;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.resize-handle:hover .resize-handle-grip,\n.resize-handle:active .resize-handle-grip {\n    opacity: 1;\n    background: var(--mj-brand-primary);\n}\n\n.resize-handle-grip {\n    width: 3px;\n    height: 40px;\n    background: var(--mj-border-strong);\n    border-radius: 3px;\n    opacity: 0;\n    transition: opacity 0.2s ease, background 0.2s ease;\n}\n\n.resize-handle:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n/* ================================================================= */\n/* BREADCRUMB BAR */\n/* ================================================================= */\n\n.breadcrumb-bar {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-back {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 13px;\n    flex-shrink: 0;\n}\n\n.breadcrumb-back:hover {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n}\n\n.breadcrumb-trail {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    overflow: hidden;\n}\n\n.breadcrumb-item {\n    display: flex;\n    align-items: center;\n    gap: 5px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.breadcrumb-item.clickable {\n    cursor: pointer;\n    transition: color 0.15s ease;\n}\n\n.breadcrumb-item.clickable:hover {\n    color: var(--mj-brand-primary);\n}\n\n.breadcrumb-item.current {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.breadcrumb-separator {\n    font-size: 9px;\n    color: var(--mj-border-strong);\n    flex-shrink: 0;\n}\n\n.breadcrumb-icon {\n    font-size: 12px;\n    flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* HEADER */\n/* ================================================================= */\n\n.panel-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: 20px 24px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.header-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.header-title-row {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    flex-wrap: wrap;\n}\n\n.header-scope-icon {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.header-title {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.header-status {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-scope-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    flex-shrink: 0;\n}\n\n.header-description {\n    margin: 8px 0 0 0;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n    align-items: center;\n    flex-shrink: 0;\n    margin-left: 16px;\n}\n\n.header-action-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 14px;\n}\n\n.header-action-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n    border-color: var(--mj-border-strong);\n}\n\n.header-action-btn:disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.close-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    background: none;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    font-size: 16px;\n}\n\n.close-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-primary);\n}\n\n/* Status badges (reused) */\n.status-active { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.status-archived { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n.status-restored { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n\n/* ================================================================= */\n/* SUMMARY KPIs */\n/* ================================================================= */\n\n.summary-kpis {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.summary-kpi {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 36px;\n    height: 36px;\n    border-radius: 8px;\n    font-size: 15px;\n    flex-shrink: 0;\n}\n\n.kpi-mini-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.kpi-mini-value {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.kpi-mini-label {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    margin-top: 2px;\n}\n\n/* ================================================================= */\n/* TAB BAR */\n/* ================================================================= */\n\n.tab-bar {\n    display: flex;\n    gap: 0;\n    padding: 0 24px;\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n    overflow-x: auto;\n}\n\n.tab {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 12px 16px;\n    background: none;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.15s ease;\n    white-space: nowrap;\n}\n\n.tab:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-sunken);\n}\n\n.tab.active {\n    color: var(--mj-brand-primary);\n    border-bottom-color: var(--mj-brand-primary);\n    font-weight: 600;\n}\n\n.tab-icon {\n    font-size: 13px;\n}\n\n.tab-count {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 20px;\n    height: 20px;\n    padding: 0 6px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n    color: var(--mj-brand-primary);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* ================================================================= */\n/* TAB CONTENT */\n/* ================================================================= */\n\n.tab-content {\n    flex: 1;\n    overflow-y: auto;\n    overflow-x: hidden;\n}\n\n.tab-pane {\n    padding: 20px 24px;\n    animation: tabFadeIn 0.2s ease;\n}\n\n@keyframes tabFadeIn {\n    from { opacity: 0; transform: translateY(4px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n/* ================================================================= */\n/* OVERVIEW TAB */\n/* ================================================================= */\n\n.detail-section {\n    margin-bottom: 24px;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 14px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.section-icon {\n    color: var(--mj-text-disabled);\n    font-size: 14px;\n}\n\n.detail-grid {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    gap: 14px;\n}\n\n.detail-field {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.field-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n}\n\n.field-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n}\n\n.field-mono {\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    font-size: 13px;\n    word-break: break-all;\n}\n\n.field-record-name {\n    font-weight: 600;\n    color: var(--mj-brand-primary);\n}\n\n/* Record card for Record-scoped labels on overview tab */\n.record-card {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    padding: 16px 18px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.record-card-main {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n    flex: 1;\n}\n\n.record-card-icon {\n    font-size: 22px;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.record-card-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.record-card-name {\n    font-size: 16px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-name-loading {\n    color: var(--mj-text-disabled);\n    font-weight: 500;\n    font-style: italic;\n}\n\n.record-card-entity {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.record-card-id {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: 'SF Mono', 'Fira Code', monospace;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.record-card-open-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.15s ease;\n    flex-shrink: 0;\n    white-space: nowrap;\n}\n\n.record-card-open-btn:hover {\n    background: var(--mj-brand-primary-hover);\n    box-shadow: var(--mj-shadow-md);\n}\n\n.inline-badge {\n    display: inline-flex;\n    align-items: center;\n    padding: 3px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.inline-badge.small {\n    padding: 2px 8px;\n    font-size: 11px;\n}\n\n.description-text {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    line-height: 1.6;\n    margin: 0;\n}\n\n/* Hierarchy */\n.hierarchy-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 8px 12px;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: background 0.15s ease;\n}\n\n.hierarchy-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.hierarchy-icon {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n    width: 16px;\n    text-align: center;\n}\n\n.hierarchy-label {\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n}\n\n.hierarchy-name {\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.hierarchy-meta {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.hierarchy-children {\n    margin-left: 16px;\n    border-left: 2px solid var(--mj-border-default);\n    padding-left: 8px;\n}\n\n/* ================================================================= */\n/* SNAPSHOTS TAB */\n/* ================================================================= */\n\n.snapshot-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-bottom: 16px;\n}\n\n.snapshot-search {\n    position: relative;\n    flex: 1;\n}\n\n.snapshot-search-icon {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-search-input {\n    width: 100%;\n    padding: 8px 12px 8px 36px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n    outline: none;\n    box-sizing: border-box;\n    transition: border-color 0.15s ease;\n}\n\n.snapshot-search-input:focus {\n    border-color: var(--mj-brand-primary);\n}\n\n.snapshot-sort-toggle,\n.snapshot-view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    overflow: hidden;\n}\n\n.toggle-btn-sm {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 30px;\n    height: 30px;\n    background: transparent;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-disabled);\n    transition: all 0.15s ease;\n    font-size: 12px;\n}\n\n.toggle-btn-sm:hover {\n    color: var(--mj-text-primary);\n}\n\n.toggle-btn-sm.active {\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n}\n\n.toggle-btn-sm + .toggle-btn-sm {\n    border-left: 1px solid var(--mj-border-default);\n}\n\n/* Snapshot groups */\n.snapshot-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n/* .snapshot-group chrome is now owned by <mj-accordion-panel>. */\n\n/* .group-header / .group-chevron chrome is now owned by <mj-accordion-panel>. */\n.group-entity-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.group-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n/* .group-count-inline removed \u2014 replaced by the standard .mj-accordion-badge--right. */\n\n.group-content {\n    border-top: 1px solid var(--mj-border-default);\n    animation: tabFadeIn 0.15s ease;\n}\n\n.group-names-loading {\n    display: flex;\n    justify-content: center;\n    padding: 8px 14px;\n}\n\n/* Snapshot list items */\n.snapshot-list-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 14px 10px 40px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.snapshot-list-item:last-child {\n    border-bottom: none;\n}\n\n.snapshot-list-item:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 4%, transparent);\n}\n\n.snapshot-item-icon {\n    color: var(--mj-text-disabled);\n    font-size: 13px;\n}\n\n.snapshot-item-name {\n    flex: 1;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-item-id {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n.snapshot-item-arrow {\n    color: var(--mj-border-strong);\n    font-size: 11px;\n    transition: transform 0.15s ease, color 0.15s ease;\n}\n\n.snapshot-list-item:hover .snapshot-item-arrow {\n    color: var(--mj-brand-primary);\n    transform: translateX(2px);\n}\n\n/* Snapshot cards */\n.snapshot-cards {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n    gap: 10px;\n    padding: 12px 14px;\n}\n\n.snapshot-card {\n    padding: 12px;\n    background: var(--mj-bg-surface-sunken);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.snapshot-card:hover {\n    border-color: var(--mj-brand-primary);\n    box-shadow: var(--mj-shadow-sm);\n}\n\n.snapshot-card-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 6px;\n    font-size: 13px;\n    color: var(--mj-text-primary);\n}\n\n.snapshot-card-header i {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.snapshot-card-name {\n    font-weight: 500;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n}\n\n.snapshot-card-meta {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-family: monospace;\n}\n\n/* ================================================================= */\n/* DEPENDENCIES TAB */\n/* ================================================================= */\n\n.dep-root {\n    padding: 4px 0;\n}\n\n.dep-root-entity {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 14px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-brand-primary) 15%, transparent);\n    border-radius: 10px;\n    margin-bottom: 12px;\n}\n\n.dep-root-icon {\n    color: var(--mj-brand-primary);\n    font-size: 16px;\n}\n\n.dep-root-name {\n    font-size: 15px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n.dep-root-badge {\n    padding: 2px 10px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.dep-node {\n    margin-left: 8px;\n    border-left: 2px solid var(--mj-border-default);\n}\n\n.dep-node-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    cursor: pointer;\n    transition: background 0.15s ease;\n    border-radius: 6px;\n}\n\n.dep-node-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.dep-chevron {\n    font-size: 10px;\n    color: var(--mj-text-disabled);\n    transition: transform 0.2s ease;\n    width: 12px;\n    text-align: center;\n}\n\n.dep-chevron.expanded {\n    transform: rotate(90deg);\n}\n\n.dep-node-spacer {\n    width: 12px;\n}\n\n.dep-node-icon {\n    color: var(--mj-brand-primary);\n    font-size: 13px;\n}\n\n.dep-node-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.dep-node-field {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.dep-node-count {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n    padding: 1px 8px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n}\n\n/* ================================================================= */\n/* CHANGES TAB */\n/* ================================================================= */\n\n.diff-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 20px;\n}\n\n.diff-stat {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 12px 20px;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 10px;\n    min-width: 80px;\n}\n\n.diff-stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.diff-stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n/* Diff toolbar */\n.diff-toolbar {\n    display: flex;\n    gap: 8px;\n    margin-bottom: 12px;\n}\n\n.toolbar-action-btn {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    font-size: 12px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.toolbar-action-btn i {\n    font-size: 11px;\n}\n\n.toolbar-action-btn:hover {\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 6%, transparent);\n}\n\n.diff-groups {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n/* .diff-group chrome (border / header / chevron) is now owned by <mj-accordion-panel>. */\n.diff-group-icon {\n    color: var(--mj-brand-primary);\n    font-size: 14px;\n}\n\n.diff-group-name {\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    flex: 1;\n}\n\n/* .diff-group-count removed \u2014 the \"N modified\" count now uses the standard\n   .mj-accordion-badge--warning --right (warning-tinted status count). */\n\n.diff-group-content {\n    border-top: 1px solid var(--mj-border-default);\n    animation: tabFadeIn 0.15s ease;\n}\n\n.diff-record {\n    padding: 10px 14px 10px 40px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.diff-record:last-child {\n    border-bottom: none;\n}\n\n.diff-record-header {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-bottom: 8px;\n}\n\n.diff-record-id {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    font-family: monospace;\n}\n\n.diff-fields {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    margin-left: 22px;\n}\n\n.diff-field {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 4px 8px;\n    border-radius: 4px;\n    font-size: 12px;\n}\n\n.diff-field-name {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    min-width: 100px;\n}\n\n.diff-field-old {\n    color: var(--mj-status-error);\n    text-decoration: line-through;\n    opacity: 0.7;\n    font-family: monospace;\n    font-size: 12px;\n}\n\n.diff-field-arrow {\n    color: var(--mj-text-disabled);\n    font-size: 10px;\n}\n\n.diff-field-new {\n    color: var(--mj-status-success);\n    font-family: monospace;\n    font-size: 12px;\n}\n\n/* Change type colors */\n.change-added { color: var(--mj-status-success); }\n.change-modified { color: var(--mj-status-warning); }\n.change-removed { color: var(--mj-status-error); }\n\n.diff-field.change-added { background: color-mix(in srgb, var(--mj-status-success) 6%, transparent); }\n.diff-field.change-modified { background: color-mix(in srgb, var(--mj-status-warning) 6%, transparent); }\n.diff-field.change-removed { background: color-mix(in srgb, var(--mj-status-error) 6%, transparent); }\n\n/* ================================================================= */\n/* HISTORY TAB */\n/* ================================================================= */\n\n.history-list {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.history-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 10px 12px;\n    border-radius: 8px;\n    transition: background 0.15s ease;\n}\n\n.history-item:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.history-item-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.history-item-icon.status-complete { background: color-mix(in srgb, var(--mj-status-success) 10%, transparent); color: var(--mj-status-success); }\n.history-item-icon.status-error { background: color-mix(in srgb, var(--mj-status-error) 10%, transparent); color: var(--mj-status-error); }\n.history-item-icon.status-partial { background: color-mix(in srgb, var(--mj-status-warning) 10%, transparent); color: var(--mj-status-warning); }\n.history-item-icon.status-in-progress { background: color-mix(in srgb, var(--mj-brand-primary) 10%, transparent); color: var(--mj-brand-primary); }\n.history-item-icon.status-pending { background: color-mix(in srgb, var(--mj-text-muted) 10%, transparent); color: var(--mj-text-muted); }\n\n.history-item-content {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n}\n\n.history-item-title {\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n.history-item-meta {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n.history-item-date {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    flex-shrink: 0;\n}\n\n/* ================================================================= */\n/* RESPONSIVE */\n/* ================================================================= */\n\n@media (max-width: 1024px) {\n    .detail-panel {\n        min-width: 360px;\n    }\n\n    .summary-kpis {\n        flex-wrap: wrap;\n    }\n}\n\n@media (max-width: 768px) {\n    .detail-panel {\n        width: 100% !important;\n        min-width: unset;\n    }\n\n    .resize-handle {\n        display: none;\n    }\n\n    .detail-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .summary-kpis {\n        flex-wrap: wrap;\n        gap: 8px;\n        padding: 12px 16px;\n    }\n\n    .summary-kpi {\n        padding: 8px 10px;\n    }\n\n    .panel-header {\n        padding: 16px 16px 12px;\n    }\n\n    .tab-bar {\n        padding: 0 16px;\n    }\n\n    .tab-pane {\n        padding: 16px;\n    }\n\n    .breadcrumb-bar {\n        padding: 8px 16px;\n    }\n\n    .snapshot-toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .diff-summary {\n        flex-wrap: wrap;\n        gap: 8px;\n    }\n\n    .diff-stat {\n        padding: 10px 14px;\n        min-width: 60px;\n    }\n}\n\n@media (max-width: 480px) {\n    .header-title {\n        font-size: 16px;\n    }\n\n    .header-title-row {\n        gap: 6px;\n    }\n\n    .header-actions {\n        margin-left: 8px;\n    }\n\n    .tab {\n        padding: 10px 10px;\n        font-size: 12px;\n    }\n\n    .snapshot-cards {\n        grid-template-columns: 1fr;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: i0.ElementRef }], { Label: [{
             type: Input
         }], AllLabels: [{